diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index a0924907..078bf38f 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -379,8 +379,47 @@ button:hover { } +/* side buttons... */ +.side-buttons-left, +.side-buttons-right { + width: 80px; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 900; +} +.side-buttons-left { + left: 0px; +} +.side-buttons-right { + right: 0px; +} + +.side-buttons-left .button, +.side-buttons-right .button { + display: flex; + justify-content:center; + align-content:center; + flex-direction:column; + + width: 80px; + height: 33.3%; +} +.side-buttons-left .button:nth-child(1), +.side-buttons-left .button:nth-child(2), +.side-buttons-right .button:nth-child(1), +.side-buttons-right .button:nth-child(2) { + height: 16.65%; +} +.side-buttons-left .button, +.side-buttons-right .button { + border-bottom: solid 1px rgba(255, 255, 255, 0.3); +} +.side-buttons-left .button:last-child, +.side-buttons-right .button:last-child { + border-bottom: none; +} /********************************************************** Viewer ***/ @@ -1389,6 +1428,8 @@ stretching in width... */ overflow: hidden; cursor: pointer; + + z-index: 9999; } .up-indicator:after, .down-indicator:after { diff --git a/ui (gen4)/features/app.js b/ui (gen4)/features/app.js index 9d2a3174..99bf8a7a 100755 --- a/ui (gen4)/features/app.js +++ b/ui (gen4)/features/app.js @@ -260,7 +260,7 @@ var AppControllsActions = actions.Actions({ }, }, - toggleAppButtons: ['Interface/', + toggleAppButtons: ['Interface/Toggle App control buttons', widgets.makeButtonControlsToggler('app-buttons')], }) diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index c920a652..fd51b84a 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -1100,7 +1100,7 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({ //--------------------------------------------------------------------- -var ControlsActions = actions.Actions({ +var ButtonsActions = actions.Actions({ config: { 'main-buttons-state': 'on', 'main-buttons': { @@ -1114,6 +1114,7 @@ var ControlsActions = actions.Actions({ 'M': ['marks', 'browseActions: "Mark/" -- Mark menu...'], //*/ + //'ImageGrid.Viewer': ['title', ''], }, // XXX not sure about these yet... @@ -1121,23 +1122,48 @@ var ControlsActions = actions.Actions({ 'secondary-buttons': { /* 'Z': ['zoom', - 'browseActions: "Zoom/" -- Zoom out'], + 'browseActions: "Zoom/" -- Zoom menu...'], */ '+': ['zoom-in', 'zoomIn -- Zoom in'], '-': ['zoom-out', 'zoomOut -- Zoom out'], }, + + 'side-buttons-left-state': 'off', + 'side-buttons-left': { + '-': ['zoom-out', 'zoomOut -- Zoom out'], + '^': ['up', 'shiftImageUp -- Shift image up'], + '<': ['left', 'prevImage -- Focus previous image'], + 'v': ['down', 'shiftImageDown -- Shift image down'], + }, + 'side-buttons-right-state': 'off', + 'side-buttons-right': { + '+': ['zoom-in', 'zoomIn -- Zoom in'], + '^': ['up', 'shiftImageUp -- Shift image up'], + '>': ['right', 'nextImage -- Focus next image'], + 'v': ['down', 'shiftImageDown -- Shift image down'], + }, }, - toggleMainButtons: ['Interface/', + toggleMainButtons: ['Interface/Toggle main buttons', makeButtonControlsToggler('main-buttons')], - toggleSecondaryButtons: ['Interface/', + toggleSecondaryButtons: ['Interface/Toggle secondary buttons', makeButtonControlsToggler('secondary-buttons')], + + // XXX make this a toggler... + toggleSideButtons: ['Interface/', (function(){ + var left = makeButtonControlsToggler('side-buttons-left') + var right = makeButtonControlsToggler('side-buttons-right') + return function(){ + left.apply(this, arguments) + return right.apply(this, arguments) + } + })()], }) -var Controls = -module.Controls = core.ImageGridFeatures.Feature({ +var Buttons = +module.Buttons = core.ImageGridFeatures.Feature({ title: '', doc: '', @@ -1150,7 +1176,7 @@ module.Controls = core.ImageGridFeatures.Feature({ 'ui-status-bar', ], - actions: ControlsActions, + actions: ButtonsActions, handlers: [ ['start',