[GeckoView] Change the toolbar for a static one on the top of the viewer (bug 1829366)
This commit is contained in:
Calixte Denizet
parent
28f96d2ac2
commit
e00d26798c
3
web/images/gv-toolbarButton-download.svg
Executable file
3
web/images/gv-toolbarButton-download.svg
Executable file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.969 10.059C17.262 9.766 17.737 9.766 18.03 10.059C18.323 10.352 18.323 10.827 18.03 11.12L12.15 17H11.35L5.46896 11.12C5.17596 10.827 5.17596 10.352 5.46896 10.059C5.76196 9.766 6.23696 9.766 6.52996 10.059L11 14.529V2.75C11 2.336 11.336 2 11.75 2C12.164 2 12.5 2.336 12.499 2.75V14.529L16.969 10.059ZM4.98193 19.7L5.78193 20.5H17.7169L18.5169 19.7V17.75C18.5169 17.336 18.8529 17 19.2669 17C19.6809 17 20.0169 17.336 20.0169 17.75V19.5C20.0169 20.881 18.8979 22 17.5169 22H5.98193C4.60093 22 3.48193 20.881 3.48193 19.5V17.75C3.48193 17.336 3.81793 17 4.23193 17C4.64593 17 4.98193 17.336 4.98193 17.75V19.7Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 782 B |
@ -20,39 +20,22 @@
|
||||
* @property {HTMLButtonElement} download - Button to download the document.
|
||||
*/
|
||||
|
||||
const TIME_BEFORE_SHOWING_TOOLBAR = 200;
|
||||
|
||||
class Toolbar {
|
||||
#buttons;
|
||||
|
||||
#checkForScrollEndBound = this.#checkForScrollEnd.bind(this);
|
||||
|
||||
#eventBus;
|
||||
|
||||
#hideBound = this.#hide.bind(this);
|
||||
|
||||
#mainContainer;
|
||||
|
||||
#scrollEndTimeoutId = null;
|
||||
|
||||
#showBound = this.#show.bind(this);
|
||||
|
||||
#toolbar;
|
||||
|
||||
/**
|
||||
* @param {ToolbarOptions} options
|
||||
* @param {EventBus} eventBus
|
||||
* @param {IL10n} _l10n - Localization service.
|
||||
*/
|
||||
constructor(options, eventBus, _l10n) {
|
||||
this.#toolbar = options.container;
|
||||
this.#mainContainer = options.mainContainer;
|
||||
this.#eventBus = eventBus;
|
||||
this.#buttons = [{ element: options.download, eventName: "download" }];
|
||||
|
||||
// Bind the event listeners for click and various other actions.
|
||||
this.#bindListeners(options);
|
||||
this.#checkForScrollEnd();
|
||||
}
|
||||
|
||||
setPageNumber(pageNumber, pageLabel) {}
|
||||
@ -75,36 +58,6 @@ class Toolbar {
|
||||
}
|
||||
|
||||
updateLoadingIndicatorState(loading = false) {}
|
||||
|
||||
#checkForScrollEnd() {
|
||||
if (this.#scrollEndTimeoutId !== null) {
|
||||
clearTimeout(this.#scrollEndTimeoutId);
|
||||
}
|
||||
this.#scrollEndTimeoutId = setTimeout(
|
||||
this.#showBound,
|
||||
TIME_BEFORE_SHOWING_TOOLBAR
|
||||
);
|
||||
}
|
||||
|
||||
#show() {
|
||||
this.#toolbar.classList.toggle("show", true);
|
||||
this.#mainContainer.removeEventListener(
|
||||
"scroll",
|
||||
this.#checkForScrollEndBound
|
||||
);
|
||||
this.#scrollEndTimeoutId = null;
|
||||
this.#mainContainer.addEventListener("scroll", this.#hideBound);
|
||||
}
|
||||
|
||||
#hide() {
|
||||
this.#toolbar.classList.toggle("show", false);
|
||||
this.#mainContainer.removeEventListener("scroll", this.#hideBound);
|
||||
this.#mainContainer.addEventListener(
|
||||
"scroll",
|
||||
this.#checkForScrollEndBound
|
||||
);
|
||||
this.#checkForScrollEnd();
|
||||
}
|
||||
}
|
||||
|
||||
export { Toolbar };
|
||||
|
||||
@ -30,7 +30,11 @@
|
||||
--dialog-button-bg-color: rgba(12, 12, 13, 0.1);
|
||||
--dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
|
||||
|
||||
--toolbarButton-download-icon: url(images/toolbarButton-download.svg);
|
||||
--toolbar-bg-color: #f9f9fb;
|
||||
--toolbar-divider-color: #e0e0e6;
|
||||
--toolbar-fg-color: #15141a;
|
||||
|
||||
--toolbarButton-download-icon: url(images/gv-toolbarButton-download.svg);
|
||||
}
|
||||
|
||||
:root:dir(rtl) {
|
||||
@ -45,6 +49,10 @@
|
||||
--scrollbar-bg-color: rgba(35, 35, 39, 1);
|
||||
--dialog-button-bg-color: rgba(92, 92, 97, 1);
|
||||
--dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
|
||||
|
||||
--toolbar-bg-color: #2b2a33;
|
||||
--toolbar-divider-color: #5b5b66;
|
||||
--toolbar-fg-color: #fbfbfe;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,7 +101,7 @@ body {
|
||||
#viewerContainer {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: 41px 0 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -150,14 +158,16 @@ body {
|
||||
}
|
||||
|
||||
#floatingToolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: auto;
|
||||
bottom: 5%;
|
||||
right: 5%;
|
||||
background-color: transparent;
|
||||
transition-property: opacity;
|
||||
transition-duration: 400ms;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: content-box;
|
||||
border-block-end: solid 1px var(--toolbar-divider-color);
|
||||
background-color: var(--toolbar-bg-color);
|
||||
}
|
||||
|
||||
#floatingToolbar.show {
|
||||
@ -171,26 +181,22 @@ body {
|
||||
}
|
||||
|
||||
.toolbarButton {
|
||||
margin: 2px;
|
||||
padding: 8px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: transparent;
|
||||
border-radius: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-style: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(20px) contrast(100%) invert(100%);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
outline: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbarButton > span {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: var(--toolbar-fg-color);
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -199,17 +205,12 @@ body {
|
||||
}
|
||||
|
||||
.toolbarButton::before {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
content: "";
|
||||
background-color: transparent;
|
||||
backdrop-filter: invert(100%);
|
||||
background-color: var(--toolbar-fg-color);
|
||||
mask-size: cover;
|
||||
}
|
||||
|
||||
.toolbarButton::before {
|
||||
opacity: var(--toolbar-icon-opacity);
|
||||
margin-inline: 12px 8px;
|
||||
}
|
||||
|
||||
#download::before {
|
||||
|
||||
@ -81,6 +81,12 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
|
||||
<div id="mainContainer">
|
||||
|
||||
<div id="floatingToolbar" class="show">
|
||||
<button id="download" class="toolbarButton" title="Save" tabindex="31" data-l10n-id="download">
|
||||
<span data-l10n-id="download_label">Download</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="viewerContainer" tabindex="0">
|
||||
<div id="viewer" class="pdfViewer"></div>
|
||||
</div>
|
||||
@ -103,12 +109,6 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
|
||||
</div> <!-- outerContainer -->
|
||||
|
||||
<div id="floatingToolbar">
|
||||
<button id="download" class="toolbarButton" title="Save" tabindex="31" data-l10n-id="save">
|
||||
<span data-l10n-id="save_label">Save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--#if !MOZCENTRAL-->
|
||||
<input type="file" id="fileInput" class="hidden">
|
||||
<!--#endif-->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user