From 7fe16dd1a9a6c3849083a7a6d8f0fb862e08b375 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 15 Nov 2016 22:15:14 +0300 Subject: [PATCH] some refactoring... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/layout.less | 36 +++++++++++++++++++------ ui (gen4)/features/app.js | 20 +++++++------- ui (gen4)/features/meta.js | 5 ++-- ui (gen4)/features/ui-widgets.js | 46 +++++++++++++++++++++++--------- 4 files changed, 73 insertions(+), 34 deletions(-) diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index 671381ee..a0924907 100755 --- a/ui (gen4)/css/layout.less +++ b/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; +} diff --git a/ui (gen4)/features/app.js b/ui (gen4)/features/app.js index 598a3855..9d2a3174 100755 --- a/ui (gen4)/features/app.js +++ b/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') diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index 26ff0de3..8c30a9c6 100755 --- a/ui (gen4)/features/meta.js +++ b/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', diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index 4ffca8a8..c920a652 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/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': ['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': ['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)) }], ], })