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

wip: make it work cross-theme (tight)

Browse Source
This commit is contained in:
BurningTreeC 2024-10-10 05:18:55 +02:00
parent b33be0663b
commit 1d9a4c4a94
10 changed files with 59 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,26 +60,32 @@ title: $:/core/macros/sidebar-resizer
<$action-deletetiddler $tiddler="$:/state/sidebar/resizing"/>
\end
\function get.theme.metric(metric) [{$:/theme}addsuffix[/]addsuffix<metric>get[text]] ~[[$:/themes/tiddlywiki/vanilla/]addsuffix<metric>get[text]]
\procedure set-storywidth-storyright-actions()
<$let
storyRightStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}}
storyWidthStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-width}] }}}
storyMinWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}] }}}
sidebarMinWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}] }}}
storyPaddingLeft={{{ [get.theme.metric[metrics/storypaddingleft]] }}}
storyPaddingLeft={{{ [convert.to.pixels<storyPaddingLeft>] }}}
storyPaddingRight={{{ [get.theme.metric[metrics/storypaddingright]] }}}
storyPaddingRight={{{ [convert.to.pixels<storyPaddingRight>] }}}
storyLeft={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/storyleft}] }}}
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] ~0 }}}
storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}}
storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
innerStoryWidth={{{ [<storyWidth>subtract[84]] }}}
innerStoryWidthStart={{{ [<storyWidthStart>subtract[84]] }}}
innerStoryWidth={{{ [<storyWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
innerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
storyMinWidthAddLeft={{{ [<storyMinWidth>add<storyLeft>] }}}
storyRiverLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>] }}}
storyMaxWidth={{{ [<storyRiverLimit>subtract<storyLeft>] }}}
tiddlerWidthMetric={{$:/state/sidebar/resizing!!tiddler-width-metric}}
tiddlerWidthStart={{$:/state/sidebar/resizing!!start-tiddler-width}}
tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] ~[convert.to.pixels<tiddlerWidthStart>] }}}
tiddlerWidthClampedDiff={{{ [<tiddlerWidthStartPixels>add[84]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]] ~0 }}}
tiddlerWidth={{{ [<tiddlerWidthStartPixels>add<dragDiff>subtract<tiddlerWidthClampedDiff>] }}}
tiddlerWidthDiff={{{ [<storyWidth>subtract<tiddlerWidth>] }}}
tiddlerMinWidth={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>] ~[<storyMinWidth>subtract<tiddlerWidthDiff>] }}}

2
themes/tiddlywiki/centralised/metrics.multids
View File

@ -2,4 +2,6 @@ title: $:/themes/tiddlywiki/centralised/metrics/
sidebarminwidth: 350px
storyminwidth: 350px
storypaddingleft: 42px
storypaddingright: 42px
storywidth: 770px

4
themes/tiddlywiki/centralised/styles.tid
View File

@ -28,4 +28,8 @@ tags: [[$:/tags/Stylesheet]]
html .tc-tiddler-frame {
width: 100%;
}
html .tc-sidebar-resizer {
left: min(calc(50% + ({{$:/themes/tiddlywiki/centralised/metrics/storywidth}} / 2) - (2 * {{$:/themes/tiddlywiki/centralised/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/centralised/metrics/storypaddingright}} / 3)));
}
}

4
themes/tiddlywiki/tight-heavier/metrics.multids Normal file
View File

@ -0,0 +1,4 @@
title: $:/themes/tiddlywiki/tight-heavier/metrics/
storypaddingleft: 0px
storypaddingright: 0px

23
themes/tiddlywiki/tight/base.tid
View File

@ -1,7 +1,7 @@
title: $:/themes/tiddlywiki/tight/base
tags: [[$:/tags/Stylesheet]]
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline conditional
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
}
@ -38,6 +38,14 @@ tags: [[$:/tags/Stylesheet]]
padding: 12px 0 12px 12px;
}
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
html body.tc-body div.tc-sidebar-scrollable {
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + 42px),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} + 42px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + 42px));
}
<% endif %>
html body.tc-body .tc-tiddler-frame .tc-subtitle {
font-size: 0.7em;
font-weight: 700;
@ -95,4 +103,17 @@ tags: [[$:/tags/Stylesheet]]
margin-top: -4px;
}
html .tc-sidebar-resizer {
width: 12px;
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
}
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] %>
html .tc-sidebar-resizer {
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
}
<% endif %>
}

4
themes/tiddlywiki/tight/metrics.multids Normal file
View File

@ -0,0 +1,4 @@
title: $:/themes/tiddlywiki/tight/metrics/
storypaddingleft: 0px
storypaddingright: 0px

4
themes/tiddlywiki/vanilla/ThemeTweaks.tid
View File

@ -77,6 +77,8 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyright"><<lingo Metrics/StoryRight>></$link><br>//<<lingo Metrics/StoryRight/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storywidth"><<lingo Metrics/StoryWidth>></$link><br>//<<lingo Metrics/StoryWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyminwidth"><<lingo Metrics/StoryMinWidth>></$link><br>//<<lingo Metrics/StoryMinWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyminwidth" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storypaddingleft"><<lingo Metrics/StoryPaddingLeft>></$link><br>//<<lingo Metrics/StoryPaddingLeft/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storypaddingleft" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storypaddingright"><<lingo Metrics/StoryPaddingRight>></$link><br>//<<lingo Metrics/StoryPaddingRight/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storypaddingright" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth"><<lingo Metrics/TiddlerWidth>></$link><br>//<<lingo Metrics/TiddlerWidth/Hint>>//<br> |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint"><<lingo Metrics/SidebarBreakpoint>></$link><br>//<<lingo Metrics/SidebarBreakpoint/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth"><<lingo Metrics/SidebarWidth>></$link><br>//<<lingo Metrics/SidebarWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth" default="" tag="input"/> |
@ -86,6 +88,8 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}
|<$link to="$:/themes/tiddlywiki/centralised/metrics/storywidth"><<lingo Centralised/Metrics/StoryWidth>></$link><br>//<<lingo Centralised/Metrics/StoryWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/centralised/metrics/storywidth" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/centralised/metrics/storyminwidth"><<lingo Centralised/Metrics/StoryMinWidth>></$link><br>//<<lingo Centralised/Metrics/StoryMinWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/centralised/metrics/storyminwidth" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/centralised/metrics/storypaddingleft"><<lingo Centralised/Metrics/StoryPaddingLeft>></$link><br>//<<lingo Centralised/Metrics/StoryPaddingLeft/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/centralised/metrics/storypaddingleft" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/centralised/metrics/storypaddingright"><<lingo Centralised/Metrics/StoryPaddingRight>></$link><br>//<<lingo Centralised/Metrics/StoryPaddingRight/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/centralised/metrics/storypaddingright" default="" tag="input"/> |
|<$link to="$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth"><<lingo Centralised/Metrics/SidebarMinWidth>></$link><br>//<<lingo Centralised/Metrics/SidebarMinWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth" default="" tag="input"/> |
<% endif %>

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

@ -1047,7 +1047,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},{{$:/themes/tiddlywiki/vanilla/metrics/storywidth}},calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
padding: 42px 42px 42px 42px;
padding: 42px {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} 42px {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingleft}};
}
<<if-no-sidebar "

2
themes/tiddlywiki/vanilla/metrics.multids
View File

@ -8,8 +8,10 @@ sidebarbreakpoint: 960px
sidebarminwidth: 350px
sidebarwidth: 350px
storyleft: 0px
storypaddingleft: 42px
storyminwidth: 168px
storytop: 0px
storyright: 770px
storypaddingright: 42px
storywidth: 770px
tiddlerwidth: 686px

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

@ -14,7 +14,7 @@ code-body: yes
position: fixed;
top: 0;
height: 100%;
width: 22px;
width: min(calc({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 2),21px);
transition: opacity 100ms;
opacity: 0.1;
cursor: ew-resize;
@ -80,22 +80,14 @@ code-body: yes
<% endif %>
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
.tc-sidebar-resizer {
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3))),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3) + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - (2 * {{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
}
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]] %>
.tc-sidebar-resizer {
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 28px),clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - 28px),max(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - 28px),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - 28px)),max(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - 28px + ({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - 28px))),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - 28px));
}
<%elseif [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then{$:/theme}!match[$:/themes/tiddlywiki/centralised]] %>
.tc-sidebar-resizer {
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + 14px));
}
<%elseif [{$:/theme}match[$:/themes/tiddlywiki/centralised]] %>
.tc-sidebar-resizer {
left: min(calc(50% + ({{$:/themes/tiddlywiki/centralised/metrics/storywidth}} / 2) - 28px),calc(100% - {{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}} - 28px));
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + ({{$:/themes/tiddlywiki/vanilla/metrics/storypaddingright}} / 3)));
}
<% endif %>