diff --git a/apps/client/src/layouts/layout_commons.tsx b/apps/client/src/layouts/layout_commons.tsx index 031ef03de..62f810430 100644 --- a/apps/client/src/layouts/layout_commons.tsx +++ b/apps/client/src/layouts/layout_commons.tsx @@ -22,16 +22,8 @@ import RevisionsDialog from "../widgets/dialogs/revisions.js"; import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js"; import InfoDialog from "../widgets/dialogs/info.js"; import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js"; -import PopupEditorDialog from "../widgets/dialogs/popup_editor.js"; -import FlexContainer from "../widgets/containers/flex_container.js"; -import NoteIconWidget from "../widgets/note_icon"; -import PromotedAttributesWidget from "../widgets/promoted_attributes.js"; import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx"; -import NoteTitleWidget from "../widgets/note_title.jsx"; -import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.js"; -import NoteList from "../widgets/collections/NoteList.jsx"; -import NoteDetail from "../widgets/NoteDetail.jsx"; -import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx"; +import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx"; export function applyModals(rootContainer: RootContainer) { rootContainer @@ -57,16 +49,6 @@ export function applyModals(rootContainer: RootContainer) { .child() .child() .child() - .child(new PopupEditorDialog() - .child(new FlexContainer("row") - .class("title-row") - .css("align-items", "center") - .cssBlock(".title-row > * { margin: 5px; }") - .child() - .child()) - .child() - .child(new PromotedAttributesWidget()) - .child() - .child()) + .child() .child(); } diff --git a/apps/client/src/widgets/dialogs/PopupEditor.css b/apps/client/src/widgets/dialogs/PopupEditor.css new file mode 100644 index 000000000..ce6494f33 --- /dev/null +++ b/apps/client/src/widgets/dialogs/PopupEditor.css @@ -0,0 +1,62 @@ +/** Reduce the z-index of modals so that ckeditor popups are properly shown on top of it. */ +body.popup-editor-open > .modal-backdrop { z-index: 998; } +body.popup-editor-open .popup-editor-dialog { z-index: 999; } +body.popup-editor-open .ck-clipboard-drop-target-line { z-index: 1000; } + +body.desktop .modal.popup-editor-dialog .modal-dialog { + max-width: 75vw; +} + +.modal.popup-editor-dialog .modal-header .modal-title { + font-size: 1.1em; +} + +.modal.popup-editor-dialog .modal-header .title-row { + flex-grow: 1; + display: flex; + align-items: center; +} + +.modal.popup-editor-dialog .modal-header .title-row > * { + margin: 5px; +} + +.modal.popup-editor-dialog .modal-body { + padding: 0; + height: 75vh; + overflow: auto; +} + +.modal.popup-editor-dialog .note-detail-editable-text { + padding: 0 1em; +} + +.modal.popup-editor-dialog .title-row, +.modal.popup-editor-dialog .modal-title, +.modal.popup-editor-dialog .note-icon-widget { + height: 32px; +} + +.modal.popup-editor-dialog .note-icon-widget { + width: 32px; + margin: 0; + padding: 0; +} + +.modal.popup-editor-dialog .note-icon-widget button.note-icon, +.modal.popup-editor-dialog .note-title-widget input.note-title { + font-size: 1em; +} + +.modal.popup-editor-dialog .classic-toolbar-widget { + position: sticky; + top: 0; + inset-inline-start: 0; + inset-inline-end: 0; + background: var(--modal-background-color); + z-index: 998; +} + +.modal.popup-editor-dialog .note-detail-file { + padding: 0; +} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx new file mode 100644 index 000000000..7969e3ac0 --- /dev/null +++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx @@ -0,0 +1,31 @@ +import { useState } from "preact/hooks"; +import Modal from "../react/Modal"; +import "./PopupEditor.css"; +import { useTriliumEvent } from "../react/hooks"; +import NoteTitleWidget from "../note_title"; +import NoteIcon from "../note_icon"; + +export default function PopupEditor() { + const [ shown, setShown ] = useState(false); + + useTriliumEvent("openInPopup", () => { + setShown(true); + }); + + return ( + + + + + )} + className="popup-editor-dialog" + size="lg" + show={shown} + onHidden={() => setShown(false)} + > + Body goes here + + ) +} diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts index 80f8f5915..bc862822e 100644 --- a/apps/client/src/widgets/dialogs/popup_editor.ts +++ b/apps/client/src/widgets/dialogs/popup_editor.ts @@ -4,82 +4,6 @@ import { openDialog } from "../../services/dialog.js"; import BasicWidget, { ReactWrappedWidget } from "../basic_widget.js"; import Container from "../containers/container.js"; -const TPL = /*html*/`\ - -`; - export default class PopupEditorDialog extends Container { private noteContext: NoteContext; @@ -110,10 +34,6 @@ export default class PopupEditorDialog extends Container { } async openInPopupEvent({ noteIdOrPath }: EventData<"openInPopup">) { - const $dialog = await openDialog(this.$widget, false, { - focus: false - }); - await this.noteContext.setNote(noteIdOrPath, { viewScope: { readOnlyTemporarilyDisabled: true diff --git a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx index e19032d46..789e0d006 100644 --- a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx +++ b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx @@ -41,6 +41,7 @@ export default function CKEditorWithWatchdog({ containerRef: externalContainerRe const [ editor, setEditor ] = useState(); const { parentComponent, ntxId } = useNoteContext(); + console.log("Register with ntxId", ntxId); useKeyboardShortcuts("text-detail", containerRef, parentComponent, ntxId); useImperativeHandle(editorApi, () => ({