some refactoring...

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

ui (gen4)/css/layout.less

@@ -305,7 +305,7 @@ button:hover {
 
 	cursor: default;
 
-	//z-index: 9999;
+	z-index: 4000;
 }
 .light .buttons {
 	opacity: 0.5;
@@ -340,23 +340,43 @@ button:hover {
 }
 
 
-/* main controls... */
-.main-controls.buttons {
+/* main buttons... */
+.main-buttons.buttons {
 	top: 0px;
 	left: 0px;
-	z-index: 4000;
 }
 
 
-/* fullscreen controls... */
-.fullscreen-controls.buttons {
+/* secondary buttons... */
+/*
+.secondary-buttons.buttons {
+	top: 0px;
+	right: 25%;
+}
+*/
+.secondary-buttons.buttons {
+	top: 40px;
+	left: 0px;
+}
+.secondary-buttons.buttons .button {
+	display: block;
+}
+
+
+/* app buttons... */
+.app-buttons.buttons {
 	top: 0px;
 	right: 0px;
-	z-index: 4000;
+
+	z-index: 9999;
 }
-.fullscreen-controls .button.close:hover {
+.app-buttons .button.close:hover {
 	background: rgba(255, 0, 0, 0.8);
 }
+.blur .app-buttons.buttons {
+	-webkit-filter: none !important;
+	filter: none !important;
+}
 
 
 

ui (gen4)/features/app.js

@@ -248,9 +248,9 @@ module.AppControl = core.ImageGridFeatures.Feature({
 
 //---------------------------------------------------------------------
 // Fullscreen app control buttons...
-var FullScreenControllsActions = actions.Actions({
+var AppControllsActions = actions.Actions({
 	config: {
-		'fullscreen-controls': {
+		'app-buttons': {
 			'_': ['minimize', 
 				'minimize -- Minimize'],
 			'↙': ['fullscreen allways-shown', 
@@ -260,16 +260,16 @@ var FullScreenControllsActions = actions.Actions({
 		},
 	},
 
-	toggleFullScreenControls: ['Interface/',
-		widgets.makeButtonControlsToggler('fullscreen-controls')],
+	toggleAppButtons: ['Interface/',
+		widgets.makeButtonControlsToggler('app-buttons')],
 })
 
-var FullScreenControlls = 
-module.FullScreenControlls = core.ImageGridFeatures.Feature({
+var AppControlls = 
+module.AppControlls = core.ImageGridFeatures.Feature({
 	title: '',
 	doc: '',
 
-	tag: 'ui-fullscreen-controls',
+	tag: 'ui-app-buttons',
 	depends: [
 		'ui-app-control',
 	],
@@ -278,15 +278,15 @@ module.FullScreenControlls = core.ImageGridFeatures.Feature({
 		'ui-status-bar',
 	],
 
-	actions: FullScreenControllsActions,
+	actions: AppControllsActions,
 
 	handlers: [
 		['toggleFullScreen', 
 			function(){
-				this.toggleFullScreenControls('on')
+				this.toggleAppButtons('on')
 
 				var fullscreen = this.toggleFullScreen('?')
-				var buttons = this.ribbons.viewer.find('.fullscreen-controls')
+				var buttons = this.ribbons.viewer.find('.app-buttons')
 				
 				// fullscreen button...
 				buttons.find('.fullscreen.button')

ui (gen4)/features/meta.js

@@ -54,8 +54,6 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 
 	'ui-ribbons-placement',
 
-	'ui-fullscreen-controls',
-
 	// features...
 	'ui-ribbon-auto-align',
 	//'ui-ribbon-align-to-order',
@@ -81,7 +79,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'external-editor',
 
 	// chrome...
-	'ui-main-controls',
+	'ui-app-buttons',
+	'ui-buttons',
 	'ui-progress',
 	'ui-status-log',
 	'ui-scale',

ui (gen4)/features/ui-widgets.js

@@ -1100,10 +1100,10 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
 
 //---------------------------------------------------------------------
 	
-var MainControlsActions = actions.Actions({
+var ControlsActions = actions.Actions({
 	config: {
-		'main-controls-state': 'on',
-		'main-controls': {
+		'main-buttons-state': 'on',
+		'main-buttons': {
 			'☰': ['menu',
 				'browseActions -- Action menu...'],
 			//'Crop<sub/>': ['crop',
@@ -1115,18 +1115,33 @@ var MainControlsActions = actions.Actions({
 				'browseActions: "Mark/" -- Mark menu...'],
 			//*/
 		},
+
+		// XXX not sure about these yet...
+		'secondary-buttons-state': 'off',
+		'secondary-buttons': {
+			/*
+			'Z<sub/>': ['zoom',
+				'browseActions: "Zoom/" -- Zoom out'],
+			*/
+			'+': ['zoom-in',
+				'zoomIn -- Zoom in'],
+			'-': ['zoom-out',
+				'zoomOut -- Zoom out'],
+		},
 	},
 
-	toggleMainControls: ['Interface/',
-		makeButtonControlsToggler('main-controls')],
+	toggleMainButtons: ['Interface/',
+		makeButtonControlsToggler('main-buttons')],
+	toggleSecondaryButtons: ['Interface/',
+		makeButtonControlsToggler('secondary-buttons')],
 })
 
-var MainControls = 
-module.MainControls = core.ImageGridFeatures.Feature({
+var Controls = 
+module.Controls = core.ImageGridFeatures.Feature({
 	title: '',
 	doc: '',
 
-	tag: 'ui-main-controls',
+	tag: 'ui-buttons',
 	depends: [
 		'ui',
 	],
@@ -1135,18 +1150,23 @@ module.MainControls = core.ImageGridFeatures.Feature({
 		'ui-status-bar',
 	],
 
-	actions: MainControlsActions,
+	actions: ControlsActions,
 
 	handlers: [
-		// main controls stuff...
 		['start', 
 			function(){ 
-				this.toggleMainControls(this.config['main-controls-state'] || 'on') }],
+				this.toggleMainButtons(this.config['main-buttons-state'] || 'on')
+				this.toggleSecondaryButtons(this.config['secondary-buttons-state'] || 'on') }],
 		['load reload', 
 			function(){
 				// update crop button status...
-				$('.main-controls.buttons .crop.button sub')
-					.text(this.crop_stack ? this.crop_stack.length : '') }]
+				$('.main-buttons.buttons .crop.button sub')
+					.text(this.crop_stack ? this.crop_stack.length : '') }],
+		['setScale', 
+			function(){
+				// update crop button status...
+				$('.secondary-buttons.buttons .zoom.button sub')
+					.text(Math.round(this.screenwidth)) }],
 	],
 })