flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 19:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactored editor CSS...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-11-30 01:00:43 +04:00
parent fa153af127
commit b2b3cc58e9
1 changed files with 123 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
ui/experiments/editor.html
View File

@ -1,121 +1,140 @@
<html> <html>
<style> <style>
button, .panel {
details {
border: solid 1px gray;
border-radius: 4px;
margin: 1px;
background: white;
}
details {
display: inline-block; display: inline-block;
width: 508px; width: 508px;
min-width: 500px; min-width: 500px;
border: solid 2px silver;
border-radius: 4px;
background: white;
box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.5);
opacity: 0.95;
overflow: visible; overflow: visible;
} }
.panel { .panel summary {
box-shadow: 5px 5px 30px -5px rgba(0,0,0,0.5); padding-left: 3px;
opacity: 0.95; /*background: #ddd;*/
background: silver
} }
.close-panel { .panel summary::-webkit-details-marker {
color: gray;
}
.panel .close-button {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 5px; right: 5px;
cursor: hand; cursor: hand;
} }
.close-panel:hover { .panel .close-button:hover {
color: black;
font-weight: bold; font-weight: bold;
text-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5); color: red;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
} }
details details { .panel button,
.panel details {
margin: 1px;
border: solid 1px gray;
border-radius: 4px;
/* needed for dragging */
background: white;
}
.panel details {
width: 500px; width: 500px;
margin: 3px; margin: 3px;
border: solid 1px silver; border: solid 1px silver;
box-shadow: none; box-shadow: none;
} }
details > div { .panel details summary {
background: #ddd;
/*
background: white;
box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4);
*/
}
.panel .sub-panel-content {
margin: 10px; margin: 10px;
} }
summary {
padding-left: 3px; .panel button:active {
background: silver; background: silver;
} }
details details summary {
background: #ddd;
}
input[type=range] {
width: 300px;
}
button:active {
background: silver;
}
button.reset {
border: solid 1px silver;
}
button.reset:hover {
border: solid 1px gray;
}
/*
button.state:focus {
background: silver;
}
*/
/* XXX this is not live...
input[type=range]:after {
content: attr(value);
color: black;
}
*/
div > span:first-child {
display: inline-block;
width: 100px;
}
/* range syling... */
input[type='range'] { /* main controls */
.panel .control .title {
display: inline-block;
width: 100px;
/*margin-right: -80px;*/
cursor: move;
}
.panel .control .slider {
-webkit-appearance: none !important; -webkit-appearance: none !important;
background: silver; width: 300px;
height: 4px; height: 4px;
border: solid 1px gray; border: solid 1px gray;
border-radius: 2px; border-radius: 2px;
background: silver;
} }
input[type='range']::-webkit-slider-thumb { .panel .control .slider::-webkit-slider-thumb {
-webkit-appearance: none !important; -webkit-appearance: none !important;
background: white;
height: 15px; height: 15px;
width: 15px; width: 15px;
border: solid 1px gray; border: solid 1px gray;
border-radius: 50%; border-radius: 50%;
background: white;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
} }
.panel .control .value {
.value {
-webkit-appearance: none !important; -webkit-appearance: none !important;
display: inline-block; display: inline-block;
width: 40px; width: 40px;
text-align: right; text-align: right;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
background: white;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background: transparent;
} }
input::-webkit-outer-spin-button, .panel .control input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { .panel .control input::-webkit-inner-spin-button {
-webkit-appearance: none !important; -webkit-appearance: none !important;
} }
.panel .control .reset {
visibility: hidden;
.title { border: none;
cursor: move;
} }
.panel .control:hover button.reset {
visibility: visible;
}
.panel .control .reset:hover {
border: solid 1px silver;
}
/* Snapshots */
.panel .state {
display: inline-block;
border: solid 1px gray;
border-radius: 4px;
margin: 1px;
padding-left: 5px;
padding-right: 5px;
background: white;
}
.panel .states {
min-height: 30px;
}
</style> </style>
<script src="jquery.js"></script> <script src="jquery.js"></script>
<script src="jquery-ui.js"></script> <script src="jquery-ui.js"></script>
<script> <script>
/*********************************************************************/
// XXX this exists in jli, remove when not needed... // XXX this exists in jli, remove when not needed...
jQuery.fn.sortChildren = function(func){ jQuery.fn.sortChildren = function(func){
@ -126,6 +145,8 @@ jQuery.fn.sortChildren = function(func){
/*********************************************************************/
// XXX make this add new filters in the correct position... // XXX make this add new filters in the correct position...
function updateFilter(e, f, v, order){ function updateFilter(e, f, v, order){
e = $(e) e = $(e)
@ -228,11 +249,12 @@ var DEFAULT_FILTER_ORDER = [
] ]
function saveState(target){ function saveState(target){
var l = $('.state').length var l = $('.state').last().text()
l = l == '' ? 0 : parseInt(l)+1
var state = $(target).css('-webkit-filter') var state = $(target).css('-webkit-filter')
$('<button></button>') $('<div/>')
.text(l) .text(l)
.addClass('state '+l) .addClass('state')
.attr({ .attr({
state: state, state: state,
sliders: getSliderOrder().join(' ') sliders: getSliderOrder().join(' ')
@ -243,6 +265,10 @@ function saveState(target){
sortFilterSliders($(this).attr('sliders').split(' ')) sortFilterSliders($(this).attr('sliders').split(' '))
}) })
.appendTo($('.states')) .appendTo($('.states'))
.draggable({
revert: 'invalid',
revertDuration: 200,
})
} }
function clearStates(){ function clearStates(){
$('.state').remove() $('.state').remove()
@ -264,7 +290,7 @@ function makeAbsRange(text, filter, target, min, max, dfl, step, translate, norm
$('<span class="title"/>') $('<span class="title"/>')
.html(text) .html(text)
.appendTo(elem) .appendTo(elem)
var range = $('<input type="range">') var range = $('<input class="slider" type="range">')
.attr({ .attr({
filter: filter, filter: filter,
min: min, min: min,
@ -324,7 +350,7 @@ function makeControls(target){
}) })
.append($('<summary>Edit</summary>') .append($('<summary>Edit</summary>')
.append($('<span/>') .append($('<span/>')
.addClass('close-panel') .addClass('close-button')
.click(function(){ .click(function(){
$(this).parents('.panel').hide() $(this).parents('.panel').hide()
return false return false
@ -336,19 +362,20 @@ function makeControls(target){
}) })
// wrapper for sub-panels... // wrapper for sub-panels...
var content = $('<span class="content">') var content = $('<span class="panel-content">')
.sortable({ .sortable({
forcePlaceholderSize: true, forcePlaceholderSize: true,
start: function(e, ui){ start: function(e, ui){
ui.placeholder.height(ui.helper.outerHeight()); ui.placeholder.height(ui.helper.outerHeight());
}, },
opacity: 0.5,
}) })
.appendTo(panel) .appendTo(panel)
// filters... // filters...
$('<details open/>') $('<details open/>')
.append($('<summary>Filters</summary>')) .append($('<summary>Filters</summary>'))
.append($('<div/>') .append($('<div class="sub-panel-content"/>')
.append($('<div class="filter-list"/>') .append($('<div class="filter-list"/>')
.append(makeLogRange('Brightness:', 'brightness', target)) .append(makeLogRange('Brightness:', 'brightness', target))
.append(makeLogRange('Contrast:', 'contrast', target)) .append(makeLogRange('Contrast:', 'contrast', target))
@ -380,23 +407,34 @@ function makeControls(target){
$('.reset').click() $('.reset').click()
sortFilterSliders(DEFAULT_FILTER_ORDER) sortFilterSliders(DEFAULT_FILTER_ORDER)
}))) })))
//.append($('<hr>'))
//.append($('<div>NOTE: order of filters is segnificant, use '+
// 'dragging to arrange them as needed.</div>')))
.appendTo(content) .appendTo(content)
// snapshots... // snapshots...
$('<details open/>') $('<details open/>')
.append($('<summary>Snapshots</summary>')) .append($('<summary>Snapshots</summary>'))
.append($('<div/>') .append($('<div class="sub-panel-content"/>')
.append($('<div class="states"/>')) .append($('<div class="states"/>'))
.append($('<hr>')) .append($('<hr>'))
.append($('<button/>') .append($('<button/>')
.click(function(){ saveState(target) }) .click(function(){ saveState(target) })
.text('Save')) .text('Save'))
.append($('<button/>') .append($('<button/>')
.addClass('remove-state-drop-target')
.click(function(){ clearStates() }) .click(function(){ clearStates() })
.text('Clear'))) .text('Clear')
.droppable({
accept: '.state',
activate: function(e, ui){
$(this).text('Delete')
},
deactivate: function(e, ui){
$(this).text('Clear')
},
drop: function(e, ui){
ui.helper.remove()
}
})))
.appendTo(content) .appendTo(content)
return panel return panel
@ -405,6 +443,7 @@ function makeControls(target){
function reloadControls(target){ function reloadControls(target){
clearStates() clearStates()
var state = loadSliderState(target) var state = loadSliderState(target)
// nothing set -- default sort... // nothing set -- default sort...
if(state == 'none'){ if(state == 'none'){
sortFilterSliders(DEFAULT_FILTER_ORDER) sortFilterSliders(DEFAULT_FILTER_ORDER)
@ -417,6 +456,10 @@ function reloadControls(target){
saveState(target) saveState(target)
} }
/*********************************************************************/
// setup...
$(function(){ $(function(){
var target = '#image' var target = '#image'
@ -424,14 +467,17 @@ $(function(){
$('body').append(panel) $('body').append(panel)
reloadControls(target)
$(target) $(target)
.click(function(){ .click(function(){
panel.show() panel.show()
}) })
saveState(target)
}) })
/*********************************************************************/
</script> </script>
<body> <body>
<img id="image" src="image.jpg" > <img id="image" src="image.jpg" >