Skip to content

GitLab

T
tangled
Commit c10ed532 authored by Aran Gilman's avatar Aran Gilman Committed by Commit Bot
Browse files
Options

Update dialog style to better match current specifications. 

Bug: 952034, 1016608
Change-Id: I45335ca96f0c33b4b553663ba796aced1f216767
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1863851Reviewed-by: default avatarWei-Yin Chen (陳威尹) <wychen@chromium.org>
Commit-Queue: Aran Gilman <gilmanmh@google.com>
Cr-Commit-Position: refs/heads/master@{#709505}
parent f505a263
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 60 deletions
components/dom_distiller/core/css/distilledpage_desktop.css
View file @ c10ed532
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
--fontSizePercent: 22%; --fontSizePercent: 22%;
--mdblue: rgb(26, 115, 232); --mdblue: rgb(26, 115, 232);
--mdblue-faint: rgba(26, 115, 232, .2); --mdblue-faint: rgba(26, 115, 232, .2);
--mdblue-focus: rgba(26, 115, 232, .2); --mdgrey: rgb(95, 99, 104);
} }
fieldset { fieldset {
...@@ -31,6 +31,7 @@ fieldset { ...@@ -31,6 +31,7 @@ fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
user-select: none;
} }
#mainContent { #mainContent {
...@@ -55,15 +56,28 @@ fieldset { ...@@ -55,15 +56,28 @@ fieldset {
background: transparent; background: transparent;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
color: darkslategray; color: var(--mdgrey);
} }
#settingsContainer button:hover { #settingsContainer button .material-icons {
background-color: rgba(0,0,0,0.1); user-select: none;
} }
#settingsContainer button.activated {
background-color: rgba(0, 0, 0, .1);
}
.dark #settingsContainer button.activated {
background-color: rgba(255, 255, 255, .1);
}
#settingsContainer button:focus {
background-color: rgba(95, 99, 104, .2);
box-shadow: 0px 0px 0px 8px rgba(95, 99, 104, .2);
outline: none;
}
#settingsToggle { #settingsContainer button#settingsToggle {
border-radius: 16px; border-radius: 16px;
} }
...@@ -71,10 +85,6 @@ fieldset { ...@@ -71,10 +85,6 @@ fieldset {
color: #E0E0E0; color: #E0E0E0;
} }
.dark #settingsToggle:hover {
background-color: rgba(255,255,255, 0.1);
}
#settingsDialog { #settingsDialog {
top: 3em; top: 3em;
left: auto; left: auto;
...@@ -85,12 +95,14 @@ fieldset { ...@@ -85,12 +95,14 @@ fieldset {
height: 168px; height: 168px;
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 13px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto Regular', 'Roboto', sans-serif;
color: #3C4043;
} }
#settingsDialog h2 { #settingsDialog h2 {
font-size: 1em; font-size: 14px;
font-family: 'Roboto Medium', 'Roboto', sans-serif;
} }
#settingsHeader { #settingsHeader {
...@@ -132,6 +144,13 @@ select#fontFamilySelection { ...@@ -132,6 +144,13 @@ select#fontFamilySelection {
border-radius: 2px; border-radius: 2px;
width: 100%; width: 100%;
height: 32px; height: 32px;
color: inherit;
font-size: inherit;
font-family: inherit;
}
select#fontFamilySelection:focus {
outline-color: var(--mdblue);
} }
#themeSelection ul { #themeSelection ul {
...@@ -142,6 +161,9 @@ select#fontFamilySelection { ...@@ -142,6 +161,9 @@ select#fontFamilySelection {
.themeOption { .themeOption {
display: block; display: block;
position: relative;
width: 32px;
height: 32px;
} }
.themeOption input[type="radio"] { .themeOption input[type="radio"] {
...@@ -150,13 +172,40 @@ select#fontFamilySelection { ...@@ -150,13 +172,40 @@ select#fontFamilySelection {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
border: 2px solid gray; margin: 0;
padding: 0;
}
.themeOption input[type="radio"].light {
border: 1px solid gray;
} }
.themeOption input[type="radio"]:checked { .themeOption input[type="radio"]:focus {
outline: none;
border: 2px solid var(--mdblue); border: 2px solid var(--mdblue);
} }
.checkmark {
display: none;
width: 16px;
height: 16px;
position: absolute;
bottom: 0;
right: 0;
}
.checkmark .material-icons {
font-size: 16px;
color: var(--mdblue);
background-color: white;
border-radius: 50%;
user-select: none;
}
.themeOption input[type="radio"]:checked + .checkmark {
display: inline;
}
#fontSizeWrapper { #fontSizeWrapper {
grid-area: size; grid-area: size;
} }
...@@ -189,7 +238,7 @@ select#fontFamilySelection { ...@@ -189,7 +238,7 @@ select#fontFamilySelection {
} }
#fontSizeSelection:focus::-webkit-slider-thumb { #fontSizeSelection:focus::-webkit-slider-thumb {
box-shadow: 0px 0px 0px 11px var(--mdblue-focus); box-shadow: 0px 0px 0px 11px var(--mdblue-faint);
} }
#fontSizeSelection::-webkit-slider-container { #fontSizeSelection::-webkit-slider-container {
...@@ -217,7 +266,7 @@ select#fontFamilySelection { ...@@ -217,7 +266,7 @@ select#fontFamilySelection {
height: 2px; height: 2px;
/* Position the tickmarks over the slider track. */ /* Position the tickmarks over the slider track. */
margin-top: -20px; margin-top: -19px;
/* Restrict the height of individual options to that of their containing /* Restrict the height of individual options to that of their containing
* datalist. Setting the height property directly does not seem to have an * datalist. Setting the height property directly does not seem to have an
......
components/dom_distiller/core/html/dom_distiller_viewer.html
View file @ c10ed532
...@@ -37,39 +37,44 @@ found in the LICENSE file. ...@@ -37,39 +37,44 @@ found in the LICENSE file.
Font Style Font Style
</label> </label>
<select id="fontFamilySelection" name="fontFamily"> <select id="fontFamilySelection" name="fontFamily">
<option value="sans-serif" selected>Sans-Serif</option> <option value="sans-serif" selected>Sans-serif font</option>
<option value="serif">Serif</option> <option value="serif">Serif font</option>
<option value="monospace">Monospace</option> <option value="monospace">Monospace font</option>
</select> </select>
</div> </div>
<fieldset id="themeSelection" class="setting"> <div class="setting">
<legend class="screenReaderOnly"> <fieldset id="themeSelection">
Page Theme <legend class="screenReaderOnly">
</legend> Page Theme
<ul> </legend>
<li class="themeOption"> <ul>
<label for="themeOptionLight" class="screenReaderOnly"> <li class="themeOption">
Light <label for="themeOptionLight" class="screenReaderOnly">
</label> Light
<input type="radio" name="theme" value="light" </label>
id="themeOptionLight" class="light" checked/> <input type="radio" name="theme" value="light"
</li> id="themeOptionLight" class="light" checked/>
<li class="themeOption"> <div class="checkmark"><i class="material-icons">check_circle</i></div>
<label for="themeOptionSepia" class="screenReaderOnly"> </li>
Sepia <li class="themeOption">
</label> <label for="themeOptionSepia" class="screenReaderOnly">
<input type="radio" name="theme" value="sepia" Sepia
id="themeOptionSepia" class="sepia"/> </label>
</li> <input type="radio" name="theme" value="sepia"
<li class="themeOption"> id="themeOptionSepia" class="sepia"/>
<label for="themeOptionDark" class="screenReaderOnly"> <div class="checkmark"><i class="material-icons">check_circle</i></div>
Dark </li>
</label> <li class="themeOption">
<input type="radio" name="theme" value="dark" <label for="themeOptionDark" class="screenReaderOnly">
id="themeOptionDark" class="dark"/> Dark
</li> </label>
</ul> <input type="radio" name="theme" value="dark"
</fieldset> id="themeOptionDark" class="dark"/>
<div class="checkmark"><i class="material-icons">check_circle</i></div>
</li>
</ul>
</fieldset>
</div>
<div class="setting" id="fontSizeWrapper"> <div class="setting" id="fontSizeWrapper">
<label for="fontSizeSelection" class="screenReaderOnly"> <label for="fontSizeSelection" class="screenReaderOnly">
Font Size Font Size
...@@ -82,16 +87,16 @@ found in the LICENSE file. ...@@ -82,16 +87,16 @@ found in the LICENSE file.
max="9" max="9"
value="2"> value="2">
<datalist class="tickmarks"> <datalist class="tickmarks">
<option value="0" class="beforeThumb" aria-labelledby="slider-label-min"></option> <option value="0" aria-labelledby="slider-label-min"></option>
<option value="1" class="beforeThumb"></option> <option value="1"></option>
<option value="2" class="afterThumb"></option> <option value="2"></option>
<option value="3" class="afterThumb"></option> <option value="3"></option>
<option value="4" class="afterThumb"></option> <option value="4"></option>
<option value="5" class="afterThumb"></option> <option value="5"></option>
<option value="6" class="afterThumb"></option> <option value="6"></option>
<option value="7" class="afterThumb"></option> <option value="7"></option>
<option value="8" class="afterThumb"></option> <option value="8"></option>
<option value="9" class="afterThumb" aria-labelledby="slider-label-max"></option> <option value="9" aria-labelledby="slider-label-max"></option>
</datalist> </datalist>
<div class="label-container"> <div class="label-container">
<span id="slider-label-min">Small</span> <span id="slider-label-min">Small</span>
......
components/dom_distiller/core/javascript/dom_distiller_viewer.js
View file @ c10ed532
...@@ -141,9 +141,11 @@ function updateSlider(position) { ...@@ -141,9 +141,11 @@ function updateSlider(position) {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--fontSizePercent', (position / 9 * 100) + '%'); '--fontSizePercent', (position / 9 * 100) + '%');
for (let i = 0; i < supportedTextSizes.length; i++) { for (let i = 0; i < supportedTextSizes.length; i++) {
let optionClasses = let option = document.querySelector('.tickmarks option[value="' + i + '"]');
document.querySelector('.tickmarks option[value="' + i + '"]') if (!option)
.classList; continue;
let optionClasses = option.classList;
removeAll(optionClasses, ['beforeThumb', 'afterThumb']); removeAll(optionClasses, ['beforeThumb', 'afterThumb']);
if (i < position) { if (i < position) {
optionClasses.add('beforeThumb'); optionClasses.add('beforeThumb');
...@@ -153,6 +155,11 @@ function updateSlider(position) { ...@@ -153,6 +155,11 @@ function updateSlider(position) {
} }
} }
function updateSliderFromElement(element) {
if (element)
updateSlider(element.value);
}
// Add a listener to the "View Original" link to report opt-outs. // Add a listener to the "View Original" link to report opt-outs.
document.getElementById('closeReaderView') document.getElementById('closeReaderView')
.addEventListener('click', function(e) { .addEventListener('click', function(e) {
...@@ -163,6 +170,7 @@ document.getElementById('closeReaderView') ...@@ -163,6 +170,7 @@ document.getElementById('closeReaderView')
updateToolbarColor(); updateToolbarColor();
maybeSetWebFont(); maybeSetWebFont();
updateSliderFromElement(document.querySelector('#fontSizeSelection'));
var pincher = (function() { var pincher = (function() {
'use strict'; 'use strict';
...@@ -407,15 +415,19 @@ window.addEventListener( ...@@ -407,15 +415,19 @@ window.addEventListener(
document.querySelector('#settingsToggle').addEventListener('click', (e) => { document.querySelector('#settingsToggle').addEventListener('click', (e) => {
let dialog = document.querySelector('#settingsDialog'); let dialog = document.querySelector('#settingsDialog');
let toggle = document.querySelector('#settingsToggle');
if (dialog.open) { if (dialog.open) {
toggle.classList.remove('activated');
dialog.close(); dialog.close();
} else { } else {
toggle.classList.add('activated');
dialog.show(); dialog.show();
} }
}); });
document.querySelector('#closeSettingsButton') document.querySelector('#closeSettingsButton')
.addEventListener('click', (e) => { .addEventListener('click', (e) => {
document.querySelector('#settingsToggle').classList.remove('activated');
document.querySelector('#settingsDialog').close(); document.querySelector('#settingsDialog').close();
}); });
......
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