OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/app-layout/app-drawer/a
pp-drawer.html"> | |
3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f
lex-layout.html"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f
lex-layout.html"> |
4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-sele
ctor.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-sele
ctor.html"> |
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> | 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography
.html"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography
.html"> |
7 <link rel="import" href="chrome://history/browser_service.html"> | 6 <link rel="import" href="chrome://history/browser_service.html"> |
8 <link rel="import" href="chrome://history/shared_style.html"> | 7 <link rel="import" href="chrome://history/shared_style.html"> |
9 | 8 |
10 <dom-module id="history-side-bar"> | 9 <dom-module id="history-side-bar"> |
11 <template> | 10 <template> |
12 <style include="shared-style"> | 11 <style include="shared-style"> |
13 :host { | 12 :host { |
14 display: block; | 13 display: block; |
15 height: 100%; | 14 height: 100%; |
16 padding-top: 5px; | 15 padding-top: 5px; |
17 width: var(--side-bar-width); | 16 width: var(--side-bar-width); |
18 } | 17 } |
19 | 18 |
20 #drawer-header { | |
21 align-items: center; | |
22 border-bottom: 1px solid rgba(0, 0, 0, 0.08); | |
23 display: flex; | |
24 height: var(--toolbar-height); | |
25 margin-bottom: 5px; | |
26 } | |
27 | |
28 h1 { | |
29 -webkit-padding-start: 24px; | |
30 color: rgb(66, 66, 66); | |
31 font-size: 123%; | |
32 font-weight: 400; | |
33 } | |
34 | |
35 div.separator { | 19 div.separator { |
36 background-color: rgba(0, 0, 0, 0.08); | 20 background-color: rgba(0, 0, 0, 0.08); |
37 height: 1px; | 21 height: 1px; |
38 margin: 8px 0; | 22 margin: 8px 0; |
39 } | 23 } |
40 | 24 |
41 #clear-browsing-data { | 25 #clear-browsing-data { |
42 text-transform: uppercase; | 26 text-transform: uppercase; |
43 } | 27 } |
44 | 28 |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
82 color: var(--google-blue-500); | 66 color: var(--google-blue-500); |
83 font-weight: 500; | 67 font-weight: 500; |
84 } | 68 } |
85 | 69 |
86 iron-selector { | 70 iron-selector { |
87 -webkit-user-select: none; | 71 -webkit-user-select: none; |
88 color: #5a5a5a; | 72 color: #5a5a5a; |
89 } | 73 } |
90 | 74 |
91 #footer { | 75 #footer { |
92 /* This compensates the 120px by which app-drawer protrudes under | 76 bottom: 0; |
93 * the viewport. */ | |
94 bottom: 120px; | |
95 color: var(--paper-grey-600); | 77 color: var(--paper-grey-600); |
96 position: absolute; | 78 position: absolute; |
97 width: var(--side-bar-width); | 79 width: var(--side-bar-width); |
98 } | 80 } |
99 | 81 |
| 82 :host([drawer]) #footer { |
| 83 /* This compensates the 120px by which app-drawer protrudes under |
| 84 * the viewport. */ |
| 85 bottom: 120px; |
| 86 } |
| 87 |
100 #footer-text { | 88 #footer-text { |
101 -webkit-padding-end: 16px; | 89 -webkit-padding-end: 16px; |
102 -webkit-padding-start: 24px; | 90 -webkit-padding-start: 24px; |
103 margin: 24px 0; | 91 margin: 24px 0; |
104 } | 92 } |
105 | 93 |
106 #footer a { | 94 #footer a { |
107 color: var(--google-blue-700); | 95 color: var(--google-blue-700); |
108 text-decoration: none; | 96 text-decoration: none; |
109 } | 97 } |
110 </style> | 98 </style> |
111 | 99 |
112 <app-drawer id="drawer" tabindex="0" on-focus="onDrawerFocus_" swipe-open | 100 <iron-selector id="menu" selected="{{selectedPage}}" |
113 align="start"> | 101 selectable=".page-item" attr-for-selected="path" |
114 <div id="drawer-header"> | 102 fallback-selection="history" |
115 <h1>$i18n{title}</h1> | 103 on-iron-activate="onSelectorActivate_"> |
| 104 <a href="/[[getQueryString_(route)]]" class="page-item" path="history"> |
| 105 $i18n{historyMenuItem} |
| 106 </a> |
| 107 <a href="/syncedTabs[[getQueryString_(route)]]" class="page-item" |
| 108 path="syncedTabs"> |
| 109 $i18n{openTabsMenuItem} |
| 110 </a> |
| 111 <div class="separator"></div> |
| 112 <a href="chrome://settings/clearBrowserData" |
| 113 on-tap="onClearBrowsingDataTap_" id="clear-browsing-data"> |
| 114 $i18n{clearBrowsingData} |
| 115 </a> |
| 116 <div id="footer" hidden="[[!showFooter]]"> |
| 117 <div class="separator"></div> |
| 118 <div id="footer-text">$i18nRaw{sidebarFooter}</div> |
116 </div> | 119 </div> |
117 <iron-selector id="menu" selected="{{selectedPage}}" | 120 </iron-selector> |
118 selectable=".page-item" attr-for-selected="path" | |
119 fallback-selection="history" | |
120 on-iron-activate="onSelectorActivate_"> | |
121 <a href="/[[getQueryString_(route)]]" class="page-item" path="history"> | |
122 $i18n{historyMenuItem} | |
123 </a> | |
124 <a href="/syncedTabs[[getQueryString_(route)]]" class="page-item" | |
125 path="syncedTabs"> | |
126 $i18n{openTabsMenuItem} | |
127 </a> | |
128 <div class="separator"></div> | |
129 <a href="chrome://settings/clearBrowserData" | |
130 on-tap="onClearBrowsingDataTap_" id="clear-browsing-data"> | |
131 $i18n{clearBrowsingData} | |
132 </a> | |
133 <div id="footer" hidden="[[!showFooter]]"> | |
134 <div class="separator"></div> | |
135 <div id="footer-text">$i18nRaw{sidebarFooter}</div> | |
136 </div> | |
137 </iron-selector> | |
138 </app-drawer> | |
139 </template> | 121 </template> |
140 <script src="chrome://history/side_bar.js"></script> | 122 <script src="chrome://history/side_bar.js"></script> |
141 </dom-module> | 123 </dom-module> |
OLD | NEW |