| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="browser_service.html"> |
| <link rel="import" href="constants.html"> |
| <link rel="import" href="searched_label.html"> |
| <link rel="import" href="shared_style.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_row_behavior.html"> |
| <link rel="import" href="chrome://resources/html/icon.html"> |
| <link rel="import" href="chrome://resources/html/util.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| |
| <!-- Lazy loaded: paper-icon-button-light. --> |
| |
| <dom-module id="history-item"> |
| <template> |
| <style include="shared-style cr-icons"> |
| :host { |
| display: block; |
| outline: none; |
| pointer-events: none; |
| } |
| |
| #main-container { |
| position: relative; |
| } |
| |
| :host([is-card-end]) #main-container { |
| margin-bottom: var(--card-padding-between); |
| } |
| |
| :host([is-card-start][is-card-end]) #main-container { |
| border-radius: var(--cr-card-border-radius); |
| } |
| |
| #date-accessed { |
| display: none; |
| } |
| |
| :host([is-card-start]) #date-accessed { |
| display: block; |
| font-size: 123%; |
| font-weight: 400; |
| letter-spacing: .25px; |
| padding-bottom: 4px; |
| padding-top: 8px; |
| } |
| |
| #item-container { |
| align-items: center; |
| display: flex; |
| min-height: var(--item-height); |
| padding-inline-start: 10px; |
| pointer-events: auto; |
| } |
| |
| :host([is-card-start]) #item-container { |
| padding-top: var(--card-first-last-item-padding); |
| } |
| |
| :host([is-card-end]) #item-container { |
| padding-bottom: var(--card-first-last-item-padding); |
| } |
| |
| #title-and-domain { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| height: var(--item-height); |
| overflow: hidden; |
| } |
| |
| #checkbox { |
| margin: 12px; |
| } |
| |
| /* #checkbox[unresolved] styling is necessary since cr-checkbox is being |
| lazy-loaded. */ |
| #checkbox[unresolved] { |
| border: 2px solid var(--cr-secondary-text-color); |
| border-radius: 2px; |
| content: ''; |
| display: block; |
| height: 12px; |
| width: 12px; |
| } |
| |
| #time-accessed { |
| color: var(--history-item-time-color); |
| margin-inline-start: 6px; |
| min-width: 96px; |
| } |
| |
| #domain { |
| color: var(--cr-secondary-text-color); |
| flex-shrink: 0; |
| margin-inline-start: 16px; |
| } |
| |
| #menu-button-container { |
| margin-inline-end: 12px; |
| } |
| |
| #star-container { |
| margin-inline-end: 4px; |
| margin-inline-start: 12px; |
| width: 32px; |
| } |
| |
| #bookmark-star-container { |
| color: var(--interactive-color); |
| height: 32px; |
| width: 32px; |
| } |
| |
| #bookmark-star-container iron-icon { |
| height: 16px; |
| width: 16px; |
| } |
| |
| #time-gap-separator { |
| border-inline-start: 1px solid #888; |
| height: 15px; |
| margin-inline-start: 77px; |
| } |
| |
| #background-clip { |
| /* Prevent artifacts when zoomed by overlapping the next item. */ |
| bottom: -0.4px; |
| clip: rect(auto 999px auto -5px); /* Clip the top and bottom edges. */ |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| z-index: -1; |
| } |
| |
| :host([is-card-end]) #background-clip { |
| bottom: 0; |
| clip: rect(auto 999px 500px -5px); /* Clip the top edge. */ |
| } |
| |
| #background { |
| @apply --cr-card-elevation; |
| background: var(--cr-card-background-color); |
| bottom: 0; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| :host(:not([is-card-start])) #background { |
| top: -5px; /* Draw the box shadow up the full edge of the background. */ |
| } |
| |
| :host([is-card-start]) #background { |
| border-radius: var(--cr-card-border-radius) var(--cr-card-border-radius) 0 0; |
| } |
| |
| :host([is-card-end]) #background { |
| border-radius: 0 0 var(--cr-card-border-radius) var(--cr-card-border-radius); |
| } |
| |
| :host([is-card-start][is-card-end]) #background { |
| border-radius: var(--cr-card-border-radius); |
| } |
| </style> |
| |
| <div id="main-container"> |
| <div id="background-clip"> |
| <div id="background"></div> |
| </div> |
| <div id="date-accessed" class="card-title"> |
| [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]] |
| </div> |
| <div id="item-container" focus-row-container |
| on-mousedown="onItemMousedown_" |
| on-click="onItemClick_"> |
| <cr-checkbox id="checkbox" checked="[[selected]]" unresolved |
| focus-row-control focus-type="cr-checkbox" |
| on-mousedown="onCheckboxClick_" on-keydown="onCheckboxClick_" |
| on-change="onCheckboxChange_" class="no-label" |
| hidden="[[selectionNotAllowed_]]" |
| disabled="[[selectionNotAllowed_]]" |
| aria-label$="[[getEntrySummary_(item)]]"></cr-checkbox> |
| <span id="time-accessed"> |
| [[item.readableTimestamp]] |
| </span> |
| <div class="website-icon" id="icon"></div> |
| <div id="title-and-domain"> |
| <a href="[[item.url]]" id="title" class="website-title" |
| focus-row-control focus-type="link" |
| title="[[item.title]]" on-click="onLinkClick_" |
| on-contextmenu="onLinkRightClick_"> |
| <history-searched-label title="[[item.title]]" |
| search-term="[[searchTerm]]"></history-searched-label> |
| </a> |
| <span id="domain">[[item.domain]]</span> |
| </div> |
| <div id="star-container"> |
| <template is="dom-if" if="[[item.starred]]" notify-dom-change> |
| <paper-icon-button-light id="bookmark-star-container"> |
| <button id="bookmark-star" focus-row-control focus-type="star" |
| title="$i18n{removeBookmark}" on-click="onRemoveBookmarkTap_"> |
| <iron-icon icon="cr:star"></iron-icon> |
| </button> |
| </paper-icon-button-light> |
| </template> |
| </div> |
| <paper-icon-button-light id="menu-button-container" |
| class="more-vert-button"> |
| <button id="menu-button" focus-row-control focus-type="cr-menu-button" |
| title="$i18n{actionMenuDescription}" on-click="onMenuButtonTap_" |
| aria-haspopup="menu"> |
| <div></div> |
| <div></div> |
| <div></div> |
| </button> |
| </paper-icon-button-light> |
| </div> |
| <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div> |
| </div> |
| </template> |
| <script src="history_item.js"></script> |
| </dom-module> |