Commit f92d626a authored by Kyle Milka's avatar Kyle Milka Committed by Commit Bot

[NTP] Add default backgrounds icon

Update the default background tile to use the correct
icon.

Screencast: http://go/scrcast/NTA1MjYwODk1NzkwNjk0NHw5MDBlYzU5YS1mMg

Bug: 937570
Change-Id: Ib1aa03cb0fab2e681774424492511d239f62dd7a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1618001Reviewed-by: default avatarGayane Petrosyan <gayane@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#660963}
parent f756b382
...@@ -617,8 +617,16 @@ customBackgrounds.richerPicker_deselectTile = function(tile) { ...@@ -617,8 +617,16 @@ customBackgrounds.richerPicker_deselectTile = function(tile) {
customBackgrounds.selectedTile = null; customBackgrounds.selectedTile = null;
$(customBackgrounds.IDS.MENU_DONE).tabIndex = -1; $(customBackgrounds.IDS.MENU_DONE).tabIndex = -1;
// Remove selected check. // Remove selected check and circle.
tile.innerHTML = ''; for (let i = 0; i < tile.children.length; ++i) {
if (tile.children[i].classList.contains(
customBackgrounds.CLASSES.SELECTED_CHECK) ||
tile.children[i].classList.contains(
customBackgrounds.CLASSES.SELECTED_CIRCLE)) {
tile.removeChild(tile.children[i]);
--i;
}
}
}; };
......
<?xml version="1.0" encoding="UTF-8"?>
<svg width="130px" height="40px" viewBox="0 0 130 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>ic-ntp-shortcuts-header</title>
<desc>Created with Sketch.</desc>
<g id="ic-ntp-shortcuts-header" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M39.9720015,16.9685185 C35.2874047,16.9685185 31.3516129,13.1592593 31.3516129,8.48425926 C31.3516129,3.80925926 35.2874047,0 39.9720015,0 C42.5654235,0 44.4100406,1.01154971 45.7980692,2.34205653 L44.1634828,3.97329435 C43.1681202,3.04376218 41.8166186,2.31471735 39.9720015,2.31471735 C36.5475887,2.31471735 33.8719808,5.0668616 33.8719808,8.48425926 C33.8719808,11.9007456 36.5475887,14.6538012 39.9720015,14.6538012 C42.191021,14.6538012 43.451205,13.7598099 44.2639323,12.9587719 C44.9305513,12.2935185 45.3597444,11.3457602 45.5241162,10.0425926 L39.9720015,10.0425926 L39.9720015,7.71876218 L47.7887946,7.71876218 C47.8709805,8.1288499 47.9166393,8.63006823 47.9166393,9.16773879 C47.9166393,10.9083333 47.4417874,13.0590156 45.9076504,14.5900097 C44.4100406,16.13923 42.5106329,16.9685185 39.9720015,16.9685185 Z M57.7623449,11.6019069 C57.7623449,9.61860141 56.3528333,8.26885183 54.7236576,8.26885183 C53.0944819,8.26885183 51.6849704,9.62778338 51.6849704,11.6019069 C51.6849704,13.5576665 53.0944819,14.934962 54.7236576,14.934962 C56.3528333,14.934962 57.7623449,13.5668485 57.7623449,11.6019069 Z M60.132887,11.6019069 C60.132887,14.7696866 57.7074288,17.1019069 54.7236576,17.1019069 C51.7398864,17.1019069 49.3144282,14.7696866 49.3144282,11.6019069 C49.3144282,8.41576335 51.7398864,6.10190692 54.7236576,6.10190692 C57.7074288,6.10190692 60.132887,8.41576335 60.132887,11.6019069 Z M69.8146875,11.6019069 C69.8146875,9.61860141 68.405176,8.26885183 66.7760003,8.26885183 C65.1468246,8.26885183 63.737313,9.62778338 63.737313,11.6019069 C63.737313,13.5576665 65.1468246,14.934962 66.7760003,14.934962 C68.405176,14.944144 69.8146875,13.5668485 69.8146875,11.6019069 Z M72.176077,11.6019069 C72.176077,14.7696866 69.7506188,17.1019069 66.7668476,17.1019069 C63.7922291,17.1019069 61.3576182,14.7696866 61.3576182,11.6019069 C61.3576182,8.41576335 63.7830764,6.10190692 66.7668476,6.10190692 C69.7506188,6.10190692 72.176077,8.41576335 72.176077,11.6019069 Z M81.7090477,11.6177388 C81.7090477,9.68765502 80.4315539,8.26982095 78.8097711,8.26982095 C77.1608075,8.26982095 75.7836511,9.6785077 75.7836511,11.6177388 C75.7836511,13.529528 77.1608075,14.9199201 78.8097711,14.9199201 C80.4315539,14.9199201 81.7090477,13.529528 81.7090477,11.6177388 Z M83.8110232,6.44035763 L83.8110232,16.2828703 C83.8110232,20.3351315 81.4463007,21.9907958 78.6466868,21.9907958 C76.0101571,21.9907958 74.4345815,20.2070691 73.8366057,18.7526457 L75.9114005,17.8836507 C76.2828703,18.7810024 77.1888943,19.8320291 78.6466868,19.8320291 C80.4415202,19.8320291 81.5459634,18.7069092 81.5459634,16.6121737 L81.5459634,15.8255044 L81.4644212,15.8255044 C80.9307731,16.4941733 79.8969998,17.0695395 78.6013856,17.0695395 C75.8833138,17.0695395 73.4008082,14.6820899 73.4008082,11.6085915 C73.4008082,8.5167985 75.892374,6.10190692 78.6013856,6.10190692 C79.8969998,6.10190692 80.9307731,6.68733518 81.4644212,7.32764734 L81.5459634,7.32764734 L81.5459634,6.44035763 L83.8110232,6.44035763 Z M85.8522419,16.6944995 L85.8522419,0.60190692 L88.3017042,0.60190692 L88.3017042,16.6944995 L85.8522419,16.6944995 Z M91.8324784,11.4274495 L96.71994,9.38905216 C96.4472999,8.70040442 95.6448808,8.22294198 94.6865371,8.22294198 C93.4646717,8.22294198 91.7695614,9.30641443 91.8324784,11.4274495 Z M97.5679511,13.410755 L99.4281043,14.6595029 C98.82629,15.559336 97.3764647,17.1019069 94.8689051,17.1019069 C91.7595312,17.1019069 89.5264354,14.6870488 89.5264354,11.6019069 C89.5264354,8.33312562 91.7868864,6.10190692 94.6044715,6.10190692 C97.4402935,6.10190692 98.82629,8.3698535 99.28221,9.60023747 L99.5284067,10.2246114 L92.2254814,13.2730255 C92.7807918,14.3748618 93.6561581,14.944144 94.8780235,14.944144 C96.1008007,14.944144 96.9479,14.328952 97.5679511,13.410755 Z" id="Combined-Shape" fill="#000000"></path>
<rect id="Rectangle" fill="#000000" x="0" y="30" width="130" height="10" rx="5"></rect>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="116px" height="42px" viewBox="0 0 116 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>ic-ntp-shortcuts-shortcuts</title>
<desc>Created with Sketch.</desc>
<g id="ic-ntp-shortcuts-shortcuts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M6.00869565,11.3801242 C2.92962241,11.3801242 0.433540373,8.88404218 0.433540373,5.80496894 C0.433540373,2.72589571 2.92962241,0.229813665 6.00869565,0.229813665 C9.08776889,0.229813665 11.5838509,2.72589571 11.5838509,5.80496894 C11.5838509,8.88404218 9.08776889,11.3801242 6.00869565,11.3801242 Z M58.0434783,11.3801242 C54.964405,11.3801242 52.468323,8.88404218 52.468323,5.80496894 C52.468323,2.72589571 54.964405,0.229813665 58.0434783,0.229813665 C61.1225515,0.229813665 63.6186335,2.72589571 63.6186335,5.80496894 C63.6186335,8.88404218 61.1225515,11.3801242 58.0434783,11.3801242 Z M32.026087,11.3801242 C28.9470137,11.3801242 26.4509317,8.88404218 26.4509317,5.80496894 C26.4509317,2.72589571 28.9470137,0.229813665 32.026087,0.229813665 C35.1051602,0.229813665 37.6012422,2.72589571 37.6012422,5.80496894 C37.6012422,8.88404218 35.1051602,11.3801242 32.026087,11.3801242 Z M84.0608696,11.3801242 C80.9817963,11.3801242 78.4857143,8.88404218 78.4857143,5.80496894 C78.4857143,2.72589571 80.9817963,0.229813665 84.0608696,0.229813665 C87.1399428,0.229813665 89.6360248,2.72589571 89.6360248,5.80496894 C89.6360248,8.88404218 87.1399428,11.3801242 84.0608696,11.3801242 Z M110.078261,11.3801242 C106.999188,11.3801242 104.503106,8.88404218 104.503106,5.80496894 C104.503106,2.72589571 106.999188,0.229813665 110.078261,0.229813665 C113.157334,0.229813665 115.653416,2.72589571 115.653416,5.80496894 C115.653416,8.88404218 113.157334,11.3801242 110.078261,11.3801242 Z M6.00869565,41.1142857 C2.92962241,41.1142857 0.433540373,38.6182037 0.433540373,35.5391304 C0.433540373,32.4600572 2.92962241,29.9639752 6.00869565,29.9639752 C9.08776889,29.9639752 11.5838509,32.4600572 11.5838509,35.5391304 C11.5838509,38.6182037 9.08776889,41.1142857 6.00869565,41.1142857 Z M58.0434783,41.1142857 C54.964405,41.1142857 52.468323,38.6182037 52.468323,35.5391304 C52.468323,32.4600572 54.964405,29.9639752 58.0434783,29.9639752 C61.1225515,29.9639752 63.6186335,32.4600572 63.6186335,35.5391304 C63.6186335,38.6182037 61.1225515,41.1142857 58.0434783,41.1142857 Z M32.026087,41.1142857 C28.9470137,41.1142857 26.4509317,38.6182037 26.4509317,35.5391304 C26.4509317,32.4600572 28.9470137,29.9639752 32.026087,29.9639752 C35.1051602,29.9639752 37.6012422,32.4600572 37.6012422,35.5391304 C37.6012422,38.6182037 35.1051602,41.1142857 32.026087,41.1142857 Z M84.0608696,41.1142857 C80.9817963,41.1142857 78.4857143,38.6182037 78.4857143,35.5391304 C78.4857143,32.4600572 80.9817963,29.9639752 84.0608696,29.9639752 C87.1399428,29.9639752 89.6360248,32.4600572 89.6360248,35.5391304 C89.6360248,38.6182037 87.1399428,41.1142857 84.0608696,41.1142857 Z M110.078261,41.1142857 C106.999188,41.1142857 104.503106,38.6182037 104.503106,35.5391304 C104.503106,32.4600572 106.999188,29.9639752 110.078261,29.9639752 C113.157334,29.9639752 115.653416,32.4600572 115.653416,35.5391304 C115.653416,38.6182037 113.157334,41.1142857 110.078261,41.1142857 Z" id="Combined-Shape" fill="#000000"></path>
</g>
</svg>
\ No newline at end of file
...@@ -1165,13 +1165,42 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check { ...@@ -1165,13 +1165,42 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
#backgrounds-default-icon { #backgrounds-default-icon {
background-color: white; background-color: white;
background-image: url(icons/upload.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
height: 174px; height: 174px;
opacity: 1; opacity: 1;
width: 174px; width: 174px;
} }
#backgrounds-default-icon-header {
-webkit-mask-image: url(icons/header.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
background-color: rgb(var(--GG500-rgb));
height: 50px;
margin-inline-start: 17px;
margin-top: 24px;
position: absolute;
width: 140px;
}
#backgrounds-default-icon-shortcuts {
-webkit-mask-image: url(icons/shortcut-circles.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
background-color: rgb(var(--GG500-rgb));
height: 50px;
margin-inline-start: 17px;
margin-top: 86px;
position: absolute;
width: 140px;
}
.selected #backgrounds-default-icon-header,
.selected #backgrounds-default-icon-shortcuts {
margin-inline-start: 14px;
width: 116px;
}
#shortcuts-menu { #shortcuts-menu {
line-height: 20px; line-height: 20px;
overflow-y: unset; overflow-y: unset;
......
...@@ -205,7 +205,10 @@ ...@@ -205,7 +205,10 @@
<div id="backgrounds-upload-text">$i18n{uploadImage}</div> <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
</div> </div>
<div id="backgrounds-default" class="bg-sel-tile-bg"> <div id="backgrounds-default" class="bg-sel-tile-bg">
<div id="backgrounds-default-icon" class="bg-sel-tile"></div> <div id="backgrounds-default-icon" class="bg-sel-tile">
<div id="backgrounds-default-icon-header"></div>
<div id="backgrounds-default-icon-shortcuts"></div>
</div>
<div class="bg-sel-tile-title">Default</div> <div class="bg-sel-tile-title">Default</div>
</div> </div>
</div> </div>
......
...@@ -191,7 +191,10 @@ ...@@ -191,7 +191,10 @@
<div id="backgrounds-upload-text">$i18n{uploadImage}</div> <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
</div> </div>
<div id="backgrounds-default" class="bg-sel-tile-bg"> <div id="backgrounds-default" class="bg-sel-tile-bg">
<div id="backgrounds-default-icon" class="bg-sel-tile"></div> <div id="backgrounds-default-icon" class="bg-sel-tile">
<div id="backgrounds-default-icon-header"></div>
<div id="backgrounds-default-icon-shortcuts"></div>
</div>
<div class="bg-sel-tile-title">Default</div> <div class="bg-sel-tile-title">Default</div>
</div> </div>
</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