Move Status tag to footer

Signed-off-by: Phillip Kruger <[email protected]>
quarkusio · May 22, 2023 · 27f8c36 · 27f8c36
1 parent 7bcfd68
commit 27f8c36
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 18 deletions.
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extension.js
@@ -2,6 +2,7 @@ import { LitElement, html, css} from 'lit';
 import '@vaadin/icon';
 import '@vaadin/dialog';
 import { dialogHeaderRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
+import 'qui-badge';
 
 /**
  * This component represent one extension
@@ -41,7 +42,6 @@ export class QwcExtension extends LitElement {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-            visibility:hidden;
         }
 
         .card-footer a {
@@ -60,15 +60,15 @@ export class QwcExtension extends LitElement {
             color: var(--lumo-contrast-70pct);
         }
         
-        .active:hover .card-footer, .active:hover .guide {
+        .active:hover .config, .active:hover .more, .active:hover .guide {
             visibility:visible;
         }
 
-        .inactive:hover .card-footer, .inactive:hover .guide {
+        .inactive:hover .config, .inactive:hover .more, .inactive:hover .guide {
             visibility:visible;
         }
     
-        .guide{
+        .guide, .more, .config {
             visibility:hidden;
         }
 
@@ -141,14 +141,39 @@ export class QwcExtension extends LitElement {
     _footerTemplate() {
         return html`
             <div class="card-footer">
-                <a href="configuration-form-editor?filter=${this.configFilter}">
+                <a href="configuration-form-editor?filter=${this.configFilter}" class="config">
                     <vaadin-icon class="icon" icon="font-awesome-solid:pen-to-square" title="Configuration for the ${this.name} extension"></vaadin-icon>
-                </a>  
-                <vaadin-icon class="icon" icon="font-awesome-solid:ellipsis-vertical" @click="${() => (this._dialogOpened = true)}" title="More about the ${this.name} extension"></vaadin-icon>
+                </a>
+                ${this._renderStatus()}
+                <vaadin-icon class="icon more" icon="font-awesome-solid:ellipsis-vertical" @click="${() => (this._dialogOpened = true)}" title="More about the ${this.name} extension"></vaadin-icon>
             </div>
         `;
     }
 
+    _renderStatus(){
+        var l = this._statusLevelOnCard();
+
+        if(l) {
+            return html`<qui-badge level="${l}" small><span>${this.status.toUpperCase()}</span></qui-badge>`;
+        }
+    }
+
+    _statusLevelOnCard(){
+        if(this.status === "experimental") {
+            return "warning";
+        } else if(this.status === "preview") {
+            return "contrast";   
+        }
+        return null;
+    }
+
+    _statusLevel(){
+        if(this.status === "stable") {
+            return "success";
+        }
+        return this._statusLevelOnCard();
+    }
+
     _renderDialog(){
         return html`<table>
                 <tr>
@@ -181,7 +206,7 @@ export class QwcExtension extends LitElement {
                 </tr>        
                 <tr>
                     <td><b>Status</b></td>
-                    <td>${this.status}</td>
+                    <td><qui-badge level="${this._statusLevel()}" small><span>${this.status.toUpperCase()}</span></qui-badge></td>
                 </tr>        
                 <tr>
                     <td><b>Config Filter</b></td>

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-extensions.js
@@ -5,7 +5,6 @@ import { devuiState } from 'devui-state';
 import { observeState } from 'lit-element-state';
 import 'qwc/qwc-extension.js';
 import 'qwc/qwc-extension-link.js';
-import 'qui-badge';
 
 
 /**
@@ -115,7 +114,6 @@ export class QwcExtensions extends observeState(LitElement) {
         return html`
             <div class="card-content" slot="content">
                 <span class="description">
-                    ${this._renderExperimentalBadge(extension)}
                     ${extension.description}
                 </span>
                 ${this._renderCardLinks(extension)}
@@ -161,18 +159,10 @@ export class QwcExtensions extends observeState(LitElement) {
                 providesCapabilities="${extension.providesCapabilities}"
                 extensionDependencies="${extension.extensionDependencies}">
                 <div class="card-content" slot="content">
-                    ${this._renderExperimentalBadge(extension)}
                     ${extension.description}
                 </div>    
             </qwc-extension>`;
         }
     }
-
-    _renderExperimentalBadge(extension){
-        if(extension.status === "experimental") {
-            return html`<qui-badge level="warning" class="float-right" small><span>EXPERIMENTAL</span></qui-badge>`;
-        }
-    }
-
 }
 customElements.define('qwc-extensions', QwcExtensions);