mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-04-06 02:37:14 +00:00
Refactor the palette preview macros into a generic widget
Takes the opportunity to simplify things now that we don't have to worry about wikified palettes
This commit is contained in:
Jeremy Ruston
parent
eba73eebcb
commit
7c4938293e
@ -2,6 +2,7 @@ title: $:/PaletteManager
|
||||
|
||||
\define lingo-base() $:/language/ControlPanel/Palette/
|
||||
|
||||
<!-- Used by the language string CustomSettings/Prompt -->
|
||||
\procedure palette-link()
|
||||
<$tiddler tiddler={{$:/palette}}>
|
||||
<$link to={{!!title}}>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
title: $:/core/ui/Palettes/Preview/Alert
|
||||
tags: $:/tags/Preview/PageOptional
|
||||
tags: $:/tags/Preview/Page
|
||||
|
||||
\whitespace trim
|
||||
<$colour.div class="tc-palette-preview-thumbnail-alert" styleName="background-color" styleColour="alert-background">
|
||||
<$colour.div class="tc-palette-preview-thumbnail-alert-border" styleName="border-color" styleColour="alert-border">
|
||||
<$colour.div styleName="color" styleColour="foreground">
|
||||
<$colour.div class="tc-palette-preview-thumbnail-alert-subtitle" styleName="color" styleColour="alert-muted-foreground">
|
||||
<div class="tc-palette-preview-thumbnail-alert" style.background-color=<<colour alert-background>>>
|
||||
<div class="tc-palette-preview-thumbnail-alert-border" style.border-color=<<colour alert-border>>>
|
||||
<div style.color=<<colour foreground>>>
|
||||
<div class="tc-palette-preview-thumbnail-alert-subtitle" style.color=<<colour alert-muted-foreground>>>
|
||||
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)
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
<$colour.div class="tc-palette-preview-thumbnail-alert-body">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tc-palette-preview-thumbnail-alert-body">
|
||||
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2,10 +2,10 @@ title: $:/core/ui/Palettes/Preview/Notification
|
||||
tags: $:/tags/Preview/PageOptional
|
||||
|
||||
\whitespace trim
|
||||
<$colour.div class="tc-palette-preview-thumbnail-notification" styleName="background-color" styleColour="notification-background">
|
||||
<$colour.div class="tc-palette-preview-thumbnail-notification-border" styleName="border-color" styleColour="notification-border">
|
||||
<$colour.div class="tc-palette-preview-thumbnail-notification-body" styleName="color" styleColour="foreground">
|
||||
<div class="tc-palette-preview-thumbnail-notification" style.background-color=<<colour notification-background>>>
|
||||
<div class="tc-palette-preview-thumbnail-notification-border" style.border-color=<<colour notification-border>>>
|
||||
<div class="tc-palette-preview-thumbnail-notification-body" style.color=<<colour foreground>>>
|
||||
Lorem Ipsum Dolor Sit Amet Consectetur
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2,7 +2,7 @@ title: $:/core/ui/Palettes/Preview/Sidebar/Search
|
||||
tags: $:/tags/Preview/SideBar
|
||||
|
||||
\whitespace trim
|
||||
<$colour.div class="tc-palette-preview-thumbnail-sidebar-search" styleName="background-color" styleColour="background">
|
||||
<$colour.div class="tc-palette-preview-thumbnail-sidebar-search-box">
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
<div class="tc-palette-preview-thumbnail-sidebar-search" style.background-color=<<colour background>>>
|
||||
<div class="tc-palette-preview-thumbnail-sidebar-search-box">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/Sidebar/Subtitle
|
||||
tags: $:/tags/Preview/SideBar
|
||||
|
||||
\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
|
||||
</$colour.div>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/Sidebar/Title
|
||||
tags: $:/tags/Preview/SideBar
|
||||
|
||||
\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
|
||||
</$colour.div>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/SideBar
|
||||
tags: $:/tags/Preview/Page
|
||||
|
||||
\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">>
|
||||
</$colour.div>
|
||||
</div>
|
||||
@ -2,8 +2,8 @@ title: $:/core/ui/Palettes/Preview/Story
|
||||
tags: $:/tags/Preview/Page
|
||||
|
||||
\whitespace trim
|
||||
<$colour.div class="tc-palette-preview-thumbnail-story">
|
||||
<div class="tc-palette-preview-thumbnail-story">
|
||||
<$list filter="HelloThere GettingStarted" variable="title">
|
||||
<<palette-preview-component-list "$:/tags/Preview/Story">>
|
||||
</$list>
|
||||
</$colour.div>
|
||||
</div>
|
||||
@ -3,8 +3,8 @@ tags: $:/tags/Preview/Story
|
||||
|
||||
\parameters (title)
|
||||
\whitespace trim
|
||||
<$colour.div class="tc-palette-preview-thumbnail-tiddler-border" styleName="border-color" styleColour="tiddler-border">
|
||||
<$colour.div class="tc-palette-preview-thumbnail-tiddler" styleName="background-color" styleColour="tiddler-background">
|
||||
<div class="tc-palette-preview-thumbnail-tiddler-border" style.border-color=<<colour tiddler-border>>>
|
||||
<div class="tc-palette-preview-thumbnail-tiddler" style.background-color=<<colour tiddler-background>>>
|
||||
<<palette-preview-component-list "$:/tags/Preview/Tiddler">>
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,18 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Body
|
||||
tags: $:/tags/Preview/Tiddler
|
||||
|
||||
\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.
|
||||
</$colour.div>
|
||||
|
||||
\procedure link(text)
|
||||
<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>
|
||||
|
||||
@ -2,13 +2,13 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Header
|
||||
tags: $:/tags/Preview/Tiddler
|
||||
|
||||
\whitespace trim
|
||||
<$colour.div class="tc-palette-preview-thumbnail-tiddler-header">
|
||||
<$colour.div class="tc-palette-preview-thumbnail-tiddler-title" styleName="color" styleColour="tiddler-title-foreground">
|
||||
<$text text=<<title>>/>
|
||||
</$colour.div>
|
||||
<$colour.div class="tc-palette-preview-thumbnail-tiddler-toolbar" styleName="fill" styleColour="tiddler-controls-foreground">
|
||||
{{$:/core/images/down-arrow}}
|
||||
{{$:/core/images/edit-button}}
|
||||
{{$:/core/images/close-button}}
|
||||
</$colour.div>
|
||||
</$colour.div>
|
||||
<div class="tc-palette-preview-thumbnail-tiddler-header">
|
||||
<div class="tc-palette-preview-thumbnail-tiddler-title" style.color=<<colour tiddler-title-foreground>>>
|
||||
<$text text=<<title>>/>
|
||||
</div>
|
||||
<div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>>
|
||||
{{$:/core/images/down-arrow}}
|
||||
{{$:/core/images/edit-button}}
|
||||
{{$:/core/images/close-button}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Subtitle
|
||||
tags: $:/tags/Preview/Tiddler
|
||||
|
||||
\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
|
||||
</$colour.div>
|
||||
</div>
|
||||
|
||||
@ -2,65 +2,15 @@ title: $:/snippets/currpalettepreview
|
||||
|
||||
\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)
|
||||
<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle">
|
||||
<$transclude $tiddler=<<componentTitle>> title=<<title>>/>
|
||||
</$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 -->
|
||||
<<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>
|
||||
|
||||
@ -101,6 +101,33 @@ tags: $:/tags/Macro
|
||||
]]
|
||||
\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)
|
||||
[<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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user