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

Add tabs and recent list to the sidebar

Browse Source
This commit is contained in:
Jeremy Ruston 2025-02-10 13:47:41 +00:00
parent d8dfc10ea8
commit 7da70ecf6a
5 changed files with 80 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
core/ui/Palettes/Preview/Helpers.tid Normal file
View File

@ -0,0 +1,49 @@
title: $:/core/ui/Palettes/Preview/Helpers
tags: $:/tags/Preview/Helpers
\whitespace trim
\procedure palette-preview-component-list(tag)
<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle">
<$transclude $tiddler=<<componentTitle>> title=<<title>>/>
</$list>
\end palette-preview-component-list
\procedure tab-set(tabTitles,colourPrefix:"")
<div class="tc-palette-preview-thumbnail-tab-set">
<div class="tc-palette-preview-thumbnail-tab-buttons">
<$list filter="[enlist<tabTitles>]" variable="tabTitle" counter="tabIndex">
<%if [<tabIndex>match[1]] %>
<span
class="tc-palette-preview-thumbnail-tab-button"
style.border-color={{{ [<colourPrefix>addsuffix[tab-border-selected]] :map[function[colour],<currentTiddler>] }}}
style.color={{{ [<colourPrefix>addsuffix[tab-foreground-selected]] :map[function[colour],<currentTiddler>] }}}
style.background-color={{{ [<colourPrefix>addsuffix[tab-background-selected]] :map[function[colour],<currentTiddler>] }}}
>
<$text text=<<tabTitle>>/>
</span>
<%else%>
<span
class="tc-palette-preview-thumbnail-tab-button"
style.border-color={{{ [<colourPrefix>addsuffix[tab-border]] :map[function[colour],<currentTiddler>] }}}
style.color={{{ [<colourPrefix>addsuffix[tab-foreground]] :map[function[colour],<currentTiddler>] }}}
style.background-color={{{ [<colourPrefix>addsuffix[tab-background]] :map[function[colour],<currentTiddler>] }}}
>
<$text text=<<tabTitle>>/>
</span>
<%endif%>
</$list>
</div>
<div
class="tc-palette-preview-thumbnail-tab-divider"
style.border-color={{{ [<colourPrefix>addsuffix[tab-divider]] :map[function[colour],<currentTiddler>] }}}
>
</div>
</div>
\end tab-set
\procedure link(text)
<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour primary>>>
<$text text=<<text>>/>
</span>
\end link

18
core/ui/Palettes/Preview/SideBar/Tabs.tid Normal file
View File

@ -0,0 +1,18 @@
title: $:/core/ui/Palettes/Preview/Sidebar/Tabs
tags: $:/tags/Preview/SideBar
\whitespace trim
\procedure recent-links()
HelloThere Community Portal GettingStarted Development Download Filters Palettes Plugins Macros Templates Themes Stylesheets SystemTiddlers
\end recent-links
<<tab-set "Magna Placerat Ligula Imperdiet" "sidebar-">>
<div class="tc-palette-preview-thumbnail-sidebar-list">
<$list filter="[enlist<recent-links>]">
<div>
<$transclude $variable="link" text=<<currentTiddler>>/>
</div>
</$list>
</div>

31
core/ui/Palettes/Preview/Tiddler/Body.tid
View File

@ -3,40 +3,13 @@ tags: $:/tags/Preview/Tiddler
\whitespace trim
\procedure link(text)
<span class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour primary>>>
<$text text=<<text>>/>
</span>
\end link
\procedure tab-button(text)
<span class="tc-palette-preview-thumbnail-tab-button" style.border-color=<<colour tab-border>> style.color=<<colour tab-foreground>> style.background-color=<<colour tab-background>>>
<$text text=<<text>>/>
</span>
\end tab-button
<div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>>
<%if [<title>match[HelloThere]] %>
Lorem ipsum dolor sit amet, <<link "consectetur adipiscing elit">>. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam efficitur velit tortor, sit amet tristique felis viverra sit amet. <<link "Nullam posuere facilisis purus sed">> consectetur. Integer vel elit euismod, posuere ligula et, dictum tellus. Donec in odio diam. Sed metus magna, placerat at ligula et, imperdiet sagittis ex.
<%else%>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="tc-palette-preview-thumbnail-tab-set">
<div class="tc-palette-preview-thumbnail-tab-buttons">
<span class="tc-palette-preview-thumbnail-tab-button" style.border-color=<<colour tab-border-selected>> style.color=<<colour tab-foreground-selected>> style.background-color=<<colour tab-background-selected>>>
Sed
</span>
<<tab-button Metus>>
<<tab-button Magna>>
<<tab-button Placerat>>
<<tab-button Ligula>>
<<tab-button Imperdiet>>
</div>
<div class="tc-palette-preview-thumbnail-tab-divider" style.border-color=<<colour tab-divider>>>
</div>
<div class="tc-palette-preview-thumbnail-tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
</div>
<<tab-set "Sed Metus Magna Placerat Ligula Imperdiet">>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<%endif%>
</div>

6
core/wiki/currpalettepreview.tid
View File

@ -2,11 +2,7 @@ title: $:/snippets/currpalettepreview
\whitespace trim
\procedure palette-preview-component-list(tag)
<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle">
<$transclude $tiddler=<<componentTitle>> title=<<title>>/>
</$list>
\end palette-preview-component-list
\import [all[shadows+tiddlers]tag[$:/tags/Preview/Helpers]!is[draft]sort[title]]
<!-- currentTiddler is the palette to use -->
<$palette.preview paletteTitle=<<currentTiddler>>>

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

@ -2944,10 +2944,15 @@ input.tc-palette-manager-colour-input {
}
.tc-palette-preview-thumbnail-tab-buttons {
font-size: 0.85em;
font-size: 0.55em;
padding-top: 2em;
}
.tc-palette-preview-thumbnail-sidebar .tc-palette-preview-thumbnail-tab-buttons {
font-size: 0.07em;
}
.tc-palette-preview-thumbnail-tab-button {
display: inline-block;
padding: 1px 1px 1px 1px;
@ -2970,10 +2975,12 @@ input.tc-palette-manager-colour-input {
.tc-palette-preview-thumbnail-tab-divider {
border-top-width: 0.5px;
border-top-style: solid;
margin-bottom: 3px;
}
.tc-palette-preview-thumbnail-tab-content {
margin-top: 3px;
.tc-palette-preview-thumbnail-sidebar-list {
font-size: 0.10em;
line-height: 1.5;
}
.tc-palette-preview-thumbnail-alert {