webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-01-03 23:42:28 +03:00
Code Activity

Lexical: Revamped image node resize method

Browse Source 
Changed from using a decorator to using a helper that watches for image
selections to then display a resize helper.
Also changes resizer to use a ghost and apply changes on end instead of
continuosly during resize.
This commit is contained in:
Dan Brown
2024-09-07 18:39:58 +01:00
parent 1c9afcb84e
commit e5b6d28bca
10 changed files with 251 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
resources/sass/_editor.scss
View File

@@ -31,6 +31,7 @@ body.editor-is-fullscreen {
}
}
.editor-content-wrap {
position: relative;
overflow-y: scroll;
}
@@ -287,23 +288,20 @@ body.editor-is-fullscreen {
position: relative;
display: inline-flex;
}
.editor-image-decorator {
.editor-image-resizer {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: inline-block;
&.selected {
border: 1px dashed var(--editor-color-primary);
}
outline: 2px dashed var(--editor-color-primary);
}
.editor-image-decorator-handle {
.editor-image-resizer-handle {
position: absolute;
display: block;
width: 10px;
height: 10px;
border: 2px solid var(--editor-color-primary);
z-index: 3;
background-color: #FFF;
user-select: none;
&.nw {
@@ -327,6 +325,20 @@ body.editor-is-fullscreen {
cursor: sw-resize;
}
}
.editor-image-resizer-ghost {
opacity: 0.5;
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.editor-image-resizer.active .editor-image-resizer-ghost {
display: block;
}
.editor-table-marker {
position: fixed;