wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 871014 - (Part 2) Replace +/- font size setting UI with something more visual. r=bnicholson

Browse Source
This commit is contained in:
Margaret Leibovic 2013-05-14 14:55:43 -07:00
parent 9417086708
commit ad0e7c0dde
5 changed files with 61 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mobile/android/app/mobile.js
View File

@ -659,8 +659,8 @@ pref("reader.parse-on-load.enabled", true);
// Allow reader mode even on low-memory platforms
pref("reader.parse-on-load.force-enabled", false);
// The default of font size in reader (1-7)
pref("reader.font_size", 4);
// The default of font size in reader (1-5)
pref("reader.font_size", 3);
// The default color scheme in reader (light, dark, sepia, auto)
// auto = color automatically adjusts according to ambient light level

6
mobile/android/chrome/content/aboutReader.html
View File

@ -26,11 +26,11 @@
<ul class="dropdown">
<li><a class="dropdown-toggle button style-button" href="#"></a></li>
<li class="dropdown-popup">
<ul id="color-scheme-buttons" class="segmented-button"></ul>
<hr></hr>
<ul id="font-type-buttons" class="segmented-button"></ul>
<hr></hr>
<div id="font-size-control" class="step-control"></div>
<ul id="font-size-buttons" class="segmented-button"></ul>
<hr></hr>
<ul id="color-scheme-buttons" class="segmented-button"></ul>
</li>
</ul>
<li><a id="list-button" class="button list-button" href="#"></a></li>

99
mobile/android/chrome/content/aboutReader.js
View File

@ -85,11 +85,28 @@ let AboutReader = function(doc, win) {
this._setupSegmentedButton("font-type-buttons", fontTypeOptions, fontType, this._setFontType.bind(this));
this._setFontType(fontType);
let fontTitle = gStrings.GetStringFromName("aboutReader.textTitle");
this._fontSize = 0;
this._setupStepControl("font-size-control", fontTitle,
this._FONT_SIZE_MIN, this._FONT_SIZE_MAX, this._FONT_SIZE_STEP, Services.prefs.getIntPref("reader.font_size"),
this._onFontSizeChange.bind(this));
let fontSizeSample = gStrings.GetStringFromName("aboutReader.fontSizeSample");
let fontSizeOptions = [
{ name: fontSizeSample,
value: 1,
linkClass: "font-size1-sample" },
{ name: fontSizeSample,
value: 2,
linkClass: "font-size2-sample" },
{ name: fontSizeSample,
value: 3,
linkClass: "font-size3-sample" },
{ name: fontSizeSample,
value: 4,
linkClass: "font-size4-sample" },
{ name: fontSizeSample,
value: 5,
linkClass: "font-size5-sample" }
];
let fontSize = Services.prefs.getIntPref("reader.font_size");
this._setupSegmentedButton("font-size-buttons", fontSizeOptions, fontSize, this._setFontSize.bind(this));
this._setFontSize(fontSize);
dump("Decoding query arguments");
let queryArgs = this._decodeQueryString(win.location.href);
@ -109,10 +126,6 @@ let AboutReader = function(doc, win) {
}
AboutReader.prototype = {
_FONT_SIZE_MIN: 1,
_FONT_SIZE_MAX: 7,
_FONT_SIZE_STEP: 1,
_BLOCK_IMAGES_SELECTOR: ".content p > img:only-child, " +
".content p > a:only-child > img:only-child, " +
".content .wp-caption img, " +
@ -289,7 +302,7 @@ AboutReader.prototype = {
});
},
_onFontSizeChange: function Reader_onFontSizeChange(newFontSize) {
_setFontSize: function Reader_setFontSize(newFontSize) {
let bodyClasses = this._doc.body.classList;
if (this._fontSize > 0)
@ -558,69 +571,6 @@ AboutReader.prototype = {
return result;
},
_setupStepControl: function Reader_setupStepControl(id, name, min, max, step, initial, callback) {
let doc = this._doc;
let stepControl = doc.getElementById(id);
let title = this._doc.createElement("h1");
title.innerHTML = name;
stepControl.appendChild(title);
let plusButton = doc.createElement("div");
plusButton.className = "button plus-button";
stepControl.appendChild(plusButton);
let minusButton = doc.createElement("div");
minusButton.className = "button minus-button";
stepControl.appendChild(minusButton);
let updateControls = function() {
current = Math.max(min, Math.min(max, current));
if (current == min) {
minusButton.classList.add("disabled");
} else {
minusButton.classList.remove("disabled");
}
if (current == max) {
plusButton.classList.add("disabled");
} else {
plusButton.classList.remove("disabled");
}
}
let current = initial;
updateControls();
plusButton.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
aEvent.stopPropagation();
if (current < max) {
current += step;
updateControls();
callback(current);
}
}.bind(this), true);
minusButton.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
aEvent.stopPropagation();
if (current > min) {
current -= step;
updateControls();
callback(current);
}
}.bind(this), true);
// Always callback initial current setting
callback(current);
},
_setupSegmentedButton: function Reader_setupSegmentedButton(id, options, initialValue, callback) {
let doc = this._doc;
let segmentedButton = doc.getElementById(id);
@ -633,6 +583,9 @@ AboutReader.prototype = {
link.innerHTML = option.name;
item.appendChild(link);
if (option.linkClass !== undefined)
link.classList.add(option.linkClass);
link.style.MozUserSelect = 'none';
segmentedButton.appendChild(item);

6
mobile/android/locales/en-US/chrome/aboutReader.properties
View File

@ -5,8 +5,6 @@
aboutReader.loading=Loading...
aboutReader.loadError=Failed to load article from page
aboutReader.textTitle=Text
aboutReader.colorSchemeLight=Light
aboutReader.colorSchemeDark=Dark
aboutReader.colorSchemeSepia=Sepia
@ -15,4 +13,8 @@ aboutReader.colorSchemeAuto=Auto
aboutReader.fontTypeSansSerif=Sans
aboutReader.fontTypeSerif=Serif
# LOCALIZATION NOTE (aboutReader.fontSizeSample): String used to sample a relative font size
# for the font size setting. Tapping different samples will change the font size.
aboutReader.fontSizeSample=A
aboutReader.toolbarTip=Tap the screen to show reader options

124
mobile/android/themes/core/aboutReader.css
View File

@ -93,84 +93,63 @@ body {
}
.font-size1 > .header > h1 {
font-size: 23px;
}
.font-size2 > .header > h1 {
font-size: 25px;
}
.font-size3 > .header > h1 {
.font-size2 > .header > h1 {
font-size: 27px;
}
.font-size4 > .header > h1 {
.font-size3 > .header > h1 {
font-size: 29px;
}
.font-size5 > .header > h1 {
.font-size4 > .header > h1 {
font-size: 31px;
}
.font-size6 > .header > h1 {
.font-size5 > .header > h1 {
font-size: 33px;
}
.font-size7 > .header > h1 {
font-size: 35px;
}
/* This covers caption, domain, and credits
texts in the reader UI */
.font-size1 > .content .wp-caption-text,
.font-size1 > .content figcaption,
.font-size1 > .header > .domain,
.font-size1 > .header > .credits {
font-size: 6px;
font-size: 8px;
}
.font-size2 > .content .wp-caption-text,
.font-size2 > .content figcaption,
.font-size2 > .header > .domain,
.font-size2 > .header > .credits {
font-size: 8px;
font-size: 11px;
}
.font-size3 > .content .wp-caption-text,
.font-size3 > .content figcaption,
.font-size3 > .header > .domain,
.font-size3 > .header > .credits {
font-size: 11px;
font-size: 13px;
}
.font-size4 > .content .wp-caption-text,
.font-size4 > .content figcaption,
.font-size4 > .header > .domain,
.font-size4 > .header > .credits {
font-size: 13px;
font-size: 15px;
}
.font-size5 > .content .wp-caption-text,
.font-size5 > .content figcaption,
.font-size5 > .header > .domain,
.font-size5 > .header > .credits {
font-size: 15px;
}
.font-size6 > .content .wp-caption-text,
.font-size6 > .content figcaption,
.font-size6 > .header > .domain,
.font-size6 > .header > .credits {
font-size: 17px;
}
.font-size7 > .content .wp-caption-text,
.font-size7 > .content figcaption,
.font-size7 > .header > .domain,
.font-size7 > .header > .credits {
font-size: 19px;
}
.content {
display: none;
}
@ -300,34 +279,31 @@ body {
list-style: decimal !important;
}
.font-size1-sample,
.font-size1 > .content {
font-size: 10px !important;
}
.font-size2 > .content {
font-size: 12px !important;
}
.font-size3 > .content {
.font-size2-sample,
.font-size2 > .content {
font-size: 14px !important;
}
.font-size4 > .content {
.font-size3-sample,
.font-size3 > .content {
font-size: 16px !important;
}
.font-size5 > .content {
.font-size4-sample,
.font-size4 > .content {
font-size: 18px !important;
}
.font-size6 > .content {
.font-size5-sample,
.font-size5 > .content {
font-size: 20px !important;
}
.font-size7 > .content {
font-size: 22px !important;
}
.toolbar {
font-family: "Droid Sans",helvetica,arial,clean,sans-serif;
-moz-transition-property: visibility, opacity;
@ -399,6 +375,7 @@ body {
padding-bottom: 8px;
font-size: 14px;
box-shadow: 0px -1px 12px #333;
border-radius: 3px;
visibility: hidden;
}
@ -407,20 +384,9 @@ body {
height: 0px;
border: 0px;
border-top: 1px solid #ccc;
border-bottom: 1px solid white;
margin: 0px 0px 10px 0px;
float: left;
}
.dropdown-popup > hr:first-of-type {
float: none;
margin: 0;
}
.dropdown-popup .button:active {
background-color: #ccc;
}
.open > .dropdown-popup {
margin-top: 0px;
margin-bottom: 6px;
@ -444,14 +410,15 @@ body {
flex-direction: row;
list-style: none;
margin: 0;
padding: 5px;
padding: 10px 5px;
white-space: nowrap;
}
.segmented-button > li {
flex: 1 1 auto;
width: 50px; /* combined with flex, this acts as a minimum width */
flex: 1 0 auto;
text-align: center;
padding: 1px 5px;
line-height: 20px;
border-left: 1px solid #ccc;
}
@ -463,54 +430,15 @@ body {
.segmented-button > li > a:hover
.segmented-button > li > a:visited {
display: block;
padding: 10px 16px;
vertical-align: middle;
padding: 5px 0;
text-decoration: none;
color: black;
border-radius: 4px;
}
.segmented-button > li > a:active,
.segmented-button > li.selected > a {
background: #ccc;
}
.step-control {
width: 100%;
padding: 0px;
}
.step-control > h1 {
font-size: 16px;
font-weight: normal;
color: black;
margin: 0px;
margin-top: 12px;
margin-bottom: 20px;
margin-left: 10px;
float: left;
}
.step-control > .button {
float: right;
text-align: center;
width: 56px;
height: 43px;
background-size: 20px;
}
.step-control > .plus-button {
background-image: url('chrome://browser/skin/images/reader-plus-icon-mdpi.png');
border-left: 1px solid #ccc;
margin-right: 4px;
}
.step-control > .minus-button {
background-image: url('chrome://browser/skin/images/reader-minus-icon-mdpi.png');
}
.step-control > .disabled {
opacity: 0.25;
-moz-user-select: -moz-none;
font-weight: bold;
}
.toggle-button.on {