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

Side by Side Diff: chrome/browser/resources/md_history/app.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: Add test 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/html/cr/ui.html"> 2 <link rel="import" href="chrome://resources/html/cr/ui.html">
3 <link rel="import" href="chrome://resources/html/cr/ui/command.html"> 3 <link rel="import" href="chrome://resources/html/cr/ui/command.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/app-layout/app-drawer/a pp-drawer.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/app-route/app-location. html"> 5 <link rel="import" href="chrome://resources/polymer/v1_0/app-route/app-location. html">
5 <link rel="import" href="chrome://resources/polymer/v1_0/app-route/app-route.htm l"> 6 <link rel="import" href="chrome://resources/polymer/v1_0/app-route/app-route.htm l">
7 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m edia-query.html">
6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.h tml"> 8 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.h tml">
7 <link rel="import" href="chrome://history/history_toolbar.html"> 9 <link rel="import" href="chrome://history/history_toolbar.html">
8 <link rel="import" href="chrome://history/list_container.html"> 10 <link rel="import" href="chrome://history/list_container.html">
9 <link rel="import" href="chrome://history/synced_device_manager.html"> 11 <link rel="import" href="chrome://history/synced_device_manager.html">
10 <link rel="import" href="chrome://history/side_bar.html"> 12 <link rel="import" href="chrome://history/side_bar.html">
11 <link rel="import" href="chrome://history/shared_style.html"> 13 <link rel="import" href="chrome://history/shared_style.html">
12 <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> 14 <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
13 15
14 <dom-module id="history-app"> 16 <dom-module id="history-app">
15 <template> 17 <template>
(...skipping 12 matching lines...) Expand all
28 /* Sizing this with flex causes slow load performance, see 30 /* Sizing this with flex causes slow load performance, see
29 crbug.com/618153. */ 31 crbug.com/618153. */
30 #main-container { 32 #main-container {
31 height: calc(100% - var(--toolbar-height)); 33 height: calc(100% - var(--toolbar-height));
32 } 34 }
33 35
34 :host([grouped_]) #main-container { 36 :host([grouped_]) #main-container {
35 height: calc(100% - var(--toolbar-grouped-height)); 37 height: calc(100% - var(--toolbar-grouped-height));
36 } 38 }
37 39
40 #content-side-bar {
41 float: left;
42 }
43
38 #content, 44 #content,
39 #content > * { 45 #content > * {
40 height: 100%; 46 height: 100%;
41 } 47 }
48
49 #drawer-header {
50 align-items: center;
51 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
calamity 2016/07/26 05:05:18 Is this supposed to align to the bottom of the too
tsergeant 2016/07/26 05:59:03 I think the current behavior is correct. It matche
52 display: flex;
53 height: var(--toolbar-height);
54 margin-bottom: 5px;
55 }
56
57 h1 {
58 -webkit-padding-start: 24px;
59 color: rgb(66, 66, 66);
60 font-size: 123%;
61 font-weight: 400;
62 }
42 </style> 63 </style>
43 <app-location route="{{route_}}"></app-location> 64 <app-location route="{{route_}}"></app-location>
44 <app-route route="{{route_}}" pattern="/:page" data="{{routeData_}}" 65 <app-route route="{{route_}}" pattern="/:page" data="{{routeData_}}"
45 query-params="{{queryParams_}}"> 66 query-params="{{queryParams_}}">
46 </app-route> 67 </app-route>
47 <history-toolbar id="toolbar" 68 <history-toolbar id="toolbar"
48 spinner-active="[[shouldShowSpinner_(queryState_.querying, 69 spinner-active="[[shouldShowSpinner_(queryState_.querying,
49 queryState_.incremental, 70 queryState_.incremental,
50 queryState_.searchTerm)]]" 71 queryState_.searchTerm)]]"
51 is-grouped-mode="{{grouped_}}" 72 is-grouped-mode="{{grouped_}}"
52 grouped-range="{{queryState_.range}}" 73 grouped-range="{{queryState_.range}}"
53 search-term="{{queryState_.searchTerm}}" 74 search-term="{{queryState_.searchTerm}}"
54 query-start-time="[[queryResult_.info.queryStartTime]]" 75 query-start-time="[[queryResult_.info.queryStartTime]]"
55 query-end-time="[[queryResult_.info.queryEndTime]]"> 76 query-end-time="[[queryResult_.info.queryEndTime]]"
77 has-drawer="[[hasDrawer_]]">
56 </history-toolbar> 78 </history-toolbar>
57 79
58 <div id="main-container"> 80 <div id="main-container">
81 <history-side-bar id="content-side-bar" selected-page="[[selectedPage_]]"
82 route="[[route_]]" show-footer="[[showSidebarFooter]]"
83 hidden$="[[hasDrawer_]]">
84 </history-side-bar>
59 <iron-pages id="content" attr-for-selected="path" 85 <iron-pages id="content" attr-for-selected="path"
60 fallback-selection="history" 86 fallback-selection="history"
61 selected="[[getSelectedPage_(selectedPage_, items)]]" 87 selected="[[getSelectedPage_(selectedPage_, items)]]"
62 items="{{items}}"> 88 items="{{items}}">
63 <history-list-container id="history" query-state="{{queryState_}}" 89 <history-list-container id="history" query-state="{{queryState_}}"
64 query-result="[[queryResult_]]" grouped="[[grouped_]]" 90 query-result="[[queryResult_]]" grouped="[[grouped_]]"
65 path="history"> 91 path="history">
66 </history-list-container> 92 </history-list-container>
67 <template is="dom-if" if="[[syncedTabsSelected_(selectedPage_)]]"> 93 <template is="dom-if" if="[[syncedTabsSelected_(selectedPage_)]]">
68 <history-synced-device-manager id="synced-devices" 94 <history-synced-device-manager id="synced-devices"
69 session-list="[[queryResult_.sessionList]]" 95 session-list="[[queryResult_.sessionList]]"
70 search-term=[[queryState_.searchTerm]] 96 search-term=[[queryState_.searchTerm]]
71 path="syncedTabs"> 97 path="syncedTabs">
72 </history-synced-device-manager> 98 </history-synced-device-manager>
73 </template> 99 </template>
74 </iron-pages> 100 </iron-pages>
75 </div> 101 </div>
76 102
77 <history-side-bar id="side-bar" selected-page="[[selectedPage_]]" 103 <template is="dom-if" if="[[hasDrawer_]]">
78 route="[[route_]]"> 104 <app-drawer id="drawer" swipe-open align="start" tabindex="0"
79 </history-side-bar> 105 on-focus="onDrawerFocus_">
106 <div id="drawer-header">
107 <h1>$i18n{title}</h1>
108 </div>
109 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]"
110 route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer>
111 </history-side-bar>
112 </app-drawer>
113 </template>
114
115 <iron-media-query query="(max-width: 1023px)"
116 query-matches="{{hasDrawer_}}">
117 </iron-media-query>
80 </template> 118 </template>
81 <script src="chrome://history/app.js"></script> 119 <script src="chrome://history/app.js"></script>
82 </dom-module> 120 </dom-module>
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/md_history/app.js » ('j') | chrome/browser/resources/md_history/app.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698