mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-14 22:05:44 +00:00
Bug 1120004 - Update styles of Reader View controls on mobile. r=bnicholson
--HG-- extra : rebase_source : b50005d5f99151a0ea9d6c2b022791198db8b846
This commit is contained in:
Margaret Leibovic
parent
83e3f73fce
commit
22c88554a0
@ -854,7 +854,7 @@ pref("media.gmp-provider.enabled", true);
|
||||
pref("reader.color_scheme", "auto");
|
||||
|
||||
// Color scheme values available in reader mode UI.
|
||||
pref("reader.color_scheme.values", "[\"light\",\"dark\",\"auto\"]");
|
||||
pref("reader.color_scheme.values", "[\"dark\",\"auto\",\"light\"]");
|
||||
|
||||
// Whether to use a vertical or horizontal toolbar.
|
||||
pref("reader.toolbar.vertical", false);
|
||||
|
||||
@ -21,7 +21,7 @@ body {
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #000000;
|
||||
background-color: #222222;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
@ -284,6 +284,8 @@ body {
|
||||
list-style: decimal !important;
|
||||
}
|
||||
|
||||
/*======= Controls toolbar =======*/
|
||||
|
||||
.toolbar {
|
||||
font-family: "Clear Sans",sans-serif;
|
||||
transition-property: visibility, opacity;
|
||||
@ -298,7 +300,7 @@ body {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background-color: #EBEBF0;
|
||||
-moz-user-select: none;
|
||||
border-top: 1px solid #D7D9DB;
|
||||
}
|
||||
|
||||
.toolbar-hidden {
|
||||
@ -314,23 +316,27 @@ body {
|
||||
}
|
||||
|
||||
.button {
|
||||
color: white;
|
||||
display: block;
|
||||
background-position: center;
|
||||
background-size: 30px 24px;
|
||||
background-size: 30px 28px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: #D7D7DC;
|
||||
}
|
||||
|
||||
/* Remove dotted border when button is focused */
|
||||
.button::-moz-focus-inner,
|
||||
#font-size-buttons > button::-moz-focus-inner {
|
||||
.dropdown-popup > div > button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
left: 0;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
@ -348,135 +354,77 @@ body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*======= Font style popup =======*/
|
||||
|
||||
.dropdown-popup {
|
||||
text-align: start;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
float: left;
|
||||
background: #EBEBF0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 8px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0px -1px 12px #333;
|
||||
border-radius: 3px;
|
||||
visibility: hidden;
|
||||
border-top: 1px solid #D7D9DB;
|
||||
}
|
||||
|
||||
.dropdown-popup > hr {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
border: 0px;
|
||||
border-top: 1px solid #B5B5B5;
|
||||
margin: 0;
|
||||
/* Only used on desktop */
|
||||
.dropdown-popup > hr,
|
||||
.dropdown-arrow,
|
||||
#font-type-buttons > button > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.open > .dropdown-popup {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 6px;
|
||||
bottom: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 18px;
|
||||
bottom: -18px;
|
||||
background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
|
||||
background-size: 40px 18px;
|
||||
background-position: center;
|
||||
display: block;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
#font-type-buttons,
|
||||
#font-size-buttons,
|
||||
.segmented-button {
|
||||
#color-scheme-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
padding: 10px 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#font-type-buttons > li,
|
||||
#font-size-buttons > button,
|
||||
.segmented-button > li {
|
||||
flex: 1 0 auto;
|
||||
#font-type-buttons > button,
|
||||
#color-scheme-buttons > button {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#font-type-buttons > li,
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button {
|
||||
width: 100px; /* combined with flex, this acts as a minimum width */
|
||||
width: 50%;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.segmented-button > li {
|
||||
width: 50px; /* combined with flex, this acts as a minimum width */
|
||||
#font-type-buttons > button {
|
||||
font-size: 24px;
|
||||
color: #AFB1B3;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > li {
|
||||
padding: 10px 0;
|
||||
#font-type-buttons > button:active,
|
||||
#font-type-buttons > button.selected {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.segmented-button > li {
|
||||
border-left: 1px solid #B5B5B5;
|
||||
#font-size-sample {
|
||||
flex: 0;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
#font-size-buttons > button:first-child,
|
||||
.segmented-button > li:first-child {
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > a,
|
||||
.segmented-button > li > a {
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > a {
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.segmented-button > li > a {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
font-family: "Clear Sans",sans-serif;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > a:active,
|
||||
#font-type-buttons > li.selected > a {
|
||||
border-color: #ff9400;
|
||||
}
|
||||
|
||||
.segmented-button > li > a:active,
|
||||
.segmented-button > li.selected > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > .sans-serif {
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > div {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
.serif-button {
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.minus-button,
|
||||
.plus-button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
height: 30px;
|
||||
height: 60px;
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@ -490,7 +438,38 @@ body {
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
/* desktop-only controls */
|
||||
#color-scheme-buttons > button {
|
||||
width: 33%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #BFBFBF;
|
||||
padding: 10px;
|
||||
margin: 15px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button:active,
|
||||
#color-scheme-buttons > button.selected {
|
||||
border: 2px solid #FF9500;
|
||||
}
|
||||
|
||||
.dark-button {
|
||||
color: #eeeeee;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.auto-button {
|
||||
color: #000000;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.light-button {
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/*======= Toolbar icons =======*/
|
||||
|
||||
/* desktop-only controls */
|
||||
.close-button,
|
||||
.list-button {
|
||||
display: none;
|
||||
@ -512,6 +491,10 @@ body {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
|
||||
}
|
||||
|
||||
.open .style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-active-mdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-mdpi.png');
|
||||
}
|
||||
@ -521,10 +504,6 @@ body {
|
||||
}
|
||||
|
||||
@media screen and (min-resolution: 1.25dppx) {
|
||||
.dropdown-arrow {
|
||||
background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-hdpi.png');
|
||||
}
|
||||
|
||||
.toggle-button.on {
|
||||
background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-hdpi.png');
|
||||
}
|
||||
@ -541,6 +520,10 @@ body {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
|
||||
}
|
||||
|
||||
.open .style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-active-hdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
|
||||
}
|
||||
@ -551,10 +534,6 @@ body {
|
||||
}
|
||||
|
||||
@media screen and (min-resolution: 2dppx) {
|
||||
.dropdown-arrow {
|
||||
background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-xhdpi.png');
|
||||
}
|
||||
|
||||
.toggle-button.on {
|
||||
background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xhdpi.png');
|
||||
}
|
||||
@ -571,6 +550,10 @@ body {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
|
||||
}
|
||||
|
||||
.open .style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-active-xhdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
|
||||
}
|
||||
@ -580,9 +563,39 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-resolution: 3dppx) {
|
||||
.toggle-button.on {
|
||||
background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xxhdpi.png');
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-xxhdpi.png');
|
||||
}
|
||||
|
||||
.share-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-share-icon-xhdpi.png');
|
||||
}
|
||||
|
||||
.style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-xxhdpi.png');
|
||||
}
|
||||
|
||||
.open .style-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-style-icon-active-xxhdpi.png');
|
||||
}
|
||||
|
||||
.minus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-minus-xxhdpi.png');
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
background-image: url('chrome://browser/skin/images/reader-plus-xxhdpi.png');
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
.button {
|
||||
height: 48px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -601,4 +614,17 @@ body {
|
||||
.toolbar > * {
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.dropdown-popup {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
left: auto;
|
||||
right: 15px;
|
||||
bottom: -12px;
|
||||
z-index: 1000;
|
||||
background: #EBEBF0;
|
||||
border: 1px solid #D7D9DB;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 4px 2px #BFBFBF;
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 661 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
mobile/android/themes/core/images/reader-minus-xxhdpi.png
Normal file
BIN
mobile/android/themes/core/images/reader-minus-xxhdpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 B |
BIN
mobile/android/themes/core/images/reader-plus-xxhdpi.png
Normal file
BIN
mobile/android/themes/core/images/reader-plus-xxhdpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 B |
Binary file not shown.
|
Before Width: | Height: | Size: 577 B After Width: | Height: | Size: 542 B |
Binary file not shown.
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 401 B |
Binary file not shown.
|
Before Width: | Height: | Size: 716 B After Width: | Height: | Size: 808 B |
BIN
mobile/android/themes/core/images/reader-share-icon-xxhdpi.png
Normal file
BIN
mobile/android/themes/core/images/reader-share-icon-xxhdpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1011 B |
Binary file not shown.
|
After Width: | Height: | Size: 665 B |
Binary file not shown.
|
After Width: | Height: | Size: 501 B |
Binary file not shown.
|
After Width: | Height: | Size: 858 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 484 B After Width: | Height: | Size: 877 B |
Binary file not shown.
|
Before Width: | Height: | Size: 352 B After Width: | Height: | Size: 660 B |
Binary file not shown.
|
Before Width: | Height: | Size: 557 B After Width: | Height: | Size: 1.1 KiB |
BIN
mobile/android/themes/core/images/reader-style-icon-xxhdpi.png
Normal file
BIN
mobile/android/themes/core/images/reader-style-icon-xxhdpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 429 B After Width: | Height: | Size: 700 B |
Binary file not shown.
|
Before Width: | Height: | Size: 309 B After Width: | Height: | Size: 496 B |
Binary file not shown.
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 808 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 473 B After Width: | Height: | Size: 316 B |
Binary file not shown.
|
Before Width: | Height: | Size: 329 B After Width: | Height: | Size: 206 B |
Binary file not shown.
|
Before Width: | Height: | Size: 587 B After Width: | Height: | Size: 323 B |
Binary file not shown.
|
After Width: | Height: | Size: 478 B |
@ -86,27 +86,34 @@ chrome.jar:
|
||||
skin/images/logo-hdpi.png (images/logo-hdpi.png)
|
||||
skin/images/wordmark-hdpi.png (images/wordmark-hdpi.png)
|
||||
skin/images/config-plus.png (images/config-plus.png)
|
||||
skin/images/reader-dropdown-arrow-mdpi.png (images/reader-dropdown-arrow-mdpi.png)
|
||||
skin/images/reader-dropdown-arrow-hdpi.png (images/reader-dropdown-arrow-hdpi.png)
|
||||
skin/images/reader-dropdown-arrow-xhdpi.png (images/reader-dropdown-arrow-xhdpi.png)
|
||||
skin/images/reader-minus-mdpi.png (images/reader-minus-mdpi.png)
|
||||
skin/images/reader-minus-hdpi.png (images/reader-minus-hdpi.png)
|
||||
skin/images/reader-minus-xhdpi.png (images/reader-minus-xhdpi.png)
|
||||
skin/images/reader-minus-xxhdpi.png (images/reader-minus-xxhdpi.png)
|
||||
skin/images/reader-plus-mdpi.png (images/reader-plus-mdpi.png)
|
||||
skin/images/reader-plus-hdpi.png (images/reader-plus-hdpi.png)
|
||||
skin/images/reader-plus-xhdpi.png (images/reader-plus-xhdpi.png)
|
||||
skin/images/reader-plus-xxhdpi.png (images/reader-plus-xxhdpi.png)
|
||||
skin/images/reader-toggle-on-icon-mdpi.png (images/reader-toggle-on-icon-mdpi.png)
|
||||
skin/images/reader-toggle-on-icon-hdpi.png (images/reader-toggle-on-icon-hdpi.png)
|
||||
skin/images/reader-toggle-on-icon-xhdpi.png (images/reader-toggle-on-icon-xhdpi.png)
|
||||
skin/images/reader-toggle-on-icon-xxhdpi.png (images/reader-toggle-on-icon-xxhdpi.png)
|
||||
skin/images/reader-toggle-off-icon-mdpi.png (images/reader-toggle-off-icon-mdpi.png)
|
||||
skin/images/reader-toggle-off-icon-hdpi.png (images/reader-toggle-off-icon-hdpi.png)
|
||||
skin/images/reader-toggle-off-icon-xhdpi.png (images/reader-toggle-off-icon-xhdpi.png)
|
||||
skin/images/reader-toggle-off-icon-xxhdpi.png (images/reader-toggle-off-icon-xxhdpi.png)
|
||||
skin/images/reader-share-icon-mdpi.png (images/reader-share-icon-mdpi.png)
|
||||
skin/images/reader-share-icon-hdpi.png (images/reader-share-icon-hdpi.png)
|
||||
skin/images/reader-share-icon-xhdpi.png (images/reader-share-icon-xhdpi.png)
|
||||
skin/images/reader-share-icon-xxhdpi.png (images/reader-share-icon-xxhdpi.png)
|
||||
skin/images/reader-style-icon-active-mdpi.png (images/reader-style-icon-active-mdpi.png)
|
||||
skin/images/reader-style-icon-active-hdpi.png (images/reader-style-icon-active-hdpi.png)
|
||||
skin/images/reader-style-icon-active-xhdpi.png (images/reader-style-icon-active-xhdpi.png)
|
||||
skin/images/reader-style-icon-active-xxhdpi.png (images/reader-style-icon-active-xxhdpi.png)
|
||||
skin/images/reader-style-icon-mdpi.png (images/reader-style-icon-mdpi.png)
|
||||
skin/images/reader-style-icon-hdpi.png (images/reader-style-icon-hdpi.png)
|
||||
skin/images/reader-style-icon-xhdpi.png (images/reader-style-icon-xhdpi.png)
|
||||
skin/images/reader-style-icon-xxhdpi.png (images/reader-style-icon-xxhdpi.png)
|
||||
skin/images/privatebrowsing-mask.png (images/privatebrowsing-mask.png)
|
||||
skin/images/update.png (images/update.png)
|
||||
skin/images/icon_floaty_hdpi.png (images/icon_floaty_hdpi.png)
|
||||
|
||||
@ -49,9 +49,7 @@ let AboutReader = function(mm, win) {
|
||||
|
||||
this._scrollOffset = win.pageYOffset;
|
||||
|
||||
let body = doc.body;
|
||||
body.addEventListener("touchstart", this, false);
|
||||
body.addEventListener("click", this, false);
|
||||
doc.getElementById("container").addEventListener("click", this, false);
|
||||
|
||||
win.addEventListener("unload", this, false);
|
||||
win.addEventListener("scroll", this, false);
|
||||
@ -88,12 +86,12 @@ let AboutReader = function(mm, win) {
|
||||
{ name: fontTypeSample,
|
||||
description: gStrings.GetStringFromName("aboutReader.fontType.sans-serif"),
|
||||
value: "sans-serif",
|
||||
linkClass: "sans-serif"
|
||||
itemClass: "sans-serif-button"
|
||||
},
|
||||
{ name: fontTypeSample,
|
||||
description: gStrings.GetStringFromName("aboutReader.fontType.serif"),
|
||||
value: "serif",
|
||||
linkClass: "serif" },
|
||||
itemClass: "serif-button" },
|
||||
];
|
||||
|
||||
let fontType = Services.prefs.getCharPref("reader.font_type");
|
||||
@ -205,7 +203,6 @@ AboutReader.prototype = {
|
||||
|
||||
switch (aEvent.type) {
|
||||
case "click":
|
||||
// XXX: Don't toggle the toolbar on double click. (See the "Gesture:DoubleTap" handler in Reader.js)
|
||||
this._toggleToolbarVisibility();
|
||||
break;
|
||||
case "scroll":
|
||||
@ -352,6 +349,10 @@ AboutReader.prototype = {
|
||||
const FONT_SIZE_MIN = 1;
|
||||
const FONT_SIZE_MAX = 9;
|
||||
|
||||
// Sample text shown in Android UI.
|
||||
let sampleText = this._doc.getElementById("font-size-sample");
|
||||
sampleText.textContent = gStrings.GetStringFromName("aboutReader.fontTypeSample");
|
||||
|
||||
let currentSize = Services.prefs.getIntPref("reader.font_size");
|
||||
currentSize = Math.max(FONT_SIZE_MIN, Math.min(FONT_SIZE_MAX, currentSize));
|
||||
|
||||
@ -756,24 +757,22 @@ AboutReader.prototype = {
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
let option = options[i];
|
||||
|
||||
let item = doc.createElement("li");
|
||||
let link = doc.createElement("a");
|
||||
link.textContent = option.name;
|
||||
item.appendChild(link);
|
||||
let item = doc.createElement("button");
|
||||
|
||||
// We make this extra span so that we can hide it if necessary.
|
||||
let span = doc.createElement("span");
|
||||
span.textContent = option.name;
|
||||
item.appendChild(span);
|
||||
|
||||
if (option.itemClass !== undefined)
|
||||
item.classList.add(option.itemClass);
|
||||
|
||||
if (option.linkClass !== undefined)
|
||||
link.classList.add(option.linkClass);
|
||||
|
||||
if (option.description !== undefined) {
|
||||
let description = doc.createElement("div");
|
||||
description.textContent = option.description;
|
||||
item.appendChild(description);
|
||||
}
|
||||
|
||||
link.style.MozUserSelect = 'none';
|
||||
segmentedButton.appendChild(item);
|
||||
|
||||
item.addEventListener("click", function(aEvent) {
|
||||
@ -831,30 +830,17 @@ AboutReader.prototype = {
|
||||
let dropdown = doc.getElementById("style-dropdown");
|
||||
let dropdownToggle = dropdown.querySelector(".dropdown-toggle");
|
||||
let dropdownPopup = dropdown.querySelector(".dropdown-popup");
|
||||
let dropdownArrow = dropdown.querySelector(".dropdown-arrow");
|
||||
|
||||
let updatePopupPosition = () => {
|
||||
if (this._isToolbarVertical) {
|
||||
// Helper function used to position the popup on desktop,
|
||||
// where there is a vertical toolbar.
|
||||
function updatePopupPosition() {
|
||||
let toggleHeight = dropdownToggle.offsetHeight;
|
||||
let toggleTop = dropdownToggle.offsetTop;
|
||||
let popupTop = toggleTop - toggleHeight / 2;
|
||||
dropdownPopup.style.top = popupTop + "px";
|
||||
} else {
|
||||
let popupWidth = dropdownPopup.offsetWidth + 30;
|
||||
let arrowWidth = dropdownArrow.offsetWidth;
|
||||
let toggleWidth = dropdownToggle.offsetWidth;
|
||||
let toggleLeft = dropdownToggle.offsetLeft;
|
||||
|
||||
let popupShift = (toggleWidth - popupWidth) / 2;
|
||||
let popupLeft = Math.max(0, Math.min(win.innerWidth - popupWidth, toggleLeft + popupShift));
|
||||
dropdownPopup.style.left = popupLeft + "px";
|
||||
|
||||
let arrowShift = (toggleWidth - arrowWidth) / 2;
|
||||
let arrowLeft = toggleLeft - popupLeft + arrowShift;
|
||||
dropdownArrow.style.left = arrowLeft + "px";
|
||||
}
|
||||
};
|
||||
|
||||
if (this._isToolbarVertical) {
|
||||
win.addEventListener("resize", event => {
|
||||
if (!event.isTrusted)
|
||||
return;
|
||||
@ -862,6 +848,7 @@ AboutReader.prototype = {
|
||||
// Wait for reflow before calculating the new position of the popup.
|
||||
win.setTimeout(updatePopupPosition, 0);
|
||||
}, true);
|
||||
}
|
||||
|
||||
dropdownToggle.setAttribute("title", gStrings.GetStringFromName("aboutReader.toolbar.typeControls"));
|
||||
dropdownToggle.addEventListener("click", event => {
|
||||
@ -874,8 +861,10 @@ AboutReader.prototype = {
|
||||
dropdown.classList.remove("open");
|
||||
} else {
|
||||
dropdown.classList.add("open");
|
||||
if (this._isToolbarVertical) {
|
||||
updatePopupPosition();
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
},
|
||||
};
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="reader-header" class="header">
|
||||
<a id="reader-domain" class="domain"></a>
|
||||
<div class="domain-border"></div>
|
||||
@ -23,6 +24,7 @@
|
||||
|
||||
<div id="reader-message" class="message">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="reader-toolbar" class="toolbar toolbar-hidden">
|
||||
<li><button id="close-button" class="button close-button"/></li>
|
||||
@ -30,14 +32,15 @@
|
||||
<ul id="style-dropdown" class="dropdown">
|
||||
<li><button class="dropdown-toggle button style-button"/></li>
|
||||
<li class="dropdown-popup">
|
||||
<ul id="font-type-buttons"></ul>
|
||||
<div id="font-type-buttons"></div>
|
||||
<hr></hr>
|
||||
<div id="font-size-buttons">
|
||||
<button id="font-size-minus" class="minus-button"/>
|
||||
<button id="font-size-sample"/>
|
||||
<button id="font-size-plus" class="plus-button"/>
|
||||
</div>
|
||||
<hr></hr>
|
||||
<ul id="color-scheme-buttons" class="segmented-button"></ul>
|
||||
<div id="color-scheme-buttons"></div>
|
||||
<div class="dropdown-arrow"/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -228,7 +228,7 @@ body {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
/*======= Controls toolbar =======*/
|
||||
|
||||
.toolbar {
|
||||
font-family: sans-serif;
|
||||
@ -275,18 +275,19 @@ body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*======= Font style popup =======*/
|
||||
|
||||
.dropdown-popup {
|
||||
min-width: 250px;
|
||||
text-align: start;
|
||||
position: absolute;
|
||||
left: 48px; /* offset to account for toolbar width */
|
||||
z-index: 1000;
|
||||
background-color: #FBFBFB;
|
||||
font-size: 14px;
|
||||
visibility: hidden;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #B5B5B5;
|
||||
box-shadow: 0px 1px 12px #666;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dropdown-popup > hr {
|
||||
@ -313,81 +314,74 @@ body {
|
||||
|
||||
#font-type-buttons,
|
||||
#font-size-buttons,
|
||||
.segmented-button {
|
||||
#color-scheme-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > li,
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button,
|
||||
.segmented-button > li {
|
||||
flex: 1 0 auto;
|
||||
#color-scheme-buttons > button {
|
||||
text-align: center;
|
||||
border-left: 1px solid #B5B5B5;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#font-type-buttons > li,
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button {
|
||||
width: 100px; /* combined with flex, this acts as a minimum width */
|
||||
width: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.segmented-button > li {
|
||||
width: 30px; /* combined with flex, this acts as a minimum width */
|
||||
line-height: 20px;
|
||||
#color-scheme-buttons > button {
|
||||
width: 33%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#font-type-buttons > li:first-child,
|
||||
#font-type-buttons > button:first-child,
|
||||
#font-size-buttons > button:first-child,
|
||||
.segmented-button > li:first-child {
|
||||
#color-scheme-buttons > button:first-child {
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > a,
|
||||
.segmented-button > li > a {
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > a {
|
||||
#font-type-buttons > button {
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
line-height: 50px;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.segmented-button > li > a {
|
||||
display: block;
|
||||
font-family: sans-serif;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
#font-type-buttons > li:active:hover,
|
||||
#font-type-buttons > li.selected {
|
||||
#font-type-buttons > button:active:hover,
|
||||
#font-type-buttons > button.selected {
|
||||
border-bottom: 3px solid #FC6420;
|
||||
}
|
||||
|
||||
#font-type-buttons > button > div {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
#font-size-buttons > li:hover {
|
||||
#font-size-buttons > button:hover {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.dropdown.open,
|
||||
.button:active,
|
||||
#font-size-buttons > li:active,
|
||||
#font-size-buttons > li.selected {
|
||||
#font-size-buttons > button:active,
|
||||
#font-size-buttons > button.selected {
|
||||
background-color: #DADADA;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > .sans-serif {
|
||||
font-weight: lighter;
|
||||
/* Only used on Android */
|
||||
#font-size-sample {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#font-type-buttons > li > div {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
.serif-button {
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.minus-button,
|
||||
@ -400,6 +394,8 @@ body {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/*======= Toolbar icons =======*/
|
||||
|
||||
/* Android-only controls */
|
||||
.share-button {
|
||||
display: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user