diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css index ea47eaa1e..19bd645e8 100644 --- a/app/appearance/themes/daylight/theme.css +++ b/app/appearance/themes/daylight/theme.css @@ -171,7 +171,7 @@ /* PDF */ --b3-pdf-selection: #d0e9c8; - --b3-pdf-sidebar-width: 200px; + --sidebar-width: 200px; --b3-pdf-offset: 0; --b3-pdf-background1: var(--b3-theme-error); --b3-pdf-background2: #f5822e; diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css index f306b21aa..2baa55cee 100644 --- a/app/appearance/themes/midnight/theme.css +++ b/app/appearance/themes/midnight/theme.css @@ -170,7 +170,7 @@ /* PDF */ --b3-pdf-selection: #779170; - --b3-pdf-sidebar-width: 200px; + --sidebar-width: 200px; --b3-pdf-offset: 0; --b3-pdf-background1: var(--b3-theme-error); --b3-pdf-background2: #f5822e; diff --git a/app/src/asset/pdf/pdf_sidebar.js b/app/src/asset/pdf/pdf_sidebar.js index 8b7bbe981..f8ba9fd8b 100644 --- a/app/src/asset/pdf/pdf_sidebar.js +++ b/app/src/asset/pdf/pdf_sidebar.js @@ -497,7 +497,8 @@ class PDFSidebar { } #mouseMove(evt) { - let width = evt.clientX; + // NOTE + let width = evt.clientX - this.outerContainer.getBoundingClientRect().left; // For sidebar resizing to work correctly in RTL mode, invert the width. if (this.#isRTL) { width = this.outerContainerWidth - width; diff --git a/app/src/asset/pdf/pdf_sidebar_resizer.js b/app/src/asset/pdf/pdf_sidebar_resizer.js deleted file mode 100644 index e6675ff83..000000000 --- a/app/src/asset/pdf/pdf_sidebar_resizer.js +++ /dev/null @@ -1,169 +0,0 @@ -/* Copyright 2017 Mozilla Foundation - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { docStyle } from "./ui_utils.js"; - -// NOTE -const SIDEBAR_WIDTH_VAR = "--b3-pdf-sidebar-width"; -const SIDEBAR_MIN_WIDTH = 200; // pixels -const SIDEBAR_RESIZING_CLASS = "sidebarResizing"; - -/** - * @typedef {Object} PDFSidebarResizerOptions - * @property {HTMLDivElement} outerContainer - The outer container - * (encasing both the viewer and sidebar elements). - * @property {HTMLDivElement} resizer - The DOM element that can be dragged in - * order to adjust the width of the sidebar. - */ - -class PDFSidebarResizer { - /** - * @param {PDFSidebarResizerOptions} options - * @param {EventBus} eventBus - The application event bus. - * @param {IL10n} l10n - Localization service. - */ - constructor(options, eventBus, l10n) { - this.isRTL = false; - this.sidebarOpen = false; - this._width = null; - this._outerContainerWidth = null; - this._boundEvents = Object.create(null); - - this.outerContainer = options.outerContainer; - this.resizer = options.resizer; - this.eventBus = eventBus; - // NOTE - this.isRTL = false; - this._addEventListeners(); - } - - /** - * @type {number} - */ - get outerContainerWidth() { - // NOTE - return this.outerContainer.clientWidth; - } - - /** - * @private - * returns {boolean} Indicating if the sidebar width was updated. - */ - _updateWidth(width = 0) { - // Prevent the sidebar from becoming too narrow, or from occupying more - // than half of the available viewer width. - const maxWidth = Math.floor(this.outerContainerWidth / 2); - if (width > maxWidth) { - width = maxWidth; - } - if (width < SIDEBAR_MIN_WIDTH) { - width = SIDEBAR_MIN_WIDTH; - } - // Only update the UI when the sidebar width did in fact change. - if (width === this._width) { - return false; - } - this._width = width; - - docStyle.setProperty(SIDEBAR_WIDTH_VAR, `${width}px`); - return true; - } - - /** - * @private - */ - _mouseMove(evt) { - // NOTE - let width = evt.clientX - this.outerContainer.getBoundingClientRect().left; - // For sidebar resizing to work correctly in RTL mode, invert the width. - if (this.isRTL) { - width = this.outerContainerWidth - width; - } - this._updateWidth(width); - } - - /** - * @private - */ - _mouseUp(evt) { - // Re-enable the `transition-duration` rules when sidebar resizing ends... - this.outerContainer.classList.remove(SIDEBAR_RESIZING_CLASS); - // ... and ensure that rendering will always be triggered. - this.eventBus.dispatch("resize", { source: this }); - - const _boundEvents = this._boundEvents; - window.removeEventListener("mousemove", _boundEvents.mouseMove); - window.removeEventListener("mouseup", _boundEvents.mouseUp); - } - - /** - * @private - */ - _addEventListeners() { - const _boundEvents = this._boundEvents; - _boundEvents.mouseMove = this._mouseMove.bind(this); - _boundEvents.mouseUp = this._mouseUp.bind(this); - - this.resizer.addEventListener("mousedown", evt => { - if (evt.button !== 0) { - return; - } - // Disable the `transition-duration` rules when sidebar resizing begins, - // in order to improve responsiveness and to avoid visual glitches. - this.outerContainer.classList.add(SIDEBAR_RESIZING_CLASS); - - window.addEventListener("mousemove", _boundEvents.mouseMove); - window.addEventListener("mouseup", _boundEvents.mouseUp); - }); - - this.eventBus._on("sidebarviewchanged", evt => { - this.sidebarOpen = !!evt?.view; - }); - - this.eventBus._on("resize", evt => { - // When the *entire* viewer is resized, such that it becomes narrower, - // ensure that the sidebar doesn't end up being too wide. - if (evt?.source !== window) { - return; - } - // Always reset the cached width when the viewer is resized. - this._outerContainerWidth = null; - - if (!this._width) { - // The sidebar hasn't been resized, hence no need to adjust its width. - return; - } - // NOTE: If the sidebar is closed, we don't need to worry about - // visual glitches nor ensure that rendering is triggered. - if (!this.sidebarOpen) { - this._updateWidth(this._width); - return; - } - this.outerContainer.classList.add(SIDEBAR_RESIZING_CLASS); - const updated = this._updateWidth(this._width); - - Promise.resolve().then(() => { - this.outerContainer.classList.remove(SIDEBAR_RESIZING_CLASS); - // Trigger rendering if the sidebar width changed, to avoid - // depending on the order in which 'resize' events are handled. - if (updated) { - this.eventBus.dispatch("resize", { source: this }); - } - }); - }); - } -} - -export { PDFSidebarResizer }; diff --git a/app/src/assets/scss/pdf/_pdf.scss b/app/src/assets/scss/pdf/_pdf.scss index 3ffe1ba11..6ff8135c5 100644 --- a/app/src/assets/scss/pdf/_pdf.scss +++ b/app/src/assets/scss/pdf/_pdf.scss @@ -139,13 +139,13 @@ position: absolute; top: 30px; bottom: 0; - width: var(--b3-pdf-sidebar-width); + width: var(--sidebar-width); visibility: hidden; z-index: 3; transition-duration: 200ms; transition-timing-function: ease; transition-property: left; - left: calc(0px - var(--b3-pdf-sidebar-width)); + left: calc(0px - var(--sidebar-width)); background-color: var(--b3-theme-surface); } @@ -208,7 +208,7 @@ #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) { transition-property: left; - left: var(--b3-pdf-sidebar-width); + left: var(--sidebar-width); } #toolbarSidebar, @@ -265,7 +265,7 @@ } #outerContainer.sidebarOpen #loadingBar { - left: var(--b3-pdf-sidebar-width); + left: var(--sidebar-width); } #outerContainer.sidebarResizing #loadingBar { @@ -475,7 +475,10 @@ } #thumbnailView .thumbnail { - margin-bottom: 5px; + float: left; + width: var(--thumbnail-width); + height: var(--thumbnail-height); + margin: 0 10px 5px; padding: 1px; border: 7px solid transparent; border-radius: 2px; @@ -490,12 +493,9 @@ } .thumbnailImage { - border: 1px solid rgba(0, 0, 0, 0); - box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3); - opacity: .8; - z-index: 99; - background-color: rgba(255, 255, 255, 1); - background-clip: content-box; + width: var(--thumbnail-width); + height: var(--thumbnail-height); + opacity: 0.9; } .thumbnailSelectionRing {