jsdialogs: implemented tabs for dialogs

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

4 files changed, 72 insertions, 6 deletions

diff --git a/loleaflet/css/jsdialogs.css b/loleaflet/css/jsdialogs.css
index bd61bd0b02..0ebb2bb239 100644
--- a/loleaflet/css/jsdialogs.css
+++ b/loleaflet/css/jsdialogs.css
@@ -28,6 +28,7 @@
 .jsdialog-container {
 	position: absolute;
 	z-index: 1105;
+	max-width: 90%;
 }
 
 .jsdialog-container.modalpopup {
@@ -109,6 +110,46 @@ td.jsdialog > [id^='table-box'] {
 	border-spacing: 0px;
 }
 
+/* Tabs */
+.jsdialog-tabs {
+	display: inline-flex;
+	width: 100%;
+	background: white;
+	background: var(--white-bg-color);
+}
+
+.jsdialog-tabs .ui-tabs.jsdialog {
+	display: inline-block;
+}
+
+.ui-tab.jsdialog {
+	float: left;
+	font-size: 12pt;
+	font-family: var(--loleaflet-font);
+	line-height: normal;
+	color: dimgray;
+	color: var(--gray-light-txt--color);
+	height: 32px;
+	display: flex;
+	align-items: center;
+	padding: 0px 1em;
+}
+
+.ui-tab.hidden.jsdialog {
+	display: none;
+}
+
+.ui-tab.selected.jsdialog {
+	background: var(--gray-light-bg-color);
+	color: var(--gray-light-txt--color);
+}
+
+.ui-tab.jsdialog:hover {
+	cursor: pointer;
+	background: var(--gray-light-bg-color);
+	color: var(--gray-light-txt--color);
+}
+
 /* Expander */
 
 .jsdialog.ui-expander {
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 72dd0d6739..8ee742cc0e 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -697,6 +697,10 @@ nav.drawing-color-indicator ~ #main-document-content .loleaflet-annotation-reply
 	z-index: 1105;
 }
 
+.lokdialog_container.ui-dialog.ui-widget-content.jsdialog-container {
+	background-color: var(--white-bg-color) !important;
+}
+
 .lokdialog.ui-dialog-content.ui-widget-content {
 	padding: 0px;
 	overflow: auto;
diff --git a/loleaflet/src/control/Control.JSDialog.js b/loleaflet/src/control/Control.JSDialog.js
index e33fdfeeea..7d22d3c8cb 100644
--- a/loleaflet/src/control/Control.JSDialog.js
+++ b/loleaflet/src/control/Control.JSDialog.js
@@ -65,9 +65,20 @@ L.Control.JSDialog = L.Control.extend({
 		}
 	},
 
-	setTabs: function() {
-		// TODO
-		console.warn('jsdialogs: tabs are not implemented');
+	setTabs: function(tabs, builder) {
+		var dialog = this.dialogs[builder.windowId.toString()];
+		if (dialog) {
+			var tabsContainer = dialog.tabs;
+
+			while (tabsContainer.firstChild)
+				tabsContainer.removeChild(tabsContainer.firstChild);
+
+			tabsContainer.appendChild(tabs);
+		}
+	},
+
+	selectedTab: function() {
+		// nothing to do here
 	},
 
 	onJSDialog: function(e) {
@@ -96,10 +107,11 @@ L.Control.JSDialog = L.Control.extend({
 			return;
 		}
 
+		var toRemove = null;
 		if (this.dialogs[data.id]) {
 			posX = this.dialogs[data.id].startX;
 			posY = this.dialogs[data.id].startY;
-			L.DomUtil.remove(this.dialogs[data.id].container);
+			toRemove = this.dialogs[data.id].container;
 		}
 
 		container = L.DomUtil.create('div', 'jsdialog-container ui-dialog ui-widget-content lokdialog_container', document.body);
@@ -120,8 +132,14 @@ L.Control.JSDialog = L.Control.extend({
 				L.DomUtil.addClass(container, 'snackbar');
 		}
 
+		var tabs = L.DomUtil.create('div', 'jsdialog-tabs', container);
 		var content = L.DomUtil.create('div', 'lokdialog ui-dialog-content ui-widget-content', container);
 
+		// required to exist before builder was launched (for setTabs)
+		this.dialogs[data.id] = {
+			tabs: tabs
+		};
+
 		var builder = new L.control.jsDialogBuilder({windowId: data.id, mobileWizard: this, map: this.map, cssClass: 'jsdialog', callback: callback});
 
 		if (isModalPopup && !isSnackbar) {
@@ -204,6 +222,7 @@ L.Control.JSDialog = L.Control.extend({
 		this.dialogs[data.id] = {
 			container: container,
 			builder: builder,
+			tabs: tabs,
 			startX: posX,
 			startY: posY,
 			clickToClose: clickToCloseId ? L.DomUtil.get(clickToCloseId) : null,
@@ -219,6 +238,8 @@ L.Control.JSDialog = L.Control.extend({
 			setupPosition();
 			that.updatePosition(container, posX, posY);
 			container.style.visibility = '';
+			if (toRemove)
+				L.DomUtil.remove(toRemove);
 		}, 200);
 
 		if (isSnackbar) {
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 269fd63cac..4a1ae294cf 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -957,7 +957,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			}
 
 			if (builder.wizard) {
-				builder.wizard.setTabs(tabsContainer);
+				builder.wizard.setTabs(tabsContainer, builder);
 
 				for (var t = 0; t < tabs.length; t++) {
 					// to get capture of 't' right has to be a sub fn.
@@ -1044,7 +1044,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		}
 
 		if (builder.wizard) {
-			builder.wizard.setTabs(tabsContainer);
+			builder.wizard.setTabs(tabsContainer, builder);
 
 			for (var t = 0; t < tabs.length; t++) {
 				// to get capture of 't' right has to be a sub fn.