mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-26 23:33:15 +00:00
0bb8e08edc
With this commit tag pills will now choose for the foreground colour either the current palette “foreground” or “background” colours, according to which has the higher contrast. It’s something @gernert has expressed an interest in in the past, and I’ve tended to agree that it is a nice piece of polish. It opens up the possibility of paler colours for tag pills than are currently possible. The trouble is that in order to implement it I’ve had to bring in a third party library for parsing CSS colours. It weighs in just over 9KB, making quite a lot of weight for such a small feature. I don’t see any other immediate uses for the colour parsing library either. So, I’m undecided at the moment whether this should stay in the core.
31 lines
1.2 KiB
Plaintext
31 lines
1.2 KiB
Plaintext
title: $:/core/ui/TagTemplate
|
|
|
|
\define tag-styles()
|
|
background-color:$(backgroundColor)$;
|
|
fill:$(foregroundColor)$;
|
|
color:$(foregroundColor)$;
|
|
\end
|
|
|
|
\define tag-body-inner(colour,fallbackTarget,colourA,colourB)
|
|
<$set name="foregroundColor" value=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">>>
|
|
<$set name="backgroundColor" value="""$colour$""">
|
|
<$button popup=<<qualify "$:/state/popup/tag">> class="tc-btn-invisible tc-tag-label" style=<<tag-styles>>>
|
|
<$transclude tiddler={{!!icon}}/> <$view field="title" format="text" />
|
|
</$button>
|
|
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes"><div class="tc-drop-down"><$transclude tiddler="$:/core/ui/ListItemTemplate"/>
|
|
<hr>
|
|
<$list filter="[all[current]tagging[]]" template="$:/core/ui/ListItemTemplate"/>
|
|
</div>
|
|
</$reveal>
|
|
</$set>
|
|
</$set>
|
|
\end
|
|
|
|
\define tag-body(colour,palette)
|
|
<span class="tc-tag-list-item">
|
|
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}}/>
|
|
</span>
|
|
\end
|
|
|
|
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}/>
|