mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-04 13:20:10 +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;
|
display: block;
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
}
|
}
|
||||||
|
.sub-panel,
|
||||||
.panel button,
|
.panel button,
|
||||||
.panel details,
|
|
||||||
.panel .state {
|
.panel .state {
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@ -48,19 +48,19 @@
|
|||||||
/* needed for dragging */
|
/* needed for dragging */
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
.panel details {
|
.sub-panel {
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
border: solid 1px silver;
|
border: solid 1px silver;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.panel details summary {
|
.sub-panel summary {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
/*
|
/*
|
||||||
background: white;
|
background: white;
|
||||||
box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4);
|
box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4);
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
.panel .sub-panel-content {
|
.sub-panel .sub-panel-content {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -69,6 +69,25 @@
|
|||||||
background: silver;
|
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 */
|
/* main controls */
|
||||||
.panel .control {
|
.panel .control {
|
||||||
@ -168,16 +187,16 @@
|
|||||||
}
|
}
|
||||||
.dark .panel button,
|
.dark .panel button,
|
||||||
.dark .panel .state,
|
.dark .panel .state,
|
||||||
.dark .panel details {
|
.dark .sub-panel {
|
||||||
border: solid 1px #333;
|
border: solid 1px #333;
|
||||||
/* needed for dragging */
|
/* needed for dragging */
|
||||||
background: #080808;
|
background: #080808;
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
.dark .panel details {
|
.dark .sub-panel {
|
||||||
border: solid 1px #333;
|
border: solid 1px #333;
|
||||||
}
|
}
|
||||||
.dark .panel details summary {
|
.dark .sub-panel summary {
|
||||||
background: #333;
|
background: #333;
|
||||||
color: silver;
|
color: silver;
|
||||||
}
|
}
|
||||||
@ -212,6 +231,18 @@
|
|||||||
border: none;
|
border: none;
|
||||||
border-top: solid 1px #333;
|
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 */
|
/* gray theme */
|
||||||
@ -230,16 +261,16 @@
|
|||||||
}
|
}
|
||||||
.gray .panel button,
|
.gray .panel button,
|
||||||
.gray .panel .state,
|
.gray .panel .state,
|
||||||
.gray .panel details {
|
.gray .sub-panel {
|
||||||
border: solid 1px #444;
|
border: solid 1px #444;
|
||||||
/* needed for dragging */
|
/* needed for dragging */
|
||||||
background: #333;
|
background: #333;
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
.gray .panel details {
|
.gray .sub-panel {
|
||||||
border: solid 1px #454545;
|
border: solid 1px #454545;
|
||||||
}
|
}
|
||||||
.gray .panel details summary {
|
.gray .sub-panel summary {
|
||||||
background: #444;
|
background: #444;
|
||||||
color: silver;
|
color: silver;
|
||||||
}
|
}
|
||||||
@ -273,4 +304,14 @@
|
|||||||
border: none;
|
border: none;
|
||||||
border-top: solid 1px #444;
|
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>
|
<style>
|
||||||
|
|
||||||
|
body.dark {
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body.gray {
|
||||||
|
background: #333;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="../ext-lib/jquery.js"></script>
|
<script src="../ext-lib/jquery.js"></script>
|
||||||
@ -13,6 +25,18 @@
|
|||||||
|
|
||||||
<script>
|
<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(){
|
$(function(){
|
||||||
|
|
||||||
var panel = makePanel('Test Panel A', true)
|
var panel = makePanel('Test Panel A', true)
|
||||||
@ -40,6 +64,7 @@ $(function(){
|
|||||||
.append(panel)
|
.append(panel)
|
||||||
//.append(makePanel('Test Panel B', true))
|
//.append(makePanel('Test Panel B', true))
|
||||||
//.append(makePanel('Test Panel C', true))
|
//.append(makePanel('Test Panel C', true))
|
||||||
|
.append(makeSidePanel('left'))
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
@ -47,6 +72,7 @@ $(function(){
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<p>click image to show editor panel and <a href="javascript:toggleThemes()">here</a> to toggle theme...</p>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -62,6 +62,7 @@ function makePanel(title, open, editable_title, keep_empty){
|
|||||||
ui.item.data('isoutside', false)
|
ui.item.data('isoutside', false)
|
||||||
ui.placeholder.height(ui.helper.outerHeight());
|
ui.placeholder.height(ui.helper.outerHeight());
|
||||||
ui.placeholder.width(ui.helper.outerWidth());
|
ui.placeholder.width(ui.helper.outerWidth());
|
||||||
|
|
||||||
},
|
},
|
||||||
// create a new panel when dropping outside of curent panel...
|
// create a new panel when dropping outside of curent panel...
|
||||||
beforeStop: function(e, ui){
|
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 : */
|
* vim:set ts=4 sw=4 : */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user