From a9feeaa1c9a14269e87c2996c18ba3eb7ba6a0a8 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 13 Apr 2016 18:07:49 -0700 Subject: [PATCH] Make tray resizble and remember size per-node-type --- editor/js/ui/editor.js | 9 ++++- editor/js/ui/tray.js | 34 +++++++++++++++-- editor/sass/editor.scss | 76 ++++++++++++++++++++++++++++++++++++++ editor/sass/workspace.scss | 63 ------------------------------- 4 files changed, 115 insertions(+), 67 deletions(-) diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index d6644da66..392044430 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -19,6 +19,8 @@ RED.editor = (function() { var editing_config_node = null; var subflowEditor; + var editTrayWidthCache = {}; + function getCredentialsURL(nodeType, nodeID) { var dashedType = nodeType.replace(/\s+/g, '-'); return 'credentials/' + dashedType + "/" + nodeID; @@ -560,7 +562,8 @@ RED.editor = (function() { } } ], - resize: function() { + resize: function(dimensions) { + editTrayWidthCache[type] = dimensions.width; if (editing_node && editing_node._def.oneditresize) { var form = $("#dialog-form"); editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()}); @@ -645,6 +648,10 @@ RED.editor = (function() { } }); */ + if (editTrayWidthCache[type]) { + trayOptions.width = editTrayWidthCache[type]; + } + if (type === 'subflow') { var id = editing_node.type.substring(8); trayOptions.buttons.unshift({ diff --git a/editor/js/ui/tray.js b/editor/js/ui/tray.js index d6943d4c2..8c0dffecb 100644 --- a/editor/js/ui/tray.js +++ b/editor/js/ui/tray.js @@ -25,6 +25,7 @@ RED.tray = (function() { var header = $('
'+(options.title||"")+'
').appendTo(el); var body = $('
').appendTo(el); var footer = $('
').appendTo(el); + var resizer = $('
').appendTo(el); if (options.buttons) { for (var i=0;i -501) { + ui.position.left = -501; + } else if (tray.options.resize) { + setTimeout(function() { + tray.options.resize({width: -ui.position.left}); + },0); + } + }, + stop:function(event,ui) { + el.width(-ui.position.left); + el.css({left:''}); + if (tray.options.resize) { + tray.options.resize({width: -ui.position.left}); + } + } + }); + if (options.open) { options.open(el); } $("#header-shade").show(); $("#editor-shade").show(); + if (options.width) { + el.width(options.width); + } el.css({ right: -(el.width()+10)+"px", transition: "right 0.2s ease" @@ -72,7 +100,7 @@ RED.tray = (function() { setTimeout(function() { setTimeout(function() { if (options.resize) { - options.resize(); + options.resize({width:el.width()}); } if (options.show) { options.show(); @@ -83,7 +111,7 @@ RED.tray = (function() { } return { - init: function() { + init: function init() { $( window ).resize(function() { if (stack.length > 0) { var tray = stack[stack.length-1]; @@ -91,7 +119,7 @@ RED.tray = (function() { tray.body.height(trayHeight-40); if (tray.options.resize) { - tray.options.resize(); + tray.options.resize({width:tray.tray.width()}); } } }); diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss index e93c01ba2..35d1018ce 100644 --- a/editor/sass/editor.scss +++ b/editor/sass/editor.scss @@ -14,6 +14,82 @@ * limitations under the License. **/ + + #editor-stack { + position: absolute; + margin: 0; + top: 0; + bottom: 0px; + right: 323px; + width: 0; + } + .editor-tray { + position:absolute; + margin: 0; + top: 0; + min-width: 500px; + width: auto; + right: -1000px; + bottom: 0; + background: #fff; + border-left: 1px solid $secondary-border-color; + border-bottom: 1px solid $primary-border-color; + box-sizing: content-box; + } + .editor-tray.open { + right: 0; + } + .editor-tray-body { + width: auto; + padding: 20px; + min-width: 500px; + box-sizing: border-box; + overflow-y: scroll; + } + .editor-tray-header { + padding: 10px; + box-sizing: border-box; + font-weight: bold; + height: 40px; + border-bottom: 1px solid $primary-border-color; + background: $palette-header-background; + } + .editor-tray-footer { + @include component-footer; + height: auto; + padding: 8px; + button { + @include workspace-button; + padding: 0.4em 1em; + margin-right: 8px; + + &.leftButton { + margin-right: 40px; + } + } + } + .editor-tray-resize-handle { + position: absolute; + top: 0px; + bottom: 0px; + width: 7px; + left: -9px; + background: $background-color url(images/grip.png) no-repeat 50% 50%; + cursor: col-resize; + border-left: 1px solid $primary-border-color; + box-shadow: -1px 0 6px rgba(0,0,0,0.1); + } + + #editor-shade, #header-shade { + position: absolute; + top:0; + bottom:0; + left:0; + right:0; + background: rgba(220,220,220,0.5); + } + + .dialog-form,#dialog-form, #dialog-config-form { margin: 0; height: 100%; diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss index 9fcbe0f61..ac0ef65b3 100644 --- a/editor/sass/workspace.scss +++ b/editor/sass/workspace.scss @@ -50,69 +50,6 @@ margin-right: 35px; } -#editor-stack { - position: absolute; - margin: 0; - top: 0; - bottom: 0px; - right: 323px; - width: 0; -} -.editor-tray { - position:absolute; - margin: 0; - top: 0; - min-width: 500px; - width: auto; - right: -1000px; - bottom: 0; - background: #fff; - border-left: 1px solid $primary-border-color; - border-bottom: 1px solid $primary-border-color; - box-sizing: content-box; - box-shadow: -1px 0 10px rgba(0,0,0,0.1); -} -.editor-tray.open { - right: 0; -} -.editor-tray-body { - width: auto; - padding: 20px; - min-width: 500px; - box-sizing: border-box; - overflow-y: scroll; -} -.editor-tray-header { - padding: 10px; - box-sizing: border-box; - font-weight: bold; - height: 40px; - border-bottom: 1px solid $primary-border-color; - background: $palette-header-background; -} -.editor-tray-footer { - @include component-footer; - height: auto; - padding: 8px; - button { - @include workspace-button; - padding: 0.4em 1em; - margin-right: 8px; - - &.leftButton { - margin-right: 40px; - } - } -} - -#editor-shade, #header-shade { - position: absolute; - top:0; - bottom:0; - left:0; - right:0; - background: rgba(220,220,220,0.5); -} #workspace-add-tab {