Commit eef7c1cf authored by Caroline Rising's avatar Caroline Rising Committed by Commit Bot

Update read later bubble to match UX spec.

This change also updates read later list item button containers to set
up for keyboard navigation. By updating the width, overflow, and
icon-button-fill-color, the buttons can still exist so that backward
keyboard navigation works correctly while not being visible or taking up
space when not hovered.

Bug: 1109316
Change-Id: I0cdc9f7ad5191b2872962e5d4e08024eeada733c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2461936Reviewed-by: default avatarConnie Wan <connily@chromium.org>
Commit-Queue: Caroline Rising <corising@chromium.org>
Cr-Commit-Position: refs/heads/master@{#815910}
parent 07d6d038
<style include="mwb-shared-style"> <style include="mwb-shared-style">
#header { #header {
align-items: center; align-items: center;
font-size: 15px; display: flex;
font-size: var(--mwb-primary-text-font-size);
height: var(--mwb-item-height);
margin: 0; margin: 0;
padding: var(--mwb-list-item-vertical-margin) padding-inline-start: var(--mwb-list-item-horizontal-margin);
var(--mwb-list-item-horizontal-margin);
} }
#read-later-list { #read-later-list {
max-height: 458px; max-height: 444px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.sub-heading { .sub-heading {
align-items: center;
border-bottom: 1px solid #dbdbdb;
color: var(--cr-secondary-text-color); color: var(--cr-secondary-text-color);
font-size: var(--mwb-secondary-text-font-size); display: flex;
padding: var(--mwb-list-item-vertical-margin) font-size: 11px;
0 height: 24px;
calc(var(--mwb-list-item-vertical-margin) / 2) margin-inline-start: var(--mwb-list-item-horizontal-margin);
var(--mwb-list-item-horizontal-margin); margin-top: 4px;
}
.sub-heading::after {
border-bottom: 1px solid var(--cr-secondary-text-color);
content: '';
display: block;
margin-top: calc(var(--mwb-list-item-vertical-margin) / 2);
} }
</style> </style>
......
<style> <style>
:host(:hover) .button-container, .button-container {
:host(.selected) .button-container {
display: flex; display: flex;
margin-inline-start: calc(var(--mwb-icon-size) / 2);
overflow: hidden;
width: 0;
} }
.button-container { :host(:hover) .button-container {
display: none; overflow: visible;
width: auto;
} }
.text-container { .text-container {
...@@ -33,9 +36,24 @@ ...@@ -33,9 +36,24 @@
} }
cr-icon-button { cr-icon-button {
--cr-icon-button-margin-end: calc(var(--mwb-icon-size) / 4); border-radius: 50%;
--cr-icon-button-margin-start: calc(var(--mwb-icon-size) / 4); --cr-icon-button-fill-color: transparent;
--cr-icon-button-size: var(--mwb-icon-size); --cr-icon-button-icon-size: var(--mwb-icon-size);
--cr-icon-button-size: 24px;
--cr-icon-button-margin-start: 0;
--cr-icon-button-margin-end: 0;
}
:host(:hover) cr-icon-button {
--cr-icon-button-fill-color: var(--google-grey-refresh-700);
}
cr-icon-button:hover {
background-color: rgba(var(--google-grey-900-rgb), .1);
}
#deleteButton {
margin-inline-start: calc(var(--cr-icon-button-size) / 2);
} }
</style> </style>
...@@ -47,14 +65,14 @@ ...@@ -47,14 +65,14 @@
</div> </div>
<div class="button-container"> <div class="button-container">
<cr-icon-button id="updateStatusButton" <cr-icon-button id="updateStatusButton"
aria-label="[[getUpdateStatusButtonTooltip_( aria-label="[[getUpdateStatusButtonTooltip_('$i18n{tooltipMarkAsUnread}',
'$i18n{tooltipMarkAsUnread}', '$i18n{tooltipMarkAsRead}', data.read)]]" '$i18n{tooltipMarkAsRead}', data.read)]]" disable-ripple
iron-icon="cr:check" title="[[getUpdateStatusButtonTooltip_( iron-icon="cr:check" title="[[getUpdateStatusButtonTooltip_(
'$i18n{tooltipMarkAsUnread}', '$i18n{tooltipMarkAsRead}', data.read)]]" '$i18n{tooltipMarkAsUnread}', '$i18n{tooltipMarkAsRead}', data.read)]]"
on-click="onUpdateStatusClick_"> on-click="onUpdateStatusClick_">
</cr-icon-button> </cr-icon-button>
<cr-icon-button id="deleteButton" aria-label="$i18n{tooltipDelete}" <cr-icon-button id="deleteButton" aria-label="$i18n{tooltipDelete}"
iron-icon="cr:close" title="$i18n{tooltipDelete}" disable-ripple iron-icon="cr:close" title="$i18n{tooltipDelete}"
on-click="onItemDeleteClick_"> on-click="onItemDeleteClick_">
</cr-icon-button> </cr-icon-button>
</div> </div>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment