formulabar: move buttons to jsdialog implementation

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I2ad2c345435453456ad69c036b7d7e5a73a27550

11 files changed, 100 insertions, 31 deletions

diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 3c29b92236..a0bbfd2d17 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -183,7 +183,7 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 	display: none;
 }
 
-#tb_formulabar_item_address, #tb_formulabar_item_item_2, #tb_formulabar_item_functiondialog {
+#tb_formulabar_item_address, #tb_formulabar_item_item_2 {
 	vertical-align: middle;
 }
 /* Related to selectionMarkers.css */
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index eb2b02eb75..2353552fa1 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -153,7 +153,7 @@ w2ui-toolbar {
 	height: 30px;
 }
 
-#tb_formulabar_item_address, #tb_formulabar_item_item_2, #tb_formulabar_item_functiondialog {
+#tb_formulabar_item_address, #tb_formulabar_item_item_2 {
 	padding-top: 2px;
 	vertical-align: top;
 }
@@ -925,7 +925,6 @@ button.leaflet-control-search-next
 .w2ui-icon.entirecolumn{ background: url('images/lc_entirecolumn.svg') no-repeat center !important; }
 .w2ui-icon.selecttable{ background: url('images/lc_selecttable.svg') no-repeat center !important; }
 
-.w2ui-icon.functiondialog{ background: url('images/lc_functiondialog.svg') no-repeat center !important; }
 .w2ui-icon.accepttrackedchanges{ background: url('images/lc_accepttrackedchanges.svg') no-repeat center !important; }
 .w2ui-icon.ok{ background: url('images/lc_ok.svg') no-repeat center !important; }
 .w2ui-icon.cancel{ background: url('images/lc_cancel.svg') no-repeat center !important; }
diff --git a/browser/images/lc_acceptformula.svg b/browser/images/lc_acceptformula.svg
new file mode 100644
index 0000000000..e6ed5f8792
--- /dev/null
+++ b/browser/images/lc_acceptformula.svg
@@ -0,0 +1,11 @@
+<?xml-stylesheet type="text/css" href="icons.css" ?>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+	 fill="none" 
+	 stroke="#18ab50" 
+	 stroke-linecap="round" 
+	 stroke-linejoin="round"
+	 stroke-width="2"
+     d="M 3,16 9,21 21,3"
+     />
+</svg>
diff --git a/browser/images/lc_cancelformula.svg b/browser/images/lc_cancelformula.svg
new file mode 100644
index 0000000000..b48d37ebac
--- /dev/null
+++ b/browser/images/lc_cancelformula.svg
@@ -0,0 +1,14 @@
+<?xml-stylesheet type="text/css" href="icons.css" ?>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="background"
+	 class="icn icn--text-color"
+     fill="none"
+     stroke="#696969"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width="2"
+     >
+      <path d="M 19,19 5,5" />
+      <path d="M 5,19 19,5" />
+  </g>
+</svg>
diff --git a/browser/src/control/Control.FormulaBar.js b/browser/src/control/Control.FormulaBar.js
index 3f7de01219..ad825ead11 100644
--- a/browser/src/control/Control.FormulaBar.js
+++ b/browser/src/control/Control.FormulaBar.js
@@ -31,7 +31,6 @@ L.Control.FormulaBar = L.Control.extend({
 				{type: 'html',  id: 'left'},
 				{type: 'html', id: 'address', html: '<input id="addressInput" type="text">'},
 				{type: 'break'},
-				{type: 'button', id: 'functiondialog', img: 'functiondialog', hint: _('Function Wizard')},
 				{type: 'html', id: 'formula', html: '<div id="calc-inputbar-wrapper"><div id="calc-inputbar"></div></div>'}
 			],
 			onClick: function (e) {
@@ -82,14 +81,6 @@ L.Control.FormulaBar = L.Control.extend({
 				this.map.toggleCommandState(window.getUNOCommand(item.uno));
 			}
 		}
-		else if (id === 'functiondialog') {
-			if (window.mode.isMobile() && this.map._functionWizardData) {
-				this.map._docLayer._closeMobileWizard();
-				this.map._docLayer._openMobileWizard(this.map._functionWizardData);
-			} else {
-				this.map.sendUnoCommand('.uno:FunctionDialog');
-			}
-		}
 	},
 
 	onDocLayerInit: function() {
@@ -100,7 +91,7 @@ L.Control.FormulaBar = L.Control.extend({
 	},
 
 	onUpdatePermission: function(e) {
-		var formulaBarButtons = ['functiondialog', 'sum', 'function'];
+		var formulaBarButtons = ['sum', 'function'];
 		var toolbar = w2ui.formulabar;
 
 		if (e.perm === 'edit') {
@@ -149,10 +140,14 @@ L.Control.FormulaBar = L.Control.extend({
 L.Map.include({
 	onFormulaBarFocus: function() {
 		var mobileTopBar = w2ui['actionbar'];
+		var jsdialogFormulabar = this.formulabar;
+
+		var target = window.mode.isMobile() ? mobileTopBar : jsdialogFormulabar;
+		target.show('cancelformula');
+		target.show('acceptformula');
+
 		mobileTopBar.hide('undo');
 		mobileTopBar.hide('redo');
-		mobileTopBar.show('cancelformula');
-		mobileTopBar.show('acceptformula');
 	},
 
 	onFormulaBarBlur: function() {
@@ -160,14 +155,19 @@ L.Map.include({
 		// 'accept' button to act before we hide these buttons because
 		// once hidden, click event won't be processed.
 		// TODO: Some better way to do it ?
+		var map = this;
 		setTimeout(function() {
 			if ($('.leaflet-cursor').is(':visible'))
 				return;
 			var mobileTopBar = w2ui['actionbar'];
+			var jsdialogFormulabar = map.formulabar;
+
+			var target = window.mode.isMobile() ? mobileTopBar : jsdialogFormulabar;
+			target.hide('cancelformula');
+			target.hide('acceptformula');
+
 			mobileTopBar.show('undo');
 			mobileTopBar.show('redo');
-			mobileTopBar.hide('cancelformula');
-			mobileTopBar.hide('acceptformula');
 		}, 250);
 	}
 });
diff --git a/browser/src/control/Control.FormulaBarJSDialog.js b/browser/src/control/Control.FormulaBarJSDialog.js
index 128aae69b8..1b9a134701 100644
--- a/browser/src/control/Control.FormulaBarJSDialog.js
+++ b/browser/src/control/Control.FormulaBarJSDialog.js
@@ -3,7 +3,7 @@
  * L.Control.FormulaBarJSDialog
  */
 
-/* global _UNO */
+/* global _ _UNO */
 L.Control.FormulaBarJSDialog = L.Control.extend({
 	container: null,
 	builder: null,
@@ -35,13 +35,27 @@ L.Control.FormulaBarJSDialog = L.Control.extend({
 			{
 				type: 'toolbox',
 				children: [
-					// on mobile we show buttons on the top bar
+					{
+						id: 'functiondialog',
+						type: 'toolitem',
+						text: _('Function Wizard'),
+						command: '.uno:FunctionDialog'
+					},
+					// on mobile we show other buttons on the top bar
 					(!window.mode.isMobile()) ? (
 						{
-							id: 'cancel',
-							type: 'toolitem',
-							command: '.uno:Cancel',
-							text: _UNO('.uno:Cancel', 'spreadsheet')
+							id: 'acceptformula',
+							type: 'customtoolitem',
+							text: _('Accept'),
+							visible: false
+						}
+					) : {},
+					(!window.mode.isMobile()) ? (
+						{
+							id: 'cancelformula',
+							type: 'customtoolitem',
+							text: _UNO('.uno:Cancel', 'spreadsheet'),
+							visible: false
 						}
 					) : {},
 					{
@@ -73,6 +87,28 @@ L.Control.FormulaBarJSDialog = L.Control.extend({
 		builder._defaultCallbackHandler(objectType, eventType, object, data, builder);
 	},
 
+	show: function(action) {
+		this.showButton(action, true);
+	},
+
+	hide: function(action) {
+		this.showButton(action, false);
+	},
+
+	showButton: function(action, show) {
+		this.onJSAction(
+			{
+				data: {
+					jsontype: 'formulabar',
+					id: this.builder.windowId,
+					data: {
+						'control_id': action,
+						'action_type': show ? 'show' : 'hide'
+					}
+				}
+			});
+	},
+
 	onFormulaBar: function(e) {
 		var data = e.data;
 		if (data.jsontype !== 'formulabar')
diff --git a/browser/src/control/Control.UIManager.js b/browser/src/control/Control.UIManager.js
index 822526ef47..7b6862b222 100644
--- a/browser/src/control/Control.UIManager.js
+++ b/browser/src/control/Control.UIManager.js
@@ -152,7 +152,9 @@ L.Control.UIManager = L.Control.extend({
 		if (docType === 'spreadsheet') {
 			this.map.addControl(L.control.sheetsBar({shownavigation: isDesktop || window.mode.isTablet()}));
 			this.map.addControl(L.control.formulaBar());
-			this.map.addControl(L.control.formulaBarJSDialog());
+			var formulabar = L.control.formulaBarJSDialog();
+			this.map.formulabar = formulabar;
+			this.map.addControl(formulabar);
 
 			// remove unused elements
 			L.DomUtil.remove(L.DomUtil.get('presentation-controls-wrapper'));
diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index 1ef9c517fd..654fbc3ba9 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -783,6 +783,16 @@ L.Map.include({
 				}
 			}
 			break;
+		case 'functiondialog':
+			{
+				if (window.mode.isMobile() && this._functionWizardData) {
+					this._docLayer._closeMobileWizard();
+					this._docLayer._openMobileWizard(this._functionWizardData);
+				} else {
+					this.sendUnoCommand('.uno:FunctionDialog');
+				}
+			}
+			break;
 		}
 	},
 });
diff --git a/browser/src/layer/marker/TextInput.js b/browser/src/layer/marker/TextInput.js
index 4a79b002a7..00131be9da 100644
--- a/browser/src/layer/marker/TextInput.js
+++ b/browser/src/layer/marker/TextInput.js
@@ -432,7 +432,7 @@ L.TextInput = L.Layer.extend({
 		this.update();
 		// shape handlers hidden (if selected)
 		this._map.fire('handlerstatus', {hidden: true});
-		if (window.mode.isMobile() && this._map._docLoaded && this._map.getDocType() === 'spreadsheet')
+		if (this._map._docLoaded && this._map.getDocType() === 'spreadsheet')
 			this._map.onFormulaBarFocus();
 	},
 
diff --git a/browser/src/map/Map.js b/browser/src/map/Map.js
index 99dda1e0ca..73b7906d59 100644
--- a/browser/src/map/Map.js
+++ b/browser/src/map/Map.js
@@ -1578,11 +1578,8 @@ L.Map = L.Evented.extend({
 	// The editor got focus (probably a dialog closed or user clicked to edit).
 	_onEditorGotFocus: function() {
 		this._changeFocusWidget(null, 0);
-		if (this.dialog && this.dialog._calcInputBar) {
-			var inputBarId = this.dialog._calcInputBar.id;
-			this.dialog._updateTextSelection(inputBarId);
+		if (this.formulabar)
 			this.onFormulaBarBlur();
-		}
 	},
 
 	// Our browser tab got focus.
diff --git a/cypress_test/integration_tests/mobile/calc/formulabar_spec.js b/cypress_test/integration_tests/mobile/calc/formulabar_spec.js
index 51827e21a7..4df7a0f7ce 100644
--- a/cypress_test/integration_tests/mobile/calc/formulabar_spec.js
+++ b/cypress_test/integration_tests/mobile/calc/formulabar_spec.js
@@ -183,7 +183,7 @@ describe('Formula bar tests.', function() {
 	});
 
 	it.skip('Check formula help', function() {
-		cy.get('#tb_formulabar_item_functiondialog')
+		cy.get('.unoFunctionDialog')
 			.click();
 
 		cy.get('#mobile-wizard-content')
@@ -212,7 +212,7 @@ describe('Formula bar tests.', function() {
 	it.skip('Add formula to cell', function() {
 		calcHelper.clickOnFirstCell();
 
-		cy.get('#tb_formulabar_item_functiondialog')
+		cy.get('.unoFunctionDialog')
 			.click();
 
 		cy.get('#mobile-wizard-content')