From dfff83fb2b3c262a44098eb2cde8bbdbe197c2c0 Mon Sep 17 00:00:00 2001
From: Marco Cecchetti <marco.cecchetti@collabora.com>
Date: Thu, 10 Oct 2019 09:29:44 +0200
Subject: [PATCH] lok: jsdialogbuilder: explorable entry: support for both
 title and value

Change-Id: I4f300507349b64972d0a961f0c4063352810675a
---
 loleaflet/css/toolbar.css                     | 16 +++++-
 .../src/control/Control.JSDialogBuilder.js    | 50 +++++++++++++------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 3ac17aa6b..5411274a3 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -1043,7 +1043,7 @@ tr.useritem > td > img {
 	margin: 0px;
 	padding: 0px;
 	border: solid 1px #fff;
-	padding-left: 32px !important;
+	padding-left: 4% !important;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -1079,11 +1079,23 @@ tr.useritem > td > img {
 }
 
 .sub-menu-arrow {
-	margin-right: 40px;
+	display: table-cell;
+	padding-left: 10px;
+	padding-right: 20px;
 	background: transparent;
 	font-size: 1.5em;
 	font-weight: bold;
 	color: #aaa !important;
+	vertical-align: middle;
+}
+
+.entry-value {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.ui-header-right {
+	display: table;
 }
 
 .menu-entry-icon {
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index c094f8afb..990bc456c 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -141,21 +141,27 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		return null;
 	},
 
-	_explorableEntry: function(parentContainer, title, contentNode, builder, iconPath) {
+	_explorableEntry: function(parentContainer, title, contentNode, builder, valueNode, iconPath) {
 		var sectionTitle = L.DomUtil.create('div', 'ui-header level-' + builder._currentDepth + ' mobile-wizard ui-widget', parentContainer);
-		if (iconPath) {
-			var div = L.DomUtil.create('div', '', sectionTitle);
-			var icon = L.DomUtil.create('img', 'menu-entry-icon', div);
-			icon.src = iconPath;
-			var titleSpan = L.DomUtil.create('span', 'menu-entry-with-icon', div);
-			titleSpan.innerHTML = title;
-		} else {
-			sectionTitle.innerHTML = title;
-		}
-
 		$(sectionTitle).css('justify-content', 'space-between');
 
-		var arrowSpan = L.DomUtil.create('span', 'sub-menu-arrow', sectionTitle);
+		var leftDiv = L.DomUtil.create('div', 'ui-header-left', sectionTitle);
+		var titleClass = '';
+		if (iconPath) {
+			var icon = L.DomUtil.create('img', 'menu-entry-icon', leftDiv);
+			icon.src = iconPath;
+			titleClass = 'menu-entry-with-icon'
+		}
+		var titleSpan = L.DomUtil.create('span', titleClass, leftDiv);
+		titleSpan.innerHTML = title;
+
+		var rightDiv = L.DomUtil.create('div', 'ui-header-right', sectionTitle);
+		if (valueNode) {
+			var valueDiv = L.DomUtil.create('div', 'entry-value', rightDiv);
+			valueDiv.appendChild(valueNode);
+		}
+
+		var arrowSpan = L.DomUtil.create('span', 'sub-menu-arrow', rightDiv);
 		arrowSpan.innerHTML = '>';
 
 		var contentDiv = L.DomUtil.create('div', 'ui-content level-' + builder._currentDepth + ' mobile-wizard', parentContainer);
@@ -410,12 +416,20 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	_comboboxControl: function(parentContainer, data, builder, iconPath) {
 		// TODO: event listener in the next level...
 
-		if (!data.entries || data.entries.length == 0)
+		if (!data.entries || data.entries.length === 0)
 			return false;
 
 		var title = data.text;
-		if (data.selectedEntries)
-			title = data.entries[data.selectedEntries[0]];
+		var valueNode = null;
+		if (data.selectedEntries) {
+			if (title && title.length) {
+				var value = data.entries[data.selectedEntries[0]];
+				valueNode = L.DomUtil.create('div', '', null);
+				valueNode.innerHTML = value;
+			} else {
+				title = data.entries[data.selectedEntries[0]];
+			}
+		}
 		title = builder._cleanText(title);
 
 		var entries = [];
@@ -426,7 +440,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 		var contentNode = {type: 'container', children: entries};
 
-		builder._explorableEntry(parentContainer, title, contentNode, builder, iconPath);
+		builder._explorableEntry(parentContainer, title, contentNode, builder, valueNode, iconPath);
 
 		return false;
 	},
@@ -585,12 +599,16 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	_fontNameControl: function(parentContainer, data, builder) {
 		var iconPath = 'images/lc_charfontname.svg';
 		data.entries = [ 'Liberation Sans' ];
+		if (!(data.selectedEntries && data.selectedEntries.length))
+			data.selectedEntries = [0];
 		builder._comboboxControl(parentContainer, data, builder, iconPath);
 	},
 
 	_fontHeightControl: function(parentContainer, data, builder) {
 		var iconPath = 'images/lc_fontheight.svg';
 		data.entries = [ '8', '10', '11', '12', '14', '16', '24', '32', '48' ];
+		if (!(data.selectedEntries && data.selectedEntries.length))
+			data.selectedEntries = [1];
 		builder._comboboxControl(parentContainer, data, builder, iconPath);
 	},