blob: add4ccb838c294fd5f42137375ea95f6633bf348 [file] [log] [blame]
<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>