\whitespace trim
\define lingo-base() $:/language/EditTemplate/
\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end
\define tag-body-inner(colour,fallbackTarget,colourA,colourB,icon)
\whitespace trim
<$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">
<$transclude tiddler="""$icon$"""/><$view field="title" format="text" />
<$button message="tm-remove-tag" param={{!!title}} class="tc-btn-invisible tc-remove-tag-button">{{$:/core/images/close-button}}</$button>
</span>
</$vars>
\end
\define tag-body(colour,palette,icon)
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}} icon="""$icon$"""/>
\end
<div class="tc-edit-tags">
<$fieldmangler>
<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}} icon={{!!icon}}/>
</$list>
<$set name="tabIndex" value={{$:/config/EditTabIndex}}>
<$macrocall $name="tag-picker"/>
</$set>
</$fieldmangler>
</div>
\define lingo-base() $:/language/EditTemplate/
\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end
\define tag-body-inner(colour,fallbackTarget,colourA,colourB)
<$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
<span style=<<tag-styles>> class="tc-tag-label">
<$view field="title" format="text" />
<$button message="tm-remove-tag" param={{!!title}} class="tc-btn-invisible tc-remove-tag-button">×</$button>
</span>
</$vars>
\end
\define tag-body(colour,palette)
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}}/>
\end
<div class="tc-edit-tags">
<$fieldmangler>
<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}/>
</$list>
<div class="tc-edit-add-tag">
<span class="tc-add-tag-name">
<$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle"/>
</span> <$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button> <span class="tc-add-tag-button">
<$button
message="tm-add-tag"
param={{$:/temp/NewTagName}}
set="$:/temp/NewTagName"
setTo=""
class=""
>
<$action-setfield
$tiddler='$:/data/Bookmarks/BookmarkTags'
$index={{$:/temp/NewTagName}}
$value=1
/>
<<lingo Tags/Add/Button>>
</$button>
</span>
</div>
<div class="tc-block-dropdown-wrapper">
<$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
<div class="tc-block-dropdown">
<$linkcatcher set="$:/temp/NewTagName" setTo="" message="tm-add-tag">
<$list filter="[[$:/data/Bookmarks/BookmarkTags]indexes[]search:title{$:/temp/NewTagName}sort[]]">
{{||$:/core/ui/Components/tag-link}}
</$list>
</$linkcatcher>
</div>
</$reveal>
</div>
</$fieldmangler>
</div>
You can create additional tag like fields and you get a lot of the features that come with tags.
Regards
Tony
\define lingo-base() $:/language/EditTemplate/
\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end
\define tag-body-inner(colour,fallbackTarget,colourA,colourB)
<$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
<span style=<<tag-styles>> class="tc-tag-label">
<$view field="keywords" format="text" />
<$button message="tm-remove-tag" param={{!!title}} class="tc-btn-invisible tc-remove-tag-button">×</$button>
</span>
</$vars>
\end
\define tag-body(colour,palette)
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}}/>
\end
<div class="tc-edit-tags">
<$fieldmangler>
<$list filter="[all[current]!field:title[]sort[title]]" storyview="pop">
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}/>
</$list>
<div class="tc-edit-add-tag">
<span class="tc-add-tag-name">
<$edit-text tiddler="$:/temp/NewKeyword" tag="input" default="" placeholder={{$:/language/Odin/Keywords/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle"/>
</span> <$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button> <span class="tc-add-tag-button">
<$button
message="tm-add-field"
param=keywords
set="$:/temp/NewKeyword"
setTo=""
class=""
>
<$action-setfield
$tiddler='$:/data/Odin/Keywords'
$index={{$:/temp/NewKeyword}}
$value=1
/>
<<lingo Tags/Add/Button>>
</$button>
</span>
</div>
<div class="tc-block-dropdown-wrapper">
<$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
<div class="tc-block-dropdown">
<$linkcatcher
set="!!keywords" setTo="{{$:/temp/NewTagName}}"
>
<$list filter="[[$:/data/Odin/Keywords]indexes[]search:title{$:/temp/NewKeyword}sort[]]">
{{||$:/core/ui/Components/tag-link}}
</$list>
</$linkcatcher>
</div>
</$reveal>
</div>
</$fieldmangler>
</div>