display: grid for editor toolbar, editor and preview #7787

BurningTreeC · 2023-10-15T05:53:40Z

This PR makes the div surrounding the toolbar, editor and preview display: grid
It also adds the necessary styles so that editor and preview are displayed full width, not 49% as before
It also takes into account that the bitmap editor has variable width and height

see Idea #7771

vercel · 2023-10-15T05:53:44Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tiddlywiki5	✅ Ready (Inspect)	Visit Preview	Oct 17, 2023 3:22am

BurningTreeC · 2023-10-15T05:57:31Z

Should there also be a fullscreen button for the editor?

themes/tiddlywiki/vanilla/base.tid

BurningTreeC · 2023-10-15T09:05:22Z

Hello @pmario - I created an alternative PR here: #7788

pmario

I think that's much better now.

themes/tiddlywiki/vanilla/base.tid

BurningTreeC · 2023-10-16T03:05:19Z

Hi @Jermolene @pmario - I think this is ready for review

pmario · 2023-10-16T08:19:51Z

I think, we also needs some documentation, that tells users about the new CSS tc-grid classes and the grid areas.
May be we add this to the https://tiddlywiki.com/dev/ edition.

It should make it easier for plugin authors to deal with the new grid areas

pmario · 2023-10-16T10:58:57Z

@Jermolene -- It looks good to me now

Jermolene

Thanks @BurningTreeC @pmario

Jermolene · 2023-10-16T11:22:25Z

core/ui/EditTemplate/body/default.tid

@@ -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-no-tiddler-preview]] [[tc-grid]] +[join[ ]] }}}>


We try to use semantic class names, and avoid functional names such as "tc-grid". I think it would be clearer to replace tc-no-tiddler-preview with tc-tiddler-preview-hidden, and to use tc-tiddler-preview-frame instead of tc-grid.

I think tc-tiddler-preview-frame is way to specific. tc-grid only contains 1 setting to use grid. It can be reused that way.

tc-tiddler-preview-frame is completely misleading since it is not set to the preview-frame, but it's parent

If I want to define tc-grid to any other gird with a completely different context in the sidebar or control-panel tc-tiddler-preview-frame would be misleading. IMO it should be as generic as possible

@pmario if we use tc-grid and reuse it elsewhere then we'll be constrained that we can't change the styling of just the preview pane. As I said before, functional class names are an anti-pattern.

We could use tc-tiddler-editor instead of tc-grid.

pmario · 2023-10-16T13:48:32Z

@pmario if we use tc-grid and reuse it elsewhere then we'll be constrained that we can't change the styling of just the preview pane.

That's not true. Have a closer look at the CSS code.

tc-grid activates display: grid only. It may be used for some global styling for grids but I assume that this one will never be changed again.

tc-tiddler-preview, tc-tiddler-no-preview and tc-tiddler-preview-preview and may be others are the classes that are responsible for the editor and preview definitions.

IMO tc-grid is a utility calss, which defines a major usage pattern. It is a functional class name because there is no other good name for "grid".

We could use tc-framework but that would be misleading. tc-framework could be grid or flexbox. But those 2 definitions are not interchangeable. So it's needed to stay with tc-grid or a tc-flex if you started with it. They are not compatible.

Jermolene · 2023-10-16T17:17:43Z

Hi @pmario our CSS classes are designed not just to accomplish a particular visual layout but to provide a surface area for customisations. If we use a single tc-grid class then it becomes impossible for others to customise the layout of the preview pane without also affecting the other places that use tc-grid.

pmario · 2023-10-16T18:00:07Z

@BurningTreeC ... I did have a closer look again.

Jeremy wrote:

We could use tc-tiddler-editor instead of tc-grid.

Let's go with tc-tiddler-editor.

We will have the tc-tiddler-editor as a container class, that defines display: grid and
we have now tc-tiddler-preview and tc-tiddler-no-preview, which are used to enable/disable the preview and toolbar "child" elements

Can you check the following again?

For me tc-tiddler-no-preview makes more sense than tc-no-tiddler-preview -- Just a thought

BurningTreeC · 2023-10-17T03:19:53Z

Hi @pmario @Jermolene

I went with tc-tiddler-editor and tc-tiddler-preview-hidden

Should be good now 👍

Jermolene · 2023-10-17T10:54:11Z

Terrific, thank you @BurningTreeC

oeyoews · 2024-01-08T17:04:32Z

This seems to conflict with the flexbox layout of cm6 (maybe), but cm5 does not have this situation. @Jermolene @BurningTreeC

Screenity.video.-.Jan.9.2024.mp4

Jermolene · 2024-01-08T17:15:30Z

Hi @oeyoews are you saying that the new CSS grid layout of the editor pane interferes with CodeMirror 6? It's hard to see how that could happen if CM6 adapts correctly to the size of its container.

oeyoews · 2024-01-08T17:25:20Z

The reason is really not easy to investigate, and I don’t have any clue. What is certain is that if the width of the element is specified, it will cause this problem, unless width: 100% is specified. @Jermolene

Screenity.video.-.Jan.9.2024.1.mp4

Jermolene · 2024-01-08T17:30:26Z

Thanks @oeyoews could it be fixed by introducing a wrapper element with width: 100%?

oeyoews · 2024-01-08T17:47:04Z

No, it doesn't work

oeyoews · 2024-01-08T18:55:10Z

After looking at the usage of grid-template, this should fix the problem, ~~but what I don't understand is why just cm6 would cause this problem, I'm having a hard time finding what the difference is.~~ It is roughly the style of the cm6 editor, which results in inconsistent widths on the left and right, so it is necessary to clearly specify that each width is equal. @Jermolene

.tc-tiddler-preview {
grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
}

oeyoews · 2024-01-08T19:21:00Z

#7922

pmario · 2024-01-09T08:20:01Z

no !important is toxic. It will mess up all our stylesheets.

BurningTreeC added 2 commits October 15, 2023 07:18

make toolbar, editor and preview display: grid

003a43c

correct display of bitmap editor

409e0ac

vercel bot deployed to Preview October 15, 2023 05:56 View deployment

grid-area: toolbar not only when preview is shown

88a6117

vercel bot deployed to Preview October 15, 2023 06:39 View deployment

pmario reviewed Oct 15, 2023

View reviewed changes

themes/tiddlywiki/vanilla/base.tid Outdated Show resolved Hide resolved

pmario reviewed Oct 15, 2023

View reviewed changes

themes/tiddlywiki/vanilla/base.tid Outdated Show resolved Hide resolved

BurningTreeC marked this pull request as draft October 15, 2023 08:20

BurningTreeC mentioned this pull request Oct 15, 2023

display: grid for toolbar, editor and preview - using inline styles #7788

Closed

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

99cf06c

vercel bot deployed to Preview October 15, 2023 13:14 View deployment

no need for width: 100%

910b916

vercel bot deployed to Preview October 15, 2023 13:17 View deployment

BurningTreeC marked this pull request as ready for review October 15, 2023 13:23

pmario reviewed Oct 15, 2023

View reviewed changes

themes/tiddlywiki/vanilla/base.tid Outdated Show resolved Hide resolved

themes/tiddlywiki/vanilla/base.tid Outdated Show resolved Hide resolved

themes/tiddlywiki/vanilla/base.tid Outdated Show resolved Hide resolved

themes/tiddlywiki/vanilla/base.tid Outdated Show resolved Hide resolved

cleanup style definitions

c65b839

vercel bot deployed to Preview October 15, 2023 13:42 View deployment

Jermolene reviewed Oct 16, 2023

View reviewed changes

use semantic classnames

9f0cbc8

vercel bot deployed to Preview October 17, 2023 03:22 View deployment

Jermolene merged commit c185e37 into Jermolene:master Oct 17, 2023
4 checks passed

oeyoews mentioned this pull request Jan 8, 2024

修复预览宽度问题 oeyoews/tiddlywiki-codemirror6#18

Closed

Jermolene pushed a commit that referenced this pull request Jan 24, 2024

Fix Editor preview width #7787 (#7922)

575d80d

BurningTreeC deleted the patch-60 branch March 29, 2024 15:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

display: grid for editor toolbar, editor and preview #7787

display: grid for editor toolbar, editor and preview #7787

BurningTreeC commented Oct 15, 2023

vercel bot commented Oct 15, 2023 •

edited

BurningTreeC commented Oct 15, 2023

BurningTreeC commented Oct 15, 2023

pmario left a comment

BurningTreeC commented Oct 16, 2023

pmario commented Oct 16, 2023

pmario commented Oct 16, 2023

Jermolene left a comment

Jermolene Oct 16, 2023

pmario Oct 16, 2023

pmario Oct 16, 2023

Jermolene Oct 16, 2023

Jermolene Oct 16, 2023

pmario commented Oct 16, 2023

Jermolene commented Oct 16, 2023

pmario commented Oct 16, 2023

BurningTreeC commented Oct 17, 2023

Jermolene commented Oct 17, 2023

oeyoews commented Jan 8, 2024

Jermolene commented Jan 8, 2024

oeyoews commented Jan 8, 2024 •

edited

Jermolene commented Jan 8, 2024

oeyoews commented Jan 8, 2024

oeyoews commented Jan 8, 2024 •

edited

oeyoews commented Jan 8, 2024

pmario commented Jan 9, 2024

display: grid for editor toolbar, editor and preview #7787

display: grid for editor toolbar, editor and preview #7787

Conversation

BurningTreeC commented Oct 15, 2023

vercel bot commented Oct 15, 2023 • edited

BurningTreeC commented Oct 15, 2023

BurningTreeC commented Oct 15, 2023

pmario left a comment

Choose a reason for hiding this comment

BurningTreeC commented Oct 16, 2023

pmario commented Oct 16, 2023

pmario commented Oct 16, 2023

Jermolene left a comment

Choose a reason for hiding this comment

Jermolene Oct 16, 2023

Choose a reason for hiding this comment

pmario Oct 16, 2023

Choose a reason for hiding this comment

pmario Oct 16, 2023

Choose a reason for hiding this comment

Jermolene Oct 16, 2023

Choose a reason for hiding this comment

Jermolene Oct 16, 2023

Choose a reason for hiding this comment

pmario commented Oct 16, 2023

Jermolene commented Oct 16, 2023

pmario commented Oct 16, 2023

BurningTreeC commented Oct 17, 2023

Jermolene commented Oct 17, 2023

oeyoews commented Jan 8, 2024

Jermolene commented Jan 8, 2024

oeyoews commented Jan 8, 2024 • edited

Jermolene commented Jan 8, 2024

oeyoews commented Jan 8, 2024

oeyoews commented Jan 8, 2024 • edited

oeyoews commented Jan 8, 2024

pmario commented Jan 9, 2024

vercel bot commented Oct 15, 2023 •

edited

oeyoews commented Jan 8, 2024 •

edited

oeyoews commented Jan 8, 2024 •

edited