navigation: Add page-toolbar to navigation_view_panel
Adds an optional page-toolbar to NavigationViewPanel. NavigationViewPanel is responsible for styling the grid layout of the toolbar/sidebar/main content of the page. Update Diagnostics and Shortcut Customization apps to use the page-toolbar. No added functionality to page-toolbar. Screenshot: http://shortn/_cwg0FYzu4h http://shortn/_WPoRMBJmCe Bug: 1205539 Change-Id: I98f15d394fcdc59e4aff8e789fb3b4078488a705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3098786 Commit-Queue: Jimmy Gong <jimmyxgong@chromium.org> Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org> Cr-Commit-Position: refs/heads/main@{#913167}
This commit is contained in:

committed by
Chromium LUCI CQ

parent
2f2ea6be2d
commit
eb69f63ad6
ash/webui
common
diagnostics_ui
shortcut_customization_ui
resources
chrome/test/data/webui/chromeos/ash_common
@ -5,26 +5,61 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#container {
|
:host([show-tool-bar]) #container {
|
||||||
align-items: flex-start;
|
display: grid;
|
||||||
|
grid-template-areas: "head head" "sideNav main";
|
||||||
|
grid-template-columns: 1fr 4fr;
|
||||||
|
grid-template-rows: 1fr 9fr;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:not([show-tool-bar])) #container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: "sideNav main";
|
||||||
|
grid-template-columns: 1fr 4fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([show-tool-bar]) #topNav {
|
||||||
|
grid-area: head;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sideNav {
|
||||||
|
grid-area: sideNav;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex-direction: column;
|
||||||
position: relative;
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigationBody {
|
||||||
|
grid-area: main;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-aligned {
|
.left-aligned {
|
||||||
height: 100%;
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 75px;
|
top: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
page-toolbar {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div id="navigationSelector" class="left-aligned">
|
<template is="dom-if" if="[[showToolBar]]">
|
||||||
<navigation-selector menu-items={{menuItems_}}
|
<div id="topNav">
|
||||||
selected-item={{selectedItem}}>
|
<page-toolbar title="[[title]]"></page-toolbar>
|
||||||
</navigation-selector>
|
</div>
|
||||||
<slot name="bottom-nav-content"></slot>
|
</template>
|
||||||
|
|
||||||
|
<div id="sideNav">
|
||||||
|
<div id="navigationSelector" class="left-aligned">
|
||||||
|
<navigation-selector menu-items={{menuItems_}}
|
||||||
|
selected-item={{selectedItem}}>
|
||||||
|
</navigation-selector>
|
||||||
|
<slot name="bottom-nav-content"></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="navigationBody" class="right-aligned"></div>
|
<div id="navigationBody" class="right-aligned"></div>
|
||||||
|
@ -2,6 +2,8 @@
|
|||||||
// Use of this source code is governed by a BSD-style license that can be
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
// found in the LICENSE file.
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import './page_toolbar.js';
|
||||||
|
|
||||||
import {assert} from 'chrome://resources/js/assert.m.js';
|
import {assert} from 'chrome://resources/js/assert.m.js';
|
||||||
import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
|
import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
|
||||||
|
|
||||||
@ -43,7 +45,7 @@ export class NavigationViewPanelElement extends PolymerElement {
|
|||||||
*/
|
*/
|
||||||
selectedItem: {
|
selectedItem: {
|
||||||
type: Object,
|
type: Object,
|
||||||
observer: "selectedItemChanged_",
|
observer: 'selectedItemChanged_',
|
||||||
value: null,
|
value: null,
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -54,7 +56,28 @@ export class NavigationViewPanelElement extends PolymerElement {
|
|||||||
menuItems_: {
|
menuItems_: {
|
||||||
type: Array,
|
type: Array,
|
||||||
value: () => [],
|
value: () => [],
|
||||||
}
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This title only appears if |showToolBar| is True. Is otherwise a
|
||||||
|
* no-opt if title is set and |showToolbar| is False.
|
||||||
|
*/
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Can only be set to True if specified from the parent element by adding
|
||||||
|
* show-tool-bar as an attribute to <navigation-view-panel>. If True,
|
||||||
|
* a toolbar will appear at the top of the navigation view panel with
|
||||||
|
* a 2 column view below it (sidebar + page). If False, navigation view
|
||||||
|
* panel will only be a 2 column view (sidebar + page).
|
||||||
|
*/
|
||||||
|
showToolBar: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,8 +18,8 @@
|
|||||||
</style>
|
</style>
|
||||||
<div id="diagnosticsAppContainer">
|
<div id="diagnosticsAppContainer">
|
||||||
<div hidden$="[[!showNavPanel_]]">
|
<div hidden$="[[!showNavPanel_]]">
|
||||||
<page-toolbar title="[[i18n('diagnosticsTitle')]]"></page-toolbar>
|
<navigation-view-panel id="navigationPanel"
|
||||||
<navigation-view-panel id="navigationPanel">
|
title="[[i18n('diagnosticsTitle')]]" show-tool-bar>
|
||||||
<div slot="bottom-nav-content" class="session-log-container">
|
<div slot="bottom-nav-content" class="session-log-container">
|
||||||
<cr-button on-click="onSessionLogClick_" class="session-log-button"
|
<cr-button on-click="onSessionLogClick_" class="session-log-button"
|
||||||
hidden="[[!isLoggedIn_]]">
|
hidden="[[!isLoggedIn_]]">
|
||||||
|
@ -54,7 +54,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-inline: var(--container-padding);
|
|
||||||
width: var(--content-container-width);
|
width: var(--content-container-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,14 +2,11 @@
|
|||||||
:host {
|
:host {
|
||||||
@apply --shortcut-customization-default-font;
|
@apply --shortcut-customization-default-font;
|
||||||
}
|
}
|
||||||
|
|
||||||
page-toolbar {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<!-- TODO(jimmyxgong): Localize this title -->
|
<!-- TODO(jimmyxgong): Localize this title -->
|
||||||
<page-toolbar title="Shortcut Customization"></page-toolbar>
|
<navigation-view-panel id="navigationPanel" title="Shortcut Customization"
|
||||||
<navigation-view-panel id="navigationPanel"></navigation-view-panel>
|
show-tool-bar>
|
||||||
|
</navigation-view-panel>
|
||||||
|
|
||||||
<template is="dom-if" if="[[showEditDialog_]]" restamp>
|
<template is="dom-if" if="[[showEditDialog_]]" restamp>
|
||||||
<accelerator-edit-dialog id="editDialog"
|
<accelerator-edit-dialog id="editDialog"
|
||||||
|
@ -193,4 +193,19 @@ export function navigationViewPanelTestSuite() {
|
|||||||
assertFalse(!!viewElement.shadowRoot.querySelector(`#${id1}`));
|
assertFalse(!!viewElement.shadowRoot.querySelector(`#${id1}`));
|
||||||
assertFalse(!!viewElement.shadowRoot.querySelector(`#${dummyPage2}`));
|
assertFalse(!!viewElement.shadowRoot.querySelector(`#${dummyPage2}`));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('toolBarVisible', async () => {
|
||||||
|
const dummyPage1 = 'dummy-page1';
|
||||||
|
const expectedTitle = 'title';
|
||||||
|
viewElement.title = expectedTitle;
|
||||||
|
viewElement.showToolBar = true;
|
||||||
|
|
||||||
|
await addNavigationSection('dummyPage1', dummyPage1);
|
||||||
|
|
||||||
|
assertFalse(viewElement.shadowRoot.querySelector(`#${dummyPage1}`).hidden);
|
||||||
|
// The title is only visible if the toolbar is stamped.
|
||||||
|
const pageToolbar = viewElement.shadowRoot.querySelector('page-toolbar');
|
||||||
|
const toolbarTitle = pageToolbar.$.title.textContent.trim();
|
||||||
|
assertEquals(expectedTitle, toolbarTitle);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user