mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-10 09:20:26 +00:00
Code Issues Releases Wiki Activity

make fluid-fixed and fixed-fluid visually the same (storyminwidth and sidebarminwidth)

Browse Source
This commit is contained in:
BurningTreeC 2024-11-01 18:41:14 +01:00
parent d652f17aee
commit 340375d0c0
3 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
core/wiki/macros/sidebar-resizer.tid
View File

@ -143,7 +143,7 @@ title: $:/core/procedures/sidebar-resizer
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] :map[<get.story-sidebar.padding>] }}} sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] :map[<get.story-sidebar.padding>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[<get.theme.metric storyleft>] }}} storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[<get.theme.metric storyleft>] }}}
storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}} storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}} clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}} storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}} storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}}
storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}} storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
@ -155,7 +155,7 @@ title: $:/core/procedures/sidebar-resizer
tiddlerWidthMetric={{{ [<get.resizer.state>get[tiddler-width-metric]] }}} tiddlerWidthMetric={{{ [<get.resizer.state>get[tiddler-width-metric]] }}}
tiddlerWidthStart={{{ [<get.resizer.state>get[start-tiddler-width]] }}} tiddlerWidthStart={{{ [<get.resizer.state>get[start-tiddler-width]] }}}
tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}} tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}}
tiddlerWidthClampedDiff={{{ [<tiddlerWidthStartPixels>add<storyPaddingLeft>add<storyPaddingRight>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}} tiddlerWidthClampedDiff={{{ [<tiddlerWidthStartPixels>add<storyPaddingLeft>add<storyPaddingRight>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
tiddlerWidth={{{ [<tiddlerWidthStartPixels>add<dragDiff>subtract<tiddlerWidthClampedDiff>] }}} tiddlerWidth={{{ [<tiddlerWidthStartPixels>add<dragDiff>subtract<tiddlerWidthClampedDiff>] }}}
tiddlerWidthDiff={{{ [<storyWidth>subtract<tiddlerWidth>] }}} tiddlerWidthDiff={{{ [<storyWidth>subtract<tiddlerWidth>] }}}
tiddlerMinWidth={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>] :else[<storyMinWidth>subtract<tiddlerWidthDiff>] }}} tiddlerMinWidth={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>] :else[<storyMinWidth>subtract<tiddlerWidthDiff>] }}}
@ -198,8 +198,18 @@ title: $:/core/procedures/sidebar-resizer
:else[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>] :else[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>]
\end \end
\function get.fluid.padding()
[<get.theme.option sidebarposition>match[left]then<storyPaddingLeft>]
:else[<get.theme.option sidebarposition>match[right]then<storyPaddingRight>]
:else[[0]]
\end
\procedure set-sidebarwidth-actions() \procedure set-sidebarwidth-actions()
<$let <$let
storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingLeftTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingleft>] }}}
storyPaddingLeft={{{ [convert.to.pixels.locally<storyPaddingLeftValue>] }}}
storyPaddingRightValue={{{ [<storyPaddingRightTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingRightTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingright>] }}}
storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}}
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}} sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}}
sidebarWidthMetric={{{ [<get.resizer.state>get[sidebar-width-metric]] }}} sidebarWidthMetric={{{ [<get.resizer.state>get[sidebar-width-metric]] }}}
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}} sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
@ -207,8 +217,8 @@ title: $:/core/procedures/sidebar-resizer
storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}} storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}} storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}}
storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}} storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>] }}} sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>add<get.fluid.padding>] }}}
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}} clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
sliderWidth={{{ [convert.to.pixels.locally<get.resizer.style.width>] }}} sliderWidth={{{ [convert.to.pixels.locally<get.resizer.style.width>] }}}
sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>subtract<sliderWidth>] }}}> sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>subtract<sliderWidth>] }}}>
@ -240,7 +250,7 @@ title: $:/core/procedures/sidebar-resizer
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}} sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
storyMaxWidth={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}} storyMaxWidth={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}} dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}}
storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}} storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
storyWidth={{{ [<storyWidthStart>add<dragDiffMultiplied>] }}} storyWidth={{{ [<storyWidthStart>add<dragDiffMultiplied>] }}}
storyWidth={{{ [<storyWidth>subtract<storyWidthClamped>] }}}> storyWidth={{{ [<storyWidth>subtract<storyWidthClamped>] }}}>

7
themes/tiddlywiki/vanilla/base.tid
View File

@ -1521,12 +1521,12 @@ html body.tc-body.tc-single-tiddler-window {
width: auto; width: auto;
left: 0; left: 0;
margin-left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); margin-left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
margin-right: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}})); margin-right: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + <<get.theme.metric storypaddingright>>));
} }
.tc-sidebar-left .tc-story-river { .tc-sidebar-left .tc-story-river {
margin-right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); margin-right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
margin-left: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}})); margin-left: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + <<get.theme.metric storypaddingleft>>));
left: auto; left: auto;
width: auto; width: auto;
right: 0; right: 0;
@ -1547,12 +1547,13 @@ html body.tc-body.tc-single-tiddler-window {
left: auto; left: auto;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})); width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + <<get.theme.metric storypaddingright>>));
} }
.tc-sidebar-left .tc-sidebar-scrollable { .tc-sidebar-left .tc-sidebar-scrollable {
left: 0; left: 0;
right: auto; right: auto;
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + <<get.theme.metric storypaddingleft>>));
} }
html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable { html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable {

4
themes/tiddlywiki/vanilla/sidebar-resizer.tid
View File

@ -121,12 +121,12 @@ code-body: yes
<%if [<set.sidebarwidth>match[yes]] %> <%if [<set.sidebarwidth>match[yes]] %>
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-resizer.tc-main-sidebar-resizer {
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3))); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - <<get.theme.metric storypaddingright>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3)));
} }
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
left: auto; left: auto;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + (<<get.theme.metric storypaddingleft>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingleft>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingleft>> / 3))); right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - <<get.theme.metric storypaddingleft>> + (<<get.theme.metric storypaddingleft>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingleft>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingleft>> / 3)));
} }
<% endif %> <% endif %>