diff --git a/ui/css/editor.css b/ui/css/editor.css index c87542cc..3b48f33c 100755 --- a/ui/css/editor.css +++ b/ui/css/editor.css @@ -15,6 +15,12 @@ opacity: 0.95; overflow: visible; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; } .panel summary { padding-left: 3px; @@ -49,6 +55,7 @@ background: white; } .sub-panel { + display: block; margin: 3px; border: solid 1px silver; box-shadow: none; @@ -80,6 +87,26 @@ opacity: 0.95; box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.3); + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} +.side-panel:not(:empty):hover:after { + position: absolute; + display: inline; + content: "Double click to toggle auto-hide (now: " attr(autohide) ")"; + font-size: 10px; + color: gray; + margin: 5px; + bottom: 0px; + opacity: 0.5; +} +.side-panel:not(:empty)[autohide=off], +.side-panel[autohide=on]:not(:empty):hover { + min-width: 200px; } .side-panel.left { left: 0px; @@ -90,13 +117,11 @@ border-left: solid 1px silver; } -.side-panel.auto-hide { - width: 10px; - overflow: hidden; +.side-panel[autohide=on] .sub-panel { + display: none; } -.side-panel.auto-hide:hover { - width: auto; - overflow: visible; +.side-panel[autohide=on]:hover .sub-panel { + display: block; } @@ -246,6 +271,9 @@ background: black; box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5); } +.dark .side-panel:not(:empty):hover:after { + color: gray; +} .dark .side-panel.left { border-right: solid 1px #333; } @@ -319,6 +347,9 @@ background: #333; box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5); } +.gray .side-panel:not(:empty):hover:after { + color: silver; +} .gray .side-panel.left { border-right: solid 1px #444; } diff --git a/ui/experiments/panels.html b/ui/experiments/panels.html index 8cb1b269..c64cdf72 100755 --- a/ui/experiments/panels.html +++ b/ui/experiments/panels.html @@ -37,6 +37,16 @@ function toggleThemes(){ } } +function toggleAutoHide(){ + var elem = $('.side-panel') + if(elem.attr('autohide') == 'off'){ + elem.attr('autohide', 'on') + } else { + elem.attr('autohide', 'off') + } + return false +} + $(function(){ var panel = makePanel('Test Panel A', true) @@ -72,7 +82,7 @@ $(function(){ -

click image to show editor panel and here to toggle theme...

+

click here to toggle panel autohide and here to toggle theme...

diff --git a/ui/lib/panels.js b/ui/lib/panels.js index 9b8b2fe7..11827285 100755 --- a/ui/lib/panels.js +++ b/ui/lib/panels.js @@ -10,7 +10,7 @@ /*********************************************************************/ function makePanel(title, open, editable_title, keep_empty){ - title = title == null ? ' ' : title + title = title == null || title.trim() == '' ? ' ' : title // tool panel... var panel = $('
') @@ -33,6 +33,7 @@ function makePanel(title, open, editable_title, keep_empty){ containment: 'parent', scroll: false, // XXX this makes things quite a bit slower... + //stack: '.panel, .sub-panel', stack: '.panel', //snap: ".panel", //snapMode: "outer", @@ -43,13 +44,13 @@ function makePanel(title, open, editable_title, keep_empty){ position: 'absolute', }) - // wrapper for sub-panels... // XXX dragging out, into another panel and back out behaves oddly: // should: // either revert or create a new panel // does: // drops to last placeholder + // XXX the helper should be above all other panels... var content = $('') .sortable({ forcePlaceholderSize: true, @@ -58,15 +59,23 @@ function makePanel(title, open, editable_title, keep_empty){ zIndex: 9999, start: function(e, ui){ - //console.log('start') ui.item.data('isoutside', false) - ui.placeholder.height(ui.helper.outerHeight()); - ui.placeholder.width(ui.helper.outerWidth()); - + ui.placeholder + .height(ui.helper.outerHeight()) + .width(ui.helper.outerWidth()) + // show all hidden panels... + $('.side-panel').each(function(){ + var p = $(this) + if(p.attr('autohide') == 'on'){ + p.attr('autohide', 'off') + p.data('autohide', true) + } else { + p.data('autohide', false) + } + }) }, // create a new panel when dropping outside of curent panel... beforeStop: function(e, ui){ - //console.log('stop') var c = 0 // do this only when dropping outside the panel... @@ -75,11 +84,11 @@ function makePanel(title, open, editable_title, keep_empty){ // NOTE: 2 because we are taking into account // the placeholders... && panel.find('.sub-panel').length > 2){ - c = 1 // compensate for removed item which is still in the // panel when we count it... // ...this is likely to the fact that we jquery-ui did // not cleanup yet + c = 1 var new_panel = makePanel() .css(ui.offset) .appendTo(panel.parent()) @@ -95,14 +104,20 @@ function makePanel(title, open, editable_title, keep_empty){ .remove() } + // reset the auto-hide of the side panels... + $('.side-panel').each(function(){ + var p = $(this) + if(p.data('autohide')){ + p.attr('autohide', 'on') + } + }) + ui.item.data('isoutside', false) }, over: function(e, ui){ - //console.log('over') ui.item.data('isoutside', false) }, out: function(e, ui){ - //console.log('out') ui.item.data('isoutside', true) }, }) @@ -111,8 +126,85 @@ function makePanel(title, open, editable_title, keep_empty){ } +// side can be: +// - left +// - right +// XXX in part this is exactly the same as makePanel +function makeSidePanel(side){ + var panel = $('.side-panel.'+side) + // only one panel from each side can exist... + if(panel.length != 0){ + return panel + } + panel = $('
') + .addClass('side-panel panel-content ' + side) + .sortable({ + forcePlaceholderSize: true, + opacity: 0.7, + connectWith: '.panel-content', + zIndex: 9999, + + start: function(e, ui){ + ui.item.data('isoutside', false) + ui.placeholder + .height(ui.helper.outerHeight()) + .width(ui.helper.outerWidth()) + // show all hidden panels... + $('.side-panel').each(function(){ + var p = $(this) + if(p.attr('autohide') == 'on'){ + p.attr('autohide', 'off') + p.data('autohide', true) + } else { + p.data('autohide', false) + } + }) + }, + // create a new panel when dropping outside of curent panel... + beforeStop: function(e, ui){ + // do this only when dropping outside the panel... + if(ui.item.data('isoutside')){ + var new_panel = makePanel() + .css(ui.offset) + .appendTo(panel.parent()) + new_panel.find('.panel-content') + .append(ui.item) + panel.trigger('newPanel', [new_panel]) + } + + // reset the auto-hide of the side panels... + $('.side-panel').each(function(){ + var p = $(this) + if(p.data('autohide')){ + p.attr('autohide', 'on') + } + }) + + ui.item.data('isoutside', false) + }, + over: function(e, ui){ + ui.item.data('isoutside', false) + }, + out: function(e, ui){ + ui.item.data('isoutside', true) + }, + }) + .dblclick(function(e){ + var elem = $(this) + if(elem.attr('autohide') == 'off'){ + elem.attr('autohide', 'on') + } else { + elem.attr('autohide', 'off') + } + return false + }) + .attr('autohide', 'off') + return panel +} + + function makeSubPanel(title, open, parent){ - title = title == null ? ' ' : title + title = title == null || title.trim() == '' ? ' ' : title var sub_panel = $('
') .addClass('sub-panel noScroll') @@ -133,57 +225,5 @@ function makeSubPanel(title, open, parent){ -// side can be: -// - left -// - right -function makeSidePanel(side){ - var panel = $('
') - .addClass('side-panel panel-content ' + side) - .sortable({ - forcePlaceholderSize: true, - opacity: 0.7, - connectWith: '.panel-content', - zIndex: 9999, - - start: function(e, ui){ - //console.log('start') - ui.item.data('isoutside', false) - ui.placeholder.height(ui.helper.outerHeight()); - ui.placeholder.width(ui.helper.outerWidth()); - }, - // create a new panel when dropping outside of curent panel... - beforeStop: function(e, ui){ - //console.log('stop') - - // do this only when dropping outside the panel... - if(ui.item.data('isoutside')){ - // compensate for removed item which is still in the - // panel when we count it... - // ...this is likely to the fact that we jquery-ui did - // not cleanup yet - var new_panel = makePanel() - .css(ui.offset) - .appendTo(panel.parent()) - new_panel.find('.panel-content') - .append(ui.item) - panel.trigger('newPanel', [new_panel]) - } - - ui.item.data('isoutside', false) - }, - over: function(e, ui){ - //console.log('over') - ui.item.data('isoutside', false) - }, - out: function(e, ui){ - //console.log('out') - ui.item.data('isoutside', true) - }, - }) - return panel -} - - - /********************************************************************** * vim:set ts=4 sw=4 : */