$:/ControlPanel > Appearance > Theme Tweaks
has settings for “sidebar position” and “sidebar slider”.
Scott, If you identify the temp tiddler(s) that changes when adjusting the the slider you can add -tiddlertitle
to the save filter, there may be a second step, so the dirty trigger is not triggered by adjusting the slider.
- However depending on your use case you may want to exclude other changes triggering the dirty indicator.
Thank you. I have modified the Save filter in the past, but I’ve never tried altering the dirty indicator. I’ll have to look that up, because I’ve run into other things I think of as temporary UI changes that I would prefer didn’t trigger the dirty state.
Remember if they can’t save in any circumstance, you could just disable any entry into the dirty state.
see https://tiddlywiki.com/#SavingMechanism
Regarding the appearance of the red “dirty indicator”
and regarding the “save filter” that determines which tiddlers are actually saved to the file:
-e
Hi @BurningTreeC, great plugin! There are some things I noticed that could be improved:
- When closing a tiddler with the sidebar on the left, the closing animation slides it through the sidebar
- It would be nice if the button itself could also be dragged to change the width of the sidebar. It takes up its space anyway and it easier to hit than the thinner line (alternatively, you could make the line the same width as the button and put the latter right on it).
- You could duplicate the settings for your resizer on its plugin page. That’s where I looked first, and without @EricShulman’s help I might not have found them at all.
Keep up the good work!
Hi @Yaisog
Thanks for your kind words, I appreciate!
I could change the “classic” storyview animation to slide out to the right when the sidebar is on the left.
Making the button draggable is maybe impossible by design, but the slider line is just an indicator where the slider-center is, the slider itself is larger.
Yes, I’ll add the settings tiddler (which are the ThemeTweaks) to the start page.
Thanks for your ideas,
best wishes,
Simon
As far as I can tell the plugin uses the same configuration tiddlers as native tiddlywiki, you can check that by opening ControlPanel → Appearance → Theme Tweaks and then using the slider. When releasing the mouse button, the configuration values are modified according to the new slider position.
This would also explain why the wiki is “dirty” ( = modified ) after each use of the slider, just like when you change these configuration values by hand in any tiddlywiki.
Fred
Yes…but what tiddler is it saved to? I could not track it.
Hello @JanJo
if you click on the links left beneath the values in the ThemeTweaks tab, the corresponding configuration tiddler opens
Try putting this in the AdvancedSearch / Filter
tab:
[all[tiddlers+shadows]!sort[modified]first[20]]
Then adjust the sidebar slider, and you’ll see these four move to the top of the list:
- $:/themes/tiddlywiki/vanilla/metrics/storyright
- $:/themes/tiddlywiki/vanilla/metrics/storywidth
- $:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth
- $:/state/sidebar
And if you change themes, you will see the equivalent tiddlers for that theme instead of “vanilla”.
How to use it on my calendar layout plugin? So I might need it to edit an alternative setting tiddler instead.
P.S. will it works on your multi column layout?
Hi @linonetwo
I don’t know how your calendar layout is build, but if it uses PageTemplates with tag $:/tags/PageTemplate
and a theme you can make it work
P.S. on which multi column layout should it work?
A little how-to:
- The Layout should include the tiddlers
$:/plugins/BTC/SidebarSlider/ui/PageTemplate/show-sidebar
and$:/plugins/BTC/SidebarSlider/PageTemplate/sidebar-slider
either explicitely or by the tag$:/tags/PageTemplate
- The Layout should somewhere include a sidebar with the class
tc-sidebar-scrollable
(maybe I can make that class configurable? → EDIT: it’s configurable now - The theme options, theme functions and theme metrics are used to control the configuration:
title: $:/themes/tiddlywiki/vanilla/metrics/
previewsliderwidth: 10px
sidebarbreakpoint: 960px
sidebarminwidth: 350px
sidebarpadding: 42px
sidebarwidth: 350px
sliderchevroncontainerwidth: 10.5px
sliderchevroncontainertransformx: 0px
slideropacity: 0.5
slideropacityhover: 1
storypaddingleft: 42px
storyminwidth: 168px
storypaddingright: 42px
title: $:/themes/tiddlywiki/vanilla/functions
\function set.centralised() no
\function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]]
\function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]]
\function get.story-sidebar.overlap() 42px
\function sidebar.resizer.maxwidth() 21px
\function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]]
title: $:/themes/tiddlywiki/vanilla/options/
sidebarclass: tc-sidebar-scrollable
sidebarposition: right
sidebarresizer: show
storyriverclass: tc-story-river
I mean BTC/TiddlyFlex , shouldn’t it?
And I just notice you don’t have a plugin library, also didn’t release json plugin in your github release, could you make one so CPL could auto update it?
And could you see why it doesn’t work on tiddly-gittly.github.io/tiddlywiki-calendar/ ?
The sidebar slider is primarily built for the standard TiddlyWiki5 layout @linonetwo
I’ll have to see what it needs to make it work with TiddlyFlex, too
I’ll have a look at tiddlywiki-calendar
Ok @linonetwo , here’s what you need to make the sidebar slider work with the itonnote theme
A tiddler $:/themes/linonetwo/itonnote/options/sidebarresizer
set to show
… that shows the sidebar slider
Then you will probably want to adjust the position of the slider
I’m currently looking into the implementation of the various options
Something is not working fully like I imagined
I’ll post a fix soon!
These are the options for your itonnote theme, note that the names of the tiddlers NEED to be exactly like shown:
$:/themes/linonetwo/itonnote/options/sidebarclass
(falls back to tc-sidebar-scrollable)
$:/themes/linonetwo/itonnote/options/sidebarposition
(falls back to right [right / left])
$:/themes/linonetwo/itonnote/options/sidebarresizer
(falls back to hide [show / hide]) → therefor you need your tiddler set to “show”
$:/themes/linonetwo/itonnote/options/storyriverclass
(falls back to tc-story-river)
These are the metrics for your itonnote theme, the tiddlers again need to be named this way:
$:/themes/linonetwo/itonnote/metrics/sidebarbreakpoint
(falls back to 960px)
$:/themes/linonetwo/itonnote/metrics/sidebarminwidth
(falls back to 350px)
$:/themes/linonetwo/itonnote/metrics/sidebarpadding
(falls back to 42px) this is the visible gap between sidebar and story. Use this metric to make the gap smaller / larger … try not to change this padding (it’s the left padding of the sidebar) in your itonnote stylesheet … you could add a conditional like “if plugin sidebar slider is there and sidebarresizer match show then don’t set this padding, else set this padding…”
$:/themes/linonetwo/itonnote/metrics/sidebarwidth
(falls back to 350px)
$:/themes/linonetwo/itonnote/metrics/sliderchevroncontainerwidth
(falls back to 10.5px [don’t know why / may change]) … controls the width of the “close sidebar” button in the center of the slider
$:/themes/linonetwo/itonnote/metrics/sliderchevroncontainertransformx
(falls back to 0px) … used to horizontally “move” the “close sidebar” button in the center of the slider - in case it’s not positioned nicely (depends on your metrics)
$:/themes/linonetwo/itonnote/metrics/slideropacity
(falls back to 0.5)
$:/themes/linonetwo/itonnote/metrics/slideropacityhover
(falls back to 1)
$:/themes/linonetwo/itonnote/metrics/storypaddingleft
(falls back to 42px) … the left padding of the story river
$:/themes/linonetwo/itonnote/metrics/storypaddingright
(falls back to 42px) … the right padding of the story river
It’s recommended adding a tiddler $:/themes/linonetwo/itonnote/functions
The following functions need to be present:
\function set.centralised() no
\function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]]
\function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]]
\function get.story-sidebar.overlap() 42px (this is default in vanilla theme and is ONLY used for fixed story, fluid sidebar mode, where story-river and sidebar "overlap". You can first set all your theme's metrics, then look if there's an overlap in fixed-fluid mode. Also a gap (would be a negative overlap)
\function sidebar.resizer.maxwidth() 21px (you can set this to a maximum value, the following function will calculate the sidebar-slider-width)
\function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]]
Hope this helps!
Let me know if there are some instructions here that don’t work like I describe, plugin is alpha
Thank you,
best wishes,
Simon
Mobile sliders margins or tabs definitely exist and are very useful
Oppo UI is called ColorOS
lots of nice features
And definitely checkout the new Huawei HarmonyOS
lots great ui talent at work
people vary in their usage for zillion or some reasons
Especially gestural
Design Love and Care really matters
Give people options