diff --git a/core/ui/EditTemplate.tid b/core/ui/EditTemplate.tid index fe9f72ddb..a5fcb8057 100644 --- a/core/ui/EditTemplate.tid +++ b/core/ui/EditTemplate.tid @@ -9,9 +9,7 @@ modifier: JeremyRuston <$edit field="draft.title"/> @@ -
Type tags separated with spaces, [[using double square brackets]] if necessary
- -<$edit field="tags"/> +<$transclude template="$:/core/ui/TagsEditor"/> <$reveal state="$:/ShowEditPreview" type="match" text="yes"> Use WikiText to add formatting, images, and dynamic features <$button type="set" set="$:/ShowEditPreview" setTo="no" >Hide preview @@ -29,4 +27,4 @@ modifier: JeremyRuston <$edit field="text"/> -{{$:/core/ui/FieldEditor}} +<$transclude template="$:/core/ui/FieldEditor"/> diff --git a/core/ui/TagsEditor.tid b/core/ui/TagsEditor.tid new file mode 100644 index 000000000..09c2749e1 --- /dev/null +++ b/core/ui/TagsEditor.tid @@ -0,0 +1,17 @@ +title: $:/core/ui/TagsEditor + +<$fieldmangler>
<$list filter="[is[current]tags[]sort[title]]"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">× +
+ +
Add a new tag: <$edit tiddler="$:/NewTagName" type="input" default="" placeholder="tag name" focusSet="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes"/><$button popup="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes">drop <$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add
+ +
+<$reveal state="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes" type="nomatch" text="" default="" class="tw-tags-autocomplete"> + +<$linkcatcher set="$:/NewTagName" setTo="" message="tw-add-tag"><$list filter="[!is[shadow]tags[]prefix{$:/NewTagName}sort[title]]"><$link><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text"/> + + + + +
+ diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid index 7ad040078..aaa2a707d 100644 --- a/themes/tiddlywiki/snowwhite/base.tid +++ b/themes/tiddlywiki/snowwhite/base.tid @@ -471,6 +471,51 @@ canvas.tw-edit-bitmapeditor { ** Tiddler edit mode */ +.tw-edit-tags-list { + margin: 1em 0 1em 0; +} + +.tw-remove-tag-button { + padding-left: 4px; +} + +.tw-tags-autocomplete-wrapper { + position: relative; +} + +.tw-tags-autocomplete { + position: absolute; + min-width: 20em; + border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}}; + background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}}; + <> + <> + padding: 0 0 0 0; + margin: 0.25em 0 0 0; + white-space: nowrap; + z-index: 1000; +} + +.tw-tags-autocomplete a { + display: block; + padding: 0.25em 1em 0.25em 1em; +} + +.tw-tags-autocomplete a:hover { + color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkbackground}}; + background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}}; + text-decoration: none; +} + +.tw-add-tag { + color: #999; +} + +.tw-add-tag-name { + display: inline-block; + width: 15%; +} + .tw-tiddler-preview { overflow: auto; } @@ -517,6 +562,10 @@ canvas.tw-edit-bitmapeditor { vertical-align: middle; } +.tw-edit-field-add { + color: #999; +} + .tw-edit-field-add-name { display: inline-block; width: 15%;