Sidebar-resizer: change `$:/themes/...` tiddlers #8663

BurningTreeC · 2024-10-04T14:45:44Z

This PR uses the same mechanism as #8644 but changes the $:/themes/tiddlywiki/vanilla/metrics/... tiddlers directly.
Note that in fixed-fluid mode the story-river actually changes its width but the tiddlerwidth remains fixed width as there was no discussion yet how we handle this. I just made the tiddlers adapt to the story-river if the story-river-width goes below the tiddlerwidth.

There are some design questions:

should it be possible to make the story-river overlap the sidebar / the slider?
should the tiddlerwidth in fixed-fluid mode be updated? (keeping the gap between sidebar and story-river)

~~I haven't yet added the ControlPanel configurations used for storyminwidth and sidebarminwidth.~~
This PR is just for completeness, I will update it so that we can compare with other possible solutions.

In the meantime this PR has been updated quite a bit, I've put a current build here:

https://sidebar-resizer-config.tiddlyhost.com/

stackblitz · 2024-10-04T14:45:48Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-10-04T14:45:56Z

Confirmed: BurningTreeC has already signed the Contributor License Agreement (see contributing.md)

BurningTreeC · 2024-10-05T14:56:28Z

@Jermolene @saqimtiaz @pmario

sorry for tagging you 😸
But if you have time, could you test?
Especially fixed-fluid mode needs testing.
This here now works with pixel and percentage values.
It updates the $:/themes/... tiddlers directly.
In fixed-fluid mode it updates storyright and storyleft.
There's also the option to slide using ctrl in fixed-fluid mode. ctrl makes it possible to move the sidebar further to the left if there's a gap between story and sidebar. To test that, maybe set the storyright to 75% and the storywidth to 45% and the tiddlerwidth to 100% ... it becomes easier to understand like that.

The calculations are now done in wikitext in the procedures.
One thing I had to limit to not become less than 0 which is the storyleft.

BurningTreeC · 2024-10-06T08:44:58Z

This works now with all absolute css metrics:

Including percentage, which is easy to calculate.
If a metric was for instance "pt" or "%" before starting to resize, it will be updated as "pt" / "%" and so on.

The internal calculations are all done in pixel, so this first converts everything to pixel, then calculates, then converts back to the corresponding value.

I don't know if this can also support other relative css metrics...

BurningTreeC · 2024-10-06T09:05:17Z

As I said above, in fixed-fluid mode I'm not settled about how the gap between story-river and sidebar should be handled.
This implementation however can be modified easily in that regards

pmario · 2024-10-06T09:32:20Z

@BurningTreeC -- I did checkout this branch and did run it, but I can not find any resizer. I think I'm missing something

core/wiki/macros/sidebar-resizer.tid

BurningTreeC · 2024-11-13T16:17:21Z

made also a quick change that broke the styling of the slider - sorry

pmario · 2024-11-13T16:25:59Z

made also a quick change that broke the styling of the slider - sorry

No need to be sorry. It's still WIP. At the moment I do have a look, if we can make some functions simpler.

BTW -- you can add some  outside of procedures or functions with no performance hit. If "something special" is going on they should help others and probably yourself too.

I use comments whenever my own functions or procs, "trick" me and I change something. Just to find out, that I introduced an error.

just some thoughts

BurningTreeC · 2024-11-13T16:44:58Z

made also a quick change that broke the styling of the slider - sorry

No need to be sorry. It's still WIP. At the moment I do have a look, if we can make some functions simpler.

BTW -- you can add some  outside of procedures or functions with no performance hit. If "something special" is going on they should help others and probably yourself too.

I use comments whenever my own functions or procs, "trick" me and I change something. Just to find out, that I introduced an error.

just some thoughts

I don't even know what I'm doing 😉 so how should I comment it?
No, just kidding ... but I'm having a hard time commenting what I'm doing.
Where I would need comments it's not possible ... and where I could comment I haven't yet found the words

core/ui/EditTemplate/body/default.tid

linonetwo · 2024-11-15T06:38:01Z

add some 

Try use GPT o1 for this. BTW, I'm trying to use LLM to add comment to all TW core wikitext, if you aleady add some, LLM will thank you for making it easier :P

…ments

BurningTreeC · 2024-11-16T09:55:11Z

Hi @Jermolene @saqimtiaz @pmario @linonetwo

I've now done some experiments using pointer capture (not in this PR) and couldn't achieve what we achieve here.
Especially the behavior for pointerleave / pointerout / pointercancel - I wouldn't know which tricks to use to achieve them.

Anyway, now this PR fixed an important problem which is the editor and preview redrawing when resizing. Fixed 🥳 !

I had to use some JS for factory.js so that - if the class of the editor changes, it just assigns the new classes to the DomNode.

BurningTreeC · 2024-12-09T11:23:22Z

Hello all, is this still relevant? 😄

pmario

Link to the preview: https://deploy-preview-8663--tiddlywiki-previews.netlify.app/

See my minor comments about code style. The rest looks good to me.

core/ui/EditTemplate/body/default.tid

pmario · 2024-12-09T11:29:35Z

core/ui/EditTemplate/body/default.tid

-<div class={{{ [<edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}>
+\procedure tp-tiddler-editor-preview()
+<div
+	class={{{ [<get.edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [<get.edit-preview-state>match[yes]then[tc-tiddler-preview-identified-]addsuffix<identifier>] [[tc-tiddler-editor]] +[join[ ]] }}}>


If possible these lines should have newlines too.

core/ui/EditTemplate/body/default.tid

pmario · 2024-12-09T11:33:48Z

core/wiki/functions/themes.tid

+\function convert.to.in(value) [<value>divide[96]]
+\function convert.to.pc(value) [convert.to.in<value>multiply[6]]
+\function convert.to.pt(value) [convert.to.in<value>multiply[72]]
+\function convert.to.em(value) [[storyTiddler]is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}] [[storyTiddler]!is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]


Any response to this concern?

pmario · 2024-12-09T11:34:39Z

core/wiki/functions/themes.tid

+
+\function get.current.theme() [{$:/theme}!is[blank]] :else[all[tiddlers+shadows]plugin-type[theme]plugin-priority[0]first[]]
+
+\function get.theme.storywidthoverlap() [[max((]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[),(-1 * (]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[)))]]


Add newlines to body code for better readability.

\function get.theme.storywidthoverlap( code \end

pmario · 2024-12-09T11:36:59Z

core/wiki/macros/sidebar-resizer.tid

+
+\function get.template-right.style.flex-basis() [<sliderCondition>match[no]then[0%]] :else[[calc(]addsuffix<get.template-right.width>addsuffix[ - ]addsuffix<resizerWidthDivided>addsuffix[px)]]
+
+\procedure sidebar-resizer(templateLeft:"",templateRight:"",mode:"block",eventCatcherClass:"",zIndexLeft:"")


Is there a \whitespace trim in the code?
Are all the extra new-lines here needed? Are they there for readability or to create redundant DOM elements?
Do they create redundant DOM elements?

pmario · 2024-12-09T11:38:24Z

core/wiki/macros/sidebar-resizer.tid

+	$pointerdown=<<sidebar-resizer-pointerdown-actions-inner>>
+	$pointerup=<<sidebar-resizer-pointercancel-actions>>>
+
+	<%if [<resizer.state>!match[no]] %>


redundant newlines? -- I did skip this comment in all other files where there happens to be redundant new-lines

pmario · 2024-12-09T11:43:58Z

editions/tw5.com/tiddlywiki.info

@@ -18,7 +18,8 @@
 		"tiddlywiki/tight",
 		"tiddlywiki/heavier",
 		"tiddlywiki/tight-heavier",
-		"tiddlywiki/readonly"
+		"tiddlywiki/readonly",
+		"tiddlywiki/example"


Should this theme be renamed? eg: "resizers" or something similar?

BurningTreeC · 2024-12-09T12:47:07Z

Link to the preview: https://deploy-preview-8663--tiddlywiki-previews.netlify.app/

See my minor comments about code style. The rest looks good to me.

I'll try to address your comments soon

BurningTreeC · 2025-03-17T08:09:29Z

Hello all,
sorry for my silence, I had other things in mind the last months.
Can you give me some guidance what's still needed to make this core-ready?
Also, are you still interested in this?

pmario · 2025-03-17T11:26:09Z

@BurningTreeC @Jermolene -- I would love to get that PR merged.

Jermolene

Hi @BurningTreeC.

My main concern is the overall size of these changes. It is useful functionality, but these changes add 34,124 byte to index.html, which is 1.2% of the size of empty.html. That's twice the size of recent WYSIWYG editor libraries.

As I note below, there is a lot of duplication in the code. If we can, I'd rather get the overhead down by improving core functionality to make the necessary changes cleaner and more reusable. We've been making good progress exploring ways to make wikitext and filters more expressive and efficient, and I think this PR would make an excellent driver for further improvements.

In the meantime, I think we need to look at the possibility of a much smaller PR that just makes the necessary core modifications to allow this functionality to be shipped as a plugin.

Jermolene · 2025-03-21T15:56:36Z

core/language/en-GB/ThemeTweaks.multids

@@ -1,11 +1,13 @@
 title: $:/language/ThemeTweaks/

 ThemeTweaks: Theme Tweaks
-ThemeTweaks/Hint: You can tweak certain aspects of the ''Vanilla'' theme.
+ThemeTweaks/Hint: You can tweak certain aspects of the ''<$text text={{{ [<get.current.theme>get[name]] :else[[current]] }}}/>'' theme.


We have adopted the convention that core functions should be prefixed tf.. In this case I think it would be preferable to create a little, local macro that encapsulates the entire <$text> widget, called something like <<theme-name>>.

Jermolene · 2025-03-21T16:01:50Z

core/wiki/functions/themes.tid

+
+\function sidebarbreakpoint-minus-one() [subtract.one.from.sidebarbreakpoint<sidebarbreakpoint>] :else[<sidebarbreakpoint>]
+
+\function add.one.to.breakpoint(value)


These dense, repetitious filters stick out a little. Is there some way that they could be simplified?

BurningTreeC · 2025-03-25T13:21:44Z

Hi @Jermolene @pmario and all others interested.
I'll make a plugin out of this.

BurningTreeC · 2025-03-25T13:22:34Z

Maybe while making a plugin I find ways how to shrink it so that it becomes suitable for the core

pmario · 2025-03-25T14:19:41Z

I would be interested in a plugin like this, if it is possible.

Jermolene · 2025-03-27T09:20:23Z

Thanks @BurningTreeC @pmario I do think this functionality would make a lot of users very happy. I remain very keen to try to get the necessary primitives into the core. Perhaps we might start with something relatively simple like the CSS unit conversions.

BurningTreeC added 5 commits October 4, 2024 12:34

Create sidebar-resizer.tid

1e0d4b8

updates

be6510b

updates

7fbbb4e

updates

22b33e6

updates

035c23e

remove some unnecessary calculations

f547be6

BurningTreeC mentioned this pull request Oct 4, 2024

Sidebar resizer: resizing the sidebar #8644

Closed

BurningTreeC added 14 commits October 4, 2024 18:09

clean up stylesheet

315e543

for now, in fixed-fluid mode keep story and tiddler fixed width

445547d

wip: fixed-fluid mode, change storyleft. + more calculations

bc9706d

no high z-index on first eventcatcher

02498a1

cleanup pointermove actions

dd5af9f

more calculations

ea7da2b

update base stylesheet

6b98a2d

fix filters

01c945e

updates

6fd3432

updates

667e173

add fallbacks

ca32bed

add ctrl modifier drag for fixed-fluid mode that changes behavior

40a89fc

updates

b7d542e

cleanup

c31a51f

BurningTreeC added 2 commits October 6, 2024 06:04

updates

61cb65f

simplify pointermove actions and calculations

6176f3a

pmario reviewed Oct 6, 2024

View reviewed changes

core/wiki/macros/sidebar-resizer.tid Outdated Show resolved Hide resolved

fix preview icon and preview slider

545e2aa

pmario reviewed Nov 13, 2024

View reviewed changes

core/ui/EditTemplate/body/default.tid Outdated Show resolved Hide resolved

BurningTreeC added 3 commits November 13, 2024 18:40

use get.edit-preview-state

7522109

fix sidebar slider not moving anymore

3261818

rename tc-sidebar-resizer to tc-slider

2e68b6f

BurningTreeC added 4 commits November 15, 2024 11:00

fix editor-preview button not focusing editor, two-cell-slider experi…

40489a2

…ments

make editor not redraw

7a299bc

add touchmove for testing

6876d7f

fix problem that resizing redraw the editor and preview

b7bec59

BurningTreeC added 4 commits November 16, 2024 11:06

Merge branch 'TiddlyWiki:master' into sidebar-resizer-config

fc83962

different classes for text-editor and bitmap-editor

04b9e5b

no display: none important

fe9825c

assignDomNodeClasses method also for SimpleEngine

bf07047

pmario reviewed Dec 9, 2024

View reviewed changes

BurningTreeC added 2 commits January 19, 2025 10:19

address some of pmarios mentioned issues

ba784d6

fix some css issues with centralised theme

7beef2e

Jermolene reviewed Mar 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sidebar-resizer: change `$:/themes/...` tiddlers #8663

Sidebar-resizer: change `$:/themes/...` tiddlers #8663

BurningTreeC commented Oct 4, 2024 •

edited

Loading

stackblitz bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024

BurningTreeC commented Oct 5, 2024

BurningTreeC commented Oct 6, 2024

BurningTreeC commented Oct 6, 2024

pmario commented Oct 6, 2024

BurningTreeC commented Nov 13, 2024

pmario commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

linonetwo commented Nov 15, 2024

BurningTreeC commented Nov 16, 2024

BurningTreeC commented Dec 9, 2024

pmario left a comment •

edited

Loading

pmario Dec 9, 2024

pmario Dec 9, 2024

pmario Dec 9, 2024

pmario Dec 9, 2024

pmario Dec 9, 2024

pmario Dec 9, 2024

BurningTreeC commented Dec 9, 2024

BurningTreeC commented Mar 17, 2025

pmario commented Mar 17, 2025

Jermolene left a comment

Jermolene Mar 21, 2025

Jermolene Mar 21, 2025

BurningTreeC commented Mar 25, 2025

BurningTreeC commented Mar 25, 2025

pmario commented Mar 25, 2025

Jermolene commented Mar 27, 2025


		\function get.current.theme() [{$:/theme}!is[blank]] :else[all[tiddlers+shadows]plugin-type[theme]plugin-priority[0]first[]]

		\function get.theme.storywidthoverlap() [[max((]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[),(-1 * (]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[)))]]


		\function get.template-right.style.flex-basis() [<sliderCondition>match[no]then[0%]] :else[[calc(]addsuffix<get.template-right.width>addsuffix[ - ]addsuffix<resizerWidthDivided>addsuffix[px)]]

		\procedure sidebar-resizer(templateLeft:"",templateRight:"",mode:"block",eventCatcherClass:"",zIndexLeft:"")


		\function sidebarbreakpoint-minus-one() [subtract.one.from.sidebarbreakpoint<sidebarbreakpoint>] :else[<sidebarbreakpoint>]

		\function add.one.to.breakpoint(value)

Sidebar-resizer: change $:/themes/... tiddlers #8663

Are you sure you want to change the base?

Sidebar-resizer: change $:/themes/... tiddlers #8663

Conversation

BurningTreeC commented Oct 4, 2024 • edited Loading

stackblitz bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024

BurningTreeC commented Oct 5, 2024

BurningTreeC commented Oct 6, 2024

BurningTreeC commented Oct 6, 2024

pmario commented Oct 6, 2024

BurningTreeC commented Nov 13, 2024

pmario commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

linonetwo commented Nov 15, 2024

BurningTreeC commented Nov 16, 2024

BurningTreeC commented Dec 9, 2024

pmario left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BurningTreeC commented Dec 9, 2024

BurningTreeC commented Mar 17, 2025

pmario commented Mar 17, 2025

Jermolene left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BurningTreeC commented Mar 25, 2025

BurningTreeC commented Mar 25, 2025

pmario commented Mar 25, 2025

Jermolene commented Mar 27, 2025

Sidebar-resizer: change `$:/themes/...` tiddlers #8663

Sidebar-resizer: change `$:/themes/...` tiddlers #8663

BurningTreeC commented Oct 4, 2024 •

edited

Loading

pmario left a comment •

edited

Loading