From cb2420fafeaf0e08269a36d8f2862c6e107e76a6 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 8 Nov 2016 18:57:11 +0300 Subject: [PATCH] added main controls + crop button/status... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/layout.less | 31 ++++++++++---- ui (gen4)/features/app.js | 18 +++++++- ui (gen4)/features/ui-status.js | 13 ++++++ ui (gen4)/features/ui-widgets.js | 73 ++++++++++++++++++++++++++++++++ 4 files changed, 125 insertions(+), 10 deletions(-) diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index c85e6f1a..b9d97e1d 100755 --- a/ui (gen4)/css/layout.less +++ b/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; diff --git a/ui (gen4)/features/app.js b/ui (gen4)/features/app.js index b3d18580..3bead5a5 100755 --- a/ui (gen4)/features/app.js +++ b/ui (gen4)/features/app.js @@ -260,11 +260,12 @@ var FullScreenControllsActions = actions.Actions({ var that = this $('
') - .addClass('fullscreen-controls') + .addClass('fullscreen-controls buttons') // minimize.... .append($('
') .addClass('button') .html('_') + .attr('info', 'Minimize') .click(function(){ that.minimize() })) // fullscreen.... .append($('
') @@ -273,12 +274,26 @@ var FullScreenControllsActions = actions.Actions({ //.html('□') // diagonal arrows... .html('↙') + .attr('info', 'Toggle fullscreen') .click(function(){ that.toggleFullScreen() })) // close... .append($('
') .addClass('button close') .html('×') + .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, diff --git a/ui (gen4)/features/ui-status.js b/ui (gen4)/features/ui-status.js index 632003ff..b1431b99 100755 --- a/ui (gen4)/features/ui-status.js +++ b/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 = diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index 6fcb35cc..42aa2222 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/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 + + $('
') + .addClass('main-controls buttons') + // menu.... + .append($('
') + .addClass('button') + .html('☰') + .attr('info', 'Show action menu...') + // XXX show this in status bar... (???) + .click(function(){ that.browseActions() })) + /* + // XXX make the rest configurable... (???) + .append($('
') + .addClass('button') + .html('O') + .click(function(){ })) + .append($('
') + .addClass('button') + .html('H') + .click(function(){ })) + //*/ + // crop menu/status.... + .append($('
') + .addClass('button crop') + .html('C') + // crop status... + .append($('') + .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 : '') }] + ], })