1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-08 14:55:17 +00:00

Use scrollable widget to maintain scroll position

This commit is contained in:
Jeremy Ruston 2025-04-07 16:35:26 +01:00
parent 3c6ec3f9bb
commit 28698690b3
2 changed files with 45 additions and 39 deletions

View File

@ -9,11 +9,12 @@ tags: $:/tags/Macro
> >
<div class=<<class>>> <div class=<<class>>>
<$let <$let
state=<<qualify "$:/temp/filter-inspector">> state=<<qualify "$:/temp/filter-inspector/list">>
stateFolded={{{ [<state>addsuffix[folded]] }}} stateFolded={{{ [<state>addsuffix[folded]] }}}
folded={{{ [<stateFolded>get[text]else[no]match[yes]] }}} folded={{{ [<stateFolded>get[text]else[no]match[yes]] }}}
stateMaxRows={{{ [<state>addsuffix[max-rows]] }}} stateMaxRows={{{ [<state>addsuffix[max-rows]] }}}
maxRows={{{ [<stateMaxRows>get[text]!match[]else[10]] }}} maxRows={{{ [<stateMaxRows>get[text]!match[]else[10]] }}}
stateScroll={{{ [<state>addsuffix[scroll]] }}}
> >
<div class="tc-box-header"> <div class="tc-box-header">
<$button class="tc-btn-invisible" style.fill="inherit"> <$button class="tc-btn-invisible" style.fill="inherit">
@ -28,6 +29,7 @@ tags: $:/tags/Macro
</div> </div>
<%if [<folded>!match[yes]] %> <%if [<folded>!match[yes]] %>
<div class="tc-box-content"> <div class="tc-box-content">
<$scrollable class="tc-box-content-list-scollable" bind=<<stateScroll>>>
<div class="tc-box-content-list"> <div class="tc-box-content-list">
<$list filter="[<jsonList>jsonindexes[]nsort[]limit<maxRows>]" variable="indexList"> <$list filter="[<jsonList>jsonindexes[]nsort[]limit<maxRows>]" variable="indexList">
<$list-template> <$list-template>
@ -48,6 +50,7 @@ tags: $:/tags/Macro
</$button> </$button>
<%endif%> <%endif%>
</div> </div>
</$scrollable>
</div> </div>
<%endif%> <%endif%>
</$let> </$let>
@ -137,6 +140,7 @@ tags: $:/tags/Macro
\procedure inspect-filter(filter,inputFilter:"[all[tiddlers]]",orientation:"horizontal") \procedure inspect-filter(filter,inputFilter:"[all[tiddlers]]",orientation:"horizontal")
<$let json={{{ [subfilter<inputFilter>inspect<filter>] }}}> <$let json={{{ [subfilter<inputFilter>inspect<filter>] }}}>
<$scrollable bind={{{ [<qualify "$:/temp/filter-inspector/">addsuffix<filter>] }}}>
<div class={{{ tc-inspect-filter-box [<orientation>match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}> <div class={{{ tc-inspect-filter-box [<orientation>match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}>
<div class="tc-box"> <div class="tc-box">
<div class="tc-box-header"> <div class="tc-box-header">
@ -154,5 +158,6 @@ tags: $:/tags/Macro
</div> </div>
</div> </div>
</div> </div>
</$scrollable>
</$let> </$let>
\end inspect-filter \end inspect-filter

View File

@ -3529,10 +3529,12 @@ span.tc-translink > a:first-child {
background-color: var(--box-background-color); background-color: var(--box-background-color);
} }
.tc-box-content-list { .tc-box-content-list-scollable {
margin: -0.25em; margin: -0.25em;
max-height: 25vh; max-height: 25vh;
overflow: scroll; }
.tc-box-content-list {
} }
.tc-box-content-list-item { .tc-box-content-list-item {
@ -3585,7 +3587,6 @@ span.tc-translink > a:first-child {
} }
.tc-inspect-filter-box.tc-inspect-filter-box-horizontal { .tc-inspect-filter-box.tc-inspect-filter-box-horizontal {
overflow: scroll;
display: flex; display: flex;
} }