more tweaking...

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

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;
+	float: right;
-	right: 0px;
+	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;

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 = 

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()
+		// spacer...
-		var code = e.pop()
+		if(typeof(data[k]) == typeof('str') 
+				&& /--+/.test(data[k])){
+			k = ' '
+			var cls = 'spacer'
+			var doc = ''
+			var func = function(){}
 
-		code = typeof(code) == typeof('str') ?
+		// normal element...
-			keyboard.parseActionCall(code) 
+		} else {
-			: code
+			var e = data[k].slice()
+			var code = e.pop()
+			code = typeof(code) == typeof('str') ?
+				keyboard.parseActionCall(code) 
+				: code
 
-		var func = code instanceof Function ? 
+			var func = code instanceof Function ? 
-			code 
+				code 
-			: function(){ 
+				: function(){ 
-				context[code.action].apply(context, code.arguments) }
+					context[code.action].apply(context, code.arguments) }
 
-		var cls = e[0] || code.action || '' 
+			var cls = e[0] || code.action || '' 
-		var doc = e[1] || code.doc || e[0] || ''
+			var doc = e[1] || code.doc || e[0] || ''
+		}
 
 		controls
 			.append($('<div>')
@@ -1104,30 +1114,25 @@ var ButtonsActions = actions.Actions({
 	config: {
 		'main-buttons-state': 'on',
 		'main-buttons': {
-			'&#x2630;': ['menu',
+			'&#x2630;': ['menu', 'browseActions -- Action menu...'],
-				'browseActions -- Action menu...'],
+			'C<sub/>': ['crop', 'browseActions: "Crop/" -- Crop menu...'],
-			//'Crop<sub/>': ['crop',
+			//'M': ['marks', 'browseActions: "Mark/" -- Mark menu...'],
-			'C<sub/>': ['crop',
-				'browseActions: "Crop/" -- Crop menu...'],
-			/*
-			//'Mark': ['marks',
-			'M': ['marks',
-				'browseActions: "Mark/" -- Mark menu...'],
-			//*/
 			//'<i>ImageGrid.Viewer</i>': ['title', ''],
+			//'t': ['touch', 'toggleSideButtons -- Toggle touch ui'],
+			//'&#9965;': ['ui-settings', 'browseActions: "Interface/" -- Interface settings...'],
 		},
 
 		// XXX not sure about these yet...
 		'secondary-buttons-state': 'off',
 		'secondary-buttons': {
-			/*
+			//'Z<sub/>': ['zoom', 'browseActions: "Zoom/" -- Zoom menu...'],
-			'Z<sub/>': ['zoom',
+			//'+': ['zoom-in', 'zoomIn -- Zoom in'],
-				'browseActions: "Zoom/" -- Zoom menu...'],
+			//'-': ['zoom-out', 'zoomOut -- Zoom out'],
-			*/
+			//'&#9965;': ['ui-settings', 'browseActions: "Interface/" -- Interface settings...'],
-			'+': ['zoom-in',
+		},
-				'zoomIn -- Zoom in'],
+
-			'-': ['zoom-out',
+		'app-buttons': {
-				'zoomOut -- Zoom out'],
+			'&#9965;': ['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'],
 			'&#8613;': ['up', 'shiftImageUp -- Shift image up'],
-			'&#10633;': ['left', 'prevImage -- Focus previous image'],
+			'&#10633;': ['left', 'prevImage -- Previous image'],
 			'&#8615;': ['down', 'shiftImageDown -- Shift image down'],
 		},
 		'side-buttons-right': {
 			'+': ['zoom-in', 'zoomIn -- Zoom in'],
 			'&#8613;': ['up', 'shiftImageUp -- Shift image up'],
-			'&#10634;': ['right', 'nextImage -- Focus next image'],
+			'&#10634;': ['right', 'nextImage -- Next image'],
 			'&#8615;': ['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(){
+	toggleSideButtons: ['Interface/Toggle side buttons', 
-		var left = makeButtonControlsToggler('side-buttons-left')
+		(function(){
-		var right = makeButtonControlsToggler('side-buttons-right')
+			var left = makeButtonControlsToggler('side-buttons-left')
+			var right = makeButtonControlsToggler('side-buttons-right')
 
-		return core.makeConfigToggler('side-buttons-state', 
+			return core.makeConfigToggler('side-buttons-state', 
-			['on', 'off'], 
+				['on', 'off'], 
-			function(){
+				function(){
-				left.apply(this, arguments) 
+					left.apply(this, arguments) 
-				right.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',