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 @@
--fontSizePercent: 22%;
--mdblue: rgb(26, 115, 232);
--mdblue-faint: rgba(26, 115, 232, .2);
--mdblue-focus: rgba(26, 115, 232, .2);
--mdgrey: rgb(95, 99, 104);
}
fieldset {
......@@ -31,6 +31,7 @@ fieldset {
margin: 0;
padding: 0;
border: none;
user-select: none;
}
#mainContent {
......@@ -55,15 +56,28 @@ fieldset {
background: transparent;
border: none;
border-radius: 50%;
color: darkslategray;
color: var(--mdgrey);
}
#settingsContainer button:hover {
background-color: rgba(0,0,0,0.1);
#settingsContainer button .material-icons {
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;
}
......@@ -71,10 +85,6 @@ fieldset {
color: #E0E0E0;
}
.dark #settingsToggle:hover {
background-color: rgba(255,255,255, 0.1);
}
#settingsDialog {
top: 3em;
left: auto;
......@@ -85,12 +95,14 @@ fieldset {
height: 168px;
padding: 16px;
box-sizing: border-box;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-family: 'Roboto Regular', 'Roboto', sans-serif;
color: #3C4043;
}
#settingsDialog h2 {
font-size: 1em;
font-size: 14px;
font-family: 'Roboto Medium', 'Roboto', sans-serif;
}
#settingsHeader {
......@@ -132,6 +144,13 @@ select#fontFamilySelection {
border-radius: 2px;
width: 100%;
height: 32px;
color: inherit;
font-size: inherit;
font-family: inherit;
}
select#fontFamilySelection:focus {
outline-color: var(--mdblue);
}
#themeSelection ul {
......@@ -142,6 +161,9 @@ select#fontFamilySelection {
.themeOption {
display: block;
position: relative;
width: 32px;
height: 32px;
}
.themeOption input[type="radio"] {
......@@ -150,13 +172,40 @@ select#fontFamilySelection {
width: 32px;
height: 32px;
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);
}
.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 {
grid-area: size;
}
......@@ -189,7 +238,7 @@ select#fontFamilySelection {
}
#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 {
......@@ -217,7 +266,7 @@ select#fontFamilySelection {
height: 2px;
/* Position the tickmarks over the slider track. */
margin-top: -20px;
margin-top: -19px;
/* Restrict the height of individual options to that of their containing
* 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.
Font Style
</label>
<select id="fontFamilySelection" name="fontFamily">
<option value="sans-serif" selected>Sans-Serif</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="sans-serif" selected>Sans-serif font</option>
<option value="serif">Serif font</option>
<option value="monospace">Monospace font</option>
</select>
</div>
<fieldset id="themeSelection" class="setting">
<legend class="screenReaderOnly">
Page Theme
</legend>
<ul>
<li class="themeOption">
<label for="themeOptionLight" class="screenReaderOnly">
Light
</label>
<input type="radio" name="theme" value="light"
id="themeOptionLight" class="light" checked/>
</li>
<li class="themeOption">
<label for="themeOptionSepia" class="screenReaderOnly">
Sepia
</label>
<input type="radio" name="theme" value="sepia"
id="themeOptionSepia" class="sepia"/>
</li>
<li class="themeOption">
<label for="themeOptionDark" class="screenReaderOnly">
Dark
</label>
<input type="radio" name="theme" value="dark"
id="themeOptionDark" class="dark"/>
</li>
</ul>
</fieldset>
<div class="setting">
<fieldset id="themeSelection">
<legend class="screenReaderOnly">
Page Theme
</legend>
<ul>
<li class="themeOption">
<label for="themeOptionLight" class="screenReaderOnly">
Light
</label>
<input type="radio" name="theme" value="light"
id="themeOptionLight" class="light" checked/>
<div class="checkmark"><i class="material-icons">check_circle</i></div>
</li>
<li class="themeOption">
<label for="themeOptionSepia" class="screenReaderOnly">
Sepia
</label>
<input type="radio" name="theme" value="sepia"
id="themeOptionSepia" class="sepia"/>
<div class="checkmark"><i class="material-icons">check_circle</i></div>
</li>
<li class="themeOption">
<label for="themeOptionDark" class="screenReaderOnly">
Dark
</label>
<input type="radio" name="theme" value="dark"
id="themeOptionDark" class="dark"/>
<div class="checkmark"><i class="material-icons">check_circle</i></div>
</li>
</ul>
</fieldset>
</div>
<div class="setting" id="fontSizeWrapper">
<label for="fontSizeSelection" class="screenReaderOnly">
Font Size
......@@ -82,16 +87,16 @@ found in the LICENSE file.
max="9"
value="2">
<datalist class="tickmarks">
<option value="0" class="beforeThumb" aria-labelledby="slider-label-min"></option>
<option value="1" class="beforeThumb"></option>
<option value="2" class="afterThumb"></option>
<option value="3" class="afterThumb"></option>
<option value="4" class="afterThumb"></option>
<option value="5" class="afterThumb"></option>
<option value="6" class="afterThumb"></option>
<option value="7" class="afterThumb"></option>
<option value="8" class="afterThumb"></option>
<option value="9" class="afterThumb" aria-labelledby="slider-label-max"></option>
<option value="0" aria-labelledby="slider-label-min"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
<option value="9" aria-labelledby="slider-label-max"></option>
</datalist>
<div class="label-container">
<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) {
document.documentElement.style.setProperty(
'--fontSizePercent', (position / 9 * 100) + '%');
for (let i = 0; i < supportedTextSizes.length; i++) {
let optionClasses =
document.querySelector('.tickmarks option[value="' + i + '"]')
.classList;
let option = document.querySelector('.tickmarks option[value="' + i + '"]');
if (!option)
continue;
let optionClasses = option.classList;
removeAll(optionClasses, ['beforeThumb', 'afterThumb']);
if (i < position) {
optionClasses.add('beforeThumb');
......@@ -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.
document.getElementById('closeReaderView')
.addEventListener('click', function(e) {
......@@ -163,6 +170,7 @@ document.getElementById('closeReaderView')
updateToolbarColor();
maybeSetWebFont();
updateSliderFromElement(document.querySelector('#fontSizeSelection'));
var pincher = (function() {
'use strict';
......@@ -407,15 +415,19 @@ window.addEventListener(
document.querySelector('#settingsToggle').addEventListener('click', (e) => {
let dialog = document.querySelector('#settingsDialog');
let toggle = document.querySelector('#settingsToggle');
if (dialog.open) {
toggle.classList.remove('activated');
dialog.close();
} else {
toggle.classList.add('activated');
dialog.show();
}
});
document.querySelector('#closeSettingsButton')
.addEventListener('click', (e) => {
document.querySelector('#settingsToggle').classList.remove('activated');
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