зеркало из https://github.com/mozilla/gecko-dev.git
Bug 998031 - Reader Mode toolbar should scroll in and out instead of fading. r=bnicholson
--HG-- extra : rebase_source : f5021a6e3f36cb8d8e1e380ed1763361bad95489 extra : amend_source : 2304c25e5570f0e1f505b0778ac1873e9b86dd8c
This commit is contained in:
Родитель
eb3938e55c
Коммит
39d8969088
|
@ -280,15 +280,12 @@ body {
|
|||
/*======= Controls toolbar =======*/
|
||||
|
||||
.toolbar {
|
||||
font-family: "Clear Sans",sans-serif;
|
||||
transition-property: visibility, opacity;
|
||||
transition-duration: 0.7s;
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
font-family: sans-serif;
|
||||
transition-property: bottom;
|
||||
transition-duration: 0.3s;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
@ -296,11 +293,8 @@ body {
|
|||
border-top: 1px solid #D7D9DB;
|
||||
}
|
||||
|
||||
.toolbar-hidden {
|
||||
transition-property: visibility, opacity;
|
||||
transition-duration: 0.7s;
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
.toolbar[visible] {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.toolbar > * {
|
||||
|
@ -590,12 +584,20 @@ body {
|
|||
.button {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
bottom: -57px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
bottom: -41px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
|
|
|
@ -45,8 +45,6 @@ let AboutReader = function(mm, win) {
|
|||
this._toolbarElementRef = Cu.getWeakReference(doc.getElementById("reader-toolbar"));
|
||||
this._messageElementRef = Cu.getWeakReference(doc.getElementById("reader-message"));
|
||||
|
||||
this._toolbarEnabled = false;
|
||||
|
||||
this._scrollOffset = win.pageYOffset;
|
||||
|
||||
doc.getElementById("container").addEventListener("click", this, false);
|
||||
|
@ -256,7 +254,8 @@ AboutReader.prototype = {
|
|||
|
||||
// Display the toolbar when all its initial component states are known
|
||||
if (isInitialStateChange) {
|
||||
this._setToolbarVisibility(true);
|
||||
// Hacks! Delay showing the toolbar to avoid position: fixed; jankiness. See bug 975533.
|
||||
this._win.setTimeout(() => this._setToolbarVisibility(true), 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -524,24 +523,22 @@ AboutReader.prototype = {
|
|||
},
|
||||
|
||||
_getToolbarVisibility: function Reader_getToolbarVisibility() {
|
||||
return !this._toolbarElement.classList.contains("toolbar-hidden");
|
||||
return this._toolbarElement.hasAttribute("visible");
|
||||
},
|
||||
|
||||
_setToolbarVisibility: function Reader_setToolbarVisibility(visible) {
|
||||
let dropdown = this._doc.getElementById("style-dropdown");
|
||||
dropdown.classList.remove("open");
|
||||
|
||||
if (!this._toolbarEnabled)
|
||||
if (this._getToolbarVisibility() === visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't allow visible toolbar until banner state is known
|
||||
if (this._isReadingListItem == -1)
|
||||
return;
|
||||
|
||||
if (this._getToolbarVisibility() === visible)
|
||||
return;
|
||||
|
||||
this._toolbarElement.classList.toggle("toolbar-hidden");
|
||||
if (visible) {
|
||||
this._toolbarElement.setAttribute("visible", true);
|
||||
} else {
|
||||
this._toolbarElement.removeAttribute("visible");
|
||||
}
|
||||
this._setSystemUIVisibility(visible);
|
||||
|
||||
if (!visible) {
|
||||
|
@ -711,9 +708,6 @@ AboutReader.prototype = {
|
|||
this._updateImageMargins();
|
||||
this._requestReadingListStatus();
|
||||
|
||||
this._toolbarEnabled = true;
|
||||
this._setToolbarVisibility(true);
|
||||
|
||||
this._requestFavicon();
|
||||
},
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="reader-toolbar" class="toolbar toolbar-hidden">
|
||||
<ul id="reader-toolbar" class="toolbar">
|
||||
<li><button id="close-button" class="button close-button"/></li>
|
||||
<li><button id="share-button" class="button share-button"/></li>
|
||||
<ul id="style-dropdown" class="dropdown">
|
||||
|
|
Загрузка…
Ссылка в новой задаче