Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev UI: Change page title to indicate sub page #34878

Merged
merged 1 commit into from
Jul 20, 2023
Merged

Dev UI: Change page title to indicate sub page #34878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions ...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/router-controller.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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