diff --git a/core/modules/widgets/list/listviews/pop.js b/core/modules/widgets/list/listviews/pop.js new file mode 100644 index 000000000..43aceda6c --- /dev/null +++ b/core/modules/widgets/list/listviews/pop.js @@ -0,0 +1,75 @@ +/*\ +title: $:/core/modules/widgets/list/listviews/pop.js +type: application/javascript +module-type: listview + +Animates list insertions and removals + +\*/ +(function(){ + +/*jslint node: true, browser: true */ +/*global $tw: false */ +"use strict"; + +var PopListView = function(listWidget) { + this.listWidget = listWidget; +} + +PopListView.prototype.insert = function(index) { + var listElementNode = this.listWidget.children[index], + targetElement = listElementNode.domNode; + // Reset once the transition is over + var transitionEventName = $tw.utils.convertEventName("transitionEnd"); + targetElement.addEventListener(transitionEventName,function handler(event) { + $tw.utils.setStyle(targetElement,[ + {transition: "none"}, + {transform: "none"} + ]); + targetElement.removeEventListener(transitionEventName,handler,false); + },false); + // Set up the initial position of the element + $tw.utils.setStyle(targetElement,[ + {transition: "none"}, + {transform: "scale(2)"}, + {opacity: "0.0"} + ]); + $tw.utils.forceLayout(targetElement); + // Transition to the final position + $tw.utils.setStyle(targetElement,[ + {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + + "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transform: "scale(1)"}, + {opacity: "1.0"} + ]); +}; + +PopListView.prototype.remove = function(index) { + var listElementNode = this.listWidget.children[index], + targetElement = listElementNode.domNode; + // Attach an event handler for the end of the transition + targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) { + if(targetElement.parentNode) { + targetElement.parentNode.removeChild(targetElement); + } + },false); + // Animate the closure + $tw.utils.setStyle(targetElement,[ + {transition: "none"}, + {transform: "scale(1)"}, + {opacity: "1.0"} + ]); + $tw.utils.forceLayout(targetElement); + $tw.utils.setStyle(targetElement,[ + {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + + "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transform: "scale(0.1)"}, + {opacity: "0.0"} + ]); + // Returning true causes the DOM node not to be deleted + return true; +}; + +exports.pop = PopListView; + +})(); diff --git a/core/ui/TagsEditor.tid b/core/ui/TagsEditor.tid index 3f20483b4..0fb5408d2 100644 --- a/core/ui/TagsEditor.tid +++ b/core/ui/TagsEditor.tid @@ -1,6 +1,6 @@ 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">× +<$fieldmangler>
<$list filter="[is[current]tags[]sort[title]]" listview="pop" itemClass="tw-tag-editor-label"><$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" class="btn-invisible">{{$:/core/images/down-arrow}} <$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid index d5d692562..0d6629925 100644 --- a/themes/tiddlywiki/snowwhite/base.tid +++ b/themes/tiddlywiki/snowwhite/base.tid @@ -472,6 +472,11 @@ canvas.tw-edit-bitmapeditor { margin: 1em 0 1em 0; } +.tw-tag-editor-label { + display: inline-block; + margin-right: 0.5em; +} + .tw-remove-tag-button { padding-left: 4px; }