mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-02-10 16:10:02 +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 title: $:/snippets/currpalettepreview
\define resolve-colour(macrocall)
\import $:/core/macros/utils
\whitespace trim \whitespace trim
<$wikify name="name" text="""$macrocall$""">
<<name>> \function colour(name)
</$wikify> [<currentTiddler>getindex<name>] :else[{$:/palettes/Vanilla}getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :and[wikify[text],[inline]]
\end \end colour
\define swatchStyle()
background-color: $(swatchColour)$; \procedure palette-preview-thumbnail-tiddler(title)
\end <div class="tc-palette-preview-thumbnail-tiddler" style.backgroundColor=<<colour tiddler-background>>>
\define swatch-inner() <div class="tc-palette-preview-thumbnail-tiddler-header">
\whitespace trim <div class="tc-palette-preview-thumbnail-tiddler-title" style.color=<<colour tiddler-title-foreground>>>
<$set name="swatchColour" value={{##$(colourResolved)$}}> <$text text=<<title>>/>
<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore"> </div>
<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/> <div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>>
&#32; {{$:/core/images/down-arrow}}
</$list> {{$:/core/images/edit-button}}
<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore"> {{$:/core/images/close-button}}
<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>"> </div>
<<swatch-inner>> </div>
</$wikify> <div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>>
</$list> Motovun Jack
</$set> </div>
\end <div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>>
\define swatch() 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.
\whitespace trim </div>
<$set name="swatchColour" value={{##$(colour)$}}> </div>
<$set name="swatchTitle" value=<<colour>>> \end palette-preview-thumbnail-tiddler
<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore">
<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/> \procedure palette-preview-thumbnail()
&#32; <div class="tc-palette-preview-thumbnail" style.backgroundColor=<<colour page-background>>>
</$list> <div class="tc-palette-preview-thumbnail-story">
<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore"> <<palette-preview-thumbnail-tiddler "HelloThere">>
<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>"> <<palette-preview-thumbnail-tiddler "Getting Started">>
<<swatch-inner>> </div>
</$wikify> <div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>>
</$list> <div class="tc-palette-preview-thumbnail-sidebar-title">
</$set> ~TiddlyWiki
</$set> </div>
\end <div class="tc-palette-preview-thumbnail-sidebar-subtitle">
\whitespace trim a non-linear personal web notebook
<div class="tc-swatches-horiz"><$list filter=" </div>
foreground </div>
background </div>
muted-foreground \end palette-preview-thumbnail
primary
page-background <<palette-preview-thumbnail>>
tab-background
tiddler-info-background
" variable="colour"><<swatch>></$list></div>

9
core/wiki/paletteswitcher.tid
View File

@ -2,15 +2,16 @@ title: $:/snippets/paletteswitcher
\whitespace trim \whitespace trim
<$linkcatcher to="$:/palette"> <$linkcatcher to="$:/palette">
<div class="tc-chooser"> <div class="tc-chooser tc-chooser-cards">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]]"> <$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"> <$set name="cls" filter="[all[current]prefix{$:/palette}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
<div class=<<cls>>> <div class=<<cls>>>
<$link to={{!!title}}> <$link to={{!!title}}>
''<$view field="name" format="text"/>''
&#32;-&#32;
<$view field="description" format="text"/>
{{||$:/snippets/currpalettepreview}} {{||$:/snippets/currpalettepreview}}
''<$view field="name" format="text"/>''
<div class="tc-chooser-item-description">
<$view field="description" format="text"/>
</div>
</$link> </$link>
</div> </div>
</$set> </$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>>; border-left: 1px solid <<colour table-header-background>>;
} }
.tc-chooser.tc-chooser-cards {
display: flex;
flex-wrap: wrap;
}
.tc-chooser-item { .tc-chooser-item {
border-bottom: 1px solid <<colour table-header-background>>; 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; 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 { .tc-drop-down .tc-chooser-item {
padding: 2px; padding: 2px;
} }
@ -2842,6 +2854,7 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
display: block; display: block;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
font-weight: normal;
} }
.tc-chooser-item:hover .tc-tiddlylink:hover { .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>>; color: <<colour foreground>>;
} }
.tc-chosen > .tc-tiddlylink:before {
margin-left: -10px;
position: relative;
content: "» ";
}
.tc-chooser-item svg, .tc-chooser-item svg,
.tc-chooser-item img{ .tc-chooser-item img{
max-width: 1em; 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; 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 { .tc-language-chooser .tc-image-button img {
max-width: 2em; max-width: 2em;
max-height: 1em; max-height: 1em;
@ -2897,6 +2909,64 @@ input.tc-palette-manager-colour-input {
padding: 0; 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 ** Table of contents
*/ */