remove-w2ui: use MenuButton for borser style dropdown

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

browser/src/control/Control.JSDialogBuilder.js

@@ -164,7 +164,6 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		this._toolitemHandlers['.uno:FillColor'] = this._colorControl;
 
 		this._toolitemHandlers['.uno:InsertFormula'] = function () {};
-		this._toolitemHandlers['.uno:SetBorderStyle'] = function () {};
 
 		this._menus = JSDialog.MenuDefinitions;
 

browser/src/control/Control.NotebookbarBuilder.js

@@ -50,7 +50,6 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 		this._toolitemHandlers['.uno:SelectBackground'] = this._selectBackgroundControl;
 		this._toolitemHandlers['.uno:InsertAnnotation'] = this._insertAnnotationControl;
 		this._toolitemHandlers['.uno:BasicShapes'] = this._shapesControl;
-		this._toolitemHandlers['.uno:SetBorderStyle'] = this._borderStyleControl;
 		this._toolitemHandlers['.uno:SetDefault'] = this._formattingControl;
 		this._toolitemHandlers['.uno:Save'] = this._saveControl;
 		this._toolitemHandlers['.uno:SaveAs'] = this._saveAsControl;
@@ -737,23 +736,6 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 		builder._preventDocumentLosingFocusOnClick(control.container);
 	},
 
-	_borderStyleControl: function(parentContainer, data, builder) {
-		var options = {hasDropdownArrow: true};
-		var control = builder._unoToolButton(parentContainer, data, builder, options);
-
-		$(control.container).unbind('click.toolbutton');
-		$(control.container).click(function () {
-			if (!$('#setborderstyle-grid').length) {
-				$(control.container).w2overlay(window.getBorderStyleMenuHtml());
-
-				$('#setborderstyle-grid tr td').click(function () {
-					$(control.container).w2overlay();
-				});
-			}
-		});
-		builder._preventDocumentLosingFocusOnClick(control.container);
-	},
-
 	_selectBackgroundControl: function(parentContainer, data, builder) {
 		var options = {hasDropdownArrow: false};
 		var control = builder._unoToolButton(parentContainer, data, builder, options);

browser/src/control/Control.NotebookbarCalc.js

@@ -502,8 +502,9 @@ L.Control.NotebookbarCalc = L.Control.NotebookbarWriter.extend({
 								'accessibility': { focusBack: true,	combination: '6', de: null }
 							},
 							{
-								'id': 'home-set-border-style',
-								'type': 'toolitem',
+								'id': 'home-set-border-style:BorderStyleMenu',
+								'type': 'menubutton',
+								'noLabel': true,
 								'text': _UNO('.uno:SetBorderStyle'),
 								'command': '.uno:SetBorderStyle',
 								'accessibility': { focusBack: true,	combination: 'B', de: null }

browser/src/control/Control.Toolbar.js

@@ -200,10 +200,17 @@ function _setBorders(left, right, bottom, top, horiz, vert, color) {
 }
 
 // close the popup
+
+var lastClosePopupCallback = undefined;
+
 function closePopup() {
 	if ($('#w2ui-overlay-editbar').length > 0) {
 		$('#w2ui-overlay-editbar').removeData('keepOpen')[0].hide();
 	}
+	if (lastClosePopupCallback) {
+		lastClosePopupCallback();
+		lastClosePopupCallback = undefined;
+	}
 	map.focus();
 }
 
@@ -241,7 +248,8 @@ function setBorderStyle(num, color) {
 
 global.setBorderStyle = setBorderStyle;
 
-function getBorderStyleMenuHtml() {
+function getBorderStyleMenuHtml(closeCallback) {
+	lastClosePopupCallback = closeCallback;
 	return '<table id="setborderstyle-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01" onclick="setBorderStyle(1)"></td>' +
 	'<td class="w2ui-tb-image w2ui-icon frame02" onclick="setBorderStyle(2)"></td><td class="w2ui-tb-image w2ui-icon frame03" onclick="setBorderStyle(3)"></td>' +
 	'<td class="w2ui-tb-image w2ui-icon frame04" onclick="setBorderStyle(4)"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame05" onclick="setBorderStyle(5)"></td>' +

browser/src/control/jsdialog/Definitions.Menu.ts

@@ -18,14 +18,16 @@ declare var JSDialog: any;
 
 type MenuDefinition = {
 	id: string; // unique identifier
-	type: undefined | 'action' | 'menu' | 'separator'; // type of entry
+	type: undefined | 'action' | 'menu' | 'separator' | 'html'; // type of entry
 	text: string; // displayed text
 	hint: string; // hint text
 	uno: string; // uno command
 	action: string; // dispatch command
+	htmlId: string; // id of HTMLContent
 	img: string; // icon name
 	icon: string; // icon name FIXME: duplicated property, used in exportMenuButton
 	checked: boolean; // state of check mark
+	items: Array<any>; // submenu
 };
 
 const menuDefinitions = new Map<string, Array<MenuDefinition>>();
@@ -344,4 +346,9 @@ menuDefinitions.set('ConditionalFormatMenu', [
 	},
 ] as Array<MenuDefinition>);
 
+menuDefinitions.set('BorderStyleMenu', [
+	{ type: 'html', htmlId: 'borderstylepopup' },
+	{ type: 'separator' }, // required to show dropdown arrow
+] as Array<MenuDefinition>);
+
 JSDialog.MenuDefinitions = menuDefinitions;

browser/src/control/jsdialog/Util.Dropdown.js

@@ -59,7 +59,8 @@ JSDialog.OpenDropdown = function (id, popupParent, entries, innerCallback, popup
 			{
 				id: id + '-entry-' + i,
 				type: 'htmlcontent',
-				htmlId: entries[i].htmlId
+				htmlId: entries[i].htmlId,
+				closeCallback: function () { JSDialog.CloseDropdown(id); }
 			}
 			: // regular entry
 			{

browser/src/control/jsdialog/Widget.HTMLContent.ts

@@ -19,9 +19,13 @@ interface HtmlContentJson {
 	id: string;
 	type: 'htmlcontent';
 	htmlId: string;
+	closeCallback: EventListenerOrEventListenerObject;
 }
 
-var getHtmlFromId = function (id: string) {
+var getHtmlFromId = function (
+	id: string,
+	closeCallback: EventListenerOrEventListenerObject,
+) {
 	if (id === 'iconset')
 		return (window as any).getConditionalFormatMenuHtml('iconsetoverlay', true);
 	else if (id === 'scaleset')
@@ -34,13 +38,17 @@ var getHtmlFromId = function (id: string) {
 			'iconsetoverlay',
 			true,
 		);
+	else if (id === 'inserttablepopup')
+		return (window as any).getInsertTablePopupHtml();
+	else if (id === 'borderstylepopup')
+		return (window as any).getBorderStyleMenuHtml(closeCallback);
 };
 
 function htmlContent(
 	parentContainer: Element,
 	data: HtmlContentJson /*builder*/,
 ) {
-	parentContainer.innerHTML = getHtmlFromId(data.htmlId);
+	parentContainer.innerHTML = getHtmlFromId(data.htmlId, data.closeCallback);
 }
 
 JSDialog.htmlContent = htmlContent;

cypress_test/integration_tests/desktop/calc/autofilter_spec.js

@@ -87,6 +87,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'AutoFilter', function() {
 
 		// Wait for autofilter dialog to close
 		cy.cGet('div.autofilter').should('not.exist');
+		cy.wait(500);
 
 		calcHelper.dblClickOnFirstCell();
 		helper.typeIntoDocument('New content{enter}');

cypress_test/integration_tests/desktop/calc/cell_appearance_spec.js

@@ -179,6 +179,7 @@ describe(['tagdesktop'], 'Change cell appearance.', function() {
 		calcHelper.clickOnFirstCell();
 		// Apply left border first
 		cy.cGet('.notebookbar .unoSetBorderStyle').click();
+		cy.wait(500);
 		cy.cGet('.w2ui-tb-image.w2ui-icon.frame02').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).click();
 
 		cy.wait(500); // Wait for first popup to close.