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

Refactor the palette preview macros into a generic widget

Browse Source 
Takes the opportunity to simplify things now that we don't have to worry about wikified palettes
This commit is contained in:
Jeremy Ruston 2025-02-06 21:27:06 +00:00
parent eba73eebcb
commit 7c4938293e
14 changed files with 95 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/ui/PaletteManager.tid
View File

@ -2,6 +2,7 @@ title: $:/PaletteManager
\define lingo-base() $:/language/ControlPanel/Palette/ \define lingo-base() $:/language/ControlPanel/Palette/
<!-- Used by the language string CustomSettings/Prompt -->
\procedure palette-link() \procedure palette-link()
<$tiddler tiddler={{$:/palette}}> <$tiddler tiddler={{$:/palette}}>
<$link to={{!!title}}> <$link to={{!!title}}>

26
core/ui/Palettes/Preview/Alert.tid
View File

@ -1,19 +1,19 @@
title: $:/core/ui/Palettes/Preview/Alert title: $:/core/ui/Palettes/Preview/Alert
tags: $:/tags/Preview/PageOptional tags: $:/tags/Preview/Page
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-alert" styleName="background-color" styleColour="alert-background"> <div class="tc-palette-preview-thumbnail-alert" style.background-color=<<colour alert-background>>>
<$colour.div class="tc-palette-preview-thumbnail-alert-border" styleName="border-color" styleColour="alert-border"> <div class="tc-palette-preview-thumbnail-alert-border" style.border-color=<<colour alert-border>>>
<$colour.div styleName="color" styleColour="foreground"> <div style.color=<<colour foreground>>>
<$colour.div class="tc-palette-preview-thumbnail-alert-subtitle" styleName="color" styleColour="alert-muted-foreground"> <div class="tc-palette-preview-thumbnail-alert-subtitle" style.color=<<colour alert-muted-foreground>>>
Lorem Ipsum Lorem Ipsum
<$colour.div class="tc-palette-preview-thumbnail-alert-highlight" styleName="color" styleColour="alert-highlight"> <div class="tc-palette-preview-thumbnail-alert-highlight" style.color=<<colour alert-highlight>>>
(Count: 1) (Count: 1)
</$colour.div> </div>
</$colour.div> </div>
<$colour.div class="tc-palette-preview-thumbnail-alert-body"> <div class="tc-palette-preview-thumbnail-alert-body">
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt. Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
</$colour.div> </div>
</$colour.div> </div>
</$colour.div> </div>
</$colour.div> </div>

12
core/ui/Palettes/Preview/Notification.tid
View File

@ -2,10 +2,10 @@ title: $:/core/ui/Palettes/Preview/Notification
tags: $:/tags/Preview/PageOptional tags: $:/tags/Preview/PageOptional
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-notification" styleName="background-color" styleColour="notification-background"> <div class="tc-palette-preview-thumbnail-notification" style.background-color=<<colour notification-background>>>
<$colour.div class="tc-palette-preview-thumbnail-notification-border" styleName="border-color" styleColour="notification-border"> <div class="tc-palette-preview-thumbnail-notification-border" style.border-color=<<colour notification-border>>>
<$colour.div class="tc-palette-preview-thumbnail-notification-body" styleName="color" styleColour="foreground"> <div class="tc-palette-preview-thumbnail-notification-body" style.color=<<colour foreground>>>
Lorem Ipsum Dolor Sit Amet Consectetur Lorem Ipsum Dolor Sit Amet Consectetur
</$colour.div> </div>
</$colour.div> </div>
</$colour.div> </div>

8
core/ui/Palettes/Preview/SideBar/Search.tid
View File

@ -2,7 +2,7 @@ title: $:/core/ui/Palettes/Preview/Sidebar/Search
tags: $:/tags/Preview/SideBar tags: $:/tags/Preview/SideBar
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-sidebar-search" styleName="background-color" styleColour="background"> <div class="tc-palette-preview-thumbnail-sidebar-search" style.background-color=<<colour background>>>
<$colour.div class="tc-palette-preview-thumbnail-sidebar-search-box"> <div class="tc-palette-preview-thumbnail-sidebar-search-box">
</$colour.div> </div>
</$colour.div> </div>

4
core/ui/Palettes/Preview/SideBar/Subtitle.tid
View File

@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/Sidebar/Subtitle
tags: $:/tags/Preview/SideBar tags: $:/tags/Preview/SideBar
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-sidebar-subtitle"> <div class="tc-palette-preview-thumbnail-sidebar-subtitle">
a non-linear personal web notebook a non-linear personal web notebook
</$colour.div> </div>

4
core/ui/Palettes/Preview/SideBar/Title.tid
View File

@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/Sidebar/Title
tags: $:/tags/Preview/SideBar tags: $:/tags/Preview/SideBar
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-sidebar-title" styleName="color" styleColour="site-title-foreground"> <div class="tc-palette-preview-thumbnail-sidebar-title" style.color=<<colour site-title-foreground>>>
~TiddlyWiki ~TiddlyWiki
</$colour.div> </div>

4
core/ui/Palettes/Preview/Sidebar.tid
View File

@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/SideBar
tags: $:/tags/Preview/Page tags: $:/tags/Preview/Page
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-sidebar" styleName="color" styleColour="sidebar-foreground"> <div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>>
<<palette-preview-component-list "$:/tags/Preview/SideBar">> <<palette-preview-component-list "$:/tags/Preview/SideBar">>
</$colour.div> </div>

4
core/ui/Palettes/Preview/Story.tid
View File

@ -2,8 +2,8 @@ title: $:/core/ui/Palettes/Preview/Story
tags: $:/tags/Preview/Page tags: $:/tags/Preview/Page
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-story"> <div class="tc-palette-preview-thumbnail-story">
<$list filter="HelloThere GettingStarted" variable="title"> <$list filter="HelloThere GettingStarted" variable="title">
<<palette-preview-component-list "$:/tags/Preview/Story">> <<palette-preview-component-list "$:/tags/Preview/Story">>
</$list> </$list>
</$colour.div> </div>

8
core/ui/Palettes/Preview/Tiddler.tid
View File

@ -3,8 +3,8 @@ tags: $:/tags/Preview/Story
\parameters (title) \parameters (title)
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-tiddler-border" styleName="border-color" styleColour="tiddler-border"> <div class="tc-palette-preview-thumbnail-tiddler-border" style.border-color=<<colour tiddler-border>>>
<$colour.div class="tc-palette-preview-thumbnail-tiddler" styleName="background-color" styleColour="tiddler-background"> <div class="tc-palette-preview-thumbnail-tiddler" style.background-color=<<colour tiddler-background>>>
<<palette-preview-component-list "$:/tags/Preview/Tiddler">> <<palette-preview-component-list "$:/tags/Preview/Tiddler">>
</$colour.div> </div>
</$colour.div> </div>

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

@ -2,6 +2,18 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Body
tags: $:/tags/Preview/Tiddler tags: $:/tags/Preview/Tiddler
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-tiddler-body" styleName="color" styleColour="foreground">
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. Etiam efficitur velit tortor, sit amet tristique felis viverra sit amet. 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. \procedure link(text)
</$colour.div> <span class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour primary>>>
<$text text=<<text>>/>
</span>
\end link
<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.
<%endif%>
</div>

20
core/ui/Palettes/Preview/Tiddler/Header.tid
View File

@ -2,13 +2,13 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Header
tags: $:/tags/Preview/Tiddler tags: $:/tags/Preview/Tiddler
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-tiddler-header"> <div class="tc-palette-preview-thumbnail-tiddler-header">
<$colour.div class="tc-palette-preview-thumbnail-tiddler-title" styleName="color" styleColour="tiddler-title-foreground"> <div class="tc-palette-preview-thumbnail-tiddler-title" style.color=<<colour tiddler-title-foreground>>>
<$text text=<<title>>/> <$text text=<<title>>/>
</$colour.div> </div>
<$colour.div class="tc-palette-preview-thumbnail-tiddler-toolbar" styleName="fill" styleColour="tiddler-controls-foreground"> <div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>>
{{$:/core/images/down-arrow}} {{$:/core/images/down-arrow}}
{{$:/core/images/edit-button}} {{$:/core/images/edit-button}}
{{$:/core/images/close-button}} {{$:/core/images/close-button}}
</$colour.div> </div>
</$colour.div> </div>

4
core/ui/Palettes/Preview/Tiddler/Subtitle.tid
View File

@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Subtitle
tags: $:/tags/Preview/Tiddler tags: $:/tags/Preview/Tiddler
\whitespace trim \whitespace trim
<$colour.div class="tc-palette-preview-thumbnail-tiddler-subtitle" styleName="color" styleColour="tiddler-subtitle-foreground"> <div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>>
Motovun Jack Motovun Jack
</$colour.div> </div>

60
core/wiki/currpalettepreview.tid
View File

@ -2,65 +2,15 @@ title: $:/snippets/currpalettepreview
\whitespace trim \whitespace trim
\procedure colour-div-filtered(class,styleName,styleColour)
\function colour-inner-get-imported-palette(name,tv-palette-name)
[[palette-import@]addsuffix<scheme>] :map[<tv-palette-name>get<currentTiddler>has[title]] +[!match[]] :else[<tv-palette-name>get[palette-import]has[title]] :map[function[colour-inner-get-palette-entry],<name>,<currentTiddler>] +[!match[]]
\end colour-inner-get-imported-palette
\function colour-inner-get-palette-entry(name,tv-palette-name)
[<name>addprefix[@]addprefix<scheme>] :map[<tv-palette-name>getindex<currentTiddler>] +[!match[]] :else[<tv-palette-name>getindex<name>] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :else[function[colour-inner-get-imported-palette],<name>,<tv-palette-name>]
\end colour-inner-get-palette-entry
<!-- Note the join, needed to cope with palette entries containing spaces -->
\function colour(name)
[function[colour-inner-get-palette-entry],<name>,<tv-palette-name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter<currentTiddler>join[ ]]
\end colour
\function color(name)
[function[colour],<name>]
\end color
<$let
colour-result={{{ [function[colour],<styleColour>] }}}
>
<div class=<<class>> style={{{ [<styleName>addsuffix[:]addsuffix<colour-result>addsuffix[;]] }}}>
<$slot $name="ts-raw" $depth="2"/>
</div>
</$let>
\end colour-div-filtered
\widget $colour.div(class,styleName,styleColour)
<%if [<styleName>!match[]] %>
<$transclude $variable="colour-div-filtered" class=<<class>> styleName=<<styleName>> styleColour=<<styleColour>>/>
<%else%>
<div class=<<class>>>
<$slot $name="ts-raw"/>
</div>
<%endif%>
\end $colour.div
\procedure palette-preview-component-list(tag) \procedure palette-preview-component-list(tag)
<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle"> <$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle">
<$transclude $tiddler=<<componentTitle>> title=<<title>>/> <$transclude $tiddler=<<componentTitle>> title=<<title>>/>
</$list> </$list>
\end palette-preview-component-list \end palette-preview-component-list
\procedure palette-preview-thumbnail()
<!-- Compute the scheme of the current palette -->
<$let
tv-palette-name=<<currentTiddler>>
color-scheme-filter={{{ [<tv-palette-name>get[color-scheme]] :else[[light]] }}}
scheme={{{ [subfilter<color-scheme-filter>] }}}
>
<!-- Render the thumbnail and its child components -->
<$colour.div class="tc-palette-preview-thumbnail" styleName="background-color" styleColour="page-background">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Preview/Page]!has[draft.of]]" variable="componentTitle">
<$transclude $tiddler=<<componentTitle>> title=<<title>>/>
</$list>
</$colour.div>
</$let>
\end palette-preview-thumbnail
<!-- currentTiddler is the palette to use --> <!-- currentTiddler is the palette to use -->
<<palette-preview-thumbnail>> <$palette.preview paletteTitle=<<currentTiddler>>>
<div class="tc-palette-preview-thumbnail" style.background-color=<<colour page-background>>>
<<palette-preview-component-list tag:"$:/tags/Preview/Page">>
</div>
</$palette.preview>

27
core/wiki/macros/CSS.tid
View File

@ -101,6 +101,33 @@ tags: $:/tags/Macro
]] ]]
\end colour-function-suffix \end colour-function-suffix
\widget $palette.preview(paletteTitle)
\whitespace trim
\function colour-inner-get-imported-palette(name,paletteTitle)
[[palette-import@]addsuffix<scheme>] :map[<paletteTitle>get<currentTiddler>has[title]] +[!match[]] :else[<paletteTitle>get[palette-import]has[title]] :map[function[colour-inner-get-palette-entry],<name>,<currentTiddler>] +[!match[]]
\end colour-inner-get-imported-palette
\function colour-inner-get-palette-entry(name,paletteTitle)
[<name>addprefix[@]addprefix<scheme>] :map[<paletteTitle>getindex<currentTiddler>] +[!match[]] :else[<paletteTitle>getindex<name>] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :else[function[colour-inner-get-imported-palette],<name>,<paletteTitle>]
\end colour-inner-get-palette-entry
<!-- Note the join, needed to cope with palette entries containing spaces -->
\function colour(name)
[function[colour-inner-get-palette-entry],<name>,<paletteTitle>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter<currentTiddler>join[ ]]
\end colour
\function color(name)
[function[colour],<name>]
\end color
<$let
color-scheme-filter={{{ [<paletteTitle>get[color-scheme]] :else[[light]] }}}
scheme={{{ [subfilter<color-scheme-filter>] }}}
>
<$slot $name="ts-raw"/>
</$let>
\end $palette.preview
\function tf.colour-inner-transform-classic-palette-entry(colour-result) \function tf.colour-inner-transform-classic-palette-entry(colour-result)
[<colour-result>prefix[<<colour ]suffix[>>]removeprefix[<<colour ]removesuffix[>>]addprefix<colour-function-prefix>addsuffix<colour-function-suffix>] :else[<colour-result>] [<colour-result>prefix[<<colour ]suffix[>>]removeprefix[<<colour ]removesuffix[>>]addprefix<colour-function-prefix>addsuffix<colour-function-suffix>] :else[<colour-result>]
\end tf.colour-inner-transform-classic-palette-entry \end tf.colour-inner-transform-classic-palette-entry