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

Side by Side Diff: chrome/browser/resources/md_history/side_bar.html

Issue 2165903003: MD History: Show sidebar next to content on wide screens (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@history_fix_footer_link
Patch Set: dpapad@ review Created 4 years, 4 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/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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698