diff --git a/scripts/user-notes-settings.js b/scripts/user-notes-settings.js index 9fec390..d6f8e5b 100644 --- a/scripts/user-notes-settings.js +++ b/scripts/user-notes-settings.js @@ -121,6 +121,11 @@ export function userNotesApplySettingsToOpenWindow() { export function userNotesApplyWindowSettings(win) { const appearance = userNotesLoadValidatedAppearance(); + win.style.setProperty( + "--user-notes-window-background-solid", + appearance.windowBackgroundColor + ); + win.style.setProperty( "--user-notes-window-background", userNotesHexToRgba( diff --git a/scripts/user-notes-window.js b/scripts/user-notes-window.js index a4d3361..d9dec30 100644 --- a/scripts/user-notes-window.js +++ b/scripts/user-notes-window.js @@ -171,6 +171,12 @@ export function userNotesResetPositionAndSize() { ); userNotesSavePosition(win); + + const editor = win.__userNotesEditor; + + if (editor?.events) { + editor.events.fire("resize"); + } } } @@ -234,6 +240,12 @@ export function userNotesMakeDraggable(win) { drag = null; userNotesSavePosition(win); + + const editor = win.__userNotesEditor; + + if (editor?.events) { + editor.events.fire("resize"); + } }); handle.addEventListener("pointercancel", event => { @@ -243,6 +255,12 @@ export function userNotesMakeDraggable(win) { drag = null; userNotesSavePosition(win); + + const editor = win.__userNotesEditor; + + if (editor?.events) { + editor.events.fire("resize"); + } }); } @@ -397,6 +415,10 @@ export function userNotesOpenNotes() { if (editor) { editor.focus(); + + if (editor.events) { + editor.events.fire("resize"); + } } else { win.querySelector(".user-notes-editor")?.focus(); } @@ -451,6 +473,12 @@ export function userNotesOpenNotes() { userNotesSaveNotes(userNotesGetEditorValue(win)); userNotesSetStatus("Gespeichert"); userNotesSavePosition(win); + + const editor = win.__userNotesEditor; + + if (editor?.events) { + editor.events.fire("resize"); + } }); win.querySelector(".user-notes-close")?.addEventListener("click", () => { @@ -475,6 +503,12 @@ export function userNotesOpenNotes() { } userNotesSavePosition(win); + + const editor = win.__userNotesEditor; + + if (editor?.events) { + editor.events.fire("resize"); + } }); resizeObserver.observe(win); @@ -484,6 +518,10 @@ export function userNotesOpenNotes() { if (win.__userNotesEditor) { win.__userNotesEditor.focus(); + + if (win.__userNotesEditor.events) { + win.__userNotesEditor.events.fire("resize"); + } } else { editorElement.focus(); } @@ -502,4 +540,4 @@ export function userNotesRefreshOpenWindow() { oldWin.remove(); userNotesOpenNotes(); -} \ No newline at end of file +} diff --git a/styles/user-notes-settings.css b/styles/user-notes-settings.css index db1a3a9..69ec60c 100644 --- a/styles/user-notes-settings.css +++ b/styles/user-notes-settings.css @@ -1,12 +1,21 @@ -.user-notes-appearance-settings { +.user-notes-appearance-settings, +.user-notes-backup-settings { padding: 0.75rem; } -.user-notes-appearance-settings .notes { +.user-notes-appearance-settings .notes, +.user-notes-backup-settings .notes { margin-top: 0; margin-bottom: 0.75rem; } +.user-notes-backup-settings .warning { + padding: 0.5rem; + border: 1px solid var(--color-border-highlight, #ff6400); + border-radius: 4px; + background: rgba(255, 100, 0, 0.12); +} + .user-notes-appearance-settings fieldset { margin: 0 0 0.75rem 0; padding: 0.75rem; @@ -20,11 +29,13 @@ font-weight: bold; } -.user-notes-appearance-settings .form-group { +.user-notes-appearance-settings .form-group, +.user-notes-backup-settings .form-group { align-items: center; } -.user-notes-appearance-settings .form-fields { +.user-notes-appearance-settings .form-fields, +.user-notes-backup-settings .form-fields { display: flex; align-items: center; gap: 0.5rem; @@ -64,21 +75,41 @@ white-space: nowrap; } +/* + * Dialog footer: + * Row 1: Apply + Save side-by-side. + * Row 2: Reset colors full width. + */ .user-notes-appearance-settings .sheet-footer, .user-notes-appearance-footer { margin-top: 0.75rem; display: flex; - align-items: center; + flex-direction: column; + align-items: stretch; gap: 0.5rem; } .user-notes-primary-actions { - flex: 1 1 auto; - display: flex; - align-items: center; + flex-direction: row; + align-items: stretch; gap: 0.5rem; + + width: 100%; +} + +.user-notes-primary-actions button, +.user-notes-appearance-footer > .user-notes-reset-appearance { + height: 2rem; + min-height: 2rem; + + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + + box-sizing: border-box; } .user-notes-primary-actions button { @@ -87,4 +118,17 @@ .user-notes-appearance-footer > .user-notes-reset-appearance { flex: 0 0 auto; + width: 100%; +} + +.user-notes-backup-settings .sheet-footer { + margin-top: 0.75rem; + + display: flex; + align-items: center; + gap: 0.5rem; +} + +.user-notes-backup-settings .sheet-footer button { + flex: 1 1 auto; } diff --git a/styles/user-notes-window.css b/styles/user-notes-window.css index ea54589..ff2061a 100644 --- a/styles/user-notes-window.css +++ b/styles/user-notes-window.css @@ -92,44 +92,27 @@ background: rgba(255, 255, 255, 0.16); } +/* + * Fixed inner padding: + * The editor is pinned to the window content area and grows/shrinks with it. + */ .user-notes-content { flex: 1 1 auto; min-height: 0; + min-width: 0; display: flex; + padding: 0.5rem; - box-sizing: border-box; + + overflow: hidden; } -.user-notes-content .jodit-container { - flex: 1 1 auto; - width: 100% !important; - height: 100% !important; - min-width: 0; - min-height: 0; - - box-sizing: border-box; -} - -.user-notes-content .jodit-workplace { - min-height: 0 !important; -} - -.user-notes-content .jodit-wysiwyg { - min-height: 0 !important; - background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92)); - color: var(--user-notes-textarea-color, #111111); -} - -.user-notes-content .jodit-toolbar__box { - flex: 0 0 auto; -} - -.user-notes-content .jodit-status-bar { - display: none; -} - +/* + * Original textarea fallback. + * Jodit replaces/wraps this element when available. + */ .user-notes-editor { flex: 1 1 auto; @@ -160,6 +143,153 @@ outline-offset: 0; } +/* + * Jodit layout. + * These rules force Jodit to fill the padded content area and inherit + * the configured User Notes colors. + */ +.user-notes-content .jodit-container, +.user-notes-content .jodit { + flex: 1 1 auto; + + width: 100% !important; + height: 100% !important; + + min-width: 0 !important; + min-height: 0 !important; + + display: flex !important; + flex-direction: column !important; + + box-sizing: border-box; + overflow: hidden; + + background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92)) !important; + color: var(--user-notes-textarea-color, #111111) !important; +} + +/* + * Toolbar remains at the top and uses the window colors. + */ +.user-notes-content .jodit-toolbar__box, +.user-notes-content .jodit-toolbar__box:not(:empty) { + flex: 0 0 auto; + + opacity: 1 !important; + + background: var(--user-notes-window-background-solid, #191813) !important; + color: var(--user-notes-window-text-color, #f0f0e0) !important; + + border-color: var(--color-border-light-primary, #7a695a) !important; +} + +.user-notes-content .jodit-toolbar-button, +.user-notes-content .jodit-toolbar-button__button, +.user-notes-content .jodit-toolbar-button__trigger, +.user-notes-content .jodit-toolbar-button__text, +.user-notes-content .jodit-icon { + opacity: 1 !important; + color: var(--user-notes-window-text-color, #f0f0e0) !important; + fill: var(--user-notes-window-text-color, #f0f0e0) !important; +} + +.user-notes-content .jodit-toolbar-button__button, +.user-notes-content .jodit-toolbar-button__trigger { + background: transparent !important; +} + +.user-notes-content .jodit-toolbar-button__button:hover, +.user-notes-content .jodit-toolbar-button__trigger:hover { + background: rgba(255, 255, 255, 0.16) !important; +} +/* + * Toolbar buttons. + */ +.user-notes-content .jodit-toolbar-button, +.user-notes-content .jodit-toolbar-button__button, +.user-notes-content .jodit-toolbar-button__trigger { + color: var(--user-notes-window-text-color, #f0f0e0) !important; +} + +.user-notes-content .jodit-toolbar-button__button:hover, +.user-notes-content .jodit-toolbar-button__trigger:hover { + background: rgba(255, 255, 255, 0.16) !important; +} + +/* + * Dropdown / popup content should remain readable. + */ +.user-notes-content .jodit-popup, +.user-notes-content .jodit-dialog, +.user-notes-content .jodit-ui-group, +.user-notes-content .jodit-toolbar-editor-collection { + color: #111111; +} + +/* + * Main editor workplace fills all remaining height below the toolbar. + */ +.user-notes-content .jodit-workplace { + flex: 1 1 auto !important; + + width: 100% !important; + height: auto !important; + + min-width: 0 !important; + min-height: 0 !important; + + display: flex !important; + flex-direction: column !important; + + overflow: hidden !important; + + background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92)) !important; + color: var(--user-notes-textarea-color, #111111) !important; +} + +/* + * Actual editable area. + */ +.user-notes-content .jodit-wysiwyg { + flex: 1 1 auto !important; + + width: 100% !important; + height: 100% !important; + + min-width: 0 !important; + min-height: 0 !important; + + box-sizing: border-box; + + overflow: auto !important; + + background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92)) !important; + color: var(--user-notes-textarea-color, #111111) !important; + + font-family: inherit; + font-size: 0.95rem; + line-height: 1.35; +} + +/* + * Do not let Jodit reset child text colors away from the configured editor color. + * Inline styles generated by the editor may still override this when users + * explicitly choose colors inside the editor. + */ +.user-notes-content .jodit-wysiwyg * { + color: inherit; +} + +/* + * Hide Jodit's status bar to preserve vertical space. + */ +.user-notes-content .jodit-status-bar { + display: none !important; +} + +/* + * Tables inside notes. + */ .user-notes-window table { border-collapse: collapse; width: auto; @@ -169,4 +299,4 @@ .user-notes-window td { border: 1px solid currentColor; padding: 0.25rem 0.4rem; -} \ No newline at end of file +}