added main controls + crop button/status...

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

ui (gen4)/css/layout.less

@@ -296,13 +296,9 @@ button:hover {
 */
 
 
-.fullscreen-controls {
+.buttons {
 	display: block;
 	position: absolute;
-	top: 0px;
-	right: 0px;
-	z-index: 4000;
-
 	opacity: 0.4;
 
 	size: 30px;
@@ -311,12 +307,12 @@ button:hover {
 
 	//z-index: 9999;
 }
-.fullscreen-controls:hover {
+.buttons:hover {
 	opacity: 1;
 }
 
 
-.fullscreen-controls .button {
+.buttons .button {
 	display: inline-block;
 	color: silver;
 
@@ -326,18 +322,35 @@ button:hover {
 	text-align: center;
 	line-height: 40px;
 }
-.fullscreen-controls .button:hover {
+.buttons .button:hover {
 	color: white;
 	background: rgba(0, 0, 0, 0.5);
 }
 
 
+/* main controls... */
+.main-controls.buttons {
+	top: 0px;
+	left: 0px;
+	z-index: 4000;
+}
+
+
+/* fullscreen controls... */
+.fullscreen-controls.buttons {
+	top: 0px;
+	right: 0px;
+	z-index: 4000;
+}
 .fullscreen-controls .button.close:hover {
 	background: rgba(255, 0, 0, 0.8);
 }
 
 
 
+
+
+
 /********************************************************** Viewer ***/
 .viewer {
 	position: relative;
@@ -1658,7 +1671,7 @@ progress:not(value)::-webkit-progress-bar {
 
 .progress-container {
 	position: absolute;
-	top: 20px;
+	top: 30px;
 	margin: 5px;
 	padding: 2px;
 	border-radius: 5px;

ui (gen4)/features/app.js

@@ -260,11 +260,12 @@ var FullScreenControllsActions = actions.Actions({
 					var that = this
 
 					$('<div>')
-						.addClass('fullscreen-controls')
+						.addClass('fullscreen-controls buttons')
 						// minimize....
 						.append($('<div>')
 							.addClass('button')
 							.html('_')
+							.attr('info', 'Minimize')
 							.click(function(){ that.minimize() }))
 						// fullscreen....
 						.append($('<div>')
@@ -273,12 +274,26 @@ var FullScreenControllsActions = actions.Actions({
 							//.html('&square;')
 							// diagonal arrows...
 							.html('&#8601;')
+							.attr('info', 'Toggle fullscreen')
 							.click(function(){ that.toggleFullScreen() }))
 						// close...
 						.append($('<div>')
 							.addClass('button close')
 							.html('&times;')
+							.attr('info', 'Close')
 							.click(function(){ that.close() }))
+
+						.on('mouseover', function(){
+							var t = $(event.target)
+
+							var info = t.attr('info') || t.parents('[info]').attr('info') || ''
+
+							that.showStatusBarInfo(info)
+						})
+						.on('mouseout', function(){
+							that.showStatusBarInfo()
+						})
+
 						.appendTo(this.ribbons.viewer)
 				}
 			})],
@@ -292,6 +307,7 @@ module.FullScreenControlls = core.ImageGridFeatures.Feature({
 	tag: 'ui-fullscreen-controls',
 	depends: [
 		'ui-app-control',
+		'ui-status',
 	],
 
 	actions: FullScreenControllsActions,

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

@@ -509,6 +509,19 @@ var StatusBarActions = actions.Actions({
 
 				this.updateStatusBar()
 			})],
+
+	// XXX revise...
+	showStatusBarInfo: ['- Interface/',
+		function(text){
+			var bar = this.ribbons.viewer.find('.state-indicator-container.global-info') 
+
+			if(text){
+				bar.find('.info').text(text)
+
+			} else {
+				bar.find('.info').empty()
+			}
+		}],
 })
 
 var StatusBar = 

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

@@ -1005,6 +1005,9 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
 // XXX make this not applicable to production...
 
 var WidgetTestActions = actions.Actions({
+	config: {
+		'main-controls': 'on',
+	},
 
 	testAction: ['- Test/',
 		function(){
@@ -1156,6 +1159,64 @@ 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){
+				// clear the controls....
+				this.ribbons.viewer.find('.main-controls').remove()
+
+				if(state == 'on'){
+					var that = this
+
+					$('<div>')
+						.addClass('main-controls buttons')
+						// menu....
+						.append($('<div>')
+							.addClass('button')
+							.html('&#x2630;')
+							.attr('info', 'Show action menu...')
+							// XXX show this in status bar... (???)
+							.click(function(){ that.browseActions() }))
+						/* 
+						// XXX make the rest configurable... (???)
+						.append($('<div>')
+							.addClass('button')
+							.html('O')
+							.click(function(){  }))
+						.append($('<div>')
+							.addClass('button')
+							.html('H')
+							.click(function(){  }))
+						//*/
+						// crop menu/status....
+						.append($('<div>')
+							.addClass('button crop')
+							.html('C')
+							// crop status...
+							.append($('<sub/>')
+								.addClass('status'))
+							.attr('info', 'Show crop menu...')
+							.click(function(){ that.browseActions('Crop/') }))
+
+						.on('mouseover', function(){
+							var t = $(event.target)
+
+							var info = t.attr('info') || t.parents('[info]').attr('info') || ''
+
+							that.showStatusBarInfo(info)
+						})
+						.on('mouseout', function(){
+							that.showStatusBarInfo()
+						})
+
+						.appendTo(this.ribbons.viewer)
+				}
+			})],
 
 	// XXX make this a toggler....
 	partitionByMonth: ['Test/',
@@ -1362,6 +1423,18 @@ module.WidgetTest = core.ImageGridFeatures.Feature({
 	],
 
 	actions: WidgetTestActions,
+
+	handlers: [
+		// main controls stuff...
+		['start', 
+			function(){ 
+				this.toggleMainControls(this.config['main-controls'] || 'on') }],
+		['load reload', 
+			function(){
+				// update crop button status...
+				$('.main-controls.buttons .crop.button .status')
+					.text(this.crop_stack ? this.crop_stack.length : '') }]
+	],
 })