added side touch controls...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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 {

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')],
 })
 

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...'],
 			//*/
+			//'<i>ImageGrid.Viewer</i>': ['title', ''],
 		},
 
 		// XXX not sure about these yet...
@@ -1121,23 +1122,48 @@ var ControlsActions = actions.Actions({
 		'secondary-buttons': {
 			/*
 			'Z<sub/>': ['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 = 
+var Buttons = 
-module.Controls = core.ImageGridFeatures.Feature({
+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',