mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-16 10:29:54 +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:
Jermolene
parent
9a38642141
commit
f07e0f981a
|
|
@ -2,11 +2,13 @@ title: $:/core/ui/EditTemplate/tags
|
|||
tags: $:/tags/EditTemplate
|
||||
|
||||
\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">
|
||||
|
|
@ -15,39 +17,24 @@ color:$(foregroundColor)$;
|
|||
</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
|
||||
|
||||
\define tag-picker-actions()
|
||||
<$action-listops
|
||||
$tiddler=<<currentTiddler>>
|
||||
$field="tags"
|
||||
$subfilter="[<tag>] [all[current]tags[]]"
|
||||
/>
|
||||
\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="">
|
||||
<<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>
|
||||
</div>
|
||||
<$macrocall $name="tag-picker" actions=<<tag-picker-actions>>/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
title: $:/TagManager
|
||||
icon: $:/core/images/tag-button
|
||||
color: #bbb
|
||||
caption: {{$:/language/TagManager/Caption}}
|
||||
|
||||
\define lingo-base() $:/language/TagManager/
|
||||
\define iconEditorTab(type)
|
||||
|
|
@ -51,7 +52,7 @@ $title$$(currentTiddler)$
|
|||
<$list filter="[tags[]!is[system]sort[title]]">
|
||||
<tr>
|
||||
<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>
|
||||
<$macrocall $name="iconEditor" title={{!!title}}/>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,3 @@
|
|||
title: $:/core/ui/TagTemplate
|
||||
|
||||
\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$""">
|
||||
<$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}}/>
|
||||
<$macrocall $name="tag" tag=<<currentTiddler>>/>
|
||||
|
|
|
|||
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
|
||||
tags: $:/tags/Macro
|
||||
|
||||
\define tag(tag)
|
||||
{{$tag$||$:/core/ui/TagTemplate}}
|
||||
\define tag-pill-styles()
|
||||
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
|
||||
|
|
|
|||
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