mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Use display: grid for editor toolbar, editor and preview (#7787) 

* make toolbar, editor and preview display: grid

* correct display of bitmap editor

* grid-area: toolbar not only when preview is shown

* use dedicated classes and tc-grid and no brittle CSS selectors

* no need for width: 100%

* cleanup style definitions

* use semantic classnames
This commit is contained in:
Simon Huber 2023-10-17 12:54:20 +02:00 committed by GitHub
parent 2ffbfd84a5
commit c185e373c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/ui/EditTemplate/body/default.tid
View File

@ -18,7 +18,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
importState=<<qualify $:/state/ImportImage>> >
<$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> >
<div>
<div class={{{ [function[edit-preview-state]match[yes]then[tc-tiddler-preview]] +[join[ ]] }}}>
<div class={{{ [function[edit-preview-state]match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}>
<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>

43
themes/tiddlywiki/vanilla/base.tid
View File

@ -1365,6 +1365,11 @@ html body.tc-body.tc-single-tiddler-window {
margin-top: 8px;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-editor-toolbar {
grid-area: toolbar;
}
.tc-editor-toolbar button {
vertical-align: middle;
background-color: <<colour tiddler-controls-foreground>>;
@ -1576,9 +1581,30 @@ html body.tc-body.tc-single-tiddler-window {
overflow: auto;
}
.tc-tiddler-preview-preview {
float: right;
width: 49%;
.tc-tiddler-editor {
display: grid;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview {
grid-template-areas:
"toolbar toolbar"
"editor preview";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden {
grid-template-areas:
"toolbar"
"editor";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
grid-area: preview;
overflow-wrap: anywhere;
word-break: normal;
border: 1px solid <<colour tiddler-editor-border>>;
margin: 4px 0 3px 3px;
padding: 3px 3px 3px 3px;
@ -1593,12 +1619,15 @@ html body.tc-body.tc-single-tiddler-window {
""">>
.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {
width: 49%;
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-edit-texteditor,
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-edit-texteditor {
grid-area: editor;
}
.tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor {
max-width: 49%;
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview canvas.tc-edit-bitmapeditor,
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor {
grid-area: editor;
max-width: 100%;
}
.tc-edit-fields {