From: Alexander Ebert Date: Wed, 5 Jul 2023 11:22:34 +0000 (+0200) Subject: Add a preview feature when restoring a draft X-Git-Tag: 6.0.0_Alpha_5~31 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a2f13f31a7be48e5d7648f67c856e1cb560b53f0;p=GitHub%2FWoltLab%2FWCF.git Add a preview feature when restoring a draft See https://www.woltlab.com/community/thread/300352-dialog-entwurf-wiederherstellen-verbessern/ --- diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index 92cccf7f41..b365d2f985 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -25,6 +25,8 @@ {jsphrase name='wcf.editor.button.group.list'} {jsphrase name='wcf.editor.button.spoiler'} {jsphrase name='wcf.editor.restoreDraft'} + {jsphrase name='wcf.editor.restoreDraft.preview'} + {jsphrase name='wcf.editor.restoreDraft.restoreOrDiscard'} {include file='mediaJavaScript'} diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Autosave.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Autosave.ts index a4e4e0d7f7..86ff69cc0e 100644 --- a/ts/WoltLabSuite/Core/Component/Ckeditor/Autosave.ts +++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Autosave.ts @@ -41,12 +41,28 @@ function getRestoreDialog(): HTMLElement { + `; return dialog; } +function getReturnToRestoreDialogOverlay(): HTMLElement { + const overlay = document.createElement("div"); + overlay.classList.add("ck", "ck-toolbar__items"); + + overlay.innerHTML = ` + + `; + + return overlay; +} + export function deleteDraft(identifier: string): void { try { window.localStorage.removeItem(getLocalStorageKey(identifier)); @@ -147,6 +163,30 @@ export function setupRestoreDraft(editor: ClassicEditor, identifier: string): vo revertEditor(); }); + + const lockId = Symbol("autosave"); + dialog.querySelector('button[data-type="preview"]')!.addEventListener("click", () => { + editor.enableReadOnlyMode(lockId); + + const overlay = getReturnToRestoreDialogOverlay(); + + const toolbar = editor.ui.view.toolbar.element!; + const existingItems = Array.from(toolbar.children) as HTMLElement[]; + existingItems.forEach((items) => (items.hidden = true)); + + toolbar.append(overlay); + dialogWrapper.hidden = true; + + const closeOverlayButton = overlay.querySelector("button")!; + closeOverlayButton.addEventListener("click", () => { + editor.disableReadOnlyMode(lockId); + + dialogWrapper.hidden = false; + overlay.remove(); + existingItems.forEach((items) => (items.hidden = false)); + }); + closeOverlayButton.focus(); + }); } function removeExpiredDrafts(): void { diff --git a/wcfsetup/install/files/acp/templates/wysiwyg.tpl b/wcfsetup/install/files/acp/templates/wysiwyg.tpl index 92cccf7f41..b365d2f985 100644 --- a/wcfsetup/install/files/acp/templates/wysiwyg.tpl +++ b/wcfsetup/install/files/acp/templates/wysiwyg.tpl @@ -25,6 +25,8 @@ {jsphrase name='wcf.editor.button.group.list'} {jsphrase name='wcf.editor.button.spoiler'} {jsphrase name='wcf.editor.restoreDraft'} + {jsphrase name='wcf.editor.restoreDraft.preview'} + {jsphrase name='wcf.editor.restoreDraft.restoreOrDiscard'} {include file='mediaJavaScript'} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Autosave.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Autosave.js index f459c21579..80dffdd5a9 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Autosave.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Autosave.js @@ -30,10 +30,23 @@ define(["require", "exports", "../../Core", "../../Language", "../../StringUtil" + `; return dialog; } + function getReturnToRestoreDialogOverlay() { + const overlay = document.createElement("div"); + overlay.classList.add("ck", "ck-toolbar__items"); + overlay.innerHTML = ` + + `; + return overlay; + } function deleteDraft(identifier) { try { window.localStorage.removeItem(getLocalStorageKey(identifier)); @@ -115,6 +128,24 @@ define(["require", "exports", "../../Core", "../../Language", "../../StringUtil" } revertEditor(); }); + const lockId = Symbol("autosave"); + dialog.querySelector('button[data-type="preview"]').addEventListener("click", () => { + editor.enableReadOnlyMode(lockId); + const overlay = getReturnToRestoreDialogOverlay(); + const toolbar = editor.ui.view.toolbar.element; + const existingItems = Array.from(toolbar.children); + existingItems.forEach((items) => (items.hidden = true)); + toolbar.append(overlay); + dialogWrapper.hidden = true; + const closeOverlayButton = overlay.querySelector("button"); + closeOverlayButton.addEventListener("click", () => { + editor.disableReadOnlyMode(lockId); + dialogWrapper.hidden = false; + overlay.remove(); + existingItems.forEach((items) => (items.hidden = false)); + }); + closeOverlayButton.focus(); + }); } exports.setupRestoreDraft = setupRestoreDraft; function removeExpiredDrafts() { diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss index 08bdc09aff..f905d25b68 100644 --- a/wcfsetup/install/files/style/ui/ckeditor.scss +++ b/wcfsetup/install/files/style/ui/ckeditor.scss @@ -312,6 +312,10 @@ html[data-color-scheme="dark"] { margin-top: 20px; } +.ckeditor5__restoreDraft__buttons button[data-type="preview"] { + margin-right: auto; +} + html[data-color-scheme="dark"] { .ckeditor5__restoreDraft__dialog { border-color: var(--wcfContentBorderInner); diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index ddad1405ad..1a7f982349 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -3910,6 +3910,8 @@ Dateianhänge: + + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 78f93e5c52..896da4e0a8 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -3856,6 +3856,8 @@ Attachments: + +