mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-04-08 03:36:38 +00:00
Code Issues Releases Wiki Activity

Add horizontal presentation

Browse Source
This commit is contained in:
Jeremy Ruston 2025-04-03 09:26:07 +01:00
parent 1e10496fd6
commit f6b39d1a40
3 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/wiki/macros/inspect-filter.tid
View File

@ -77,9 +77,9 @@ tags: $:/tags/Macro
</div>
\end inspect-run
\procedure inspect-filter(filter,inputFilter:"[all[tiddler]]")
\procedure inspect-filter(filter,inputFilter:"[all[tiddler]]",orientation:"horizontal")
<$let json={{{ [subfilter<inputFilter>inspect<filter>] }}}>
<div class="tc-box tc-inspect-filter-box">
<div class={{{ tc-box tc-inspect-filter-box [<orientation>match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}>
<div class="tc-box-header">
Filter
<span class="tc-pill"><$text text={{{ [<json>jsonget[inputFilter]] }}}/></span>

4
editions/tw5.com/tiddlers/filters/inspect Operator.tid
View File

@ -28,5 +28,7 @@ The JSON object contains the following properties:
!! Examples
<$transclude $variable="inspect-filter" filter="1 2 3" inputFilter="[all[tiddler]]"/>
<$transclude $variable="inspect-filter" filter="[list[$:/StoryList]] -$:/AdvancedSearch" inputFilter="[all[tiddler]]"/>
<$transclude $variable="inspect-filter" filter="[list[$:/StoryList]] -$:/AdvancedSearch" inputFilter="[all[tiddler]]" orientation="vertical"/>

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

@ -3491,7 +3491,7 @@ span.tc-translink > a:first-child {
}
/*
** Filter Inspection
** Headed box and pills
*/
.tc-box {
@ -3503,31 +3503,6 @@ span.tc-translink > a:first-child {
margin: 0.5em;
}
.tc-inspect-filter-box {
--box-background-color: <<colour code-border>>;
--box-foreground-color: <<colour code-foreground>>;
}
.tc-inspect-run-box {
--box-background-color: #ffc;
--box-foreground-color: #440;
}
.tc-inspect-operator-box {
--box-background-color: #fcc;
--box-foreground-color: #400;
}
.tc-inspect-input-box {
--box-background-color: #fcf;
--box-foreground-color: #404;
}
.tc-inspect-output-box {
--box-background-color: #cff;
--box-foreground-color: #044;
}
.tc-box-header {
padding: 0.25em;
border-top-left-radius: 3px;
@ -3560,6 +3535,48 @@ span.tc-translink > a:first-child {
background-color: var(--box-background-color);
}
/*
** Filter Inspection
*/
.tc-inspect-filter-box {
--box-background-color: <<colour code-border>>;
--box-foreground-color: <<colour code-foreground>>;
}
.tc-inspect-filter-box.tc-inspect-filter-box-horizontal {
overflow: scroll
}
.tc-inspect-filter-box.tc-inspect-filter-box-horizontal > .tc-box-content,
.tc-inspect-filter-box.tc-inspect-filter-box-horizontal .tc-inspect-run-box > .tc-box-content,
.tc-inspect-filter-box.tc-inspect-filter-box-horizontal .tc-inspect-operator-box > .tc-box-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.tc-inspect-run-box {
--box-background-color: #ffc;
--box-foreground-color: #440;
}
.tc-inspect-operator-box {
--box-background-color: #fcc;
--box-foreground-color: #400;
}
.tc-inspect-input-box {
--box-background-color: #fcf;
--box-foreground-color: #404;
}
.tc-inspect-output-box {
--box-background-color: #cff;
--box-foreground-color: #044;
}
/*
** Flexbox utility classes
*/