From 12cfc405fc0e1d61fbe10a1c837b83b92116ab03 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 16 Nov 2016 00:14:09 +0300
Subject: [PATCH] tweaking...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/css/layout.less        | 31 ++++++++++++++++++++++++-----
 ui (gen4)/features/ui-widgets.js | 34 ++++++++++++++++++--------------
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index 078bf38f..2af4ef90 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -385,7 +385,7 @@ button:hover {
 	width: 80px;
 	height: 100%;
 
-	background: rgba(0, 0, 0, 0.3);
+	background: rgba(0, 0, 0, 0.5);
 
 	z-index: 900;
 }
@@ -395,17 +395,38 @@ button:hover {
 .side-buttons-right {
 	right: 0px;
 }
-
 .side-buttons-left .button,
 .side-buttons-right .button {
 	display: flex;
-	justify-content:center;
-	align-content:center;
-	flex-direction:column;
+	justify-content: center;
+	align-content: center;
+	flex-direction: row;
+
+	padding: 10px;
+	line-height: 10px;
 
 	width: 80px;
 	height: 33.3%;
 }
+.side-buttons-left .button {
+	justify-content: flex-end;
+	align-content: flex-start;
+}
+.side-buttons-right .button {
+	justify-content: flex-start;
+	align-content: flex-start;
+}
+.side-buttons-left .button:first-child {
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: flex-end;
+}
+.side-buttons-right .button:first-child {
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: flex-start;
+}
+
 .side-buttons-left .button:nth-child(1),
 .side-buttons-left .button:nth-child(2),
 .side-buttons-right .button:nth-child(1),
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index fd51b84a..f4301820 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -1130,19 +1130,19 @@ var ButtonsActions = actions.Actions({
 				'zoomOut -- Zoom out'],
 		},
 
-		'side-buttons-left-state': 'off',
+		'side-buttons-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'],
+			'&#8613;': ['up', 'shiftImageUp -- Shift image up'],
+			'&#10633;': ['left', 'prevImage -- Focus previous image'],
+			'&#8615;': ['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'],
+			'&#8613;': ['up', 'shiftImageUp -- Shift image up'],
+			'&#10634;': ['right', 'nextImage -- Focus next image'],
+			'&#8615;': ['down', 'shiftImageDown -- Shift image down'],
 		},
 	},
 
@@ -1151,14 +1151,16 @@ var ButtonsActions = actions.Actions({
 	toggleSecondaryButtons: ['Interface/Toggle secondary buttons',
 		makeButtonControlsToggler('secondary-buttons')],
 
-	// XXX make this a toggler...
-	toggleSideButtons: ['Interface/', (function(){
+	toggleSideButtons: ['Interface/Toggle side buttons', (function(){
 		var left = makeButtonControlsToggler('side-buttons-left')
 		var right = makeButtonControlsToggler('side-buttons-right')
-		return function(){
-			left.apply(this, arguments) 
-			return right.apply(this, arguments) 
-		}
+
+		return core.makeConfigToggler('side-buttons-state', 
+			['on', 'off'], 
+			function(){
+				left.apply(this, arguments) 
+				right.apply(this, arguments) 
+			})
 	})()],
 })
 
@@ -1182,7 +1184,9 @@ module.Buttons = core.ImageGridFeatures.Feature({
 		['start', 
 			function(){ 
 				this.toggleMainButtons(this.config['main-buttons-state'] || 'on')
-				this.toggleSecondaryButtons(this.config['secondary-buttons-state'] || 'on') }],
+				this.toggleSecondaryButtons(this.config['secondary-buttons-state'] || 'on')
+				this.toggleSideButtons(this.config['side-buttons-state'] || 'on')
+		   	}],
 		['load reload', 
 			function(){
 				// update crop button status...