From 2c650da1837cb540cfbab116537b4f2c86d9fc8a Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 9 Nov 2016 04:53:42 +0300 Subject: [PATCH] refactored main controls out of testing + ui cleanup and tweaking... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/layout.less | 14 +++- ui (gen4)/features/app.js | 5 +- ui (gen4)/features/keyboard.js | 12 +++- ui (gen4)/features/meta.js | 1 + ui (gen4)/features/ui-widgets.js | 107 ++++++++++++++++++++----------- ui (gen4)/features/ui.js | 15 ++++- ui (gen4)/lib/toggler.js | 30 ++++++--- 7 files changed, 131 insertions(+), 53 deletions(-) diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index b9d97e1d..7f90932a 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -307,6 +307,13 @@ button:hover { //z-index: 9999; } +.light .buttons { + opacity: 0.5; +} +.dark .buttons { + opacity: 0.2; +} + .buttons:hover { opacity: 1; } @@ -316,9 +323,14 @@ button:hover { display: inline-block; color: silver; - width: 40px; + box-sizing: border-box; + + min-width: 40px; height: 40px; + padding-left: 5px; + padding-right: 5px; + text-align: center; line-height: 40px; } diff --git a/ui (gen4)/features/app.js b/ui (gen4)/features/app.js index a92ef7cb..3f5248c5 100755 --- a/ui (gen4)/features/app.js +++ b/ui (gen4)/features/app.js @@ -286,7 +286,10 @@ module.FullScreenControlls = core.ImageGridFeatures.Feature({ tag: 'ui-fullscreen-controls', depends: [ 'ui-app-control', - 'ui-status', + ], + suggested: [ + // needed for reporting info in .makeButtonControls(..) + 'ui-status-bar', ], actions: FullScreenControllsActions, diff --git a/ui (gen4)/features/keyboard.js b/ui (gen4)/features/keyboard.js index 3228b2a9..67aaf7b6 100755 --- a/ui (gen4)/features/keyboard.js +++ b/ui (gen4)/features/keyboard.js @@ -266,9 +266,15 @@ module.GLOBAL_KEYBOARD = { '#8':'fitImage: 8 -- Fit 8 images', '#9': 'fitImage: 9 -- Fit 9 images', - '+': 'zoomIn', + '+': { + default: 'zoomIn', + ctrl: 'lighterTheme!', + }, '=': '+', - '-': 'zoomOut', + '-': { + default: 'zoomOut', + ctrl: 'darkerTheme!', + }, F2: { default: 'cropRibbon', @@ -305,6 +311,8 @@ module.GLOBAL_KEYBOARD = { B: { default: 'toggleBookmark', ctrl: 'toggleTheme!', + 'ctrl+shift': 'toggleTheme!: "prev"', + alt: 'browseActions: "/Bookmark/" -- Show bookmark menu', // XXX not sure if this is the right way to go... diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index 66d79bc8..26ff0de3 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -81,6 +81,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'external-editor', // chrome... + 'ui-main-controls', 'ui-progress', 'ui-status-log', 'ui-scale', diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index 6dfbf1ba..62ad04f0 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -53,10 +53,12 @@ function(context, cls, data){ var info = t.attr('info') || t.parents('[info]').attr('info') || '' - context.showStatusBarInfo(info) + context.showStatusBarInfo + && context.showStatusBarInfo(info) }) .on('mouseout', function(){ - context.showStatusBarInfo() + context.showStatusBarInfo + && context.showStatusBarInfo() }) // make buttons... @@ -1061,20 +1063,78 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({ //--------------------------------------------------------------------- -// XXX make this not applicable to production... - - -var WidgetTestActions = actions.Actions({ + +var MainControlsActions = actions.Actions({ config: { 'main-controls-state': 'on', 'main-controls': { '☰': ['menu', - 'browseActions -- Show action menu...'], + 'browseActions -- Action menu...'], + //'Crop': ['crop', 'C': ['crop', - 'browseActions: "Crop/" -- Show crop menu...'], + 'browseActions: "Crop/" -- Crop menu...'], + /* + //'Mark': ['marks', + 'M': ['marks', + 'browseActions: "Mark/" -- Mark menu...'], + //*/ }, }, + toggleMainControls: ['Interface/', + toggler.Toggler(null, + function(){ + return this.ribbons.viewer.find('.main-controls').length > 0 ? 'on' : 'off' }, + ['off', 'on'], + function(state){ + if(state == 'on'){ + var config = this.config['main-controls'] + + config + && makeButtonControls(this, 'main-controls', config) + + } else { + this.ribbons.viewer.find('.main-controls').remove() + } + })], +}) + +var BrowseActions = +module.BrowseActions = core.ImageGridFeatures.Feature({ + title: '', + doc: '', + + tag: 'ui-main-controls', + depends: [ + 'ui', + ], + suggested: [ + // needed for reporting info in .makeButtonControls(..) + 'ui-status-bar', + ], + + actions: MainControlsActions, + + handlers: [ + // main controls stuff... + ['start', + function(){ + this.toggleMainControls(this.config['main-controls-state'] || 'on') }], + ['load reload', + function(){ + // update crop button status... + $('.main-controls.buttons .crop.button sub') + .text(this.crop_stack ? this.crop_stack.length : '') }] + ], +}) + + + +//--------------------------------------------------------------------- +// XXX make this not applicable to production... + + +var WidgetTestActions = actions.Actions({ testAction: ['- Test/', function(){ console.log('>>>', [].slice.call(arguments)) @@ -1225,25 +1285,6 @@ var WidgetTestActions = actions.Actions({ setTimeout(step, 1000) }], - // XXX move this out... - // XXX also see handlers.... - toggleMainControls: ['Interface/', - toggler.Toggler(null, - function(){ - return this.ribbons.viewer.find('.main-controls').length > 0 ? 'on' : 'off' }, - ['off', 'on'], - function(state){ - if(state == 'on'){ - var config = this.config['main-controls'] - - config - && makeButtonControls(this, 'main-controls', config) - - } else { - this.ribbons.viewer.find('.main-controls').remove() - } - })], - // XXX make this a toggler.... partitionByMonth: ['Test/', function(){ @@ -1449,18 +1490,6 @@ module.WidgetTest = core.ImageGridFeatures.Feature({ ], actions: WidgetTestActions, - - handlers: [ - // main controls stuff... - ['start', - function(){ - this.toggleMainControls(this.config['main-controls-state'] || 'on') }], - ['load reload', - function(){ - // update crop button status... - $('.main-controls.buttons .crop.button sub') - .text(this.crop_stack ? this.crop_stack.length : '') }] - ], }) diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index a944094c..c44cb36c 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -162,8 +162,8 @@ module.ViewerActions = actions.Actions({ // Supported themes... 'themes': [ - 'gray', 'dark', + 'gray', 'light', ], @@ -384,12 +384,25 @@ module.ViewerActions = actions.Actions({ function(){ return this.ribbons.viewer }, function(){ return this.config.themes }, function(state){ this.config.theme = state }) ], + lighterTheme: ['Interface/Theme/Lighter', + function(){ + var themes = this.config.themes + var i = themes.indexOf(this.toggleTheme('?')) + this.toggleTheme(Math.min(i+1, themes.length-1)) + }], + darkerTheme: ['Interface/Theme/Darker', + function(){ + var themes = this.config.themes + var i = themes.indexOf(this.toggleTheme('?')) + this.toggleTheme(Math.max(0, i-1)) + }], toggleRibbonTheme: ['Interface/Theme/Toggle ribbon theme', toggler.CSSClassToggler( function(){ return this.ribbons.viewer }, function(){ return this.config['ribbon-themes'] }, function(state){ this.config['ribbon-theme'] = state }) ], + /* setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.', function(msg, help){ this.ribbons diff --git a/ui (gen4)/lib/toggler.js b/ui (gen4)/lib/toggler.js index 05006acd..4ceb6ded 100755 --- a/ui (gen4)/lib/toggler.js +++ b/ui (gen4)/lib/toggler.js @@ -31,6 +31,8 @@ // - : 0 for 'off' and 1 for 'on' (see below) // - 'on' : switch mode on -- add class // - 'off' : switch mode off -- remove class +// - 'next' : switch to next state (default) +// - 'prev' : switch to previous state // - '!' : reload current state, same as toggler(toggler('?')) // - '?' : return current state ('on'|'off') // - '??' : return a list of supported states @@ -38,6 +40,8 @@ // In forms 2 and 3, if class_list is a list of strings, the can be: // - : explicitly set the state to index in class_list // - : explicitly set a class from the list +// - 'next' : switch to next state (default) +// - 'prev' : switch to previous state // - '!' : reload current state, same as toggler(toggler('?')) // - '?' : return current state ('on'|'off') // - '??' : return a list of supported states @@ -49,9 +53,6 @@ // action argument given is invalid. // // NOTE: action '?' is handled internally and not passed to the callbacks. -// NOTE: there is a special action 'next', passing it will have the same -// effect as not passing any action -- we will change to the next -// state. // NOTE: if it is needed to apply this to an explicit target but with // no explicit action, just pass 'next' as the second argument. // NOTE: a special class name 'none' means no class is set, if it is present @@ -168,7 +169,7 @@ function(elem, state_accessor, states, callback_a, callback_b){ if(typeof(states_getter) == typeof(function(){})){ // get the states... var states = states_getter.call(this) - var states = typeof(states) == typeof('str') ? + states = typeof(states) == typeof('str') ? ['none', states] : states } @@ -195,7 +196,10 @@ function(elem, state_accessor, states, callback_a, callback_b){ return states // we need to get the current state... - } else if(action == null || action == '?' || action == '!'){ + } else if(action == null + || action == 'prev' + || action == '?' + || action == '!'){ // get current state... var cur = state_accessor.call(this, e) @@ -225,10 +229,18 @@ function(elem, state_accessor, states, callback_a, callback_b){ var state = bool_action ? states[action == 'off' ? 0 : 1] : action // get the right class... - if(action == null){ - var i = states.indexOf(cur)+1 - i = i == -1 ? 0 : i - i = i == states.length ? 0 : i + if(action == null || action == 'prev'){ + if(action == 'prev'){ + var i = states.indexOf(cur)-1 + i = i <= -1 ? states.length-1 : i + + } else { + var i = states.indexOf(cur)+1 + //i = i == -1 ? 0 : i + i = i == states.length ? 0 : i + } + + state = states[i] if(bool_action){