Dev UI: Change page title to indicate sub page

Signed-off-by: Phillip Kruger <[email protected]>
quarkusio · Jul 20, 2023 · 0faee6b · 0faee6b
1 parent e23f434
commit 0faee6b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 9 deletions.
diff --git a/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js b/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js
@@ -41,15 +41,15 @@ export class RouterController {
     }
 
     getCurrentTitle(){
-        let dot = "\u00B7";
+        //let dot = "\u00B7";
         let p = this.getCurrentPage();
         if(p){
             if(p.namespaceLabel){
                 return p.namespaceLabel;
             }else {
                 let md = this.getCurrentMetaData();
                 if(md && md.extensionName){
-                    return md.extensionName + " " + dot + " " + p.title;
+                    return md.extensionName;// + " " + dot + " " + p.title;
                 }else {
                     return p.title;
                 }
@@ -58,6 +58,19 @@ export class RouterController {
         return null;
     }
 
+    getCurrentSubTitle(){
+        let p = this.getCurrentPage();
+        if(p){
+            if(!p.namespaceLabel){
+                let md = this.getCurrentMetaData();
+                if(md && md.extensionName){
+                    return p.title;
+                }
+            }
+        }
+        return null;
+    }
+
     getCurrentNamespace(){
         let p = this.getCurrentPage();
         if(p){

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js
@@ -67,6 +67,14 @@ export class QwcHeader extends observeState(LitElement) {
             color: var(--lumo-contrast-90pct);
         }
         
+        .subtitle {
+            display: flex;
+            align-items:center;
+            font-size: var(--lumo-font-size-xl);
+            padding-left: 8px;
+            color: var(--lumo-contrast-50pct);
+        }
+    
         .logo-text {
             padding-top: 10px;
             font-size: xx-large;
@@ -89,6 +97,7 @@ export class QwcHeader extends observeState(LitElement) {
 
     static properties = {
         _title: {state: true},
+        _subTitle: {state: true},
         _rightSideNav: {state: true},
         _selectedTheme: {state: true},
         _themeOptions: {state: true},
@@ -98,6 +107,7 @@ export class QwcHeader extends observeState(LitElement) {
     constructor() {
         super();
         this._title = "Extensions";
+        this._subTitle = null;
         this._rightSideNav = "";
 
         this._createThemeItems();
@@ -149,7 +159,7 @@ export class QwcHeader extends observeState(LitElement) {
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:${themeState.theme.quarkusBlue};}.cls-2{fill:${themeState.theme.quarkusRed};}.cls-3{fill:${themeState.theme.quarkusCenter};}</style></defs><title>Quarkus</title><polygon class="cls-1" points="669.34 180.57 512 271.41 669.34 362.25 669.34 180.57"/><polygon class="cls-2" points="354.66 180.57 354.66 362.25 512 271.41 354.66 180.57"/><polygon class="cls-3" points="669.34 362.25 512 271.41 354.66 362.25 512 453.09 669.34 362.25"/><polygon class="cls-1" points="188.76 467.93 346.1 558.76 346.1 377.09 188.76 467.93"/><polygon class="cls-2" points="346.1 740.44 503.43 649.6 346.1 558.76 346.1 740.44"/><polygon class="cls-3" points="346.1 377.09 346.1 558.76 503.43 649.6 503.43 467.93 346.1 377.09"/><polygon class="cls-1" points="677.9 740.44 677.9 558.76 520.57 649.6 677.9 740.44"/><polygon class="cls-2" points="835.24 467.93 677.9 377.09 677.9 558.76 835.24 467.93"/><polygon class="cls-3" points="520.57 649.6 677.9 558.76 677.9 377.09 520.57 467.93 520.57 649.6"/><path class="cls-1" d="M853.47,1H170.53C77.29,1,1,77.29,1,170.53V853.47C1,946.71,77.29,1023,170.53,1023h467.7L512,716.39,420.42,910H170.53C139.9,910,114,884.1,114,853.47V170.53C114,139.9,139.9,114,170.53,114H853.47C884.1,114,910,139.9,910,170.53V853.47C910,884.1,884.1,910,853.47,910H705.28l46.52,113H853.47c93.24,0,169.53-76.29,169.53-169.53V170.53C1023,77.29,946.71,1,853.47,1Z"/></svg>
                     <span class="logo-text" @click="${this._reload}">Dev UI</span>
                 </div>
-                <span class="title">${this._title}</span>
+                ${this._renderTitle()}
             </div>
             <div class="right-bar">
                 ${this._rightSideNav}
@@ -159,6 +169,15 @@ export class QwcHeader extends observeState(LitElement) {
         `;
     }
 
+    _renderTitle(){
+        let dot = "\u00B7";
+        if(this._subTitle){
+            return html`<span class="title">${this._title}</span><span class="subtitle">${dot} ${this._subTitle}</span>`;
+        }else{
+            return html`<span class="title">${this._title}</span>`;
+        }
+    }
+
     _renderThemeOptions(){
         return html`<vaadin-menu-bar theme="tertiary-inline" class="themeDropdown" 
                         .items="${this._themeOptions}"
@@ -233,6 +252,7 @@ export class QwcHeader extends observeState(LitElement) {
 
     _updateHeader(event){
         this._title = this.routerController.getCurrentTitle();
+        this._subTitle = this.routerController.getCurrentSubTitle();
         var subMenu = this.routerController.getCurrentSubMenu();
         if(subMenu){
             this._rightSideNav = html`<vaadin-tabs selected="${subMenu.index}">

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-menu.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-menu.js
@@ -180,12 +180,8 @@ export class QwcMenu extends observeState(LitElement) {
             }
 
             let pageRef = this.routerController.getPageUrlFor(page);
-            const selected = this._selectedPage == page.namespace;
-            let classnames = "item";
-            if(selected){
-                classnames = "item selected";
-            }
-
+
+            let classnames = this._getClassNames(page, index);
             return html`
             <a class="${classnames}" href="${pageRef}">
                 <vaadin-icon icon="${page.icon}"></vaadin-icon>
@@ -195,6 +191,29 @@ export class QwcMenu extends observeState(LitElement) {
         }
     }
 
+    _getClassNames(page, index){
+
+        const selected = this._selectedPage == page.namespace;
+        if(selected){
+            return "item selected";
+        }
+
+        // Else check for default
+        let pages = devuiState.menu;
+        let hasMenuItem = false;
+        for (let i = 0; i < pages.length; i++) {
+            if(this._selectedPage === pages[i].namespace){
+                hasMenuItem = true;
+            }
+        }
+
+        if(!hasMenuItem && index === 0){
+            return "item selected";
+        }
+
+        return "item";
+    }
+
     _renderIcon(icon, action){
         if((action == "smaller" && this._show) || (action == "larger" && !this._show)){
             return html`