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',