From 04044785ff87fe897243a70930a932218957f797 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 26 Dec 2013 23:49:16 +0400 Subject: [PATCH] added sub-panel resizable option... Signed-off-by: Alex A. Naanou --- ui/css/editor.css | 6 ++++-- ui/experiments/panels.html | 15 ++++----------- ui/lib/panels.js | 35 +++++++++++++++++++++++++++++++---- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/ui/css/editor.css b/ui/css/editor.css index 8646bc4d..ed53f914 100755 --- a/ui/css/editor.css +++ b/ui/css/editor.css @@ -44,7 +44,8 @@ } .panel .panel-content { display: block; - min-height: 30px; + + min-height: 15px; } .sub-panel, .panel button, @@ -70,7 +71,8 @@ */ } .sub-panel .sub-panel-content { - margin: 10px; + margin-left: 10px; + margin-right: 10px; } .panel button:active, diff --git a/ui/experiments/panels.html b/ui/experiments/panels.html index c64cdf72..9ce52df3 100755 --- a/ui/experiments/panels.html +++ b/ui/experiments/panels.html @@ -1,5 +1,6 @@ + @@ -56,18 +56,11 @@ $(function(){ }) - makeSubPanel('Test Sub Panel A', true, panel) - .find('.content') - .html('

Panel A

') + makeSubPanel('Test Sub Panel A', $('

Panel A

'), panel, true, true) - makeSubPanel('Test Sub Panel B', true, panel) - .find('.content') - .html('

Panel B

') - - makeSubPanel('Test Sub Panel C', true, panel) - .find('.content') - .html('

Panel C

') + makeSubPanel('Test Sub Panel B', $('

Panel B

'), panel, true) + makeSubPanel('Test Sub Panel C', $('

Panel C

'), panel, false) $('body') diff --git a/ui/lib/panels.js b/ui/lib/panels.js index e5f98a93..255c4914 100755 --- a/ui/lib/panels.js +++ b/ui/lib/panels.js @@ -69,7 +69,9 @@ function wrapWithPanel(panel, parent, offset){ // close the panel and fire close events on it and all sub-panels... // function closePanel(panel, skip_sub_panel_events){ - skip_sub_panel_events = skip_sub_panel_events == null ? false : true + skip_sub_panel_events = skip_sub_panel_events == null + ? false + : skip_sub_panel_events if(!skip_sub_panel_events){ panel.find('.sub-panel') .trigger('panelClosing') @@ -246,14 +248,25 @@ function makeSidePanel(side, autohide){ } -function makeSubPanel(title, open, parent){ +//function makeSubPanel(title, open, parent, content_resizable){ +function makeSubPanel(title, content, parent, open, content_resizable){ title = title == null || title.trim() == '' ? ' ' : title + open = open == null ? true : open + content_resizable = content_resizable == null + ? false + : content_resizable + + var content_elem = $('
') + if(content != null){ + content_elem + .append(content) + } var sub_panel = $('
') .addClass('sub-panel noScroll') - .prop('open', open == null ? true : open) + .prop('open', open) .append($(''+title+'')) - .append($('
')) + .append(content_elem) if(parent != null){ if(parent.hasClass('panel-content')){ @@ -263,6 +276,20 @@ function makeSubPanel(title, open, parent){ } } + if(content_resizable){ + // NOTE: we are wrapping the content into a div so as to make + // the fact that the panel is resizable completely + // transparent for the user -- no need to be aware of the + // sizing elements, etc. + content_elem.wrap($('
')).parent() + .resizable({ + handles: 's', + }) + .css({ + overflow: 'hidden', + }) + } + return sub_panel }