Commit edfbb1a8 authored by Alex Ilin's avatar Alex Ilin Committed by Commit Bot

[webui] Fix the color picker positioning in cr-customize-themes

A hidden <input type="color"> element displays the color picker in the
top left corner. This CL replaces the hidden attribute with the
"visibility:hidden" style and zero element size.

Screenshot: https://drive.google.com/file/d/1egjk4ZrO_cj0D7Tu5fMOL3INqwAhY6F7/view?usp=sharing

Fixed: 1126668, 1047800
Change-Id: Ia7d91759e3a76ea3efa5b45d742e77765e101071
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2401141
Commit-Queue: Alex Ilin <alexilin@chromium.org>
Auto-Submit: Alex Ilin <alexilin@chromium.org>
Reviewed-by: default avatarTibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805574}
parent 244c841e
...@@ -68,9 +68,19 @@ ...@@ -68,9 +68,19 @@
#autogeneratedThemeContainer { #autogeneratedThemeContainer {
display: flex; display: flex;
flex-direction: column;
position: relative; position: relative;
} }
#colorPicker {
border: 0;
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
width: 0;
}
#colorPickerIcon { #colorPickerIcon {
-webkit-mask-image: url(chrome://resources/cr_components/customize_themes/colorize.svg); -webkit-mask-image: url(chrome://resources/cr_components/customize_themes/colorize.svg);
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
...@@ -124,9 +134,6 @@ ...@@ -124,9 +134,6 @@
</cr-button> </cr-button>
</div> </div>
</div> </div>
<input id="colorPicker" type="color" on-change="onCustomFrameColorChange_"
hidden>
</input>
<cr-grid id="themesContainer" columns="6"> <cr-grid id="themesContainer" columns="6">
<div id="autogeneratedThemeContainer" title="[[i18n('colorPickerLabel')]]" <div id="autogeneratedThemeContainer" title="[[i18n('colorPickerLabel')]]"
tabindex="0" on-click="onAutogeneratedThemeClick_"> tabindex="0" on-click="onAutogeneratedThemeClick_">
...@@ -134,6 +141,8 @@ ...@@ -134,6 +141,8 @@
selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]"> selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
</cr-theme-icon> </cr-theme-icon>
<div id="colorPickerIcon"></div> <div id="colorPickerIcon"></div>
<input id="colorPicker" type="color" on-change="onCustomFrameColorChange_">
</input>
</div> </div>
<cr-theme-icon id="defaultTheme" title="[[i18n('defaultThemeLabel')]]" <cr-theme-icon id="defaultTheme" title="[[i18n('defaultThemeLabel')]]"
on-click="onDefaultThemeClick_" tabindex="0" on-click="onDefaultThemeClick_" tabindex="0"
......
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