Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Lexical: Added initial form/modal styles

Browse Source
This commit is contained in:
Dan Brown 2024-07-09 20:49:47 +01:00
parent 2c96af9aea
commit 51d8044a54
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 122 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/icons/close.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 216 B

After

Width:  |  Height:  |  Size: 179 B

3
resources/js/wysiwyg/index.ts
View File

@ -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) {

9
resources/js/wysiwyg/ui/framework/modals.ts
View File

@ -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'}, [

22
resources/js/wysiwyg/ui/toolbars.ts
View File

@ -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;
// }
// })
]),
]);
}

104
resources/sass/_editor.scss
View File

@ -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;