mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-07-04 11:02:51 +00:00
Code Issues Releases Wiki Activity

Tweak appearance of tags editor

Browse Source 
Making it a bit more like http://aehlke.github.io/tag-it/
This commit is contained in:
Jermolene 2013-11-30 10:55:45 +00:00
parent 208c64aa9d
commit 2db3043d6e
3 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/ui/EditTemplate/tags.tid
View File

@ -4,10 +4,10 @@ tags: $:/tags/EditTemplate
\define tag-styles() \define tag-styles()
background-color:$(backgroundColor)$; background-color:$(backgroundColor)$;
\end \end
<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]" storyview="pop" itemClass="tw-tag-editor-label"><$set name="backgroundColor" value={{!!color}}><span style=<<tag-styles>> class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" param={{!!title}} class="btn-invisible tw-remove-tag-button">&times;</$button></span></$set> <div class="tw-edit-tags"><$fieldmangler><$list filter="[is[current]tags[]sort[title]]" storyview="pop" itemClass="tw-tag-editor-label"><$set name="backgroundColor" value={{!!color}}><span style=<<tag-styles>> class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" param={{!!title}} class="btn-invisible tw-remove-tag-button">&times;</$button></span></$set>
</$list></div> </$list>
<div class="tw-add-tag">//Add a new tag:// <span class="tw-add-tag-name"><$edit-text tiddler="$:/NewTagName" tag="input" default="" placeholder="tag name" focusPopup=<<qualify "$:/state/tagsAutoComplete">> class="tw-edit-texteditor"/></span> <$button popup=<<qualify "$:/state/tagsAutoComplete">> class="btn-invisible btn-dropdown">{{$:/core/images/down-arrow}}</$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-edit-add-tag"><span class="tw-add-tag-name"><$edit-text tiddler="$:/NewTagName" tag="input" default="" placeholder="tag name" focusPopup=<<qualify "$:/state/tagsAutoComplete">> class="tw-edit-texteditor"/></span> <$button popup=<<qualify "$:/state/tagsAutoComplete">> class="btn-invisible btn-dropdown">{{$:/core/images/down-arrow}}</$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-block-dropdown-wrapper"> <div class="tw-block-dropdown-wrapper">
<$reveal state=<<qualify "$:/state/tagsAutoComplete">> type="nomatch" text="" default=""> <$reveal state=<<qualify "$:/state/tagsAutoComplete">> type="nomatch" text="" default="">
@ -20,3 +20,4 @@ background-color:$(backgroundColor)$;
</$reveal> </$reveal>
</div> </div>
</$fieldmangler> </$fieldmangler>
</div>

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

@ -83,6 +83,16 @@ background-image: -ms-linear-gradient($gradient$);
<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">> <<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
} }
.tw-edit-tags {
<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
}
.tw-tiddler-frame .tw-edit-tags input.tw-edit-texteditor {
<<box-shadow "none">>
border: none;
outline: none;
}
canvas.tw-edit-bitmapeditor { canvas.tw-edit-bitmapeditor {
<<box-shadow "2px 2px 5px rgba(0, 0, 0, 0.5)">> <<box-shadow "2px 2px 5px rgba(0, 0, 0, 0.5)">>
} }

22
themes/tiddlywiki/vanilla/base.tid
View File

@ -545,6 +545,23 @@ canvas.tw-edit-bitmapeditor {
font-style: normal; font-style: normal;
} }
.tw-edit-tags {
border: 1px solid #ddd;
padding: 4px 8px 4px 8px;
}
.tw-edit-add-tag {
display: inline-block;
}
.tw-edit-add-tag .tw-add-tag-name input {
width: 50%;
}
.tw-edit-tags .tw-tag-label {
display: inline-block;
}
.tw-edit-tags-list { .tw-edit-tags-list {
margin: 14px 0 14px 0; margin: 14px 0 14px 0;
} }
@ -558,11 +575,6 @@ canvas.tw-edit-bitmapeditor {
padding-left: 4px; padding-left: 4px;
} }
.tw-add-tag-name {
display: inline-block;
width: 15%;
}
.tw-tiddler-preview { .tw-tiddler-preview {
overflow: auto; overflow: auto;
} }