mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00
Code Issues Releases Wiki Activity

Add a better tags editor

Browse Source 
Now tags can be individually removed, and added with autocomplete
This commit is contained in:
Jeremy Ruston 2013-06-09 19:28:50 +01:00
parent 2c20e6579d
commit 19f298bc80
3 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/ui/EditTemplate.tid
View File

@ -9,9 +9,7 @@ modifier: JeremyRuston
<$edit field="draft.title"/>
@@
<div class="tw-tiddler-help">Type tags separated with spaces, &#91;&#91;using double square brackets&#93;&#93; if necessary</div>
<$edit field="tags"/>
<$transclude template="$:/core/ui/TagsEditor"/>
<$reveal state="$:/ShowEditPreview" type="match" text="yes">
<span class="tw-tiddler-help">Use WikiText to add formatting, images, and dynamic features</span> <$button type="set" set="$:/ShowEditPreview" setTo="no" >Hide preview</$button>
@ -29,4 +27,4 @@ modifier: JeremyRuston
<$edit field="text"/>
</$reveal>
{{$:/core/ui/FieldEditor}}
<$transclude template="$:/core/ui/FieldEditor"/>

17
core/ui/TagsEditor.tid Normal file
View File

@ -0,0 +1,17 @@
title: $:/core/ui/TagsEditor
<$fieldmangler><div class="tw-edit-tags-list"><$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">&times;</$button></$setstyle>
</$list></div>
<div class="tw-add-tag">Add a new tag: <span class="tw-add-tag-name"><$edit tiddler="$:/NewTagName" type="input" default="" placeholder="tag name" focusSet="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes"/></span><$button popup="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes">drop</$button> <span class="tw-add-tag-button"><$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add</$button></span></div>
<div class="tw-tags-autocomplete-wrapper">
<$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"/></$setstyle></$link>
</$list>
</$linkcatcher>
</$reveal>
</div>
</$fieldmangler>

49
themes/tiddlywiki/snowwhite/base.tid
View File

@ -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}};
<<border-radius 4px>>
<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
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%;