SidebarSlider plugin - slide your sidebar!

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.

1 Like

Hello @JanJo

if you click on the links left beneath the values in the ThemeTweaks tab, the corresponding configuration tiddler opens

2 Likes

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:

And if you change themes, you will see the equivalent tiddlers for that theme instead of “vanilla”.

1 Like

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 :sweat_smile: 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
1 Like

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!

@linonetwo

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

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

1 Like

I agree - lots of great options for a full revamp of the mobile layout and UI. I wasn’t thinking this tweak was that ambitious is all, so was writing with that in mind.

A full UI revamp (both desktop and mobile) would be great though. I have my node base TW as a webapp and it gets a guaranteed edit daily (wordle emoji grid), and always feels a tad clunky

1 Like

Hi @BurningTreeC, Is this now replaced by YAR - yet another resizer ?
I think this now has the flexibilty I desired but I still search a way to implement a left sidebar.

I know work has been done to make the hamburger (the button that toggles the sidebar’s visibility) into a side button, but is it possible to make an option for this in themetweaks to toggle if it should be used over the default option, or possibly the ability to disable it on mobile and use the default style of button?

i do like how it also respects which side you choose to have the sidebar on though, I did a similar function with my attempt at a left sidebar plugin, but it just inverts the hamburger and moves it to the left at the same height and padding as it was on the right.

Easy-peasy. But what you gonna do without a sidebar?

I dunno.

I mean to use the baked in button, as I use JD’s mobile plugin :grin: I would imagine the checkbox to toggle if it should be used would reenable the default style, no?

1 Like

Take a look at TiddlyTools/Slidebars, which gives you the ability to create as many general-purpose “Slidebars” as you like. Each slidebar appears as a button or icon and has a definition tiddler that lets you specify where that slidebar button should appear, the dimensions of the slidebar “panel”, how it slides (from the left, right, top or bottom), and what the slidebar content should display.

Examples of slidebars appear on TiddlyTools.com along the right edge of the window, and includes definitions for a sliding SideBar, as well as a sliding $:/ControlPanel, a sliding TiddlyTools Catalog and a sliding TiddlyTools Help panel.

Note that the TiddlyTools/Slidebars also requires TiddlyTools/Slidebars/PageTemplate, which is responsible for rendering the slidebars in the TiddlyWiki page template.

Let me know what you think.

enjoy,
-e

3 Likes

I may be misunderstanding how to use it, as i only see there is the ability to pin it above the demo tiddler…
EDIT: oh I see, onHover of the icons on the far right will show different modals such as the cotrol panel and slidebar demo, and clicking the icons swap them out.

I think it’s a nice UI feature, but I don’t believe I have a usecase for this, so it would be wasted on me. I will say once I figured out what was going on, I did like the idea of togglable sidebars, it reminds me of earlier plans I made for making a desktop and mobile theme, where the bottom toolbar in mobile (like the one seen in JD’s mobile plugin) would be the same as the toolbar present on the left/right side of the tiddler in desktop view.

Anyhow, I’m getting off topic. I think it could prove useful for users looking for that sort of functionality :grin:

. . .

(For SidebarSlider Plugin)
Oh also! I noticed that when used on the left side with a palette that shows the divider to tabs, the divider border, wiki title, and other elements* will go through the slider’s divider.

i threw together this conditional stylesheet that resolves this, but I’m not sure if it would need to be optimized better or not.

$__themes_tiddlywiki_vanilla_metrics_sidebar-tab-divider-width.json (798 Bytes)

Hi @JanJo

Well not fully, this has some modifications specifically for the sidebar placement (it can also be placed at the left) which the YAR - yet another resizer doesn’t have

On the other hand, the YAR makes it much easier to implement custom sliders and panels

1 Like