diff --git a/Gruntfile.js b/Gruntfile.js index ca01292f8..8ba355bd0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -108,11 +108,14 @@ module.exports = function(grunt) { "editor/js/nodes.js", "editor/js/history.js", "editor/js/validators.js", + "editor/js/ui/common/editableList.js", + "editor/js/ui/common/menu.js", + "editor/js/ui/common/popover.js", + "editor/js/ui/common/searchBox.js", + "editor/js/ui/common/tabs.js", + "editor/js/ui/common/typedInput.js", "editor/js/ui/deploy.js", - "editor/js/ui/menu.js", "editor/js/ui/keyboard.js", - "editor/js/ui/tabs.js", - "editor/js/ui/popover.js", "editor/js/ui/workspaces.js", "editor/js/ui/view.js", "editor/js/ui/sidebar.js", @@ -126,9 +129,7 @@ module.exports = function(grunt) { "editor/js/ui/library.js", "editor/js/ui/notifications.js", "editor/js/ui/subflow.js", - "editor/js/ui/touch/radialMenu.js", - "editor/js/ui/typedInput.js", - "editor/js/ui/editableList.js" + "editor/js/ui/touch/radialMenu.js" ], dest: "public/red/red.js" }, diff --git a/editor/js/ui/editableList.js b/editor/js/ui/common/editableList.js similarity index 97% rename from editor/js/ui/editableList.js rename to editor/js/ui/common/editableList.js index 5b3c12125..fbf74537a 100644 --- a/editor/js/ui/editableList.js +++ b/editor/js/ui/common/editableList.js @@ -159,6 +159,7 @@ }, _refreshFilter: function() { var that = this; + var count = 0; if (!this.activeFilter) { this.element.children().show(); } @@ -168,14 +169,17 @@ try { if (that.activeFilter(data)) { el.parent().show(); + count++; } else { el.parent().hide(); } } catch(err) { console.log(err); el.parent().show(); + count++; } }); + return count; }, width: function(desiredWidth) { this.uiWidth = desiredWidth; @@ -265,7 +269,10 @@ if (filter !== undefined) { this.activeFilter = filter; } - this._refreshFilter(); + return this._refreshFilter(); + }, + length: function() { + return this.element.children().length; } }); })(jQuery); diff --git a/editor/js/ui/menu.js b/editor/js/ui/common/menu.js similarity index 100% rename from editor/js/ui/menu.js rename to editor/js/ui/common/menu.js diff --git a/editor/js/ui/popover.js b/editor/js/ui/common/popover.js similarity index 100% rename from editor/js/ui/popover.js rename to editor/js/ui/common/popover.js diff --git a/editor/js/ui/common/searchBox.js b/editor/js/ui/common/searchBox.js new file mode 100644 index 000000000..a15b3ba92 --- /dev/null +++ b/editor/js/ui/common/searchBox.js @@ -0,0 +1,88 @@ +/** + * Copyright 2016 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +(function($) { + + $.widget( "nodered.searchBox", { + _create: function() { + var that = this; + + this.currentTimeout = null; + this.lastSent = ""; + this.element.val(""); + this.uiContainer = this.element.wrap("
").parent(); + this.uiContainer.addClass("red-ui-searchBox-container"); + + $('').prependTo(this.uiContainer); + this.clearButton = $('').appendTo(this.uiContainer); + this.clearButton.on("click",function(e) { + e.preventDefault(); + that.element.val(""); + that._change("",true); + that.element.focus(); + }); + + this.resultCount = $('',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer); + + this.element.val(""); + this.element.on("keyup",function() { + that._change($(this).val()); + }); + + this.element.on("focus",function() { + $("body").one("mousedown",function() { + that.element.blur(); + }); + }); + + }, + _change: function(val,instant) { + var fireEvent = false; + if (val === "") { + this.clearButton.hide(); + fireEvent = true; + } else { + this.clearButton.show(); + fireEvent = (val.length >= (this.options.minimumLength||0)); + } + if (fireEvent) { + if (!instant && this.options.delay > 0) { + clearTimeout(this.currentTimeout); + var that = this; + this.currentTimeout = setTimeout(function() { + that._trigger("change"); + },this.options.delay); + } else { + this._trigger("change"); + } + } + }, + value: function(val) { + if (val === undefined) { + return this.element.val(); + } else { + this.element.val(val); + this._change(val); + } + }, + count: function(val) { + if (val === undefined || val === null || val === "") { + this.resultCount.text("").hide(); + } else { + this.resultCount.text(val).show(); + } + } + }); +})(jQuery); diff --git a/editor/js/ui/tabs.js b/editor/js/ui/common/tabs.js similarity index 100% rename from editor/js/ui/tabs.js rename to editor/js/ui/common/tabs.js diff --git a/editor/js/ui/typedInput.js b/editor/js/ui/common/typedInput.js similarity index 100% rename from editor/js/ui/typedInput.js rename to editor/js/ui/common/typedInput.js diff --git a/editor/sass/style.scss b/editor/sass/style.scss index 2dd3babf8..a38c7eae8 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -43,8 +43,9 @@ @import "palette-editor"; -@import "typedInput"; -@import "editableList"; +@import "ui/common/editableList"; +@import "ui/common/searchBox"; +@import "ui/common/typedInput"; @import "dragdrop"; diff --git a/editor/sass/editableList.scss b/editor/sass/ui/common/editableList.scss similarity index 100% rename from editor/sass/editableList.scss rename to editor/sass/ui/common/editableList.scss diff --git a/editor/sass/ui/common/searchBox.scss b/editor/sass/ui/common/searchBox.scss new file mode 100644 index 000000000..733eb49f3 --- /dev/null +++ b/editor/sass/ui/common/searchBox.scss @@ -0,0 +1,69 @@ +/** + * Copyright 2016 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + + +.red-ui-searchBox-container { + i { + font-size: 10px; + color: #666; + } + i.fa-search { + position: absolute; + pointer-events: none; + left: 12px; + top: 12px; + } + i.fa-times { + position: absolute; + right: 7px; + top: 12px; + } + input { + border-radius: 0; + border: none; + width: 100%; + box-shadow: none; + -webkit-box-shadow: none; + padding: 3px 17px 3px 22px; + margin: 0px; + height: 30px; + box-sizing:border-box; + + &:focus { + border: none; + box-shadow: none; + -webkit-box-shadow: none; + } + } + a { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 20px; + display: none; + } + .red-ui-searchBox-resultCount { + position: absolute; + right: 22px; + top: 7px; + background: #eee; + color: #666; + padding: 1px 8px; + font-size: 9px; + border-radius: 4px; + } +} diff --git a/editor/sass/typedInput.scss b/editor/sass/ui/common/typedInput.scss similarity index 100% rename from editor/sass/typedInput.scss rename to editor/sass/ui/common/typedInput.scss diff --git a/editor/sass/widgetStyle.scss b/editor/sass/widgetStyle.scss new file mode 100644 index 000000000..2eb5fc1fb --- /dev/null +++ b/editor/sass/widgetStyle.scss @@ -0,0 +1,23 @@ +/** + * Copyright 2016 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + +@import "colors"; +@import "mixins"; + +@import "forms"; +@import "jquery"; +@import "typedInput"; +@import "editableList";