mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
added side-panels...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
49e8da7070
commit
c1ed1198c0
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -4,6 +4,18 @@
|
||||
|
||||
<style>
|
||||
|
||||
body.dark {
|
||||
background: #0a0a0a;
|
||||
color: silver;
|
||||
}
|
||||
|
||||
|
||||
body.gray {
|
||||
background: #333;
|
||||
color: silver;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script src="../ext-lib/jquery.js"></script>
|
||||
@ -13,6 +25,18 @@
|
||||
|
||||
<script>
|
||||
|
||||
function toggleThemes(){
|
||||
var b = $('body')
|
||||
if(b.hasClass('gray')){
|
||||
b.removeClass('gray')
|
||||
b.addClass('dark')
|
||||
} else if(b.hasClass('dark')){
|
||||
b.removeClass('dark')
|
||||
} else {
|
||||
b.addClass('gray')
|
||||
}
|
||||
}
|
||||
|
||||
$(function(){
|
||||
|
||||
var panel = makePanel('Test Panel A', true)
|
||||
@ -40,6 +64,7 @@ $(function(){
|
||||
.append(panel)
|
||||
//.append(makePanel('Test Panel B', true))
|
||||
//.append(makePanel('Test Panel C', true))
|
||||
.append(makeSidePanel('left'))
|
||||
|
||||
|
||||
})
|
||||
@ -47,6 +72,7 @@ $(function(){
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<p>click image to show editor panel and <a href="javascript:toggleThemes()">here</a> to toggle theme...</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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 = $('<div/>')
|
||||
.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 : */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user