0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🐛 https://github.com/siyuan-note/siyuan/issues/13144

Browse source
This commit is contained in:
Vanessa 2024-11-16 00:07:41 +08:00
parent 88de880608
commit 704f23fe02
5 changed files with 15 additions and 183 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/appearance/themes/daylight/theme.css
View file

@ -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;

2
app/appearance/themes/midnight/theme.css
View file

@ -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;

3
app/src/asset/pdf/pdf_sidebar.js
View file

@ -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;

169
app/src/asset/pdf/pdf_sidebar_resizer.js
View file

@ -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 };

22
app/src/assets/scss/pdf/_pdf.scss
View file

@ -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 {