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

[BurningTreeC]

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]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

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

[BurningTreeC]

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

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]

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]

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

[BurningTreeC]

It seems there is a problem with the "edit-resizer" and new tiddlers with no or just a bit of text in it.

Hi @pmario - this should be fixed now

[BurningTreeC]

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

[BurningTreeC]

for the edit-resizer there's one part missing: clamping the values when the tiddler width gets very low

[pmario]

Cool stuff. I really like it.

[Jermolene]

Hi @BurningTreeC I just had a play with the preview, the edit resizer works great.

[BurningTreeC]

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

I've updated the preview. I decided to go with 0px minwidth for editor and preview

[Jermolene]

Thanks @BurningTreeC while you are iterating so fast, do you think it would be worth exploring the pointer capture idea? I think @saqimtiaz has some ideas about the implementation.

[BurningTreeC]

Hi @Jermolene - yes it's surely worth exploring the pointer capture idea.
Let's see what saq says!

[pmario]

@BurningTreeC -- It would be nice, if you would be a bit more specific with your "update" commit messages. With "updates" we (the other devs) are forced to "reverse engineer" the code to see what's going on. That's time consuming.

[BurningTreeC]

@BurningTreeC -- It would be nice, if you would be a bit more specific with your "update" commit messages. With "updates" we (the other devs) are forced to "reverse engineer" the code to see what's going on. That's time consuming.

Sorry @pmario - I made a little change that made me change more little things at different parts
Basically it's the sidebarminwidth and the storyminwidth which were not the same (visually) in fixed-fluid and fluid-fixed
Now they're same looking

[BurningTreeC]

Here's the current build: https://sidebar-resizer-config.tiddlyhost.com/

[BurningTreeC]

But I'm not yet happy with how the storypaddingleft and storypaddingright values work
I need some time to figure them out correctly