mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-28 08:13:14 +00:00
Refactor tag template into an underlying macro
By refactoring the innards of the tag template into global macros, we make it easier to re-use elements of the tag template
This commit is contained in:
parent
9a38642141
commit
f07e0f981a
|
@ -2,11 +2,13 @@ title: $:/core/ui/EditTemplate/tags
|
||||||
tags: $:/tags/EditTemplate
|
tags: $:/tags/EditTemplate
|
||||||
|
|
||||||
\define lingo-base() $:/language/EditTemplate/
|
\define lingo-base() $:/language/EditTemplate/
|
||||||
|
|
||||||
\define tag-styles()
|
\define tag-styles()
|
||||||
background-color:$(backgroundColor)$;
|
background-color:$(backgroundColor)$;
|
||||||
fill:$(foregroundColor)$;
|
fill:$(foregroundColor)$;
|
||||||
color:$(foregroundColor)$;
|
color:$(foregroundColor)$;
|
||||||
\end
|
\end
|
||||||
|
|
||||||
\define tag-body-inner(colour,fallbackTarget,colourA,colourB)
|
\define tag-body-inner(colour,fallbackTarget,colourA,colourB)
|
||||||
<$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">
|
<span style=<<tag-styles>> class="tc-tag-label">
|
||||||
|
@ -15,39 +17,24 @@ color:$(foregroundColor)$;
|
||||||
</span>
|
</span>
|
||||||
</$vars>
|
</$vars>
|
||||||
\end
|
\end
|
||||||
|
|
||||||
\define tag-body(colour,palette)
|
\define tag-body(colour,palette)
|
||||||
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}}/>
|
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}}/>
|
||||||
\end
|
\end
|
||||||
|
|
||||||
|
\define tag-picker-actions()
|
||||||
|
<$action-listops
|
||||||
|
$tiddler=<<currentTiddler>>
|
||||||
|
$field="tags"
|
||||||
|
$subfilter="[<tag>] [all[current]tags[]]"
|
||||||
|
/>
|
||||||
|
\end
|
||||||
|
|
||||||
<div class="tc-edit-tags">
|
<div class="tc-edit-tags">
|
||||||
<$fieldmangler>
|
<$fieldmangler>
|
||||||
<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
|
<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
|
||||||
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}/>
|
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}/>
|
||||||
</$list>
|
</$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="">
|
|
||||||
<<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="[tags[]!is[system]search:title{$:/temp/NewTagName}sort[]]">
|
|
||||||
{{||$:/core/ui/Components/tag-link}}
|
|
||||||
</$list>
|
|
||||||
<hr>
|
|
||||||
<$list filter="[tags[]is[system]search:title{$:/temp/NewTagName}sort[]]">
|
|
||||||
{{||$:/core/ui/Components/tag-link}}
|
|
||||||
</$list>
|
|
||||||
</$linkcatcher>
|
|
||||||
</div>
|
|
||||||
</$reveal>
|
|
||||||
</div>
|
|
||||||
</$fieldmangler>
|
</$fieldmangler>
|
||||||
|
<$macrocall $name="tag-picker" actions=<<tag-picker-actions>>/>
|
||||||
</div>
|
</div>
|
|
@ -1,6 +1,7 @@
|
||||||
title: $:/TagManager
|
title: $:/TagManager
|
||||||
icon: $:/core/images/tag-button
|
icon: $:/core/images/tag-button
|
||||||
color: #bbb
|
color: #bbb
|
||||||
|
caption: {{$:/language/TagManager/Caption}}
|
||||||
|
|
||||||
\define lingo-base() $:/language/TagManager/
|
\define lingo-base() $:/language/TagManager/
|
||||||
\define iconEditorTab(type)
|
\define iconEditorTab(type)
|
||||||
|
@ -51,7 +52,7 @@ $title$$(currentTiddler)$
|
||||||
<$list filter="[tags[]!is[system]sort[title]]">
|
<$list filter="[tags[]!is[system]sort[title]]">
|
||||||
<tr>
|
<tr>
|
||||||
<td><$edit-text field="color" tag="input" type="color"/></td>
|
<td><$edit-text field="color" tag="input" type="color"/></td>
|
||||||
<td><$transclude tiddler="$:/core/ui/TagTemplate"/></td>
|
<td><$macrocall $name="tag" tag=<<currentTiddler>>/></td>
|
||||||
<td><$count filter="[all[current]tagging[]]"/></td>
|
<td><$count filter="[all[current]tagging[]]"/></td>
|
||||||
<td>
|
<td>
|
||||||
<$macrocall $name="iconEditor" title={{!!title}}/>
|
<$macrocall $name="iconEditor" title={{!!title}}/>
|
||||||
|
|
|
@ -1,30 +1,3 @@
|
||||||
title: $:/core/ui/TagTemplate
|
title: $:/core/ui/TagTemplate
|
||||||
|
|
||||||
\define tag-styles()
|
<$macrocall $name="tag" tag=<<currentTiddler>>/>
|
||||||
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$""">
|
|
||||||
<$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" class="tc-drop-down"><$transclude tiddler="$:/core/ui/ListItemTemplate"/>
|
|
||||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem">
|
|
||||||
<$transclude tiddler=<<listItem>>/>
|
|
||||||
</$list>
|
|
||||||
<hr>
|
|
||||||
<$list filter="[all[current]tagging[]]" template="$:/core/ui/ListItemTemplate"/>
|
|
||||||
</$reveal>
|
|
||||||
</$vars>
|
|
||||||
\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}}/>
|
|
||||||
|
|
41
core/wiki/macros/tag-picker.tid
Normal file
41
core/wiki/macros/tag-picker.tid
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
title: $:/core/macros/tag-picker
|
||||||
|
tags: $:/tags/Macro
|
||||||
|
|
||||||
|
\define tag-button()
|
||||||
|
<$button class="tc-btn-invisible" tag="a">
|
||||||
|
$(actions)$
|
||||||
|
<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>
|
||||||
|
<$macrocall $name="tag-pill" tag=<<tag>>/>
|
||||||
|
</$button>
|
||||||
|
\end
|
||||||
|
|
||||||
|
\define tag-picker(actions)
|
||||||
|
<$set name="actions" value="""$actions$""">
|
||||||
|
<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" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button> <span class="tc-add-tag-button">
|
||||||
|
<$set name="tag" value={{$:/temp/NewTagName}}>
|
||||||
|
<$button set="$:/temp/NewTagName" setTo="" class="">
|
||||||
|
$actions$
|
||||||
|
<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>
|
||||||
|
{{$:/language/EditTemplate/Tags/Add/Button}}
|
||||||
|
</$button>
|
||||||
|
</$set>
|
||||||
|
</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">
|
||||||
|
<$list filter="[tags[]!is[system]search:title{$:/temp/NewTagName}sort[]]" variable="tag">
|
||||||
|
<<tag-button>>
|
||||||
|
</$list>
|
||||||
|
<hr>
|
||||||
|
<$list filter="[tags[]is[system]search:title{$:/temp/NewTagName}sort[]]" variable="tag">
|
||||||
|
<<tag-button>>
|
||||||
|
</$list>
|
||||||
|
</div>
|
||||||
|
</$reveal>
|
||||||
|
</div>
|
||||||
|
</$set>
|
||||||
|
\end
|
|
@ -1,6 +1,44 @@
|
||||||
title: $:/core/macros/tag
|
title: $:/core/macros/tag
|
||||||
tags: $:/tags/Macro
|
tags: $:/tags/Macro
|
||||||
|
|
||||||
\define tag(tag)
|
\define tag-pill-styles()
|
||||||
{{$tag$||$:/core/ui/TagTemplate}}
|
background-color:$(backgroundColor)$;
|
||||||
|
fill:$(foregroundColor)$;
|
||||||
|
color:$(foregroundColor)$;
|
||||||
|
\end
|
||||||
|
|
||||||
|
\define tag-pill-inner(tag,icon,colour,fallbackTarget,colourA,colourB,element-tag,element-attributes,actions)
|
||||||
|
<$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
|
||||||
|
<$element-tag$ $element-attributes$ class="tc-tag-label tc-btn-invisible" style=<<tag-pill-styles>>>
|
||||||
|
$actions$<$transclude tiddler="""$icon$"""/> <$view tiddler="""$tag$""" field="title" format="text" />
|
||||||
|
</$element-tag$>
|
||||||
|
</$vars>
|
||||||
|
\end
|
||||||
|
|
||||||
|
\define tag-pill-body(tag,icon,colour,palette,element-tag,element-attributes,actions)
|
||||||
|
<$macrocall $name="tag-pill-inner" tag="""$tag$""" icon="""$icon$""" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
|
||||||
|
\end
|
||||||
|
|
||||||
|
\define tag-pill(tag,element-tag:"span",element-attributes:"",actions:"")
|
||||||
|
<span class="tc-tag-list-item">
|
||||||
|
<$macrocall $name="tag-pill-body" tag="""$tag$""" icon={{$tag$!!icon}} colour={{$tag$!!color}} palette={{$:/palette}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
|
||||||
|
</span>
|
||||||
|
\end
|
||||||
|
|
||||||
|
\define tag(tag)
|
||||||
|
<span class="tc-tag-list-item">
|
||||||
|
<$set name="transclusion" value="""$tag$""">
|
||||||
|
<$macrocall $name="tag-pill-body" tag="""$tag$""" icon={{$tag$!!icon}} colour={{$tag$!!color}} palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">>"""/>
|
||||||
|
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
|
||||||
|
<$tiddler tiddler="""$tag$""">
|
||||||
|
<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
|
||||||
|
<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem">
|
||||||
|
<$transclude tiddler=<<listItem>>/>
|
||||||
|
</$list>
|
||||||
|
<hr>
|
||||||
|
<$list filter="[all[current]tagging[]]" template="$:/core/ui/ListItemTemplate"/>
|
||||||
|
</$tiddler>
|
||||||
|
</$reveal>
|
||||||
|
</$set>
|
||||||
|
</span>
|
||||||
\end
|
\end
|
||||||
|
|
15
editions/tw5.com/tiddlers/macros/tag-picker_Macro.tid
Normal file
15
editions/tw5.com/tiddlers/macros/tag-picker_Macro.tid
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
caption: tag-picker
|
||||||
|
created: 20161128191316701
|
||||||
|
modified: 20161128191435641
|
||||||
|
tags: Macros [[Core Macros]]
|
||||||
|
title: tag-picker Macro
|
||||||
|
type: text/vnd.tiddlywiki
|
||||||
|
|
||||||
|
The <<.def tag-picker>> [[macro|Macros]] generates a combination of a text box and a button that allows a tag to be selected and added.
|
||||||
|
|
||||||
|
!! Parameters
|
||||||
|
|
||||||
|
;actions
|
||||||
|
: Action widgets to be triggered when the pill is clicked
|
||||||
|
|
||||||
|
<<.macro-examples "tag-picker">>
|
21
editions/tw5.com/tiddlers/macros/tag-pill_Macro.tid
Normal file
21
editions/tw5.com/tiddlers/macros/tag-pill_Macro.tid
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
caption: tag-pill
|
||||||
|
created: 20161128190930538
|
||||||
|
modified: 20161128191220364
|
||||||
|
tags: Macros [[Core Macros]]
|
||||||
|
title: tag-pill Macro
|
||||||
|
type: text/vnd.tiddlywiki
|
||||||
|
|
||||||
|
The <<.def tag-pill>> [[macro|Macros]] generates a static tag pill showing a specified tag, but without the dropdown action provided by the [[tag Macro]].
|
||||||
|
|
||||||
|
!! Parameters
|
||||||
|
|
||||||
|
;tag
|
||||||
|
: The title of the tag
|
||||||
|
;element-tag
|
||||||
|
: The element name to be used for the pill (defaults to "span")
|
||||||
|
;element-attributes
|
||||||
|
: Additional attributes for the pill element
|
||||||
|
;actions
|
||||||
|
: Action widgets to be triggered when the pill is clicked
|
||||||
|
|
||||||
|
<<.macro-examples "tag-pill">>
|
Loading…
Reference in New Issue
Block a user