Skip to content

GitLab

T
tangled
Commit 5b5075b9 authored by Kristi Park's avatar Kristi Park Committed by Commit Bot
Browse files
Options

[NTP] Add selection styling for shortcut options 

Add selection styling for the shortcut options in the richer picker.

Screenshots:
https://screenshot.googleplex.com/Xhq71uw82du.png
https://screenshot.googleplex.com/EMCRoFfhnrf.png

Bug: 953822
Change-Id: I5c66cd678d99f6a4e47076705c0f59e73424c212
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1638124
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: default avatarKyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#665266}
parent e87b8c7e
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 28 deletions
chrome/browser/resources/local_ntp/custom_backgrounds.js
View file @ 5b5075b9
......@@ -107,6 +107,8 @@ customBackgrounds.IDS = {
RESTORE_DEFAULT_TEXT: 'edit-bg-restore-default-text',
SHORTCUTS_BUTTON: 'shortcuts-button',
SHORTCUTS_MENU: 'shortcuts-menu',
SHORTCUTS_OPTION_CUSTOM_LINKS: 'sh-option-cl',
SHORTCUTS_OPTION_MOST_VISITED: 'sh-option-mv',
UPLOAD_IMAGE: 'edit-bg-upload-image',
UPLOAD_IMAGE_TEXT: 'edit-bg-upload-image-text',
TILES: 'bg-sel-tiles',
......@@ -587,9 +589,12 @@ customBackgrounds.showCollectionSelectionDialog = function(collectionsSource) {
/**
* Apply styling to a selected tile in the richer picker and enable the done
* button.
* @param {!Element} tile The tile to apply styling to.
* @param {?Element} tile The tile to apply styling to.
*/
customBackgrounds.richerPicker_selectTile = function(tile) {
if (!tile) {
return;
}
tile.parentElement.classList.toggle(customBackgrounds.CLASSES.SELECTED, true);
$(customBackgrounds.IDS.MENU_DONE).disabled = false;
customBackgrounds.selectedTile = tile;
......@@ -610,7 +615,7 @@ customBackgrounds.richerPicker_selectTile = function(tile) {
* @param {?Element} tile The tile to remove styling from.
*/
customBackgrounds.richerPicker_deselectTile = function(tile) {
if (tile === null) {
if (!tile) {
return;
}
tile.parentElement.classList.toggle(
......@@ -631,6 +636,21 @@ customBackgrounds.richerPicker_deselectTile = function(tile) {
}
};
/**
* Apply styling to a selected shortcut option in the richer picker and enable
* the done button.
* @param {?Element} option The option to apply styling to.
*/
customBackgrounds.richerPicker_selectShortcutOption = function(option) {
if (!option || customBackgrounds.selectedTile === option) {
return; // The option has already been selected.
}
// Clear the previous selection, if any.
if (customBackgrounds.selectedTile) {
customBackgrounds.richerPicker_deselectTile(customBackgrounds.selectedTile);
}
customBackgrounds.richerPicker_selectTile(option);
};
/**
* Apply border and checkmark when a tile is selected
......@@ -1436,6 +1456,28 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
}
};
const clOption = $(customBackgrounds.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS);
clOption.onclick = function() {
customBackgrounds.richerPicker_selectShortcutOption(clOption);
};
clOption.onkeydown = function(event) {
if (event.keyCode === customBackgrounds.KEYCODES.ENTER ||
event.keyCode === customBackgrounds.KEYCODES.SPACE) {
customBackgrounds.richerPicker_selectShortcutOption(clOption);
}
};
const mvOption = $(customBackgrounds.IDS.SHORTCUTS_OPTION_MOST_VISITED);
mvOption.onclick = function() {
customBackgrounds.richerPicker_selectShortcutOption(mvOption);
};
mvOption.onkeydown = function(event) {
if (event.keyCode === customBackgrounds.KEYCODES.ENTER ||
event.keyCode === customBackgrounds.KEYCODES.SPACE) {
customBackgrounds.richerPicker_selectShortcutOption(mvOption);
}
};
const richerPickerOpenShortcuts = function() {
customBackgrounds.richerPicker_resetCustomizationMenu();
customBackgrounds.richerPicker_selectMenuOption(
......
chrome/browser/resources/local_ntp/local_ntp.css
View file @ 5b5075b9
......@@ -1244,16 +1244,8 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
}
.sh-option {
width: 268px;
}
#sh-option-cl {
margin-inline-end: 9px;
}
.sh-option-select {
position: absolute;
visibility: none;
width: 268px;
}
.sh-option-image {
......@@ -1266,6 +1258,11 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
width: 268px;
}
.selected .sh-option-image {
background-color: rgb(var(--GB050-rgb));
border-color: rgb(var(--GB600-rgb));
}
.sh-option-mini {
background-color: white;
border: 1px solid rgb(var(--GG300-rgb));
......@@ -1283,10 +1280,19 @@ html[dir=rtl] .sh-option-mini {
right: unset;
}
.selected .sh-option-mini {
box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3),
0 4px 8px 3px rgba(var(--GG800-rgb), .15);
}
.sh-option-mini .mini-shortcuts {
background-color: rgb(var(--GG500-rgb));
}
.selected .sh-option-mini .mini-shortcuts {
background-color: rgb(var(--GB600-rgb));
}
.sh-option-icon {
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
......@@ -1310,7 +1316,34 @@ html[dir=rtl] .sh-option-icon {
right: 16px;
}
.sh-title {
.selected .sh-option-icon {
background-color: rgba(var(--GB600-rgb), .24);
}
.sh-option-image .selected-circle {
box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
height: 24px;
left: 208px;
top: 8px;
width: 24px;
}
html[dir=rtl] .sh-option-image .selected-circle {
left: 0;
right: 208px;
}
.sh-option-image .selected-check {
left: -2px;
top: -2px;
}
html[dir=rtl] .sh-option-image .selected-check {
left: 0;
right: -2px;
}
.sh-option-title {
font-weight: bold;
margin: 8px 0;
}
......
chrome/browser/resources/local_ntp/local_ntp.html
View file @ 5b5075b9
......@@ -219,8 +219,8 @@
<div id="backgrounds-image-menu" class="menu-panel"></div>
<div id="shortcuts-menu" class="menu-panel">
<div id="sh-options">
<div id="sh-option-cl" class="sh-option">
<div class="sh-option-image">
<div class="sh-option">
<div id="sh-option-cl" class="sh-option-image" tabindex="0" role="button">
<div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
......@@ -228,13 +228,12 @@
<div class="mini-shortcuts"></div>
</div>
</div>
<div class="sh-option-select"></div>
</div>
<div class="sh-title">$i18n{myShortcuts}</div>
<div class="sh-option-title">$i18n{myShortcuts}</div>
$i18n{shortcutsCurated}
</div>
<div id="sh-option-mv" class="sh-option">
<div class="sh-option-image">
<div class="sh-option">
<div id="sh-option-mv" class="sh-option-image" tabindex="0" role="button">
<div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
......@@ -242,9 +241,8 @@
<div class="mini-shortcuts"></div>
</div>
</div>
<div class="sh-option-select"></div>
</div>
<div class="sh-title">$i18n{mostVisited}</div>
<div class="sh-option-title">$i18n{mostVisited}</div>
$i18n{shortcutsSuggested}
</div>
</div>
......
chrome/test/data/local_ntp/local_ntp_browsertest.html
View file @ 5b5075b9
......@@ -205,8 +205,8 @@
<div id="backgrounds-image-menu" class="menu-panel"></div>
<div id="shortcuts-menu" class="menu-panel">
<div id="sh-options">
<div id="sh-option-cl" class="sh-option">
<div class="sh-option-image">
<div class="sh-option">
<div id="sh-option-cl" class="sh-option-image" tabindex="0" role="button">
<div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
......@@ -214,13 +214,12 @@
<div class="mini-shortcuts"></div>
</div>
</div>
<div class="sh-option-select"></div>
</div>
<div class="sh-title">$i18n{myShortcuts}</div>
<div class="sh-option-title">$i18n{myShortcuts}</div>
$i18n{shortcutsCurated}
</div>
<div id="sh-option-mv" class="sh-option">
<div class="sh-option-image">
<div class="sh-option">
<div id="sh-option-mv" class="sh-option-image" tabindex="0" role="button">
<div class="sh-option-icon"></div>
<div class="sh-option-mini">
<div class="mini-page">
......@@ -228,9 +227,8 @@
<div class="mini-shortcuts"></div>
</div>
</div>
<div class="sh-option-select"></div>
</div>
<div class="sh-title">$i18n{mostVisited}</div>
<div class="sh-option-title">$i18n{mostVisited}</div>
$i18n{shortcutsSuggested}
</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