diff --git a/web/images/gv-toolbarButton-download.svg b/web/images/gv-toolbarButton-download.svg new file mode 100755 index 000000000..d56cf3ce7 --- /dev/null +++ b/web/images/gv-toolbarButton-download.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/toolbar-geckoview.js b/web/toolbar-geckoview.js index a873dbacd..fbde707fe 100644 --- a/web/toolbar-geckoview.js +++ b/web/toolbar-geckoview.js @@ -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 }; diff --git a/web/viewer-geckoview.css b/web/viewer-geckoview.css index cf71484b3..6f9c1d1cc 100644 --- a/web/viewer-geckoview.css +++ b/web/viewer-geckoview.css @@ -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 { diff --git a/web/viewer-geckoview.html b/web/viewer-geckoview.html index a13ba8195..2e2653ce7 100644 --- a/web/viewer-geckoview.html +++ b/web/viewer-geckoview.html @@ -81,6 +81,12 @@ See https://github.com/adobe-type-tools/cmap-resources
+
+ +
+
@@ -103,12 +109,6 @@ See https://github.com/adobe-type-tools/cmap-resources
-
- -
-