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

Add missing data-tag-title attributes where needed (#7530)

Browse Source 
* add missing data-tag-title assignments

* docs for data-tag-title

* fix typo in the docs

* rename file
This commit is contained in:
Mario Pietsch 2023-06-08 22:38:31 +02:00 committed by GitHub
parent 7b9915b5c2
commit 92f720901d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/ui/EditTemplate/tags.tid
View File

@ -14,8 +14,8 @@ color:$(foregroundColor)$;
\define tag-body-inner(colour,fallbackTarget,colourA,colourB,icon,tagField:"tags") \define tag-body-inner(colour,fallbackTarget,colourA,colourB,icon,tagField:"tags")
\whitespace trim \whitespace trim
<$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$"""> <$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
<span style=<<tag-styles>> class="tc-tag-label tc-tag-list-item tc-small-gap-right"> <span style=<<tag-styles>> class="tc-tag-label tc-tag-list-item tc-small-gap-right" data-tag-title=<<currentTiddler>>>
<$transclude tiddler="""$icon$"""/><$view field="title" format="text" /> <$transclude tiddler="""$icon$"""/><$view field="title" format="text"/>
<$button class="tc-btn-invisible tc-remove-tag-button" style=<<tag-styles>>><$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="-[{!!title}]"/>{{$:/core/images/close-button}}</$button> <$button class="tc-btn-invisible tc-remove-tag-button" style=<<tag-styles>>><$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="-[{!!title}]"/>{{$:/core/images/close-button}}</$button>
</span> </span>
</$vars> </$vars>

2
core/ui/TagPickerTagTemplate.tid
View File

@ -15,7 +15,7 @@ title: $:/core/ui/TagPickerTagTemplate
<<actions>> <<actions>>
<$set name="backgroundColor" value={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}> <$set name="backgroundColor" value={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}>
<$wikify name="foregroundColor" text="""<$macrocall $name="contrastcolour" target=<<backgroundColor>> fallbackTarget=<<fallbackTarget>> colourA=<<colourA>> colourB=<<colourB>>/>"""> <$wikify name="foregroundColor" text="""<$macrocall $name="contrastcolour" target=<<backgroundColor>> fallbackTarget=<<fallbackTarget>> colourA=<<colourA>> colourB=<<colourB>>/>""">
<span class="tc-tag-label tc-btn-invisible" style=<<tag-pill-styles>>> <span class="tc-tag-label tc-btn-invisible" style=<<tag-pill-styles>> data-tag-title=<<currentTiddler>> >
{{||$:/core/ui/TiddlerIcon}}<$view field="title" format="text"/> {{||$:/core/ui/TiddlerIcon}}<$view field="title" format="text"/>
</span> </span>
</$wikify> </$wikify>

32
editions/tw5.com/tiddlers/howtos/Custom tag pill styles.tid Normal file
View File

@ -0,0 +1,32 @@
created: 20230608121519758
modified: 20230608123444591
tags: [[How to apply custom styles]]
title: Custom tag pill styles
type: text/vnd.tiddlywiki
! Attribute: data-tag-title
<<.from-version "5.2.0">> The attribute <<.attr data-tag-title>> was added to tag pills visible in the tiddler view template.
<<.from-version "5.3.0">> The attribute was added to every tag pill visible in the standard ~TiddlyWiki UI. Especially the edit template tag list, the tag-picker dropdown, the Right sidebar -> More -> Tags tab and the $:/TagManager
The <<.attr data-tag-title>> HTML attribute only contains the tag-title visible in the tag pill. It can be used to style the tag-pill.
If you want to style the whole tiddler have a look at: [[Custom styles by data-tiddler-title]]
!! Examples
If you use the following CSS in a new tiddler tagged: `$:/tags/Stylesheet` every tag that starts with a `#` will have a new border radius. So those tags stand out in contrast to the default tags.
''You have to define both CSS rules'', due to the existing UI structure to catch all tag-pills in the existing TW UI.
```
[data-tag-title^="#"] .tc-tag-label,
[data-tag-title^="#"].tc-tag-label {
border-radius: 3px;
}
```
!! More Possibilities
{{Attribute Selectors}}