mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-07 22:33:50 +00:00
Code Issues Releases Wiki Activity

Use scrollable widget to maintain scroll position

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
core/wiki/macros/inspect-filter.tid
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,26 +29,28 @@ tags: $:/tags/Macro
</div> </div>
<%if [<folded>!match[yes]] %> <%if [<folded>!match[yes]] %>
<div class="tc-box-content"> <div class="tc-box-content">
<div class="tc-box-content-list"> <$scrollable class="tc-box-content-list-scollable" bind=<<stateScroll>>>
<$list filter="[<jsonList>jsonindexes[]nsort[]limit<maxRows>]" variable="indexList"> <div class="tc-box-content-list">
<$list-template> <$list filter="[<jsonList>jsonindexes[]nsort[]limit<maxRows>]" variable="indexList">
<div class="tc-box-content-list-item"> <$list-template>
<$text text={{{ [<jsonList>jsonget<indexList>] }}} /> <div class="tc-box-content-list-item">
</div> <$text text={{{ [<jsonList>jsonget<indexList>] }}} />
</$list-template> </div>
<$list-empty> </$list-template>
<div class="tc-box-content-list-empty"> <$list-empty>
(No items) <div class="tc-box-content-list-empty">
</div> (No items)
</$list-empty> </div>
</$list> </$list-empty>
<%if [<jsonList>jsonindexes[]count[]compare:number:gt<maxRows>] %> </$list>
<$button class="tc-btn-invisible" style.fill="inherit"> <%if [<jsonList>jsonindexes[]count[]compare:number:gt<maxRows>] %>
<$action-setfield $tiddler=<<stateMaxRows>> text={{{ [<maxRows>add[10]] }}}/> <$button class="tc-btn-invisible" style.fill="inherit">
{{$:/core/images/chevron-down}} <$action-setfield $tiddler=<<stateMaxRows>> text={{{ [<maxRows>add[10]] }}}/>
</$button> {{$:/core/images/chevron-down}}
<%endif%> </$button>
</div> <%endif%>
</div>
</$scrollable>
</div> </div>
<%endif%> <%endif%>
</$let> </$let>
@ -137,22 +140,24 @@ 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>] }}}>
<div class={{{ tc-inspect-filter-box [<orientation>match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}> <$scrollable bind={{{ [<qualify "$:/temp/filter-inspector/">addsuffix<filter>] }}}>
<div class="tc-box"> <div class={{{ tc-inspect-filter-box [<orientation>match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}>
<div class="tc-box-header"> <div class="tc-box">
Filter <div class="tc-box-header">
<span class="tc-pill"><$text text={{{ [<json>jsonget[inputFilter]] }}}/></span> Filter
</div> <span class="tc-pill"><$text text={{{ [<json>jsonget[inputFilter]] }}}/></span>
<div class="tc-box-content"> </div>
<$transclude $variable="inspect-list" jsonList={{{ [<json>jsonextract[input]] }}} class="tc-box tc-inspect-input-box"/> <div class="tc-box-content">
<$list filter="[<json>jsonindexes[runs]nsort[]]" variable="indexRun"> <$transclude $variable="inspect-list" jsonList={{{ [<json>jsonextract[input]] }}} class="tc-box tc-inspect-input-box"/>
<$let transclusion={{{ [[run-]addsuffix<indexRun>] }}}> <$list filter="[<json>jsonindexes[runs]nsort[]]" variable="indexRun">
<$transclude $variable="inspect-run" jsonRun={{{ [<json>jsonextract[runs],<indexRun>] }}}/> <$let transclusion={{{ [[run-]addsuffix<indexRun>] }}}>
</$let> <$transclude $variable="inspect-run" jsonRun={{{ [<json>jsonextract[runs],<indexRun>] }}}/>
</$list> </$let>
<$transclude $variable="inspect-list" jsonList={{{ [<json>jsonextract[output]] }}} class="tc-box tc-inspect-output-box"/> </$list>
<$transclude $variable="inspect-list" jsonList={{{ [<json>jsonextract[output]] }}} class="tc-box tc-inspect-output-box"/>
</div>
</div> </div>
</div> </div>
</div> </$scrollable>
</$let> </$let>
\end inspect-filter \end inspect-filter

7
themes/tiddlywiki/vanilla/base.tid
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;
} }