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

only use sidebarresizer if theme explicitly sets option to show

Browse Source
This commit is contained in:
BurningTreeC 2024-10-27 09:37:04 +01:00
parent f7d83b8cdd
commit 1b5889f017
12 changed files with 128 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/ui/PageTemplate/sidebar-resizer.tid
View File

@ -5,7 +5,7 @@ list-after: $:/core/ui/PageTemplate/story
\import [function[get.base.functions.theme],<get.current.theme>first[]!is[missing]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]] [[$:/core/macros/sidebar-resizer]]
\whitespace trim
<%if [<get.theme.option sidebarresizer>match[show]] %>
<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
<$let
tv-set-storywidth-storyright=<<set.storywidth.storyright>>

2
core/wiki/functions/themes.tid
View File

@ -45,6 +45,8 @@ tags: $:/tags/Global
\function get.theme.option(option) [function[get.base.theme.option],<get.current.theme>,<option>first[]get[text]]
\function get.theme.explicit.option(option) [<get.current.theme>addsuffix[/options/]addsuffix<option>get[text]]
\function get.theme(metric) [function[get.base.theme],<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>!is[missing]] :else[function[get.base.theme],<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
\function set.theme.metric(metric) [function[get.base.theme.metric],<get.current.theme>,<metric>first[]is[shadow]] :else[function[get.base.theme.metric],<get.current.theme>,<metric>first[]!is[shadow]!is[missing]] :else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]

3
themes/tiddlywiki/centralised/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/centralised/options/
sidebarresizer: show

3
themes/tiddlywiki/example/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/example/options/
sidebarresizer: show

3
themes/tiddlywiki/heavier/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/heavier/options/
sidebarresizer: show

3
themes/tiddlywiki/readonly/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/readonly/options/
sidebarresizer: show

3
themes/tiddlywiki/seamless/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/seamless/options/
sidebarresizer: show

3
themes/tiddlywiki/snowwhite/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/snowwhite/options/
sidebarresizer: show

3
themes/tiddlywiki/starlight/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/starlight/options/
sidebarresizer: show

3
themes/tiddlywiki/tight-heavier/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/tight-heavier/options/
sidebarresizer: show

3
themes/tiddlywiki/tight/options.multids Normal file
View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/tight/options/
sidebarresizer: show

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

@ -6,130 +6,134 @@ code-body: yes
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
@media (min-width: <<sidebarbreakpoint>>) {
<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
.tc-sidebar-resizer {
position: fixed;
top: 0;
height: 100%;
width: <<sidebar.resizer.width>>;
transition: opacity 100ms;
opacity: 0.1;
cursor: ew-resize;
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
}
.tc-sidebar-resizer:hover {
opacity: 0.6;
}
@media (pointer: coarse) {
@media (min-width: <<sidebarbreakpoint>>) {
.tc-sidebar-resizer {
background: <<colour muted-foreground>>;
position: fixed;
top: 0;
height: 100%;
width: <<sidebar.resizer.width>>;
transition: opacity 100ms;
opacity: 0.1;
cursor: ew-resize;
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
}
.tc-sidebar-resizer:hover {
opacity: 0.1;
}
}
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
min-height: 100%;
z-index: -1;
}
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
touch-action: none;
user-select: none;
}
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
z-index: 801;
}
.tc-sidebar-resizer-pointermove-eventcatcher {
z-index: 802;
}
.tc-sidebar-resizer-pointermove {
z-index: 803;
cursor: ew-resize;
}
.tc-sidebar-resizer {
opacity: 0.6;
}
@media (pointer: coarse) {
.tc-sidebar-resizer {
opacity: 0.25;
background: <<colour muted-foreground>>;
}
.tc-sidebar-resizer:hover {
opacity: 0.1;
}
}
<% endif %>
<%if [<set.storywidth.storyright>match[yes]] %>
.tc-sidebar-resizer {
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
min-height: 100%;
z-index: -1;
}
.tc-sidebar-left .tc-sidebar-resizer {
left: auto;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
touch-action: none;
user-select: none;
}
<% endif %>
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
<%if [<set.sidebarwidth>match[yes]] %>
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
z-index: 801;
}
.tc-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)));
}
.tc-sidebar-resizer-pointermove-eventcatcher {
z-index: 802;
}
.tc-sidebar-left .tc-sidebar-resizer {
left: auto;
right: 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)));
}
.tc-sidebar-resizer-pointermove {
z-index: 803;
cursor: ew-resize;
}
<% endif %>
.tc-sidebar-resizer {
opacity: 0.6;
}
<%if [<set.centralised>match[yes]] %>
@media (pointer: coarse) {
.tc-sidebar-resizer {
left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
}
.tc-sidebar-resizer {
opacity: 0.25;
}
}
.tc-sidebar-left .tc-sidebar-resizer {
left: auto;
right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
}
<% endif %>
<% endif %>
<%if [<set.storywidth.storyright>match[yes]] %>
<%if [{$:/state/sidebar}match[no]] %>
.tc-sidebar-resizer {
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
}
.tc-sidebar-left .tc-sidebar-resizer {
left: auto;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
}
<% endif %>
<%if [<set.sidebarwidth>match[yes]] %>
.tc-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)));
}
.tc-sidebar-left .tc-sidebar-resizer {
left: auto;
right: 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)));
}
<% endif %>
<%if [<set.centralised>match[yes]] %>
.tc-sidebar-resizer {
left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
}
.tc-sidebar-left .tc-sidebar-resizer {
left: auto;
right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)));
}
<% endif %>
<%if [{$:/state/sidebar}match[no]] %>
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
display: none;
}
<% endif %>
}
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
display: none;
}
<% endif %>
}
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove, .tc-sidebar-resizer {
display: none;
}
}
<% endif %>