diff --git a/app/appearance/icons/ant/icon.js b/app/appearance/icons/ant/icon.js index baecc52e1..4fe98530f 100644 --- a/app/appearance/icons/ant/icon.js +++ b/app/appearance/icons/ant/icon.js @@ -294,8 +294,12 @@ document.body.insertAdjacentHTML('afterbegin', ` + + + + - + diff --git a/app/appearance/icons/ant/icon.json b/app/appearance/icons/ant/icon.json index 0d54ba534..8e1e881cb 100644 --- a/app/appearance/icons/ant/icon.json +++ b/app/appearance/icons/ant/icon.json @@ -2,5 +2,5 @@ "name": "ant", "author": "Vanessa", "url": "https://github.com/Vanessa219", - "version": "1.27.0" + "version": "1.28.0" } diff --git a/app/appearance/icons/index.html b/app/appearance/icons/index.html index bf2fc798a..46d3ac163 100644 --- a/app/appearance/icons/index.html +++ b/app/appearance/icons/index.html @@ -34,6 +34,12 @@ iconArrowDown +
+ + + + iconUnpin +
diff --git a/app/appearance/icons/material/icon.js b/app/appearance/icons/material/icon.js index 6ab1bc6ff..b87b03643 100644 --- a/app/appearance/icons/material/icon.js +++ b/app/appearance/icons/material/icon.js @@ -289,8 +289,12 @@ document.body.insertAdjacentHTML('afterbegin', ` + + + + - + diff --git a/app/appearance/icons/material/icon.json b/app/appearance/icons/material/icon.json index ad2eb3f84..4037ba913 100644 --- a/app/appearance/icons/material/icon.json +++ b/app/appearance/icons/material/icon.json @@ -2,5 +2,5 @@ "name": "material", "author": "Vanessa", "url": "https://github.com/Vanessa219", - "version": "1.27.0" + "version": "1.28.0" } diff --git a/app/src/block/Panel.ts b/app/src/block/Panel.ts index 357ee44a2..0e86fba2a 100644 --- a/app/src/block/Panel.ts +++ b/app/src/block/Panel.ts @@ -80,13 +80,13 @@ export class BlockPanel { const iconsElement = hasClosestByClassName(target, "block__icons"); if (iconsElement) { const pingElement = iconsElement.querySelector('[data-type="pin"]'); - if (pingElement.classList.contains("block__icon--active")) { - pingElement.classList.remove("block__icon--active"); + if (this.element.getAttribute("data-pin") === "true") { pingElement.setAttribute("aria-label", window.siyuan.languages.pin); + pingElement.querySelector("use").setAttribute("xlink:href", "#iconPin"); this.element.setAttribute("data-pin", "false"); } else { - pingElement.classList.add("block__icon--active"); pingElement.setAttribute("aria-label", window.siyuan.languages.unpin); + pingElement.querySelector("use").setAttribute("xlink:href", "#iconUnpin"); this.element.setAttribute("data-pin", "true"); } event.preventDefault(); @@ -105,13 +105,13 @@ export class BlockPanel { if (type === "close") { this.destroy(); } else if (type === "pin") { - if (target.classList.contains("block__icon--active")) { - target.classList.remove("block__icon--active"); + if (this.element.getAttribute("data-pin") === "true") { target.setAttribute("aria-label", window.siyuan.languages.pin); + target.querySelector("use").setAttribute("xlink:href", "#iconPin"); this.element.setAttribute("data-pin", "false"); } else { - target.classList.add("block__icon--active"); target.setAttribute("aria-label", window.siyuan.languages.unpin); + target.querySelector("use").setAttribute("xlink:href", "#iconUnpin"); this.element.setAttribute("data-pin", "true"); } } else if (type === "open") { @@ -134,8 +134,8 @@ export class BlockPanel { }); } const pinElement = this.element.firstElementChild.querySelector('[data-type="pin"]'); - pinElement.classList.add("block__icon--active"); pinElement.setAttribute("aria-label", window.siyuan.languages.unpin); + pinElement.querySelector("use").setAttribute("xlink:href", "#iconUnpin"); this.element.setAttribute("data-pin", "true"); }); /// #endif diff --git a/app/src/boot/onGetConfig.ts b/app/src/boot/onGetConfig.ts index 4d90a0203..7016ec6bc 100644 --- a/app/src/boot/onGetConfig.ts +++ b/app/src/boot/onGetConfig.ts @@ -445,11 +445,12 @@ ${response.data.replace("%pages", "").replace("%pa
`); const pinElement = document.getElementById("pinWindow"); pinElement.addEventListener("click", () => { - pinElement.classList.toggle("toolbar__item--active"); - if (pinElement.classList.contains("toolbar__item--active")) { + if (pinElement.getAttribute("aria-label") === window.siyuan.languages.pin) { + pinElement.querySelector("use").setAttribute("xlink:href", "#iconUnpin"); pinElement.setAttribute("aria-label", window.siyuan.languages.unpin); ipcRenderer.send(Constants.SIYUAN_CMD, "setAlwaysOnTopTrue"); } else { + pinElement.querySelector("use").setAttribute("xlink:href", "#iconPin"); pinElement.setAttribute("aria-label", window.siyuan.languages.pin); ipcRenderer.send(Constants.SIYUAN_CMD, "setAlwaysOnTopFalse"); } diff --git a/app/src/dialog/moveResize.ts b/app/src/dialog/moveResize.ts index 94ed4919c..c9e564a57 100644 --- a/app/src/dialog/moveResize.ts +++ b/app/src/dialog/moveResize.ts @@ -44,7 +44,9 @@ export const moveResize = (element: HTMLElement, afterCB?: (type: string) => voi documentSelf.ondragstart = () => false; + let hasMove = false; documentSelf.onmousemove = (moveEvent: MouseEvent) => { + hasMove = true; if (!element) { return; } @@ -129,7 +131,7 @@ export const moveResize = (element: HTMLElement, afterCB?: (type: string) => voi documentSelf.ondragstart = null; documentSelf.onselectstart = null; documentSelf.onselect = null; - if (afterCB) { + if (hasMove && afterCB) { afterCB(type); } }; diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts index 60b7c2fd9..54b5e3b87 100644 --- a/app/src/layout/dock/index.ts +++ b/app/src/layout/dock/index.ts @@ -87,7 +87,7 @@ export class Dock { } if (!showDock) { this.element.firstElementChild.innerHTML = ` - + `; this.element.classList.add("fn__none"); } else { @@ -125,6 +125,7 @@ export class Dock { } else if (target.classList.contains("dock__item")) { this.togglePin(); target.setAttribute("aria-label", this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin); + target.querySelector("use").setAttribute("xlink:href", this.pin ? "#iconUnpin" : "#iconPin"); event.preventDefault(); break; } @@ -698,7 +699,7 @@ export class Dock { } } else { this.element.firstElementChild.innerHTML = `${html} - + `; } } else { diff --git a/app/src/layout/topBar.ts b/app/src/layout/topBar.ts index 59c45c229..3298e8aeb 100644 --- a/app/src/layout/topBar.ts +++ b/app/src/layout/topBar.ts @@ -296,7 +296,7 @@ export const setZoom = (type: "zoomIn" | "zoomOut" | "restore") => { const openPlugin = (app: App, target: Element) => { const menu = new Menu("topBarPlugin"); - if(!isHuawei()) { + if (!isHuawei()) { menu.addItem({ icon: "iconSettings", label: window.siyuan.languages.manage, @@ -322,7 +322,7 @@ const openPlugin = (app: App, target: Element) => { plugin.topBarIcons.forEach(item => { const hasUnpin = window.siyuan.storage[Constants.LOCAL_PLUGINTOPUNPIN].includes(item.id); const submenu = [{ - icon: "iconPin", + icon: hasUnpin ? "iconPin" : "iconUnpin", label: hasUnpin ? window.siyuan.languages.pin : window.siyuan.languages.unpin, click() { if (hasUnpin) { diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index 27e6faafd..bbc5d1d6b 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -1587,7 +1587,7 @@ export const tableMenu = (protyle: IProtyle, nodeElement: Element, cellElement: } const isPinHead = nodeElement.getAttribute("custom-pinthead"); menus.push({ - icon: "iconPin", + icon: isPinHead ? "iconUnpin" : "iconPin", label: isPinHead ? window.siyuan.languages.unpinTableHead : window.siyuan.languages.pinTableHead, click: () => { const html = nodeElement.outerHTML; diff --git a/app/src/menus/tab.ts b/app/src/menus/tab.ts index 19315a679..d21b69665 100644 --- a/app/src/menus/tab.ts +++ b/app/src/menus/tab.ts @@ -193,7 +193,7 @@ export const initTabMenu = (app: App, tab: Tab) => { if (tab.headElement.classList.contains("item--pin")) { window.siyuan.menus.menu.append(new MenuItem({ label: window.siyuan.languages.unpin, - icon: "iconPin", + icon: "iconUnpin", click: () => { tab.unpin(); } diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 10a3f2b82..da5161a1e 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -801,7 +801,7 @@ export class Toolbar { } else if (isInlineMemo) { title = window.siyuan.languages.memo; } - const isPin = this.subElement.querySelector('[data-type="pin"]')?.classList.contains("block__icon--active"); + const isPin = this.subElement.querySelector('[data-type="pin"]')?.getAttribute("aria-label") === window.siyuan.languages.unpin; const pinData: IObject = {}; if (isPin) { const textElement = this.subElement.querySelector(".b3-text-field") as HTMLTextAreaElement; @@ -824,7 +824,7 @@ export class Toolbar { - + @@ -859,11 +859,11 @@ export class Toolbar { if (!btnElement) { if (event.detail === 2) { const pingElement = headerElement.querySelector('[data-type="pin"]'); - if (pingElement.classList.contains("block__icon--active")) { - pingElement.classList.remove("block__icon--active"); + if (pingElement.getAttribute("aria-label") === window.siyuan.languages.unpin) { + pingElement.querySelector("svg use").setAttribute("xlink:href", "#iconPin"); pingElement.setAttribute("aria-label", window.siyuan.languages.pin); } else { - pingElement.classList.add("block__icon--active"); + pingElement.querySelector("svg use").setAttribute("xlink:href", "#iconUnpin"); pingElement.setAttribute("aria-label", window.siyuan.languages.unpin); } event.preventDefault(); @@ -874,15 +874,15 @@ export class Toolbar { event.stopPropagation(); switch (btnElement.getAttribute("data-type")) { case "close": - this.subElement.querySelector('[data-type="pin"]').classList.remove("block__icon--active"); + this.subElement.querySelector('[data-type="pin"]').setAttribute("aria-label", window.siyuan.languages.pin); hideElements(["util"], protyle); break; case "pin": - if (btnElement.classList.contains("block__icon--active")) { - btnElement.classList.remove("block__icon--active"); + if (btnElement.getAttribute("aria-label") === window.siyuan.languages.unpin) { + btnElement.querySelector("svg use").setAttribute("xlink:href", "#iconPin"); btnElement.setAttribute("aria-label", window.siyuan.languages.pin); } else { - btnElement.classList.add("block__icon--active"); + btnElement.querySelector("svg use").setAttribute("xlink:href", "#iconUnpin"); btnElement.setAttribute("aria-label", window.siyuan.languages.unpin); } break; @@ -937,7 +937,7 @@ export class Toolbar { /// #if !MOBILE moveResize(this.subElement, () => { const pinElement = headerElement.querySelector('[data-type="pin"]'); - pinElement.classList.add("block__icon--active"); + pinElement.querySelector("svg use").setAttribute("xlink:href", "#iconUnpin"); pinElement.setAttribute("aria-label", window.siyuan.languages.unpin); this.subElement.firstElementChild.setAttribute("data-drag", "true"); }); @@ -993,7 +993,7 @@ export class Toolbar { return; } if (event.key === "Escape" || matchHotKey("⌘↩", event)) { - this.subElement.querySelector('[data-type="pin"]').classList.remove("block__icon--active"); + this.subElement.querySelector('[data-type="pin"]').setAttribute("aria-label", window.siyuan.languages.pin); hideElements(["util"], protyle); } else if (event.key === "Tab") { // https://github.com/siyuan-note/siyuan/issues/5270 diff --git a/app/src/protyle/ui/hideElements.ts b/app/src/protyle/ui/hideElements.ts index 89edcec6e..b8bc4f18a 100644 --- a/app/src/protyle/ui/hideElements.ts +++ b/app/src/protyle/ui/hideElements.ts @@ -33,7 +33,7 @@ export const hideElements = (panels: string[], protyle?: IProtyle, focusHide = f } if (protyle.toolbar && panels.includes("util")) { const pinElement = protyle.toolbar.subElement.querySelector('[data-type="pin"]'); - if (focusHide || !pinElement || (pinElement && !pinElement.classList.contains("block__icon--active"))) { + if (focusHide || !pinElement || (pinElement && pinElement.getAttribute("aria-label") === window.siyuan.languages.pin)) { protyle.toolbar.subElement.classList.add("fn__none"); if (protyle.toolbar.subElementCloseCB) { protyle.toolbar.subElementCloseCB();