From fc369415e4577aef2b10e70a5ec74c8644fd294c Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Fri, 25 Oct 2024 09:28:33 +0100 Subject: [PATCH] Improve colour palette switcher with previews --- core/wiki/currpalettepreview.tid | 93 ++++++++++++++---------------- core/wiki/paletteswitcher.tid | 9 +-- themes/tiddlywiki/vanilla/base.tid | 82 ++++++++++++++++++++++++-- 3 files changed, 125 insertions(+), 59 deletions(-) diff --git a/core/wiki/currpalettepreview.tid b/core/wiki/currpalettepreview.tid index 61356edd0..02688e1fb 100644 --- a/core/wiki/currpalettepreview.tid +++ b/core/wiki/currpalettepreview.tid @@ -1,52 +1,47 @@ title: $:/snippets/currpalettepreview -\define resolve-colour(macrocall) -\import $:/core/macros/utils \whitespace trim -<$wikify name="name" text="""$macrocall$"""> -<> - -\end -\define swatchStyle() -background-color: $(swatchColour)$; -\end -\define swatch-inner() -\whitespace trim -<$set name="swatchColour" value={{##$(colourResolved)$}}> -<$list filter="[!prefix[<>]]" variable="ignore"> -
> title=<>/> - - -<$list filter="[prefix[<>]]" variable="ignore"> -<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<>/>"> -<> - - - -\end -\define swatch() -\whitespace trim -<$set name="swatchColour" value={{##$(colour)$}}> -<$set name="swatchTitle" value=<>> -<$list filter="[!prefix[<>]]" variable="ignore"> -
> title=<>/> - - -<$list filter="[prefix[<>]]" variable="ignore"> -<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<>/>"> -<> - - - - -\end -\whitespace trim -
<$list filter=" -foreground -background -muted-foreground -primary -page-background -tab-background -tiddler-info-background -" variable="colour"><>
+ +\function colour(name) +[getindex] :else[{$:/palettes/Vanilla}getindex] :else[[$:/config/DefaultColourMappings/]addsuffixget[text]] :and[wikify[text],[inline]] +\end colour + +\procedure palette-preview-thumbnail-tiddler(title) +
>> +
+
>> + <$text text=<>/> + </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> + <div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>> + Motovun Jack + </div> + <div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour 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. + </div> +</div> +\end palette-preview-thumbnail-tiddler + +\procedure palette-preview-thumbnail() +<div class="tc-palette-preview-thumbnail" style.backgroundColor=<<colour page-background>>> + <div class="tc-palette-preview-thumbnail-story"> + <<palette-preview-thumbnail-tiddler "HelloThere">> + <<palette-preview-thumbnail-tiddler "Getting Started">> + </div> + <div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>> + <div class="tc-palette-preview-thumbnail-sidebar-title"> + ~TiddlyWiki + </div> + <div class="tc-palette-preview-thumbnail-sidebar-subtitle"> + a non-linear personal web notebook + </div> + </div> +</div> +\end palette-preview-thumbnail + +<<palette-preview-thumbnail>> diff --git a/core/wiki/paletteswitcher.tid b/core/wiki/paletteswitcher.tid index e79c0aabe..6d0ff6b35 100644 --- a/core/wiki/paletteswitcher.tid +++ b/core/wiki/paletteswitcher.tid @@ -2,15 +2,16 @@ title: $:/snippets/paletteswitcher \whitespace trim <$linkcatcher to="$:/palette"> -<div class="tc-chooser"> +<div class="tc-chooser tc-chooser-cards"> <$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]]"> <$set name="cls" filter="[all[current]prefix{$:/palette}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"> <div class=<<cls>>> <$link to={{!!title}}> -''<$view field="name" format="text"/>'' - - -<$view field="description" format="text"/> {{||$:/snippets/currpalettepreview}} +''<$view field="name" format="text"/>'' +<div class="tc-chooser-item-description"> +<$view field="description" format="text"/> +</div> </$link> </div> </$set> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 56d559e9e..786e034fc 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -2817,6 +2817,10 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta border-left: 1px solid <<colour table-header-background>>; } +.tc-chooser.tc-chooser-cards { + display: flex; + flex-wrap: wrap; +} .tc-chooser-item { border-bottom: 1px solid <<colour table-header-background>>; @@ -2824,6 +2828,14 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta padding: 2px 4px 2px 14px; } +.tc-chooser.tc-chooser-cards .tc-chooser-item { + width: 15em; + margin: 0.25em; + padding: 3px; + border: 1px solid <<colour muted-foreground>>; + border-radius: 3px; +} + .tc-drop-down .tc-chooser-item { padding: 2px; } @@ -2842,6 +2854,7 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta display: block; text-decoration: none; background-color: transparent; + font-weight: normal; } .tc-chooser-item:hover .tc-tiddlylink:hover { @@ -2853,12 +2866,6 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta color: <<colour foreground>>; } -.tc-chosen > .tc-tiddlylink:before { - margin-left: -10px; - position: relative; - content: "ยป "; -} - .tc-chooser-item svg, .tc-chooser-item img{ max-width: 1em; @@ -2866,6 +2873,11 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta vertical-align: middle; } +.tc-chooser-item .tc-chooser-item-description { + font-size: 0.8em; + line-height: 1.2; +} + .tc-language-chooser .tc-image-button img { max-width: 2em; max-height: 1em; @@ -2897,6 +2909,64 @@ input.tc-palette-manager-colour-input { padding: 0; } +.tc-palette-preview-thumbnail { + display: inline-block; + padding: 0.5em 0.5em 0 0.5em; + display: flex; + flex-direction: row; + font-weight: normal; + color: <<colour foreground>>; + line-height: 1.2; +} + +.tc-palette-preview-thumbnail-story { + flex-grow: 2; +} + +.tc-palette-preview-thumbnail-tiddler { + margin-bottom: 0.5em; + padding: 0.5em; +} + +.tc-palette-preview-thumbnail-tiddler-header { + display: flex; + justify-content: space-between; +} + +.tc-palette-preview-thumbnail-tiddler-title { + font-size: 6px; +} + +.tc-palette-preview-thumbnail-tiddler-toolbar { + line-height: 0; +} + +.tc-palette-preview-thumbnail-tiddler-toolbar svg { + width: 6px; + height: 6px; +} + +.tc-palette-preview-thumbnail-tiddler-subtitle { + font-size: 3px; +} + +.tc-palette-preview-thumbnail-tiddler-body { + font-size: 3px; +} + +.tc-palette-preview-thumbnail-sidebar { + flex-grow: 1; + padding: 0.5em; +} + +.tc-palette-preview-thumbnail-sidebar-title { + font-size: 6px; +} + +.tc-palette-preview-thumbnail-sidebar-subtitle { + font-size: 3px; +} + /* ** Table of contents */