diff --git a/ui/css/editor.css b/ui/css/editor.css index 0604d140..968fa7b4 100755 --- a/ui/css/editor.css +++ b/ui/css/editor.css @@ -32,6 +32,10 @@ color: red; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); } +.panel .panel-content { + display: block; + min-height: 30px; +} .panel button, .panel details, .panel .state { diff --git a/ui/editor.js b/ui/editor.js index db70aa30..bdb7f9b7 100755 --- a/ui/editor.js +++ b/ui/editor.js @@ -33,6 +33,9 @@ var toggleEditor = createCSSClassToggler( // XXX add handlers for saving data to images... // XXX // make clicks on unfocusable elements remove focus... + .on('panelClosing', function(){ + toggleEditor('off') + }) .click(function(){ if(event.target != $('.panel :focus')[0]){ $('.panel :focus').blur() @@ -50,6 +53,7 @@ var toggleEditor = createCSSClassToggler( } else { ed.show() } + // update the state... reloadControls('.current.image') diff --git a/ui/keybindings.js b/ui/keybindings.js index 946fe39d..59dc91fd 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -169,6 +169,7 @@ var KEYBOARD_CONFIG = { // blur focused element, if nothing focused close... } else if(toggleEditor('?') == 'on'){ $(':focus').blur() + return false } }), }, @@ -659,6 +660,7 @@ var KEYBOARD_CONFIG = { //} centerRibbons() }), + ctrl: doc('Show mark dialog', function(){ markImagesDialog() }), }, Ins: doc('Toggle mark on current image', function(){ toggleImageMark() }), 'invert-marks': doc('Invert image marks', diff --git a/ui/layout.css b/ui/layout.css old mode 100644 new mode 100755 index d5f88461..fc14abe0 --- a/ui/layout.css +++ b/ui/layout.css @@ -1214,11 +1214,16 @@ button:hover { } /* XXX this is experimental... */ .viewer.overlay .ribbon-set { - /* XXX blur makes things slow with transparency... */ + /* XXX blur makes things slow with transparency... */ - -webkit-filter: /*blur(2px)*/ grayscale(0.5); - filter: /*blur(2px)*/ grayscale(0.5); - /* + /* + -webkit-filter: blur(2px); + filter: blur(2px); + */ + -webkit-filter: grayscale(0.5); + filter: grayscale(0.5); + + /* -webkit-animation-name: testAnim; -webkit-animation-duration: .2s; -webkit-animation-iteration-count: 1; diff --git a/ui/lib/editor.js b/ui/lib/editor.js index aea05b33..42cf6b63 100755 --- a/ui/lib/editor.js +++ b/ui/lib/editor.js @@ -100,6 +100,11 @@ function sortFilterSliders(order){ // Load state of sliders from target... // function loadSliderState(target){ + // break the feedback loop that if present will write the state + // back... + var filters = $('.filter-list input[type=range]') + .prop('disabled', true) + var res = $(target) .css('-webkit-filter') var state = res @@ -113,7 +118,6 @@ function loadSliderState(target){ }) // set the saved values... while(state.length > 0){ - // XXX avoid using ids... var e = $('[filter='+state.pop()+']') if(e.prop('normalize')){ e.val(v2r(parseFloat(state.pop()))).change() @@ -121,6 +125,9 @@ function loadSliderState(target){ e.val(parseFloat(state.pop())).change() } } + + filters + .prop('disabled', false) return res } @@ -191,6 +198,7 @@ function makeAbsRange(text, filter, target, min, max, dfl, step, translate, norm $('') .html(text) .appendTo(elem) + // NOTE: the range element is the main "writer"... var range = $('') .attr({ filter: filter, @@ -204,7 +212,9 @@ function makeAbsRange(text, filter, target, min, max, dfl, step, translate, norm .change(function(){ var val = this.valueAsNumber value.val(val) - updateFilter(target, filter, translate(val)) + if(!elem.prop('disabled') && !$(this).prop('disabled')){ + updateFilter(target, filter, translate(val)) + } if(parseFloat(val) == dfl){ elem.addClass('at-default') } else { @@ -236,21 +246,25 @@ function makeLogRange(text, filter, target){ } -// XXX add panel update events to help save settings... -function makeEditorControls(target){ +function makePanel(title, open){ + title = title == null ? ' ' : title + // tool panel... - var panel = $('
') + var panel = $('
') + .prop('open', open == null ? true : open) .addClass('panel') .css({ position: 'absolute', top: '100px', left: '100px', }) - .append($('Edit') + .append($(''+title+'') .append($('') .addClass('close-button') .click(function(){ - $(this).parents('.panel').hide() + panel + .trigger('panelClosing') + .hide() return false }) .html('×'))) @@ -270,11 +284,33 @@ function makeEditorControls(target){ opacity: 0.7, }) .appendTo(panel) + return panel +} - // filters... - $('
') - .append($('Filters')) - .append($('
') + +function makeSubPanel(title, open, parent){ + title = title == null ? ' ' : title + + var sub_panel = $('
') + .prop('open', open == null ? true : open) + .append($(''+title+'')) + .append($('
')) + + if(parent != null){ + if(parent.hasClass('panel-content')){ + sub_panel.appendTo(parent) + } else { + sub_panel.appendTo(parent.find('.panel-content')) + } + } + + return sub_panel +} + + +function makeFilterPanel(parent, target){ + return makeSubPanel('Filters', true, parent) + .find('.sub-panel-content') .append($('
') //.append(makeLogRange('Gamma:', 'gamma', target)) .append(makeLogRange('Brightness:', 'brightness', target)) @@ -307,13 +343,12 @@ function makeEditorControls(target){ .click(function(){ $('.reset').click() sortFilterSliders(DEFAULT_FILTER_ORDER) - }))) - .appendTo(content) + })) +} - // snapshots... - $('
') - .append($('Snapshots')) - .append($('
') +function makeSnapshotsPanel(parent, target){ + return makeSubPanel('Snapshots', true, parent) + .find('.sub-panel-content') .append($('
')) .append($('
')) .append($('