From 3a257e1e0025426d54ff00f4cbac22f7274e7738 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 16 May 2019 10:28:01 +0100 Subject: [PATCH] Fix typedInput styling and allow option list to scroll --- .../src/js/ui/common/typedInput.js | 29 ++++++++++++++----- .../src/sass/ui/common/typedInput.scss | 22 +++++++++----- 2 files changed, 36 insertions(+), 15 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js index b22af7c6c..5ea7a867e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js @@ -172,7 +172,7 @@ this.options.types = this.options.types||Object.keys(allOptions); this.selectTrigger = $('').prependTo(this.uiSelect); - $('').toggle(this.options.types.length > 1).appendTo(this.selectTrigger); + $('').toggle(this.options.types.length > 1).appendTo(this.selectTrigger); this.selectLabel = $('').appendTo(this.selectTrigger); @@ -213,7 +213,7 @@ }) // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline' - this.optionSelectTrigger = $('').appendTo(this.uiSelect); + this.optionSelectTrigger = $('').appendTo(this.uiSelect); this.optionSelectLabel = $('').prependTo(this.optionSelectTrigger); RED.popover.tooltip(this.optionSelectLabel,function() { return that.optionValue; @@ -241,7 +241,10 @@ _showTypeMenu: function() { if (this.typeList.length > 1) { this._showMenu(this.menu,this.selectTrigger); - this.menu.find("[value='"+this.propertyType+"']").trigger("focus"); + var selected = this.menu.find("[value='"+this.propertyType+"']"); + setTimeout(function() { + selected.trigger("focus"); + },120); } else { this.input.trigger("focus"); } @@ -262,8 +265,11 @@ } }, _hideMenu: function(menu) { - $(document).off("mousedown.close-property-select"); + $(document).off("mousedown.red-ui-typedInput-close-property-select"); menu.hide(); + menu.css({ + height: "auto" + }); if (this.elementDiv.is(":visible")) { this.input.trigger("focus"); } else if (this.optionSelectTrigger.is(":visible")){ @@ -305,18 +311,21 @@ }); }); menu.css({ - display: "none", + display: "none" }); menu.appendTo(document.body); menu.on('keydown', function(evt) { if (evt.keyCode === 40) { + evt.preventDefault(); // DOWN $(this).children(":focus").next().trigger("focus"); } else if (evt.keyCode === 38) { + evt.preventDefault(); // UP $(this).children(":focus").prev().trigger("focus"); } else if (evt.keyCode === 27) { + evt.preventDefault(); that._hideMenu(menu); } }) @@ -339,6 +348,10 @@ if (top+menuHeight > $(window).height()) { top -= (top+menuHeight)-$(window).height()+5; } + if (top < 0) { + menu.height(menuHeight+top) + top = 0; + } menu.css({ top: top+"px", left: (2+pos.left)+"px", @@ -346,7 +359,7 @@ menu.slideDown(100); this._delay(function() { that.uiSelect.addClass('red-ui-typedInput-focus'); - $(document).on("mousedown.close-property-select", function(event) { + $(document).on("mousedown.red-ui-typedInput-close-property-select", function(event) { if(!$(event.target).closest(menu).length) { that._hideMenu(menu); } @@ -362,7 +375,7 @@ if (labelWidth === 0) { var container = $('
').css({ position:"absolute", - top:0, + top:0 }).appendTo(document.body); var newTrigger = label.clone().appendTo(container); labelWidth = newTrigger.outerWidth(); @@ -464,7 +477,7 @@ return result; }); this.selectTrigger.toggleClass("disabled", this.typeList.length === 1); - this.selectTrigger.find(".fa-sort-desc").toggle(this.typeList.length > 1) + this.selectTrigger.find(".fa-caret-down").toggle(this.typeList.length > 1) if (this.menu) { this.menu.remove(); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss index 49b0be0cf..11c910365 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss @@ -67,15 +67,9 @@ vertical-align: middle; color: $form-text-color; i.red-ui-typedInput-icon { - position: relative; - top: -3px; margin-left: 1px; margin-right: 2px; - margin-top: 1px; vertical-align: middle; - &.fa-ellipsis-h { - top: -1px; - } } &.disabled { cursor: default; @@ -107,6 +101,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + &:before { + content:''; + display: inline-block; + height: 100%; + vertical-align: middle; + } } button.red-ui-typedInput-option-expand { @@ -135,15 +135,21 @@ padding: 0 5px 0 8px; i.red-ui-typedInput-icon { margin-right: 4px; - margin-top: 4px; } } .red-ui-typedInput-option-caret { top: 0; position: absolute; right: 0; + bottom: 0; width: 17px; padding-left: 6px; + &:before { + content:''; + display: inline-block; + height: 100%; + vertical-align: middle; + } } &:focus { box-shadow: none; @@ -159,6 +165,8 @@ font-size: $primary-font-size; position: absolute; + max-height: 350px; + overflow-y: auto; border: 1px solid $primary-border-color; background: $secondary-background; z-index: 2000;