diff --git a/resources/icons/close.svg b/resources/icons/close.svg index c2ef46510..afd3f4671 100644 --- a/resources/icons/close.svg +++ b/resources/icons/close.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts index 09b6e060b..d1d96b172 100644 --- a/resources/js/wysiwyg/index.ts +++ b/resources/js/wysiwyg/index.ts @@ -49,6 +49,9 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st setEditorContentFromHtml(editor, htmlContent); const debugView = document.getElementById('lexical-debug'); + if (debugView) { + debugView.hidden = true; + } editor.registerUpdateListener(({editorState}) => { console.log('editorState', editorState.toJSON()); if (debugView) { diff --git a/resources/js/wysiwyg/ui/framework/modals.ts b/resources/js/wysiwyg/ui/framework/modals.ts index bfc5fc619..6b09accdc 100644 --- a/resources/js/wysiwyg/ui/framework/modals.ts +++ b/resources/js/wysiwyg/ui/framework/modals.ts @@ -1,7 +1,7 @@ import {EditorForm, EditorFormDefinition} from "./forms"; import {el} from "../../helpers"; import {EditorContainerUiElement} from "./core"; - +import closeIcon from "@icons/close.svg"; export interface EditorModalDefinition { title: string; @@ -37,7 +37,12 @@ export class EditorFormModal extends EditorContainerUiElement { } protected buildDOM(): HTMLElement { - const closeButton = el('button', {class: 'editor-modal-close', type: 'button', title: this.trans('Close')}, ['x']); + const closeButton = el('button', { + class: 'editor-modal-close', + type: 'button', + title: this.trans('Close'), + }); + closeButton.innerHTML = closeIcon; closeButton.addEventListener('click', this.hide.bind(this)); const modal = el('div', {class: 'editor-modal editor-form-modal'}, [ diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts index df514e504..25a7e7815 100644 --- a/resources/js/wysiwyg/ui/toolbars.ts +++ b/resources/js/wysiwyg/ui/toolbars.ts @@ -87,17 +87,17 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement { new EditorButton(fullscreen), // Test - new EditorButton({ - label: 'Test button', - action(context: EditorUiContext) { - context.editor.update(() => { - // Do stuff - }); - }, - isActive() { - return false; - } - }) + // new EditorButton({ + // label: 'Test button', + // action(context: EditorUiContext) { + // context.editor.update(() => { + // // Do stuff + // }); + // }, + // isActive() { + // return false; + // } + // }) ]), ]); } diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss index f5e166cc3..1f932e147 100644 --- a/resources/sass/_editor.scss +++ b/resources/sass/_editor.scss @@ -176,17 +176,38 @@ body.editor-is-fullscreen { } .editor-modal { background-color: #FFF; - border: 1px solid #DDD; - padding: 1rem; border-radius: 4px; + overflow: hidden; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); } .editor-modal-header { display: flex; justify-content: space-between; - margin-bottom: 1rem; + align-items: stretch; + background-color: var(--color-primary); + color: #FFF; } .editor-modal-title { - font-weight: 700; + padding: 8px $-m; +} +.editor-modal-close { + color: #FFF; + padding: 8px $-m; + align-items: center; + justify-content: center; + cursor: pointer; + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } + svg { + width: 1rem; + height: 1rem; + fill: currentColor; + display: block; + } +} +.editor-modal-body { + padding: $-m; } // Specific UI elements @@ -293,6 +314,81 @@ body.editor-is-fullscreen { } } +// Editor form elements +.editor-form-field-wrapper { + margin-bottom: .5rem; +} +.editor-form-field-input { + display: block; + width: 100%; + min-width: 250px; + border: 1px solid #DDD; + padding: .5rem; + border-radius: 4px; + color: #444; +} +textarea.editor-form-field-input { + font-family: var(--font-code); + width: 350px; + height: 250px; + font-size: 12px; +} +.editor-form-field-label { + color: #444; + font-weight: 700; + font-size: 12px; +} +.editor-form-actions { + display: flex; + justify-content: end; + gap: $-s; + margin-top: $-m; +} +.editor-form-actions > button { + display: block; + font-size: 0.85rem; + line-height: 1.4em; + padding: $-xs*1.3 $-m; + font-weight: 400; + border-radius: 4px; + cursor: pointer; + box-shadow: none; + &:focus { + outline: 1px dotted currentColor; + outline-offset: -$-xs; + box-shadow: none; + filter: brightness(90%); + } +} +.editor-form-action-primary { + background-color: var(--color-primary); + color: #FFF; + border: 1px solid var(--color-primary); + &:hover { + @include lightDark(box-shadow, $bs-light, $bs-dark); + filter: brightness(110%); + } +} +.editor-form-action-secondary { + border: 1px solid; + @include lightDark(border-color, #CCC, #666); + @include lightDark(color, #666, #AAA); + &:hover, &:focus, &:active { + @include lightDark(color, #444, #BBB); + border: 1px solid #CCC; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); + background-color: #F2F2F2; + @include lightDark(background-color, #f8f8f8, #444); + filter: none; + } + &:active { + border-color: #BBB; + background-color: #DDD; + color: #666; + box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); + } +} + // Editor theme styles .editor-theme-bold { font-weight: bold;