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

… z-index fix

pmario · 2024-11-13T14:44:48Z

themes/tiddlywiki/vanilla/ThemeTweaks.tid

+
+\procedure get_theme-tweaks_lingo() <$transclude $variable="lingo" title={{{ [[Metrics/]addsuffix<metricName>] }}}/>
+
+\procedure get_theme-tweaks_lingo-hint() <$transclude $variable="lingo" title={{{ [[Metrics/]addsuffix<metricName>addsuffix[/Hint]] }}}/>


We do not use underscores in the core at the moment and you should not start with it. It will cause consistency problems. So get-theme-... should be fine

If you think it is too similar to the function names, getThemeTweaksLingo() may be an option too

pmario · 2024-11-13T14:52:42Z

themes/tiddlywiki/vanilla/ThemeTweaks.tid

@@ -2,6 +2,12 @@ title: $:/themes/tiddlywiki/vanilla/themetweaks
 tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ThemeTweaks/ThemeTweaks}}

+\function get.theme-tweaks.metric() [get.theme<metric>]
+
+\procedure get_theme-tweaks_lingo() <$transclude $variable="lingo" title={{{ [[Metrics/]addsuffix<metricName>] }}}/>


Did you try substitution instead of a filtered transclusion <$transclude $variable="lingo" title=`Metrics/$(metricName)$`/> It is simpler

pmario · 2024-11-13T15:05:34Z

core/wiki/macros/sliders.tid

+</$let>
+\end
+
+\procedure two-cell-slider(width:"100%",minHeight:"10px",templateLeft:"",templateRight:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes",leftMinWidth:"100px",rightMinWidth:"100px")


procedure parameters allow newlines. So it should be possible to make this line more readable

pmario · 2024-11-13T15:24:17Z

core/wiki/macros/sliders.tid

+		tv-set-storywidth-storyright="no"
+		tv-set-sidebarwidth="yes"
+		tv-set-centralised="no"
+		storyLeftTiddler={{{ [<storyLeftTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]] }}}


In the :else path the first addsuffix[-] after <qualify> is redundant, since it is turned into a number with sha256[]

So removing the first addsuffix[-] should make the string a little bit shorter

pmario · 2024-11-13T15:34:20Z

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}]


I am not 100% sure, but I think if storyTiddler in the function above is a variable the then will create a value. But there is a second element without an :else -- So I am not sure if this filter will work. Did you test it?

pmario · 2024-11-13T15:35:40Z

core/language/en-GB/ThemeTweaks.multids

@@ -26,17 +28,34 @@ Metrics/FontSize: Font size
 Metrics/LineHeight: Line height
 Metrics/BodyFontSize: Font size for tiddler body
 Metrics/BodyLineHeight: Line height for tiddler body
+Metrics/PreviewSliderWidth: Preview slider width
+Metrics/PreviewSliderWidth/Hint: the width of the slider between editor and editor preview


Are those hints within a sentence? Otherwise they should start with capital letters

pmario · 2024-11-13T15:41:10Z

core/ui/PageTemplate/sidebar-resizer.tid

+list-after: $:/core/ui/PageTemplate/story
+code-body: yes
+
+\import [function[get.base.functions.theme],<get.current.theme>first[]is[tiddler]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]] [[$:/core/procedures/sidebar-resizer]]


please add an empty line after \import for better readability

pmario · 2024-11-13T15:42:45Z

core/ui/PageTemplate/sidebar-resizer.tid

+\function drag.direction.reverse() [<get.theme.option sidebarposition>match[left]then[yes]] :else[[no]]
+\whitespace trim
+
+<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>


<%if %> should not need an empty line, if the block is indented.

pmario · 2024-11-13T15:43:53Z

core/ui/PageTemplate/sidebar-resizer.tid

+		storyPaddingRightTiddler=<<get.story-padding-right.tiddler>>
+	>
+
+		<$transclude $variable="sidebar-resizer"/>


IMO the leading and trailing new-lines should be removed. I am not sure if <$transclude will need a $mode="block" or not. But there should be no empty lines here

pmario · 2024-11-13T16:09:46Z

I think the editor preview state is broken. The preview icon does not change if the preview is active or not

BurningTreeC · 2024-11-13T16:15:54Z

I think the editor preview state is broken. The preview icon does not change if the preview is active or not

Oh, I'll fix this

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

pmario · 2024-11-13T17:33:35Z

core/ui/EditTemplate/body/default.tid

@@ -1,18 +1,18 @@
 title: $:/core/ui/EditTemplate/body/default

-\function get.edit-preview-state()
+\function edit-preview-state()


functions need a dot . in the function name. Otherwise thy can only be used with [function[get-preview-state]] -- For the core we need the possibility to use it with [tf.get-preview-state<something>] too.

That's why I did start with tf. prefix eg: tf.function-name-with-hyphens for TW global functions. If you search the source code for tf., you will see some of them in the TW core code already.

At the moment they are only used for $:/tags/Global functions.

At the draft pr branch https://github.com/pmario/TiddlyWiki5/blob/toc-v5.3.x-rewrite/core/wiki/macros/toc.tid you can see it used extensively. Otherwise the code would be unreadable. There is some info about the naming schema in code.

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 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

BurningTreeC added 5 commits November 12, 2024 20:51

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

973a604

use slideropacity metrics everywhere

b0cced5

merge

f50029b

dont show metrics of fixed-fluid in fluid-fixed mode and vice versa +…

6da0beb

… z-index fix

don't let storyminwidth be negative

b137309

pmario reviewed Nov 13, 2024

View reviewed changes

BurningTreeC added 2 commits November 13, 2024 17:02

follow pmario's suggestions

faa8ceb

more cleanup like pmario suggests

0c0897f

fix preview icon and preview slider

545e2aa

pmario reviewed Nov 13, 2024

View reviewed changes

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 2 commits November 16, 2024 11:06

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

fc83962

different classes for text-editor and bitmap-editor

04b9e5b

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

pmario Nov 13, 2024

pmario Nov 13, 2024 •

edited

Loading

pmario Nov 13, 2024

pmario Nov 13, 2024

pmario Nov 13, 2024

pmario Nov 13, 2024 •

edited

Loading

pmario Nov 13, 2024

pmario Nov 13, 2024

pmario Nov 13, 2024

pmario commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

pmario commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

pmario Nov 13, 2024 •

edited

Loading

pmario Nov 13, 2024 •

edited

Loading

linonetwo commented Nov 15, 2024

BurningTreeC commented Nov 16, 2024


		\procedure get_theme-tweaks_lingo() <$transclude $variable="lingo" title={{{ [[Metrics/]addsuffix<metricName>] }}}/>

		\procedure get_theme-tweaks_lingo-hint() <$transclude $variable="lingo" title={{{ [[Metrics/]addsuffix<metricName>addsuffix[/Hint]] }}}/>

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

pmario Nov 13, 2024

Choose a reason for hiding this comment

pmario Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

pmario Nov 13, 2024

Choose a reason for hiding this comment

pmario Nov 13, 2024

Choose a reason for hiding this comment

pmario Nov 13, 2024

Choose a reason for hiding this comment

pmario Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

pmario Nov 13, 2024

Choose a reason for hiding this comment

pmario Nov 13, 2024

Choose a reason for hiding this comment

pmario Nov 13, 2024

Choose a reason for hiding this comment

pmario commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

pmario commented Nov 13, 2024

BurningTreeC commented Nov 13, 2024

pmario Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

pmario Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

linonetwo commented Nov 15, 2024

BurningTreeC commented Nov 16, 2024

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

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

BurningTreeC commented Oct 4, 2024 •

edited

Loading

pmario Nov 13, 2024 •

edited

Loading

pmario Nov 13, 2024 •

edited

Loading

pmario Nov 13, 2024 •

edited

Loading

pmario Nov 13, 2024 •

edited

Loading