Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@BurningTreeC
BurningTreeC committed Sep 16, 2024
1 parent 9897dd8 commit 92fb631
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 32 deletions.
2 changes: 2 additions & 0 deletions TiddlyFlex/config/PageControlsButtonsVisibility/switch-view.tid
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
title: $:/config/PageControlButtons/Visibility/$:/plugins/BTC/TiddlyFlex/ui/Buttons/TopToolbar/switch-view
text: hide
76 changes: 46 additions & 30 deletions TiddlyFlex/css/menu.tid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,18 @@ tags: $:/tags/Stylesheet
display: none;
}

<%if [[$:/state/sidebar/posx]is[missing]] %>

.tc-tiddler-controls > button:not(.tc-tiddlyflex-shown-when-narrow) {
display: inline;
}

.tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: none;
}

<% endif %>

<%if [{$:/config/tiddlyflex/story-river/horizontal}!match[yes]] %>

<$list filter="[{$:/state/sidebar}match[no]] :then[subfilter<tdff.tiddlyflex-enlist-columns>count[]compare:number:gteq{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint}] :else[subfilter<tdff.tiddlyflex-enlist-columns>count[]compare:number:gteq{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}]" variable="column">
Expand All @@ -25,59 +37,63 @@ tags: $:/tags/Stylesheet

<% endif %>

<$vars sidebarWidthPixels={{{ [{$:/config/tiddlyflex/sidebar/width}removesuffix[px]] }}} sidebarWidthPercentage={{{ [{$:/config/tiddlyflex/sidebar/width}removesuffix[%]] }}} drag-diff={{$:/state/sidebar/posx!!drag-diff}} selectednodeWidth={{$:/state/sidebar/posx!!selectednode-width}} containerWidth={{$:/state/sidebar/posx!!widgetnode-width}} columnCount={{{ [{$:/config/tiddlyflex/story-river/horizontal}!match[yes]] :then[subfilter<tdff.tiddlyflex-enlist-columns>count[]] ~1 }}} minStoryWidth={{{ [{$:/config/tiddlyflex/story-river/min-width}removesuffix[px]] }}} leftbarWidth={{$:/state/sidebar/posx!!leftbar-width}}>
<%if [[$:/state/sidebar/posx]!is[missing]] %>

<$vars sidebarWidthPixels={{{ [{$:/config/tiddlyflex/sidebar/width}removesuffix[px]] }}} sidebarWidthPercentage={{{ [{$:/config/tiddlyflex/sidebar/width}removesuffix[%]] }}} drag-diff={{$:/state/sidebar/posx!!drag-diff}} selectednodeWidth={{$:/state/sidebar/posx!!selectednode-width}} containerWidth={{$:/state/sidebar/posx!!widgetnode-width}} columnCount={{{ [{$:/config/tiddlyflex/story-river/horizontal}!match[yes]] :then[subfilter<tdff.tiddlyflex-enlist-columns>count[]] ~1 }}} minStoryWidth={{{ [{$:/config/tiddlyflex/story-river/min-width}removesuffix[px]] }}} leftbarWidth={{{ [all[shadows+tiddlers]tag[$:/tags/LeftToolbar]limit[1]] :then[{$:/state/sidebar/posx!!leftbar-width}] ~0 }}}>

<%if [<sidebarWidthPixels>!is[blank]!match[]] %>
<%if [<sidebarWidthPixels>!is[blank]!match[]] %>

<$let viewportWidth={{$:/state/DynaView/ViewportDimensions/Width}} containerWidth={{{ [<viewportWidth>!is[blank]subtract<leftbarWidth>] ~[<containerWidth>] }}}>
<$let viewportWidth={{$:/state/DynaView/ViewportDimensions/Width}} containerWidth={{{ [<viewportWidth>!is[blank]subtract<leftbarWidth>] ~[<containerWidth>] }}}>

<$let originalStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPixels>] }}} originalSingleColumnWidth={{{ [<originalStoryContainerWidth>divide<columnCount>] }}} sidebarResizerWidth={{{ [<selectednodeWidth>divide[2]] }}} gripDiff={{{ [<sidebarResizerWidth>subtract<drag-diff>] }}} minStoryContainerWidth={{{ [<minStoryWidth>multiply<columnCount>] }}} sidebarWidthMax={{{ [<containerWidth>subtract<minStoryContainerWidth>] }}} sidebarWidth={{{ [<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:lteq<sidebarWidthPixels>then<sidebarWidthPixels>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:gteq<sidebarWidthMax>then<sidebarWidthMax>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>] }}} maxStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPixels>] }}} storyContainerWidth={{{ [<containerWidth>subtract<sidebarWidth>compare:number:gteq<minStoryContainerWidth>] ~[<minStoryContainerWidth>] }}} singleColumnWidth={{{ [<storyContainerWidth>divide<columnCount>compare:number:gt<minStoryWidth>] ~[<minStoryWidth>] }}} narrowWidthWhenSidebarShown={{{ [<originalStoryContainerWidth>divide{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}compare:number:gteq<minStoryWidth>] ~[<minStoryWidth>multiply{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}divide<columnCount>] }}}>
<$let originalStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPixels>] }}} originalSingleColumnWidth={{{ [<originalStoryContainerWidth>divide<columnCount>] }}} sidebarResizerWidth={{{ [<selectednodeWidth>divide[2]] }}} gripDiff={{{ [<sidebarResizerWidth>subtract<drag-diff>] }}} minStoryContainerWidth={{{ [<minStoryWidth>multiply<columnCount>] }}} sidebarWidthMax={{{ [<containerWidth>subtract<minStoryContainerWidth>] }}} sidebarWidth={{{ [<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:lteq<sidebarWidthPixels>then<sidebarWidthPixels>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:gteq<sidebarWidthMax>then<sidebarWidthMax>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>] }}} maxStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPixels>] }}} storyContainerWidth={{{ [<containerWidth>subtract<sidebarWidth>compare:number:gteq<minStoryContainerWidth>] ~[<minStoryContainerWidth>] }}} singleColumnWidth={{{ [<storyContainerWidth>divide<columnCount>compare:number:gt<minStoryWidth>] ~[<minStoryWidth>] }}} narrowWidthWhenSidebarShown={{{ [<originalStoryContainerWidth>divide{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}compare:number:gteq<minStoryWidth>] ~[<minStoryWidth>multiply{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}divide<columnCount>] }}}>

<%if [<singleColumnWidth>compare:number:lteq<narrowWidthWhenSidebarShown>] %>
<%if [<singleColumnWidth>compare:number:lteq<narrowWidthWhenSidebarShown>] %>

.tc-tiddler-controls > button:not(.tc-tiddlyflex-shown-when-narrow) {
display: none;
}
.tc-tiddler-controls > button:not(.tc-tiddlyflex-shown-when-narrow) {
display: none;
}

.tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: block;
}
.tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: block;
}

<% endif %>
<% endif %>

</$let>

</$let>

</$let>
<% elseif [<sidebarWidthPercentage>!is[blank]!match[]] %>

<% elseif [<sidebarWidthPercentage>!is[blank]!match[]] %>
<$let viewportWidth={{$:/state/DynaView/ViewportDimensions/Width}} containerWidth={{{ [<viewportWidth>!is[blank]subtract<leftbarWidth>] ~[<containerWidth>] }}}>

<$let viewportWidth={{$:/state/DynaView/ViewportDimensions/Width}} containerWidth={{{ [<viewportWidth>!is[blank]subtract<leftbarWidth>] ~[<containerWidth>] }}}>
<$set name="sidebarWidthPercentage" value={{{ [<containerWidth>divide[100]multiply<sidebarWidthPercentage>] }}}>

<$set name="sidebarWidthPercentage" value={{{ [<containerWidth>divide[100]multiply<sidebarWidthPercentage>] }}}>
<$let originalStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPercentage>] }}} originalSingleColumnWidth={{{ [<originalStoryContainerWidth>divide<columnCount>] }}} sidebarResizerWidth={{{ [<selectednodeWidth>divide[2]] }}} gripDiff={{{ [<sidebarResizerWidth>subtract<drag-diff>] }}} minStoryContainerWidth={{{ [<minStoryWidth>multiply<columnCount>] }}} sidebarWidthMax={{{ [<containerWidth>subtract<minStoryContainerWidth>] }}} sidebarWidth={{{ [<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:lteq<sidebarWidthPercentage>then<sidebarWidthPercentage>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:gteq<sidebarWidthMax>then<sidebarWidthMax>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>] }}} maxStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPercentage>] }}} storyContainerWidth={{{ [<containerWidth>subtract<sidebarWidth>compare:number:gteq<minStoryContainerWidth>] ~[<minStoryContainerWidth>] }}} singleColumnWidth={{{ [<storyContainerWidth>divide<columnCount>compare:number:gt<minStoryWidth>] ~[<minStoryWidth>] }}} narrowWidthWhenSidebarShown={{{ [<originalStoryContainerWidth>divide{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}compare:number:gteq<minStoryWidth>] ~[<minStoryWidth>multiply{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}divide<columnCount>] }}}>

<$let originalStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPercentage>] }}} originalSingleColumnWidth={{{ [<originalStoryContainerWidth>divide<columnCount>] }}} sidebarResizerWidth={{{ [<selectednodeWidth>divide[2]] }}} gripDiff={{{ [<sidebarResizerWidth>subtract<drag-diff>] }}} minStoryContainerWidth={{{ [<minStoryWidth>multiply<columnCount>] }}} sidebarWidthMax={{{ [<containerWidth>subtract<minStoryContainerWidth>] }}} sidebarWidth={{{ [<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:lteq<sidebarWidthPercentage>then<sidebarWidthPercentage>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>compare:number:gteq<sidebarWidthMax>then<sidebarWidthMax>] ~[<containerWidth>subtract{$:/state/sidebar/posx}add<gripDiff>] }}} maxStoryContainerWidth={{{ [<containerWidth>subtract<sidebarWidthPercentage>] }}} storyContainerWidth={{{ [<containerWidth>subtract<sidebarWidth>compare:number:gteq<minStoryContainerWidth>] ~[<minStoryContainerWidth>] }}} singleColumnWidth={{{ [<storyContainerWidth>divide<columnCount>compare:number:gt<minStoryWidth>] ~[<minStoryWidth>] }}} narrowWidthWhenSidebarShown={{{ [<originalStoryContainerWidth>divide{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}compare:number:gteq<minStoryWidth>] ~[<minStoryWidth>multiply{$:/config/tiddlyflex/story-river/tiddler/controls-breakpoint-sidebar}divide<columnCount>] }}}>
<%if [<singleColumnWidth>compare:number:lteq<narrowWidthWhenSidebarShown>] %>

<%if [<singleColumnWidth>compare:number:lteq<narrowWidthWhenSidebarShown>] %>
.tc-tiddler-controls > button:not(.tc-tiddlyflex-shown-when-narrow) {
display: none;
}

.tc-tiddler-controls > button:not(.tc-tiddlyflex-shown-when-narrow) {
display: none;
}
.tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: block;
}

.tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: block;
}
<% endif %>

<% endif %>
</$let>

</$let>
</$set>

</$set>
</$let>

</$let>
<% endif %>

<% endif %>
</$vars>

</$vars>
<% endif %>

}

Expand Down
2 changes: 2 additions & 0 deletions TiddlyFlex/css/narrow.tid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,15 @@ tags: $:/tags/Stylesheet
.tc-tiddlyflex-story-river-container-inner {
overflow-x: auto;
width: 100%;
max-width: 100%;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}

.tc-tiddlyflex-story-river-wrapper {
width: 100%;
flex-basis: 100%;
max-width: 100%;
scroll-snap-align: start;
overflow: hidden;
}
Expand Down
2 changes: 1 addition & 1 deletion TiddlyFlex/global/layout/sidebar-resizer.tid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ tags: $:/tags/Global
\procedure tiddlyflex-sidebar-resizer-pointerdown-actions()
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
<$action-setfield $tiddler="$:/state/sidebar/resizing" text="yes"/>
<$action-setfield $tiddler="$:/state/sidebar/posx" drag-diff=<<event-fromselected-posx>> selectednode-width=<<tv-selectednode-width>> widgetnode-width=<<tv-widgetnode-width>> text=<<event-fromcatcher-posx>> column-count={{{ [subfilter<tdff.tiddlyflex-enlist-columns>count[]] }}} leftbar-width={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}}/>
<$action-setfield $tiddler="$:/state/sidebar/posx" starting-posx=<<event-fromcatcher-posx>> drag-diff=<<event-fromselected-posx>> selectednode-width=<<tv-selectednode-width>> widgetnode-width=<<tv-widgetnode-width>> text=<<event-fromcatcher-posx>> column-count={{{ [subfilter<tdff.tiddlyflex-enlist-columns>count[]] }}} leftbar-width={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}}/>
<% endif %>
\end
\procedure tiddlyflex-sidebar-resizer-pointerup-actions()
Expand Down
2 changes: 1 addition & 1 deletion TiddlyFlex/plugin.info
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"name": "TiddlyFlex",
"plugin-type": "plugin",
"author": "Simon Huber",
"version": "0.2.3",
"version": "0.2.4",
"core-version": ">=5.3.3",
"source": "https://github.com/BurningTreeC/TiddlyFlex",
"list": "readme license"
Expand Down

0 comments on commit 92fb631

Please sign in to comment.