OLD | NEW |
---|---|
1 <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html "> | 1 <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html "> |
2 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.ht ml"> | 2 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.ht ml"> |
3 <link rel="import" href="chrome://resources/cr_elements/icons.html"> | 3 <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
4 <link rel="import" href="chrome://resources/html/polymer.html"> | 4 <link rel="import" href="chrome://resources/html/polymer.html"> |
5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f lex-layout.html"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f lex-layout.html"> |
6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/pape r-header-panel.html"> | |
7 <link rel="import" href="../direction_delegate.html"> | 6 <link rel="import" href="../direction_delegate.html"> |
8 <link rel="import" href="../global_scroll_target_behavior.html"> | 7 <link rel="import" href="../global_scroll_target_behavior.html"> |
9 <link rel="import" href="../i18n_setup.html"> | 8 <link rel="import" href="../i18n_setup.html"> |
10 <link rel="import" href="../icons.html"> | 9 <link rel="import" href="../icons.html"> |
11 <link rel="import" href="../settings_main/settings_main.html"> | 10 <link rel="import" href="../settings_main/settings_main.html"> |
12 <link rel="import" href="../settings_menu/settings_menu.html"> | 11 <link rel="import" href="../settings_menu/settings_menu.html"> |
13 <link rel="import" href="../settings_shared_css.html"> | 12 <link rel="import" href="../settings_shared_css.html"> |
14 <link rel="import" href="../prefs/prefs.html"> | 13 <link rel="import" href="../prefs/prefs.html"> |
15 <link rel="import" href="../route.html"> | 14 <link rel="import" href="../route.html"> |
16 <link rel="import" href="../settings_vars_css.html"> | 15 <link rel="import" href="../settings_vars_css.html"> |
17 | 16 |
18 <if expr="chromeos"> | 17 <if expr="chromeos"> |
19 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.htm l"> | 18 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.htm l"> |
20 </if> | 19 </if> |
21 | 20 |
22 <dom-module id="settings-ui"> | 21 <dom-module id="settings-ui"> |
23 <template> | 22 <template> |
24 <style include="settings-shared"> | 23 <style include="settings-shared"> |
25 :host { | 24 :host { |
26 @apply(--layout-fit); | 25 @apply(--layout-fit); |
27 --paper-header-panel-waterfall-container: { | |
28 overflow-x: auto; /* Undo paper-header-panel default of 'hidden'. */ | |
29 overflow-y: overlay; | |
30 }; | |
31 -webkit-user-select: none; | 26 -webkit-user-select: none; |
32 background-color: var(--settings-background-color); | 27 background-color: var(--settings-background-color); |
33 color: var(--paper-grey-900); | 28 color: var(--paper-grey-900); |
34 display: flex; | 29 display: flex; |
35 flex-direction: column; | 30 flex-direction: column; |
36 line-height: 154%; /* Apply 20px line-height to all texts by default. */ | 31 line-height: 154%; /* Apply 20px line-height to all texts by default. */ |
37 overflow: hidden; /* Prevent double scroll bar bugs. */ | 32 overflow: hidden; /* Prevent double scroll bar bugs. */ |
38 } | 33 } |
39 | 34 |
40 .drawer-header { | 35 .drawer-header { |
41 outline: none; | 36 outline: none; |
42 } | 37 } |
43 | 38 |
44 paper-header-panel { | |
45 flex: 1; | |
46 } | |
47 | |
48 .paper-header { | |
49 -webkit-padding-start: 24px; | |
50 align-items: center; | |
51 border-bottom: var(--settings-separator-line); | |
52 display: flex; | |
53 font-size: 123.08%; /* go to 16px from 13px */ | |
54 min-height: 56px; | |
55 } | |
56 | |
57 .last { | 39 .last { |
58 display: flex; | 40 display: flex; |
59 justify-content: flex-end; | 41 justify-content: flex-end; |
60 width: 100%; | 42 width: 100%; |
61 } | 43 } |
62 | 44 |
63 dialog[is='cr-drawer'] { | 45 dialog[is='cr-drawer'] { |
64 z-index: 2; | 46 z-index: 2; |
65 } | 47 } |
66 | 48 |
67 cr-toolbar { | 49 cr-toolbar { |
68 @apply(--layout-center); | 50 @apply(--layout-center); |
69 --cr-toolbar-field-width: var(--settings-card-max-width); | 51 --cr-toolbar-field-width: var(--settings-card-max-width); |
70 --iron-icon-fill-color: white; | 52 --iron-icon-fill-color: white; |
71 background-color: var(--settings-title-bar-background-color); | 53 background-color: var(--settings-title-bar-background-color); |
72 color: white; | 54 color: white; |
73 min-height: 56px; | 55 min-height: 56px; |
74 z-index: 2; | 56 z-index: 2; |
75 } | 57 } |
58 | |
59 #container { | |
60 flex: 1; | |
61 overflow: overlay; | |
62 } | |
63 | |
64 #dropShadow { | |
65 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); | |
66 height: 6px; | |
67 left: 0; | |
68 opacity: 0; | |
69 pointer-events: none; | |
70 position: absolute; | |
71 right: 0; | |
72 top: 56px; | |
73 transition: opacity 500ms; | |
74 z-index: 1; | |
75 } | |
Dan Beam
2017/03/29 13:19:55
indent off
dpapad
2017/03/29 22:17:10
Done.
| |
76 | |
77 #dropShadow.has-shadow { | |
78 opacity: 1; | |
79 } | |
76 </style> | 80 </style> |
77 <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs> | 81 <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs> |
78 <cr-toolbar page-name="$i18n{settings}" | 82 <cr-toolbar page-name="$i18n{settings}" |
79 clear-label="$i18n{clearSearch}" | 83 clear-label="$i18n{clearSearch}" |
80 search-prompt="$i18n{searchPrompt}" | 84 search-prompt="$i18n{searchPrompt}" |
81 on-cr-toolbar-menu-tap="onMenuButtonTap_" | 85 on-cr-toolbar-menu-tap="onMenuButtonTap_" |
82 spinner-active="[[toolbarSpinnerActive_]]" | 86 spinner-active="[[toolbarSpinnerActive_]]" |
83 menu-label="$i18n{menuButtonLabel}" | 87 menu-label="$i18n{menuButtonLabel}" |
84 on-search-changed="onSearchChanged_" | 88 on-search-changed="onSearchChanged_" |
85 show-menu> | 89 show-menu> |
86 </cr-toolbar> | 90 </cr-toolbar> |
87 <dialog id="drawer" is="cr-drawer"> | 91 <dialog id="drawer" is="cr-drawer"> |
88 <div class="drawer-header" tabindex="-1">$i18n{settings}</div> | 92 <div class="drawer-header" tabindex="-1">$i18n{settings}</div> |
89 <div class="drawer-content"> | 93 <div class="drawer-content"> |
90 <template is="dom-if" id="drawerTemplate"> | 94 <template is="dom-if" id="drawerTemplate"> |
91 <settings-menu page-visibility="[[pageVisibility_]]" | 95 <settings-menu page-visibility="[[pageVisibility_]]" |
92 show-android-apps="[[showAndroidApps_]]" | 96 show-android-apps="[[showAndroidApps_]]" |
93 on-iron-activate="onIronActivate_" | 97 on-iron-activate="onIronActivate_" |
94 advanced-opened="{{advancedOpened_}}"> | 98 advanced-opened="{{advancedOpened_}}"> |
95 </settings-menu> | 99 </settings-menu> |
96 </template> | 100 </template> |
97 </div> | 101 </div> |
98 </dialog> | 102 </dialog> |
99 <paper-header-panel id="headerPanel" mode="waterfall"> | 103 <div id="dropShadow"></div> |
104 <div id="container"> | |
105 <!-- Used by IntersectionObserver, has a 0px height intentionally --> | |
106 <div id="intersectionProbe"></div> | |
100 <settings-main id="main" prefs="{{prefs}}" | 107 <settings-main id="main" prefs="{{prefs}}" |
101 toolbar-spinner-active="{{toolbarSpinnerActive_}}" | 108 toolbar-spinner-active="{{toolbarSpinnerActive_}}" |
102 page-visibility="[[pageVisibility_]]" | 109 page-visibility="[[pageVisibility_]]" |
103 show-android-apps="[[showAndroidApps_]]" | 110 show-android-apps="[[showAndroidApps_]]" |
104 advanced-toggle-expanded="{{advancedOpened_}}"> | 111 advanced-toggle-expanded="{{advancedOpened_}}"> |
105 </settings-main> | 112 </settings-main> |
106 </paper-header-panel> | 113 </div> |
107 </template> | 114 </template> |
108 <script src="settings_ui.js"></script> | 115 <script src="settings_ui.js"></script> |
109 </dom-module> | 116 </dom-module> |
OLD | NEW |