1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +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 2016-11-28 19:17:25 +00:00
parent 9a38642141
commit f07e0f981a
7 changed files with 134 additions and 58 deletions

View File

@ -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>

View File

@ -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}}/>

View File

@ -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>>/>

View 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

View File

@ -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

View 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">>

View 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">>