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

Improve colour palette switcher with previews

Browse Source
This commit is contained in:
Jeremy Ruston 2024-10-25 09:28:33 +01:00
parent b5a22e3e9e
commit fc369415e4
3 changed files with 125 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
core/wiki/currpalettepreview.tid
View File

@ -1,52 +1,47 @@
title: $:/snippets/currpalettepreview
\define resolve-colour(macrocall)
\import $:/core/macros/utils
\whitespace trim
<$wikify name="name" text="""$macrocall$""">
<<name>>
</$wikify>
\end
\define swatchStyle()
background-color: $(swatchColour)$;
\end
\define swatch-inner()
\whitespace trim
<$set name="swatchColour" value={{##$(colourResolved)$}}>
<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore">
<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/>
&#32;
</$list>
<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore">
<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>">
<<swatch-inner>>
</$wikify>
</$list>
</$set>
\end
\define swatch()
\whitespace trim
<$set name="swatchColour" value={{##$(colour)$}}>
<$set name="swatchTitle" value=<<colour>>>
<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore">
<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/>
&#32;
</$list>
<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore">
<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>">
<<swatch-inner>>
</$wikify>
</$list>
</$set>
</$set>
\end
\whitespace trim
<div class="tc-swatches-horiz"><$list filter="
foreground
background
muted-foreground
primary
page-background
tab-background
tiddler-info-background
" variable="colour"><<swatch>></$list></div>
\function colour(name)
[<currentTiddler>getindex<name>] :else[{$:/palettes/Vanilla}getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :and[wikify[text],[inline]]
\end colour
\procedure palette-preview-thumbnail-tiddler(title)
<div class="tc-palette-preview-thumbnail-tiddler" style.backgroundColor=<<colour tiddler-background>>>
<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>
<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>>

9
core/wiki/paletteswitcher.tid
View File

@ -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"/>''
&#32;-&#32;
<$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>

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

@ -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
*/