refactored main controls out of testing + ui cleanup and tweaking...

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

ui (gen4)/css/layout.less

@@ -307,6 +307,13 @@ button:hover {
 
 	//z-index: 9999;
 }
+.light .buttons {
+	opacity: 0.5;
+}
+.dark .buttons {
+	opacity: 0.2;
+}
+
 .buttons:hover {
 	opacity: 1;
 }
@@ -316,9 +323,14 @@ button:hover {
 	display: inline-block;
 	color: silver;
 
-	width: 40px;
+	box-sizing: border-box;
+
+	min-width: 40px;
 	height: 40px;
 
+	padding-left: 5px;
+	padding-right: 5px;
+
 	text-align: center;
 	line-height: 40px;
 }

ui (gen4)/features/app.js

@@ -286,7 +286,10 @@ module.FullScreenControlls = core.ImageGridFeatures.Feature({
 	tag: 'ui-fullscreen-controls',
 	depends: [
 		'ui-app-control',
-		'ui-status',
+	],
+	suggested: [
+		// needed for reporting info in .makeButtonControls(..)
+		'ui-status-bar',
 	],
 
 	actions: FullScreenControllsActions,

ui (gen4)/features/keyboard.js

@@ -266,9 +266,15 @@ module.GLOBAL_KEYBOARD = {
 		'#8':'fitImage: 8 -- Fit 8 images',
 		'#9': 'fitImage: 9 -- Fit 9 images',
 		
-		'+': 'zoomIn',
+		'+': {
+			default: 'zoomIn',
+			ctrl: 'lighterTheme!',
+		},
 		'=': '+',
-		'-': 'zoomOut',
+		'-': {
+			default: 'zoomOut',
+			ctrl: 'darkerTheme!',
+		},
 
 		F2: {
 			default: 'cropRibbon',
@@ -305,6 +311,8 @@ module.GLOBAL_KEYBOARD = {
 		B: {
 			default: 'toggleBookmark',
 			ctrl: 'toggleTheme!',
+			'ctrl+shift': 'toggleTheme!: "prev"',
+
 			alt: 'browseActions: "/Bookmark/" -- Show bookmark menu',
 
 			// XXX not sure if this is the right way to go...

ui (gen4)/features/meta.js

@@ -81,6 +81,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'external-editor',
 
 	// chrome...
+	'ui-main-controls',
 	'ui-progress',
 	'ui-status-log',
 	'ui-scale',

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

@@ -53,10 +53,12 @@ function(context, cls, data){
 
 			var info = t.attr('info') || t.parents('[info]').attr('info') || ''
 
-			context.showStatusBarInfo(info)
+			context.showStatusBarInfo
+				&& context.showStatusBarInfo(info)
 		})
 		.on('mouseout', function(){
-			context.showStatusBarInfo()
+			context.showStatusBarInfo
+				&& context.showStatusBarInfo()
 		})
 
 	// make buttons...
@@ -1061,20 +1063,78 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
 
 
 //---------------------------------------------------------------------
-// XXX make this not applicable to production...
+	
-
+var MainControlsActions = actions.Actions({
-
-var WidgetTestActions = actions.Actions({
 	config: {
 		'main-controls-state': 'on',
 		'main-controls': {
 			'☰': ['menu',
-				'browseActions -- Show action menu...'],
+				'browseActions -- Action menu...'],
+			//'Crop<sub/>': ['crop',
 			'C<sub/>': ['crop',
-				'browseActions: "Crop/" -- Show crop menu...'],
+				'browseActions: "Crop/" -- Crop menu...'],
+			/*
+			//'Mark': ['marks',
+			'M': ['marks',
+				'browseActions: "Mark/" -- Mark menu...'],
+			//*/
 		},
 	},
 
+	toggleMainControls: ['Interface/',
+		toggler.Toggler(null,
+			function(){ 
+				return this.ribbons.viewer.find('.main-controls').length > 0 ? 'on' : 'off' },
+			['off', 'on'],
+			function(state){
+				if(state == 'on'){
+					var config = this.config['main-controls']
+
+					config 
+						&& makeButtonControls(this, 'main-controls', config)
+
+				} else {
+					this.ribbons.viewer.find('.main-controls').remove()
+				}
+			})],
+})
+
+var BrowseActions = 
+module.BrowseActions = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-main-controls',
+	depends: [
+		'ui',
+	],
+	suggested: [
+		// needed for reporting info in .makeButtonControls(..)
+		'ui-status-bar',
+	],
+
+	actions: MainControlsActions,
+
+	handlers: [
+		// main controls stuff...
+		['start', 
+			function(){ 
+				this.toggleMainControls(this.config['main-controls-state'] || 'on') }],
+		['load reload', 
+			function(){
+				// update crop button status...
+				$('.main-controls.buttons .crop.button sub')
+					.text(this.crop_stack ? this.crop_stack.length : '') }]
+	],
+})
+
+
+
+//---------------------------------------------------------------------
+// XXX make this not applicable to production...
+
+
+var WidgetTestActions = actions.Actions({
 	testAction: ['- Test/',
 		function(){
 			console.log('>>>', [].slice.call(arguments))
@@ -1225,25 +1285,6 @@ var WidgetTestActions = actions.Actions({
 			setTimeout(step, 1000)
 		}], 
 
-	// XXX move this out...
-	// XXX also see handlers....
-	toggleMainControls: ['Interface/',
-		toggler.Toggler(null,
-			function(){ 
-				return this.ribbons.viewer.find('.main-controls').length > 0 ? 'on' : 'off' },
-			['off', 'on'],
-			function(state){
-				if(state == 'on'){
-					var config = this.config['main-controls']
-
-					config 
-						&& makeButtonControls(this, 'main-controls', config)
-
-				} else {
-					this.ribbons.viewer.find('.main-controls').remove()
-				}
-			})],
-
 	// XXX make this a toggler....
 	partitionByMonth: ['Test/',
 		function(){
@@ -1449,18 +1490,6 @@ module.WidgetTest = core.ImageGridFeatures.Feature({
 	],
 
 	actions: WidgetTestActions,
-
-	handlers: [
-		// main controls stuff...
-		['start', 
-			function(){ 
-				this.toggleMainControls(this.config['main-controls-state'] || 'on') }],
-		['load reload', 
-			function(){
-				// update crop button status...
-				$('.main-controls.buttons .crop.button sub')
-					.text(this.crop_stack ? this.crop_stack.length : '') }]
-	],
 })
 
 

ui (gen4)/features/ui.js

@@ -162,8 +162,8 @@ module.ViewerActions = actions.Actions({
 
 		// Supported themes...
 		'themes': [
-			'gray', 
 			'dark', 
+			'gray', 
 			'light',
 		],
 
@@ -384,12 +384,25 @@ module.ViewerActions = actions.Actions({
 			function(){ return this.ribbons.viewer }, 
 			function(){ return this.config.themes },
 			function(state){ this.config.theme = state }) ],
+	lighterTheme: ['Interface/Theme/Lighter',
+		function(){
+			var themes = this.config.themes
+			var i = themes.indexOf(this.toggleTheme('?'))
+			this.toggleTheme(Math.min(i+1, themes.length-1))
+		}],
+	darkerTheme: ['Interface/Theme/Darker',
+		function(){
+			var themes = this.config.themes
+			var i = themes.indexOf(this.toggleTheme('?'))
+			this.toggleTheme(Math.max(0, i-1))
+		}],
 	toggleRibbonTheme: ['Interface/Theme/Toggle ribbon theme', 
 		toggler.CSSClassToggler(
 			function(){ return this.ribbons.viewer }, 
 			function(){ return this.config['ribbon-themes'] },
 			function(state){ this.config['ribbon-theme'] = state }) ],
 
+
 	/*
 	setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.',
 		function(msg, help){ this.ribbons 

ui (gen4)/lib/toggler.js

@@ -31,6 +31,8 @@
 // 	- <index>		: 0 for 'off' and 1 for 'on' (see below)
 // 	- 'on'			: switch mode on -- add class
 // 	- 'off'			: switch mode off -- remove class
+// 	- 'next'		: switch to next state (default)
+// 	- 'prev'		: switch to previous state
 // 	- '!'			: reload current state, same as toggler(toggler('?'))
 // 	- '?'			: return current state ('on'|'off')
 // 	- '??'			: return a list of supported states
@@ -38,6 +40,8 @@
 // In forms 2 and 3, if class_list is a list of strings, the <action> can be:
 //  - <index>		: explicitly set the state to index in class_list
 //  - <class-name>	: explicitly set a class from the list
+// 	- 'next'		: switch to next state (default)
+// 	- 'prev'		: switch to previous state
 // 	- '!'			: reload current state, same as toggler(toggler('?'))
 // 	- '?'			: return current state ('on'|'off')
 // 	- '??'			: return a list of supported states
@@ -49,9 +53,6 @@
 // action argument given is invalid.
 //
 // NOTE: action '?' is handled internally and not passed to the callbacks.
-// NOTE: there is a special action 'next', passing it will have the same
-// 		effect as not passing any action -- we will change to the next 
-// 		state.
 // NOTE: if it is needed to apply this to an explicit target but with 
 // 		no explicit action, just pass 'next' as the second argument.
 // NOTE: a special class name 'none' means no class is set, if it is present 
@@ -168,7 +169,7 @@ function(elem, state_accessor, states, callback_a, callback_b){
 		if(typeof(states_getter) == typeof(function(){})){
 			// get the states...
 			var states = states_getter.call(this)
-			var states = typeof(states) == typeof('str') ? 
+			states = typeof(states) == typeof('str') ? 
 				['none', states] 
 				: states
 		}
@@ -195,7 +196,10 @@ function(elem, state_accessor, states, callback_a, callback_b){
 			return states
 
 		// we need to get the current state...
-		} else if(action == null || action == '?' || action == '!'){
+		} else if(action == null 
+				|| action == 'prev' 
+				|| action == '?' 
+				|| action == '!'){
 			// get current state...
 			var cur = state_accessor.call(this, e)
 
@@ -225,10 +229,18 @@ function(elem, state_accessor, states, callback_a, callback_b){
 
 		var state = bool_action ? states[action == 'off' ? 0 : 1] : action
 		// get the right class...
-		if(action == null){
+		if(action == null || action == 'prev'){
-			var i = states.indexOf(cur)+1
+			if(action == 'prev'){
-			i = i == -1 ? 0 : i
+				var i = states.indexOf(cur)-1
-			i = i == states.length ? 0 : i
+				i = i <= -1 ? states.length-1 : i
+
+			} else {
+				var i = states.indexOf(cur)+1
+				//i = i == -1 ? 0 : i
+				i = i == states.length ? 0 : i
+			}
+
+
 			state = states[i]
 
 			if(bool_action){