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 /* TODO(dpapad): This box-shadow is repeated in Settings, History and |
| 66 Downloads. Define a CSS variable instead and re-use. */ |
| 67 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); |
| 68 height: 6px; |
| 69 left: 0; |
| 70 opacity: 0; |
| 71 pointer-events: none; |
| 72 position: absolute; |
| 73 right: 0; |
| 74 top: 56px; |
| 75 transition: opacity 500ms; |
| 76 z-index: 1; |
| 77 } |
| 78 |
| 79 #dropShadow.has-shadow { |
| 80 opacity: 1; |
| 81 } |
76 </style> | 82 </style> |
77 <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs> | 83 <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs> |
78 <cr-toolbar page-name="$i18n{settings}" | 84 <cr-toolbar page-name="$i18n{settings}" |
79 clear-label="$i18n{clearSearch}" | 85 clear-label="$i18n{clearSearch}" |
80 search-prompt="$i18n{searchPrompt}" | 86 search-prompt="$i18n{searchPrompt}" |
81 on-cr-toolbar-menu-tap="onMenuButtonTap_" | 87 on-cr-toolbar-menu-tap="onMenuButtonTap_" |
82 spinner-active="[[toolbarSpinnerActive_]]" | 88 spinner-active="[[toolbarSpinnerActive_]]" |
83 menu-label="$i18n{menuButtonLabel}" | 89 menu-label="$i18n{menuButtonLabel}" |
84 on-search-changed="onSearchChanged_" | 90 on-search-changed="onSearchChanged_" |
85 role="none" | 91 role="none" |
86 show-menu> | 92 show-menu> |
87 </cr-toolbar> | 93 </cr-toolbar> |
88 <dialog id="drawer" is="cr-drawer"> | 94 <dialog id="drawer" is="cr-drawer"> |
89 <div class="drawer-header" tabindex="-1">$i18n{settings}</div> | 95 <div class="drawer-header" tabindex="-1">$i18n{settings}</div> |
90 <div class="drawer-content"> | 96 <div class="drawer-content"> |
91 <template is="dom-if" id="drawerTemplate"> | 97 <template is="dom-if" id="drawerTemplate"> |
92 <settings-menu page-visibility="[[pageVisibility_]]" | 98 <settings-menu page-visibility="[[pageVisibility_]]" |
93 show-android-apps="[[showAndroidApps_]]" | 99 show-android-apps="[[showAndroidApps_]]" |
94 on-iron-activate="onIronActivate_" | 100 on-iron-activate="onIronActivate_" |
95 advanced-opened="{{advancedOpened_}}"> | 101 advanced-opened="{{advancedOpened_}}"> |
96 </settings-menu> | 102 </settings-menu> |
97 </template> | 103 </template> |
98 </div> | 104 </div> |
99 </dialog> | 105 </dialog> |
100 <paper-header-panel id="headerPanel" mode="waterfall" role="none"> | 106 <div id="dropShadow"></div> |
| 107 <div id="container"> |
| 108 <!-- Used by IntersectionObserver, has a 0px height intentionally --> |
| 109 <div id="intersectionProbe"></div> |
101 <settings-main id="main" prefs="{{prefs}}" | 110 <settings-main id="main" prefs="{{prefs}}" |
102 toolbar-spinner-active="{{toolbarSpinnerActive_}}" | 111 toolbar-spinner-active="{{toolbarSpinnerActive_}}" |
103 page-visibility="[[pageVisibility_]]" | 112 page-visibility="[[pageVisibility_]]" |
104 show-android-apps="[[showAndroidApps_]]" | 113 show-android-apps="[[showAndroidApps_]]" |
105 advanced-toggle-expanded="{{advancedOpened_}}"> | 114 advanced-toggle-expanded="{{advancedOpened_}}"> |
106 </settings-main> | 115 </settings-main> |
107 </paper-header-panel> | 116 </div> |
108 </template> | 117 </template> |
109 <script src="settings_ui.js"></script> | 118 <script src="settings_ui.js"></script> |
110 </dom-module> | 119 </dom-module> |
OLD | NEW |