diff --git a/ui/css/editor.css b/ui/css/editor.css index 9313b292..986f1187 100755 --- a/ui/css/editor.css +++ b/ui/css/editor.css @@ -38,8 +38,8 @@ display: block; min-height: 30px; } +.sub-panel, .panel button, -.panel details, .panel .state { margin: 1px; font-size: 11px; @@ -48,19 +48,19 @@ /* needed for dragging */ background: white; } -.panel details { +.sub-panel { margin: 3px; border: solid 1px silver; box-shadow: none; } -.panel details summary { +.sub-panel summary { background: #ddd; /* background: white; box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4); */ } -.panel .sub-panel-content { +.sub-panel .sub-panel-content { margin: 10px; } @@ -69,6 +69,25 @@ background: silver; } +.side-panel { + position: absolute; + top: 0px; + height: 100%; + bottom: 0px; + min-width: 10px; + + background: gray; + box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.5); +} +.side-panel.left { + left: 0px; + border-right: solid 1px black; +} +.side-panel.right { + right: 0px; + border-left: solid 1px black; +} + /* main controls */ .panel .control { @@ -168,16 +187,16 @@ } .dark .panel button, .dark .panel .state, -.dark .panel details { +.dark .sub-panel { border: solid 1px #333; /* needed for dragging */ background: #080808; color: #888; } -.dark .panel details { +.dark .sub-panel { border: solid 1px #333; } -.dark .panel details summary { +.dark .sub-panel summary { background: #333; color: silver; } @@ -212,6 +231,18 @@ border: none; border-top: solid 1px #333; } +.dark .side-panel { + background: black; + box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5); +} +.dark .side-panel.left { + border-right: solid 1px #333; +} +.dark .side-panel.right { + border-left: solid 1px #333; +} + + /* gray theme */ @@ -230,16 +261,16 @@ } .gray .panel button, .gray .panel .state, -.gray .panel details { +.gray .sub-panel { border: solid 1px #444; /* needed for dragging */ background: #333; color: #888; } -.gray .panel details { +.gray .sub-panel { border: solid 1px #454545; } -.gray .panel details summary { +.gray .sub-panel summary { background: #444; color: silver; } @@ -273,4 +304,14 @@ border: none; border-top: solid 1px #444; } +.gray .side-panel { + background: #333; + box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5); +} +.gray .side-panel.left { + border-right: solid 1px #444; +} +.gray .side-panel.right { + border-left: solid 1px #444; +} diff --git a/ui/experiments/panels.html b/ui/experiments/panels.html index 60e36022..8cb1b269 100755 --- a/ui/experiments/panels.html +++ b/ui/experiments/panels.html @@ -4,6 +4,18 @@ @@ -13,6 +25,18 @@ +

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

diff --git a/ui/lib/panels.js b/ui/lib/panels.js index d37314e2..9b8b2fe7 100755 --- a/ui/lib/panels.js +++ b/ui/lib/panels.js @@ -62,6 +62,7 @@ function makePanel(title, open, editable_title, keep_empty){ 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){ @@ -132,5 +133,57 @@ 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 : */