From 003a43cdbd4616f3e0bc0bb17a1b0f60026b8835 Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Sun, 15 Oct 2023 07:18:21 +0200 Subject: [PATCH 1/7] make toolbar, editor and preview display: grid --- themes/tiddlywiki/vanilla/base.tid | 38 +++++++++++++++++++++++++----- 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 031b849bfaa..7de164540f6 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1365,6 +1365,10 @@ html body.tc-body.tc-single-tiddler-window { margin-top: 8px; } +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview > .tc-editor-toolbar { + grid-area: toolbar; +} + .tc-editor-toolbar button { vertical-align: middle; background-color: <>; @@ -1576,9 +1580,29 @@ html body.tc-body.tc-single-tiddler-window { overflow: auto; } -.tc-tiddler-preview-preview { - float: right; - width: 49%; +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview { + display: grid; + grid-template-areas: + "toolbar toolbar" + "editor preview"; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto 1fr; +} + +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div:not(.tc-tiddler-preview) { + display: grid; + grid-template-areas: + "toolbar" + "editor"; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr; +} + +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview > .tc-tiddler-preview-preview { + grid-area: preview; + width: calc(100% - 3px); + overflow-wrap: anywhere; + word-break: normal; border: 1px solid <>; margin: 4px 0 3px 3px; padding: 3px 3px 3px 3px; @@ -1593,12 +1617,14 @@ html body.tc-body.tc-single-tiddler-window { """>> -.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor { - width: 49%; +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div > .tc-edit-texteditor { + grid-area: editor; + width: 100%; } .tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor { - max-width: 49%; + grid-area: editor; + width: 100%; } .tc-edit-fields { From 409e0ac4176b37b95b732563f45aab8d87e441cc Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Sun, 15 Oct 2023 07:40:20 +0200 Subject: [PATCH 2/7] correct display of bitmap editor --- themes/tiddlywiki/vanilla/base.tid | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 7de164540f6..29b8e0e5f1b 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1580,8 +1580,11 @@ html body.tc-body.tc-single-tiddler-window { overflow: auto; } -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview { +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div { display: grid; +} + +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview { grid-template-areas: "toolbar toolbar" "editor preview"; @@ -1590,7 +1593,6 @@ html body.tc-body.tc-single-tiddler-window { } .tc-tiddler-edit-frame .tc-dropzone-editor > div > div:not(.tc-tiddler-preview) { - display: grid; grid-template-areas: "toolbar" "editor"; @@ -1624,7 +1626,7 @@ html body.tc-body.tc-single-tiddler-window { .tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor { grid-area: editor; - width: 100%; + max-width: 100%; } .tc-edit-fields { From 88a611752906b8010c6601f6b1f4c284c88a927c Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Sun, 15 Oct 2023 08:36:08 +0200 Subject: [PATCH 3/7] grid-area: toolbar not only when preview is shown --- themes/tiddlywiki/vanilla/base.tid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 29b8e0e5f1b..b4a9e8e6e21 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1365,7 +1365,7 @@ html body.tc-body.tc-single-tiddler-window { margin-top: 8px; } -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview > .tc-editor-toolbar { +.tc-tiddler-edit-frame .tc-dropzone-editor > div > div > .tc-editor-toolbar { grid-area: toolbar; } From 99cf06ca47d49e110d615dd12ec38faefd7007ab Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Sun, 15 Oct 2023 15:10:43 +0200 Subject: [PATCH 4/7] use dedicated classes and tc-grid and no brittle CSS selectors --- core/ui/EditTemplate/body/default.tid | 2 +- themes/tiddlywiki/vanilla/base.tid | 23 +++++++++-------------- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/core/ui/EditTemplate/body/default.tid b/core/ui/EditTemplate/body/default.tid index 68133d48e11..f34ac93ecb3 100644 --- a/core/ui/EditTemplate/body/default.tid +++ b/core/ui/EditTemplate/body/default.tid @@ -18,7 +18,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$ importState=<> > <$dropzone 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=<> >
-
+
<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index b4a9e8e6e21..964658de35a 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1365,7 +1365,7 @@ html body.tc-body.tc-single-tiddler-window { margin-top: 8px; } -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div > .tc-editor-toolbar { +.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-editor-toolbar, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-editor-toolbar { grid-area: toolbar; } @@ -1580,29 +1580,24 @@ html body.tc-body.tc-single-tiddler-window { overflow: auto; } -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div { +.tc-grid { display: grid; } -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview { - grid-template-areas: - "toolbar toolbar" - "editor preview"; +.tc-tiddler-frame .tc-grid.tc-tiddler-preview { + grid-template-areas: "toolbar toolbar" "editor preview"; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; } -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div:not(.tc-tiddler-preview) { - grid-template-areas: - "toolbar" - "editor"; +.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview { + grid-template-areas: "toolbar" "editor"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div.tc-tiddler-preview > .tc-tiddler-preview-preview { +.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-tiddler-preview-preview { grid-area: preview; - width: calc(100% - 3px); overflow-wrap: anywhere; word-break: normal; border: 1px solid <>; @@ -1619,12 +1614,12 @@ html body.tc-body.tc-single-tiddler-window { """>> -.tc-tiddler-edit-frame .tc-dropzone-editor > div > div > .tc-edit-texteditor { +.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-edit-texteditor, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-edit-texteditor { grid-area: editor; width: 100%; } -.tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor { +.tc-tiddler-frame .tc-grid.tc-tiddler-preview canvas.tc-edit-bitmapeditor, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview canvas.tc-edit-bitmapeditor { grid-area: editor; max-width: 100%; } From 910b916336fb1224ed7ca4864a37eaf8873f921f Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Sun, 15 Oct 2023 15:14:22 +0200 Subject: [PATCH 5/7] no need for width: 100% --- themes/tiddlywiki/vanilla/base.tid | 1 - 1 file changed, 1 deletion(-) diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 964658de35a..ebdac509f09 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1616,7 +1616,6 @@ html body.tc-body.tc-single-tiddler-window { .tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-edit-texteditor, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-edit-texteditor { grid-area: editor; - width: 100%; } .tc-tiddler-frame .tc-grid.tc-tiddler-preview canvas.tc-edit-bitmapeditor, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview canvas.tc-edit-bitmapeditor { From c65b8392a1480c9e55931f9e85068e8995e5374b Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Sun, 15 Oct 2023 15:39:16 +0200 Subject: [PATCH 6/7] cleanup style definitions --- themes/tiddlywiki/vanilla/base.tid | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index ebdac509f09..e21db357527 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1365,7 +1365,8 @@ html body.tc-body.tc-single-tiddler-window { margin-top: 8px; } -.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-editor-toolbar, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-editor-toolbar { +.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-editor-toolbar, +.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-editor-toolbar { grid-area: toolbar; } @@ -1585,13 +1586,17 @@ html body.tc-body.tc-single-tiddler-window { } .tc-tiddler-frame .tc-grid.tc-tiddler-preview { - grid-template-areas: "toolbar toolbar" "editor preview"; + grid-template-areas: + "toolbar toolbar" + "editor preview"; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; } .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview { - grid-template-areas: "toolbar" "editor"; + grid-template-areas: + "toolbar" + "editor"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } @@ -1614,11 +1619,13 @@ html body.tc-body.tc-single-tiddler-window { """>> -.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-edit-texteditor, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-edit-texteditor { +.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-edit-texteditor, +.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-edit-texteditor { grid-area: editor; } -.tc-tiddler-frame .tc-grid.tc-tiddler-preview canvas.tc-edit-bitmapeditor, .tc-tiddler-frame .tc-grid.tc-no-tiddler-preview canvas.tc-edit-bitmapeditor { +.tc-tiddler-frame .tc-grid.tc-tiddler-preview canvas.tc-edit-bitmapeditor, +.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview canvas.tc-edit-bitmapeditor { grid-area: editor; max-width: 100%; } From 9f0cbc8d0bfa6e3a14ad15188541bfccf10ceb7e Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Tue, 17 Oct 2023 05:18:42 +0200 Subject: [PATCH 7/7] use semantic classnames --- core/ui/EditTemplate/body/default.tid | 2 +- themes/tiddlywiki/vanilla/base.tid | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/core/ui/EditTemplate/body/default.tid b/core/ui/EditTemplate/body/default.tid index f34ac93ecb3..31322f7fa99 100644 --- a/core/ui/EditTemplate/body/default.tid +++ b/core/ui/EditTemplate/body/default.tid @@ -18,7 +18,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$ importState=<> > <$dropzone 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=<> >
-
+
<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index e21db357527..214352b2330 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1365,8 +1365,8 @@ html body.tc-body.tc-single-tiddler-window { margin-top: 8px; } -.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-editor-toolbar, -.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-editor-toolbar { +.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; } @@ -1581,11 +1581,11 @@ html body.tc-body.tc-single-tiddler-window { overflow: auto; } -.tc-grid { +.tc-tiddler-editor { display: grid; } -.tc-tiddler-frame .tc-grid.tc-tiddler-preview { +.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview { grid-template-areas: "toolbar toolbar" "editor preview"; @@ -1593,7 +1593,7 @@ html body.tc-body.tc-single-tiddler-window { grid-template-rows: auto 1fr; } -.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview { +.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden { grid-template-areas: "toolbar" "editor"; @@ -1601,7 +1601,7 @@ html body.tc-body.tc-single-tiddler-window { grid-template-rows: auto 1fr; } -.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-tiddler-preview-preview { +.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview { grid-area: preview; overflow-wrap: anywhere; word-break: normal; @@ -1619,13 +1619,13 @@ html body.tc-body.tc-single-tiddler-window { """>> -.tc-tiddler-frame .tc-grid.tc-tiddler-preview .tc-edit-texteditor, -.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview .tc-edit-texteditor { +.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-grid.tc-tiddler-preview canvas.tc-edit-bitmapeditor, -.tc-tiddler-frame .tc-grid.tc-no-tiddler-preview canvas.tc-edit-bitmapeditor { +.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%; }