chrome/browser/resources/settings/settings_ui/settings_ui.html - Issue 2064013002: MD Settings: Replace current toolbar with cr-toolbar.

Unified Diff: chrome/browser/resources/settings/settings_ui/settings_ui.html

Issue 2064013002: MD Settings: Replace current toolbar with cr-toolbar. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@search_box1

Patch Set: Nits. Created 4 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « chrome/app/settings_strings.grdp ('k') | chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: chrome/browser/resources/settings/settings_ui/settings_ui.html

diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html

index e1b1781a8dea3ab17ff0cadd3feb72c6021e844b..d88a497352dc391fae507b1f59f29058e4909a19 100644

--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html

+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html

@@ -1,23 +1,16 @@

-<link rel="import" href="chrome://resources/cr_elements/icons.html">

+<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">

-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">

-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">

-<link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">

-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">

-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

-<link rel="import" href="/icons.html">

-<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-ui">

- <style include="settings-shared">

+ <style>

:host {

@apply(--layout-fit);

-webkit-user-select: none;

@@ -45,98 +38,22 @@

background-color: var(--settings-background-color);

}

- #drawer .toolbar::after {

- box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

- content: '';

- display: block;

- height: 6px;

- }

- #drawer,

- #drawer .toolbar,

- #drawer .toolbar::after {

- transition: background-color .3s, color .3s, height .3s;

+ #drawer {

+ transition: background-color 300ms, color 300ms, height 300ms;

michaelpg 2016/06/15 18:01:19 nit: line breaks

}

- :host(:not(.narrowing)) [narrow] #drawer,

- :host(:not(.narrowing)) [narrow] #drawer .toolbar,

- :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {

+ :host(:not(.narrowing)) [narrow] #drawer {

transition: none; /* Transition only when removing [narrow]. */

}

- :host(:not(.narrowing)) [narrow] #drawer,

- :host(:not(.narrowing)) [narrow] #drawer .toolbar {

+ :host(:not(.narrowing)) [narrow] #drawer {

background-color: white;

}

- :host(:not(.narrowing)) [narrow] #drawer .toolbar {

- color: var(--settings-nav-grey);

- }

- :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {

- border-bottom: var(--settings-separator-line);

- height: 0;

- }

- paper-icon-button {

- --iron-icon-fill-color: var(--settings-title-bar-color);

- }

- paper-icon-button[suffix] {

- --iron-icon-fill-color: var(--settings-title-search-color);

- height: 32px; /* After padding, the icon size is 16px. */

- width: 32px;

- }

- paper-input {

- --paper-input-container: {

- padding-top: 0;

- };

- --paper-input-container-color: var(--settings-title-search-color);

- --paper-input-container-focus-color: var(--settings-title-search-color);

- --paper-input-container-input: {

- font-size: 81.25%; /* go to 13px from 16px */

- position: relative;

- top: 3px; /* Special positioning needed for UX design. */

- };

- /*

- * The button in the input suffix needs special positioning for the UX

- * design. The hit box extends right and down from the paper-input

- * underline.

- */

- --paper-input-suffix: {

- left: 8px;

- line-height: 16px;

- position: relative;

- top: 4px;

- };

- --paper-input-container-input-color: var(--settings-title-bar-color);

- --paper-input-container-label: {

- font-size: 81.25%; /* go to 13px from 16px */

- top: 3px; /* Special positioning needed for UX design. */

- };

- --paper-input-max-width: 200px;

- align-items: center;

- }

- /* These header elements must create stacking contexts when a section is

- * expanding to show a sub-page. (It's simpler for them to always create

- * these stacking contexts, so we do.) But for the overlay to work, the

- * paper-header-panel's other descendents (rooted at settings-main) must

- * never create stacking contexts while a dialog is showing. This means

- * we cannot animate a section expanding/collapsing while a dialog is

- * shown (which makes good UX sense anyway.) I have discovered a truly

- * non-marvellous proof of this, which this comment cannot contain:

- * https://goo.gl/CCzijE */

- paper-header-panel[main] paper-toolbar {

- z-index: 2;

- }

paper-header-panel[main] {

--paper-header-panel-shadow: {

- z-index: 2;

+ display: none;

};

}

@@ -148,23 +65,10 @@

};

}

- paper-toolbar {

- --paper-toolbar-height: 56px;

- --paper-toolbar-sm-height: 56px;

- --paper-toolbar-content: {

- font-size: 123.08%; /* go to 16px from 13px */

- };

- --paper-toolbar: {

- background-color: var(--settings-title-bar-background-color);

- };

- }

- /* Prevent paper-toolbar from setting the margin-right to 24px. */

- paper-icon-button#menu-button {

- flex-shrink: 0;

- /* TODO(dschuyler): this margin is on the right regardless of language

- * direction (e.g. rtl). Make a patch for paper-toolbar in Polymer. */

- margin-right: 0;

+ cr-toolbar {

+ --side-bar-width: 256px;

+ @apply(--layout-center);

michaelpg 2016/06/15 18:01:19 nit: put @apply at top

+ background-color: var(--settings-title-bar-background-color);

}

.heading {

@@ -175,10 +79,6 @@

display: none;

}

- paper-icon-button[toggles]:not([active]) + #search-input {

- display: none;

- }

.last {

display: flex;

justify-content: flex-end;

@@ -188,34 +88,16 @@

<settings-router current-route="{{currentRoute}}"

current-route-titles="{{currentRouteTitles}}">

</settings-router>

+ <cr-toolbar id="main-toolbar" page-name="$i18n{settings}"

+ clear-label="$i18n{clearSearch}" search-prompt="$i18n{searchPrompt}">

+ </cr-toolbar>

<paper-drawer-panel drawer-width="256px" id="panel" narrow="{{isNarrow_}}"

responsive-width="900px">

<paper-header-panel drawer id="drawer">

- <paper-toolbar class="toolbar">

- <div class="heading flex">$i18n{settings}</div>

- </paper-toolbar>

<settings-menu current-route="{{currentRoute}}">

</settings-menu>

</paper-header-panel>

<paper-header-panel main>

- <paper-toolbar class="toolbar">

- <paper-icon-button icon="settings:menu" id="menu-button"

- paper-drawer-toggle>

- </paper-icon-button>

- <div class="heading" id="main-title">

- $i18n{settings}

- </div>

- <div class="last">

- <paper-icon-button icon="cr:search" toggles>

- </paper-icon-button>

- <paper-input id="search-input" label="$i18n{internalSearch}"

- no-label-float>

-

- <paper-icon-button suffix icon="cr:cancel">

- </paper-icon-button>

- </paper-input>

- </div>

- </paper-toolbar>

<settings-main prefs="{{prefs}}" current-route="{{currentRoute}}">

</settings-main>

</paper-header-panel>

« no previous file with comments | « chrome/app/settings_strings.grdp ('k') | chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc » ('j') | no next file with comments »