diff --git a/public/red/ui/palette.js b/public/red/ui/palette.js index 80b7a0142..c6a0600ef 100644 --- a/public/red/ui/palette.js +++ b/public/red/ui/palette.js @@ -16,7 +16,7 @@ RED.palette = function() { function addNodeType(nt,def) { - + console.log(nt,def.category); if (def.category != 'config') { var d = document.createElement("div"); d.id = "pn_"+nt; @@ -75,12 +75,52 @@ RED.palette = function() { } } - $(".palette-header").click( - function(e) { - $(this).next().slideToggle(); - $(this).children("i").toggleClass("expanded"); + $(".palette-header").click(function(e) { + (this).next().slideToggle(); + $(this).children("i").toggleClass("expanded"); + }); + + function filterChange() { + var val = $("#palette-search-input").val(); + if (val == "") { + $("#palette-search-clear").hide(); + } else { + $("#palette-search-clear").show(); + } + + var re = new RegExp(val); + $(".palette_node").each(function(i,el) { + if (val == "" || re.test(el.id)) { + $(this).show(); + } else { + $(this).hide(); + } }); + } + + $("#palette-search-input").focus(function(e) { + RED.keyboard.disable(); + }); + $("#palette-search-input").blur(function(e) { + RED.keyboard.enable(); + }); + + $("#palette-search-clear").on("click",function(e) { + e.preventDefault(); + $("#palette-search-input").val(""); + filterChange(); + $("#palette-search-input").focus(); + }); + + $("#palette-search-input").on("keyup",function() { + filterChange(); + }); + $("#palette-search-input").on("focus",function() { + $("body").one("mousedown",function() { + $("#palette-search-input").blur(); + }); + }); return { add:addNodeType diff --git a/public/style.css b/public/style.css index 6ea6f9616..73b5e64c4 100644 --- a/public/style.css +++ b/public/style.css @@ -78,17 +78,72 @@ a.brand img { } #palette { - overflow-y: auto; background: #f3f3f3; - width: 130px; + width: 140px; text-align: center; - padding: 5px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } +.palette-scroll { + position: absolute; + top: 0; + left:0; + right: 0; + bottom: 35px; + padding: 5px; + overflow-y: auto; + box-sizing:border-box; +} +#palette-search { + position: absolute; + bottom: 0; + left:0; + right: 0; + overflow: hidden; + background: #f3f3f3; + text-align: center; + height: 35px; + padding: 3px; + border-top: 1px solid #999; + box-sizing:border-box; +} +#palette-search i.icon-search { + position: absolute; + pointer-events: none; + left: 3px; + top: 10px; +} +#palette-search i.icon-remove { + position: absolute; + right: 3px; + top: 10px; +} + +#palette-search-clear { + display: none; +} + +#palette-search input { + float: right; + border-radius: 0; + border: none; + width: 100%; + box-shadow: none; + -webkit-box-shadow: none; + padding: 3px 17px; + margin: 0px; + height: 30px; + box-sizing:border-box; + +} +#palette-search input:focus { + border: none; + box-shadow: none; + -webkit-box-shadow: none; +} .palette-category { border: 1px solid #999;