Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(34)

Side by Side Diff: chrome/browser/resources/settings/settings_ui/settings_ui.html

Issue 2076193003: [MD settings] Remove old side nav code; remove extra toolbar (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: review changes 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 unified diff | Download patch
OLDNEW
1 <link rel="import" href="chrome://resources/cr_elements/icons.html"> 1 <link rel="import" href="chrome://resources/cr_elements/icons.html">
2 <link rel="import" href="chrome://resources/html/polymer.html"> 2 <link rel="import" href="chrome://resources/html/polymer.html">
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/pape r-drawer-panel.html"> 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/pape r-drawer-panel.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/pape r-header-panel.html"> 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/pape r-header-panel.html">
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html"> 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html">
6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input .html"> 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input .html">
7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-too lbar.html"> 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-too lbar.html">
8 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classe s/iron-flex-layout.html"> 8 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classe s/iron-flex-layout.html">
9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l"> 9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l">
10 <link rel="import" href="/direction_delegate.html"> 10 <link rel="import" href="/direction_delegate.html">
(...skipping 16 matching lines...) Expand all
27 } 27 }
28 28
29 paper-drawer-panel { 29 paper-drawer-panel {
30 --paper-drawer-panel-drawer-container: { 30 --paper-drawer-panel-drawer-container: {
31 background: none; /* Remove default background styling. */ 31 background: none; /* Remove default background styling. */
32 }; 32 };
33 align-items: center; 33 align-items: center;
34 position: relative; 34 position: relative;
35 } 35 }
36 36
37 #drawer {
38 --paper-header-panel-shadow: {
39 /* Polymer's style transformation chokes on :host() and :not() (and
40 * many other things, it seems). Just hide the built-in shadow and
41 * duplicate its style. */
42 display: none;
43 };
44 /* Explicitly set this so that transitions work and look good. */
45 background-color: var(--settings-background-color);
46 }
47
48 #drawer .toolbar::after {
49 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
50 content: '';
51 display: block;
52 height: 6px;
53 }
54
55 #drawer,
56 #drawer .toolbar,
57 #drawer .toolbar::after {
58 transition: background-color .3s, color .3s, height .3s;
59 }
60
61 :host(:not(.narrowing)) [narrow] #drawer,
62 :host(:not(.narrowing)) [narrow] #drawer .toolbar,
63 :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
64 transition: none; /* Transition only when removing [narrow]. */
65 }
66
67 :host(:not(.narrowing)) [narrow] #drawer,
68 :host(:not(.narrowing)) [narrow] #drawer .toolbar {
69 background-color: white;
70 }
71
72 :host(:not(.narrowing)) [narrow] #drawer .toolbar {
73 color: var(--settings-nav-grey);
74 }
75
76 :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
77 border-bottom: var(--settings-separator-line);
78 height: 0;
79 }
80
81 paper-header-panel[main] paper-icon-button { 37 paper-header-panel[main] paper-icon-button {
82 --iron-icon-fill-color: var(--settings-title-bar-color); 38 --iron-icon-fill-color: var(--settings-title-bar-color);
83 } 39 }
84 40
85 paper-icon-button[suffix] { 41 paper-icon-button[suffix] {
86 --iron-icon-fill-color: var(--settings-title-search-color); 42 --iron-icon-fill-color: var(--settings-title-search-color);
87 height: 32px; /* After padding, the icon size is 16px. */ 43 height: 32px; /* After padding, the icon size is 16px. */
88 width: 32px; 44 width: 32px;
89 } 45 }
90 46
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
152 --paper-toolbar-height: 56px; 108 --paper-toolbar-height: 56px;
153 --paper-toolbar-sm-height: 56px; 109 --paper-toolbar-sm-height: 56px;
154 --paper-toolbar-content: { 110 --paper-toolbar-content: {
155 font-size: 123.08%; /* go to 16px from 13px */ 111 font-size: 123.08%; /* go to 16px from 13px */
156 }; 112 };
157 --paper-toolbar: { 113 --paper-toolbar: {
158 background-color: var(--settings-title-bar-background-color); 114 background-color: var(--settings-title-bar-background-color);
159 }; 115 };
160 } 116 }
161 117
162 /* Prevent paper-toolbar from setting the margin-right to 24px. */
163 paper-icon-button#menu-button { 118 paper-icon-button#menu-button {
119 /* Prevent the menu icon from changing size with the window size. */
164 flex-shrink: 0; 120 flex-shrink: 0;
165 /* TODO(dschuyler): this margin is on the right regardless of language 121 /* Prevent paper-toolbar from setting the margin-right to 24px.
122 * TODO(dschuyler): this margin is on the right regardless of language
166 * direction (e.g. rtl). Make a patch for paper-toolbar in Polymer. */ 123 * direction (e.g. rtl). Make a patch for paper-toolbar in Polymer. */
167 margin-right: 0; 124 margin-right: 0;
168 } 125 }
169 126
170 .heading { 127 .heading {
171 -webkit-margin-start: 8px; 128 -webkit-margin-start: 8px;
172 } 129 }
173 130
174 paper-drawer-panel:not([narrow]) #main-title { 131 paper-drawer-panel:not([narrow]) #main-title {
175 display: none; 132 display: none;
176 } 133 }
177 134
178 paper-icon-button[toggles]:not([active]) + #search-input { 135 paper-icon-button[toggles]:not([active]) + #search-input {
179 display: none; 136 display: none;
180 } 137 }
181 138
139 .paper-header {
140 -webkit-padding-start: 24px;
141 align-items: center;
142 border-bottom: var(--settings-separator-line);
143 display: flex;
144 font-size: 123.08%; /* go to 16px from 13px */
145 min-height: 56px;
146 }
147
182 .last { 148 .last {
183 display: flex; 149 display: flex;
184 justify-content: flex-end; 150 justify-content: flex-end;
185 width: 100%; 151 width: 100%;
186 } 152 }
187 </style> 153 </style>
188 <settings-router current-route="{{currentRoute}}" 154 <settings-router current-route="{{currentRoute}}"
189 current-route-titles="{{currentRouteTitles}}"> 155 current-route-titles="{{currentRouteTitles}}">
190 </settings-router> 156 </settings-router>
191 <paper-drawer-panel drawer-width="256px" id="panel" narrow="{{isNarrow_}}" 157 <paper-drawer-panel drawer-width="256px" id="panel" narrow="{{isNarrow_}}"
192 responsive-width="900px" force-narrow> 158 responsive-width="900px" force-narrow>
193 <paper-header-panel drawer id="drawer"> 159 <paper-header-panel mode="waterfall" drawer>
194 <paper-toolbar class="toolbar"> 160 <div class="paper-header">$i18n{settings}</div>
195 <div class="heading">$i18n{settings}</div>
196 </paper-toolbar>
197 <settings-menu current-route="{{currentRoute}}" id="sideNav"> 161 <settings-menu current-route="{{currentRoute}}" id="sideNav">
198 </settings-menu> 162 </settings-menu>
199 </paper-header-panel> 163 </paper-header-panel>
200 <paper-header-panel main> 164 <paper-header-panel mode="waterfall" main>
201 <paper-toolbar class="toolbar"> 165 <paper-toolbar>
202 <paper-icon-button icon="settings:menu" id="menu-button" 166 <paper-icon-button icon="settings:menu" id="menu-button"
203 paper-drawer-toggle> 167 paper-drawer-toggle>
204 </paper-icon-button> 168 </paper-icon-button>
205 <div class="heading" id="main-title"> 169 <div class="heading" id="main-title">
206 $i18n{settings} 170 $i18n{settings}
207 </div> 171 </div>
208 <div class="last"> 172 <div class="last">
209 <paper-icon-button icon="cr:search" toggles> 173 <paper-icon-button icon="cr:search" toggles>
210 </paper-icon-button> 174 </paper-icon-button>
211 <paper-input id="search-input" label="$i18n{internalSearch}" 175 <paper-input id="search-input" label="$i18n{internalSearch}"
212 no-label-float> 176 no-label-float>
213 <!-- TODO(dschuyler): implement internal search. --> 177 <!-- TODO(dschuyler): implement internal search. -->
214 <paper-icon-button suffix icon="cr:cancel"> 178 <paper-icon-button suffix icon="cr:cancel">
215 </paper-icon-button> 179 </paper-icon-button>
216 </paper-input> 180 </paper-input>
217 </div> 181 </div>
218 </paper-toolbar> 182 </paper-toolbar>
219 <settings-main prefs="{{prefs}}" current-route="{{currentRoute}}"> 183 <settings-main prefs="{{prefs}}" current-route="{{currentRoute}}">
220 </settings-main> 184 </settings-main>
221 </paper-header-panel> 185 </paper-header-panel>
222 </paper-drawer-panel> 186 </paper-drawer-panel>
223 </template> 187 </template>
224 <script src="settings_ui.js"></script> 188 <script src="settings_ui.js"></script>
225 </dom-module> 189 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698