From 537401aa26efc79a63a2bf57e5e15cb1815acac3 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Sun, 21 Jul 2024 18:04:18 +0800
Subject: [PATCH] add: toggle pane buttons in workspace
---
addon/chrome/content/styles/editor.css | 6 +
.../content/styles/workspace/workspace.css | 8 +
src/elements/workspace/workspace.ts | 66 +++++++-
src/modules/editor/toolbar.ts | 16 +-
src/utils/config.ts | 150 +-----------------
5 files changed, 95 insertions(+), 151 deletions(-)
diff --git a/addon/chrome/content/styles/editor.css b/addon/chrome/content/styles/editor.css
index 18d42762..519a8db3 100644
--- a/addon/chrome/content/styles/editor.css
+++ b/addon/chrome/content/styles/editor.css
@@ -43,3 +43,9 @@
.primary-editor hr {
max-width: unset;
}
+
+.toolbar .end,
+.toolbar .start {
+ width: auto;
+ gap: 4px;
+}
diff --git a/addon/chrome/content/styles/workspace/workspace.css b/addon/chrome/content/styles/workspace/workspace.css
index 1a4f8793..15059884 100644
--- a/addon/chrome/content/styles/workspace/workspace.css
+++ b/addon/chrome/content/styles/workspace/workspace.css
@@ -11,6 +11,14 @@ bn-workspace #__addonRef__-editor-main #links-container,
display: none;
}
+bn-workspace #__addonRef__-center-container {
+ min-width: fit-content;
+}
+
+bn-workspace #__addonRef__-center-container #__addonRef__-editor-main {
+ min-width: 370px;
+}
+
.bn-note-preview iframe {
height: var(--details-height, 450px);
border-radius: 8px;
diff --git a/src/elements/workspace/workspace.ts b/src/elements/workspace/workspace.ts
index 1764af8a..ff4b2361 100644
--- a/src/elements/workspace/workspace.ts
+++ b/src/elements/workspace/workspace.ts
@@ -1,4 +1,5 @@
import { config } from "../../../package.json";
+import { ICONS } from "../../utils/config";
import {
getPrefJSON,
registerPrefObserver,
@@ -108,6 +109,8 @@ export class Workspace extends PluginCEBase {
this._persistState();
});
+ this._initEditor();
+
this.resizeOb = new ResizeObserver(() => {
if (!this.editor) return;
this._addon.api.editor.scroll(
@@ -160,7 +163,15 @@ export class Workspace extends PluginCEBase {
}
}
- toggleContext(open: boolean) {
+ toggleOutline(open?: boolean) {
+ if (typeof open !== "boolean") {
+ open = this._leftSplitter.getAttribute("state") === "collapsed";
+ }
+
+ this._leftSplitter.setAttribute("state", open ? "open" : "collapsed");
+ }
+
+ toggleContext(open?: boolean) {
if (typeof open !== "boolean") {
open = this._rightSplitter.getAttribute("state") === "collapsed";
}
@@ -168,6 +179,59 @@ export class Workspace extends PluginCEBase {
this._rightSplitter.setAttribute("state", open ? "open" : "collapsed");
}
+ async _initEditor() {
+ await waitUtilAsync(() => !!this._editorElement._editorInstance);
+ const editor = this._editorElement._editorInstance;
+ await editor._initPromise;
+
+ const _document = editor._iframeWindow.document;
+ const toolbar = _document.querySelector(".toolbar") as HTMLDivElement;
+
+ const toggleOutline = this._addon.data.ztoolkit.UI.createElement(
+ _document,
+ "button",
+ {
+ classList: ["toolbar-button"],
+ properties: {
+ innerHTML: ICONS.workspaceToggleLeft,
+ title: "Toggle left pane",
+ },
+ listeners: [
+ {
+ type: "click",
+ listener: (e) => {
+ this.toggleOutline();
+ },
+ },
+ ],
+ },
+ );
+
+ toolbar.querySelector(".start")?.append(toggleOutline);
+
+ const toggleContext = this._addon.data.ztoolkit.UI.createElement(
+ _document,
+ "button",
+ {
+ classList: ["toolbar-button"],
+ properties: {
+ innerHTML: ICONS.workspaceToggleRight,
+ title: "Toggle right pane",
+ },
+ listeners: [
+ {
+ type: "click",
+ listener: (e) => {
+ this.toggleContext();
+ },
+ },
+ ],
+ },
+ );
+
+ toolbar.querySelector(".end")?.prepend(toggleContext);
+ }
+
_persistState() {
const state = {
leftState: this._leftSplitter.getAttribute("state"),
diff --git a/src/modules/editor/toolbar.ts b/src/modules/editor/toolbar.ts
index 03f3a7ed..7e2f742f 100644
--- a/src/modules/editor/toolbar.ts
+++ b/src/modules/editor/toolbar.ts
@@ -11,14 +11,16 @@ export async function initEditorToolbar(editor: Zotero.EditorInstance) {
const noteItem = editor._item;
const _document = editor._iframeWindow.document;
+ const toolbar = _document.querySelector(".toolbar") as HTMLDivElement;
+ // Link creator
registerEditorToolbarElement(
editor,
- _document.querySelector(".toolbar") as HTMLDivElement,
+ toolbar,
"start",
ztoolkit.UI.createElement(_document, "button", {
classList: ["toolbar-button"],
properties: {
- innerHTML: ICONS.addon,
+ innerHTML: ICONS.linkCreator,
title: "Link creator",
},
listeners: [
@@ -293,9 +295,17 @@ async function registerEditorToolbarElement(
toolbar: HTMLDivElement,
position: "start" | "middle" | "end",
elem: HTMLElement,
+ after: boolean = false,
) {
await editor._initPromise;
- toolbar.querySelector(`.${position}`)?.append(elem);
+ const target = toolbar.querySelector(`.${position}`);
+ if (target) {
+ if (after) {
+ target.append(elem);
+ } else {
+ target.prepend(elem);
+ }
+ }
return elem;
}
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 5bd67ffc..05f56159 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,155 +1,11 @@
export const ICONS = {
- settings: ``,
- addon: ``,
- linkAfter: `
-
-
- `,
- linkBefore: `
-
-
- `,
+ linkCreator: ``,
previewImage: ``,
resizeImage: ``,
imageViewerPin: ``,
imageViewerPined: ``,
- switchOutline: ``,
- saveOutlineImage: ``,
- saveOutlineFreeMind: ``,
- workspace_outline_collapsed: ``,
- workspace_outline_open: ``,
- workspace_preview_collapsed: ``,
- workspace_preview_open: ``,
- workspace_notes_collapsed: ``,
- workspace_notes_open: ``,
+ workspaceToggleLeft: ``,
+ workspaceToggleRight: ``,
readerQuickNote: ``,
embedLinkContent: ``,
updateLinkText: ``,