more tweaking...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2025-10-28 18:00:09 +00:00 · 2016-11-16 04:57:31 +03:00 · 2016-11-16 04:57:31 +03:00 · 0790748ec7
commit 0790748ec7
parent d4815e2f6c
3 changed files with 99 additions and 55 deletions
--- a/(gen4)/css/layout.less
+++ b/(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;
-	right: 0px;
+	float: right;
+	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;
--- a/(gen4)/features/app.js
+++ b/(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...
+			'&#9965;': ['ui-settings allways-shown', 
+				'browseActions: "Interface/" -- Interface settings...'],
 			'_': ['minimize', 
 				'minimize -- Minimize'],
 			'&#8601;': ['fullscreen allways-shown', 
@ -260,8 +263,6 @@ var AppControllsActions = actions.Actions({
 		},
 	},

-	toggleAppButtons: ['Interface/Toggle App control buttons',
-		widgets.makeButtonControlsToggler('app-buttons')],
 })

 var AppControlls = 
--- a/(gen4)/features/ui-widgets.js
+++ b/(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()
-		var code = e.pop()
+		// spacer...
+		if(typeof(data[k]) == typeof('str') 
+				&& /--+/.test(data[k])){
+			k = '&nbsp;'
+			var cls = 'spacer'
+			var doc = ''
+			var func = function(){}

-		code = typeof(code) == typeof('str') ?
-			keyboard.parseActionCall(code) 
-			: code
+		// normal element...
+		} else {
+			var e = data[k].slice()
+			var code = e.pop()
+			code = typeof(code) == typeof('str') ?
+				keyboard.parseActionCall(code) 
+				: code

-		var func = code instanceof Function ? 
-			code 
-			: function(){ 
-				context[code.action].apply(context, code.arguments) }
+			var func = code instanceof Function ? 
+				code 
+				: function(){ 
+					context[code.action].apply(context, code.arguments) }

-		var cls = e[0] || code.action || '' 
-		var doc = e[1] || code.doc || e[0] || ''
+			var cls = e[0] || code.action || '' 
+			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',
-				'browseActions -- Action menu...'],
-			//'Crop<sub/>': ['crop',
-			'C<sub/>': ['crop',
-				'browseActions: "Crop/" -- Crop menu...'],
-			/*
-			//'Mark': ['marks',
-			'M': ['marks',
-				'browseActions: "Mark/" -- Mark menu...'],
-			//*/
+			'&#x2630;': ['menu', 'browseActions -- Action menu...'],
+			'C<sub/>': ['crop', 'browseActions: "Crop/" -- Crop menu...'],
+			//'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...'],
-			*/
-			'+': ['zoom-in',
-				'zoomIn -- Zoom in'],
-			'-': ['zoom-out',
-				'zoomOut -- Zoom out'],
+			//'Z<sub/>': ['zoom', 'browseActions: "Zoom/" -- Zoom menu...'],
+			//'+': ['zoom-in', 'zoomIn -- Zoom in'],
+			//'-': ['zoom-out', 'zoomOut -- Zoom out'],
+			//'&#9965;': ['ui-settings', 'browseActions: "Interface/" -- Interface settings...'],
+		},
+
+		'app-buttons': {
+			'&#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(){
-		var left = makeButtonControlsToggler('side-buttons-left')
-		var right = makeButtonControlsToggler('side-buttons-right')
+	toggleSideButtons: ['Interface/Toggle side buttons', 
+		(function(){
+			var left = makeButtonControlsToggler('side-buttons-left')
+			var right = makeButtonControlsToggler('side-buttons-right')

-		return core.makeConfigToggler('side-buttons-state', 
-			['on', 'off'], 
-			function(){
-				left.apply(this, arguments) 
-				right.apply(this, arguments) 
-			})
-	})()],
+			return core.makeConfigToggler('side-buttons-state', 
+				['on', 'off'], 
+				function(){
+					left.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',