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)) }],
],
})