diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index 09e1f42f..fbb5c5dc 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -298,7 +298,9 @@ button:hover { .buttons { display: block; - position: absolute; + position: relative; + float: left; + opacity: 0.4; size: 30px; @@ -307,6 +309,9 @@ button:hover { z-index: 4000; } +.buttons:hover { + opacity: 1; +} .light .buttons { opacity: 0.5; } @@ -314,11 +319,6 @@ button:hover { opacity: 0.2; } -.buttons:hover { - opacity: 1; -} - - .buttons .button { display: inline-block; color: silver; @@ -338,6 +338,17 @@ button:hover { color: white; background: rgba(0, 0, 0, 0.5); } +.buttons .button.spacer:hover { + background: transparent; +} + + +.buttons .button.ui-settings { + opacity: 0.5; +} +.buttons .button.ui-settings:hover { + opacity: 1; +} /* main buttons... */ @@ -345,15 +356,21 @@ button:hover { top: 0px; left: 0px; } +.main-buttons.buttons:hover { + opacity: 1; +} + /* secondary buttons... */ -/* .secondary-buttons.buttons { top: 0px; - right: 25%; + float: right; } -*/ +.secondary-buttons.buttons:hover { + opacity: 1; +} +/* .secondary-buttons.buttons { top: 40px; left: 0px; @@ -361,15 +378,19 @@ button:hover { .secondary-buttons.buttons .button { display: block; } +*/ /* app buttons... */ .app-buttons.buttons { - top: 0px; - right: 0px; + float: right; + margin-left: 40px; z-index: 9999; } +.app-buttons.buttons:hover { + opacity: 1; +} .app-buttons .button.close:hover { background: rgba(255, 0, 0, 0.8); } @@ -382,9 +403,13 @@ button:hover { /* side buttons... */ .side-buttons-left, .side-buttons-right { + position: absolute; + float: auto; width: 80px; height: 100%; + font-size: larger; + background: rgba(0, 0, 0, 0.5); width: 120px; @@ -444,6 +469,15 @@ button:hover { border-bottom: none; } +.light .side-buttons-left, +.light .side-buttons-right { + opacity: 0.3; + background: rgba(0, 0, 0, 0.3); +} +.light .side-buttons-left .button, +.light .side-buttons-right .button { + color: white; +} .single-image-mode .side-buttons-left, .single-image-mode .side-buttons-right { opacity: 0.1; diff --git a/ui (gen4)/features/app.js b/ui (gen4)/features/app.js index 99bf8a7a..56d66e4b 100755 --- a/ui (gen4)/features/app.js +++ b/ui (gen4)/features/app.js @@ -251,6 +251,9 @@ module.AppControl = core.ImageGridFeatures.Feature({ var AppControllsActions = actions.Actions({ config: { 'app-buttons': { + // XXX not sure about this... + '⛭': ['ui-settings allways-shown', + 'browseActions: "Interface/" -- Interface settings...'], '_': ['minimize', 'minimize -- Minimize'], '↙': ['fullscreen allways-shown', @@ -260,8 +263,6 @@ var AppControllsActions = actions.Actions({ }, }, - toggleAppButtons: ['Interface/Toggle App control buttons', - widgets.makeButtonControlsToggler('app-buttons')], }) var AppControlls = diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index f4301820..230ba779 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -65,20 +65,30 @@ function(context, cls, data){ // make buttons... Object.keys(data).forEach(function(k){ - var e = data[k].slice() - var code = e.pop() + // spacer... + if(typeof(data[k]) == typeof('str') + && /--+/.test(data[k])){ + k = ' ' + var cls = 'spacer' + var doc = '' + var func = function(){} - code = typeof(code) == typeof('str') ? - keyboard.parseActionCall(code) - : code + // normal element... + } else { + var e = data[k].slice() + var code = e.pop() + code = typeof(code) == typeof('str') ? + keyboard.parseActionCall(code) + : code - var func = code instanceof Function ? - code - : function(){ - context[code.action].apply(context, code.arguments) } + var func = code instanceof Function ? + code + : function(){ + context[code.action].apply(context, code.arguments) } - var cls = e[0] || code.action || '' - var doc = e[1] || code.doc || e[0] || '' + var cls = e[0] || code.action || '' + var doc = e[1] || code.doc || e[0] || '' + } controls .append($('
') @@ -1104,30 +1114,25 @@ var ButtonsActions = actions.Actions({ config: { 'main-buttons-state': 'on', 'main-buttons': { - '☰': ['menu', - 'browseActions -- Action menu...'], - //'Crop': ['crop', - 'C': ['crop', - 'browseActions: "Crop/" -- Crop menu...'], - /* - //'Mark': ['marks', - 'M': ['marks', - 'browseActions: "Mark/" -- Mark menu...'], - //*/ + '☰': ['menu', 'browseActions -- Action menu...'], + 'C': ['crop', 'browseActions: "Crop/" -- Crop menu...'], + //'M': ['marks', 'browseActions: "Mark/" -- Mark menu...'], //'ImageGrid.Viewer': ['title', ''], + //'t': ['touch', 'toggleSideButtons -- Toggle touch ui'], + //'⛭': ['ui-settings', 'browseActions: "Interface/" -- Interface settings...'], }, // XXX not sure about these yet... 'secondary-buttons-state': 'off', 'secondary-buttons': { - /* - 'Z': ['zoom', - 'browseActions: "Zoom/" -- Zoom menu...'], - */ - '+': ['zoom-in', - 'zoomIn -- Zoom in'], - '-': ['zoom-out', - 'zoomOut -- Zoom out'], + //'Z': ['zoom', 'browseActions: "Zoom/" -- Zoom menu...'], + //'+': ['zoom-in', 'zoomIn -- Zoom in'], + //'-': ['zoom-out', 'zoomOut -- Zoom out'], + //'⛭': ['ui-settings', 'browseActions: "Interface/" -- Interface settings...'], + }, + + 'app-buttons': { + '⛭': ['ui-settings', 'browseActions: "Interface/" -- Interface settings...'], }, 'side-buttons-state': 'off', @@ -1135,13 +1140,13 @@ var ButtonsActions = actions.Actions({ 'side-buttons-left': { '-': ['zoom-out', 'zoomOut -- Zoom out'], '↥': ['up', 'shiftImageUp -- Shift image up'], - '⦉': ['left', 'prevImage -- Focus previous image'], + '⦉': ['left', 'prevImage -- Previous image'], '↧': ['down', 'shiftImageDown -- Shift image down'], }, 'side-buttons-right': { '+': ['zoom-in', 'zoomIn -- Zoom in'], '↥': ['up', 'shiftImageUp -- Shift image up'], - '⦊': ['right', 'nextImage -- Focus next image'], + '⦊': ['right', 'nextImage -- Next image'], '↧': ['down', 'shiftImageDown -- Shift image down'], }, }, @@ -1150,18 +1155,21 @@ var ButtonsActions = actions.Actions({ makeButtonControlsToggler('main-buttons')], toggleSecondaryButtons: ['Interface/Toggle secondary buttons', makeButtonControlsToggler('secondary-buttons')], + toggleAppButtons: ['Interface/Toggle App buttons', + makeButtonControlsToggler('app-buttons')], - toggleSideButtons: ['Interface/Toggle side buttons', (function(){ - var left = makeButtonControlsToggler('side-buttons-left') - var right = makeButtonControlsToggler('side-buttons-right') + toggleSideButtons: ['Interface/Toggle side buttons', + (function(){ + var left = makeButtonControlsToggler('side-buttons-left') + var right = makeButtonControlsToggler('side-buttons-right') - return core.makeConfigToggler('side-buttons-state', - ['on', 'off'], - function(){ - left.apply(this, arguments) - right.apply(this, arguments) - }) - })()], + return core.makeConfigToggler('side-buttons-state', + ['on', 'off'], + function(){ + left.apply(this, arguments) + right.apply(this, arguments) + }) + })()], }) var Buttons = @@ -1181,10 +1189,11 @@ module.Buttons = core.ImageGridFeatures.Feature({ actions: ButtonsActions, handlers: [ - ['start', + ['start.pre', function(){ this.toggleMainButtons(this.config['main-buttons-state'] || 'on') this.toggleSecondaryButtons(this.config['secondary-buttons-state'] || 'on') + this.toggleAppButtons('on') this.toggleSideButtons(this.config['side-buttons-state'] || 'on') }], ['load reload',