[Libreoffice-commits] online.git: loleaflet/css loleaflet/src

[Szymon Kłos (via logerrit)]

 loleaflet/css/toolbar.css                        |   31 ++++++++++++++++-------
 loleaflet/src/control/Control.JSDialogBuilder.js |    8 ++++-
 2 files changed, 28 insertions(+), 11 deletions(-)

New commits:
commit 9b0aa58e5ba0539470a41fb08f0fdc18e5e480b4
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Fri Oct 11 21:46:41 2019 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Fri Oct 11 21:53:47 2019 +0200

    jsdialogs: spinfield units and buttons in row
    
    Change-Id: I4bcf688c2de548ab6c27c06105743c05bdfaf3b2

diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 1ffed1b48..933e031cc 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -91,14 +91,13 @@
 	#DecrementIndent + input:disabled{display: none;}
 	div#mobile-wizard-content input[type=number]{
 		height: 46px;
-		width: 70%;
+		width: 110px;
 		margin-left: 10px;
 		border: none;
 	}
 	div#mobile-wizard-content .spinfieldcontainer{
 		height: 48px;
-		margin: 24px 28px 24px 28px !important;
-		width: 70%;
+		margin: 24px 0px 24px 28px !important;
 		border: 1px solid #ccc;
 		border-radius: 2px;
 		background-size: 28px;
@@ -1157,28 +1156,42 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 
 .spinfieldcontainer {
 	display: inline-block;
+	overflow: hidden;
 }
 
 .sinfieldcontrols {
 	background-color: #eee;
 	text-align: center;
-	width: 25px;
-	height: 48px;
-	float: right;
+	display: inline-block;
+	vertical-align: middle;
+	border-left: 1px solid #ccc;
+}
+
+.spinfieldunit {
+	color: #777;
+	width: 30px;
+	margin: 0px 10px 0px 10px;
 }
 
 .plus {
-	border-bottom: 1px solid #ccc;
-	height: 24px;
+	border-right: 1px solid #ccc;
+	width: 48px;
+	height: 48px;
 	color: #777 !important;
+	display: table-cell;
+	vertical-align: middle;
 }
 
 .minus {
-	height: 24px;
+	width: 48px;
+	height: 48px;
 	color: #777 !important;
+	display: table-cell;
+	vertical-align: middle;
 }
 
 .spinfieldimage {
+	width: 24px;
 	height: 24px;
 	vertical-align: middle;
 }
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 990bc456c..a33c9ce31 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -343,8 +343,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	},
 
 	_spinfieldControl: function(parentContainer, data, builder) {
-		var div = L.DomUtil.createWithId('div', data.id, parentContainer);
-		$(div).addClass('spinfieldcontainer');
+		var div = L.DomUtil.create('div', 'spinfieldcontainer', parentContainer);
 
 		var image = L.DomUtil.create('img', 'spinfieldimage', div);
 		var icon = builder._createIconPath(data.id);
@@ -353,6 +352,11 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		var spinfield = L.DomUtil.create('input', 'spinfield', div);
 		spinfield.type = 'number';
 
+		if (data.unit) {
+			var unit = L.DomUtil.create('span', 'spinfieldunit', div);
+			unit.innerHTML = data.unit;
+		}
+
 		var controlsContainer = L.DomUtil.create('div', 'sinfieldcontrols', div);
 		var plus = L.DomUtil.create('div', 'plus', controlsContainer);
 		plus.innerHTML = '+';