Skip to content

Commit

Permalink
Merge pull request #34878 from phillip-kruger/dev-ui-title-small-fix
Browse files Browse the repository at this point in the history 
Dev UI: Change page title to indicate sub page
  • Loading branch information
@phillip-kruger
phillip-kruger authored Jul 20, 2023
2 parents 14d455e + aef0424 commit 1041653
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 9 deletions.
16 changes: 14 additions & 2 deletions ...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,14 @@ export class RouterController {
}

getCurrentTitle(){
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;
}else {
return p.title;
}
Expand All @@ -58,6 +57,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){
Expand Down
22 changes: 21 additions & 1 deletion extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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},
Expand All @@ -98,6 +107,7 @@ export class QwcHeader extends observeState(LitElement) {
constructor() {
super();
this._title = "Extensions";
this._subTitle = null;
this._rightSideNav = "";

this._createThemeItems();
Expand Down Expand Up @@ -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}
Expand All @@ -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}"
Expand Down Expand Up @@ -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}">
Expand Down
31 changes: 25 additions & 6 deletions extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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`
Expand Down

0 comments on commit 1041653

Please sign in to comment.