mirror of
https://github.com/fzumpe/foundry-usernotes.git
synced 2026-06-06 21:00:03 +02:00
set styling for jodit editor and settings
This commit is contained in:
Florian Zumpe
parent
0b89998c23
commit
d4671086a4
@ -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(
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user