| OLD | NEW |
|---|
| (Empty) | |
| 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
| 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-coll
apse.html"> |
| 3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
| 4 <link rel="import" href="chrome://history/constants.html"> |
| 5 <link rel="import" href="chrome://history/history_item.html"> |
| 6 <link rel="import" href="chrome://history/shared_style.html"> |
| 7 |
| 8 <dom-module id="history-grouped-list"> |
| 9 <template> |
| 10 <style include="shared-style"> |
| 11 :host { |
| 12 overflow: auto; |
| 13 position: relative; |
| 14 padding: var(--first-card-padding-top) var(--card-padding-side); |
| 15 } |
| 16 |
| 17 #main-container { |
| 18 align-items: center; |
| 19 display: flex; |
| 20 flex-direction: column; |
| 21 } |
| 22 |
| 23 .domain-heading { |
| 24 align-items: center; |
| 25 display: flex; |
| 26 height: 40px; |
| 27 padding: 0 20px; |
| 28 } |
| 29 |
| 30 .domain-count { |
| 31 color: rgb(151, 156, 160); |
| 32 padding-left: 10px; |
| 33 } |
| 34 |
| 35 .domain-heading-text { |
| 36 display: flex; |
| 37 } |
| 38 |
| 39 .group-container { |
| 40 background: #fff; |
| 41 border: 1px solid var(--card-border-color); |
| 42 border-bottom-width: 2px; |
| 43 margin-bottom: var(--card-padding-between); |
| 44 max-width: var(--card-max-width); |
| 45 min-width: var(--card-min-width); |
| 46 width: 100%; |
| 47 } |
| 48 |
| 49 .card-title { |
| 50 margin-bottom: var(--card-first-last-item-padding); |
| 51 } |
| 52 |
| 53 .domain-heading-text { |
| 54 flex: 1 1 0; |
| 55 } |
| 56 |
| 57 .dropdown-indicator { |
| 58 max-width: 16px; |
| 59 } |
| 60 |
| 61 history-item { |
| 62 --border-style: none; |
| 63 padding-left: 20px; |
| 64 } |
| 65 </style> |
| 66 <div id="no-results" class="centered-message" |
| 67 hidden$="[[hasResults_(groupedHistoryData_.length)]]"> |
| 68 [[noResultsMessage_(searchedTerm, querying)]] |
| 69 </div> |
| 70 <div id="main-container" |
| 71 hidden$="[[!hasResults_(groupedHistoryData_.length)]]"> |
| 72 <template is="dom-repeat" items="[[groupedHistoryData_]]" as="group" |
| 73 initial-count="1" index-as="groupIndex"> |
| 74 <div class="group-container"> |
| 75 <div class="card-title"> |
| 76 [[group.title]] |
| 77 </div> |
| 78 |
| 79 <template is="dom-repeat" items="[[group.domains]]" as="domain" |
| 80 initial-count="10" index-as="domainIndex"> |
| 81 <div> |
| 82 <div class="domain-heading" on-tap="toggleDomainExpanded_"> |
| 83 <div class="domain-heading-text"> |
| 84 <div class="website-icon" |
| 85 style="[[getWebsiteIconStyle_(domain)]]"></div> |
| 86 <span>[[domain.domain]]</span> |
| 87 <span class="domain-count">[[domain.visits.length]]</span> |
| 88 </div> |
| 89 <iron-icon icon="[[getDropdownIcon_(domain.expanded)]]" |
| 90 class="dropdown-indicator"></iron-icon> |
| 91 </div> |
| 92 <iron-collapse opened="{{domain.expanded}}" id="collapse"> |
| 93 <template is="dom-if" if="[[domain.rendered]]"> |
| 94 <template is="dom-repeat" items="[[domain.visits]]" |
| 95 as="item" initial-count="5" index-as="itemIndex"> |
| 96 <history-item item="[[item]]" |
| 97 starred="[[item.starred]]" |
| 98 selected="{{item.selected}}" |
| 99 has-time-gap="[[needsTimeGap_( |
| 100 groupIndex, domainIndex, itemIndex)]]" |
| 101 search-term="[[searchedTerm]]" |
| 102 number-of-items="[[historyData.length]]"> |
| 103 </history-item> |
| 104 </template> |
| 105 </template> |
| 106 </iron-collapse> |
| 107 </div> |
| 108 </template> |
| 109 </div> |
| 110 </template> |
| 111 </div> |
| 112 </template> |
| 113 <script src="chrome://history/grouped_list.js"></script> |
| 114 </dom-module> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1993613002:
[MD History] Implement grouped history UI. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@privatize