diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index de24d421..54eb676d 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -1283,6 +1283,19 @@ stretching in width... */ opacity: 0.6; } */ +.overlay-info .ribbon-number[base] { + /* NOTE: we are using shadow instead of a border or underline + here as we need to control both the uniform shading and + placement without overcomplicating things when having + to compensate for alignment... */ + //border-bottom: solid 2px yellow; + box-shadow: 0 -2px 0 0 yellow inset; +} + +/* changes */ +.overlay-info .changes { + cursor: default; +} /* gid */ .overlay-info .gid { diff --git a/ui (gen4)/features/keyboard.js b/ui (gen4)/features/keyboard.js index bf481d28..d17ea521 100755 --- a/ui (gen4)/features/keyboard.js +++ b/ui (gen4)/features/keyboard.js @@ -133,7 +133,8 @@ module.GLOBAL_KEYBOARD = { R: { default: 'rotateCW', shift: 'reverseImages', - ctrl: 'reload!', + ctrl: 'loadNewImages!', + 'ctrl+alt': 'reload!', 'ctrl+shift': 'F5', }, L: 'rotateCCW', diff --git a/ui (gen4)/features/ui-status.js b/ui (gen4)/features/ui-status.js index 8e1447e5..a16cf60d 100755 --- a/ui (gen4)/features/ui-status.js +++ b/ui (gen4)/features/ui-status.js @@ -56,6 +56,7 @@ var StatusBarActions = actions.Actions({ 'status-bar-items': [ 'index', 'ribbon', + 'changes', 'gid', 'path', @@ -100,7 +101,7 @@ var StatusBarActions = actions.Actions({ // not-editable... $('') .addClass('position') - .attr('info', 'Image position (click to toggle ribbon/global)') + .attr('info', 'Image number (click to toggle ribbon/global)') // toggle index state... .click(function(){ that.toggleStatusBarIndexMode() @@ -109,7 +110,7 @@ var StatusBarActions = actions.Actions({ // editable... : $('') .addClass('position editable') - .attr('info', 'Image position (click to edit)') + .attr('info', 'Image number (click to edit)') .makeEditable() // select image when done... .on('edit-done', function(_, text){ @@ -143,7 +144,7 @@ var StatusBarActions = actions.Actions({ })) .append($('') .addClass('length') - .attr('info', 'Image position (click to toggle ribbon/global)') + .attr('info', 'Image count (click to toggle ribbon/global)') // toggle index state... .click(function(){ that.toggleStatusBarIndexMode() @@ -186,12 +187,6 @@ var StatusBarActions = actions.Actions({ var n = (this.data && this.data.ribbon_order.length > 0) ? this.data.getRibbonOrder(gid || this.current) : '-' - // flag the base ribbon... - n += (this.data - && this.data.base - && this.data.getRibbon(gid) == this.base) ? - '*' - : '' // make an element... if(typeof(item) == typeof('str')){ @@ -210,7 +205,29 @@ var StatusBarActions = actions.Actions({ }) } - item.text(n) + item.html(n) + + // flag the base ribbon... + // NOTE: for some reason can't get jQuery .prop(..)/.removeProp(..) + // to work here... + if(this.data && this.data.base + && this.data.getRibbon(gid) == this.base){ + item[0].setAttribute('base', '') + + } else { + item[0].removeAttribute('base') + } + + return item + }, + changes: function(item, gid, img){ + if(typeof(item) == typeof('str')){ + item = $('') + .addClass('changes') + .attr('info', 'Unsaved changes') + } + + item.text(this.changes !== false ? '*' : '') return item }, @@ -504,7 +521,7 @@ module.StatusBar = core.ImageGridFeatures.Feature({ function(){ this.toggleStatusBar(this.config['status-bar-mode']) }], - ['focusImage clear', + ['focusImage clear markChanged', function(){ this.updateStatusBar() }],