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

[Szymon Kłos (via logerrit)]

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

New commits:
commit 008ae186e5bf277327935c97ab6485f5612ab897
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Tue Oct 8 21:06:38 2019 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Tue Oct 8 21:06:38 2019 +0200

    jsdialogs: general style for color picker
    
    Change-Id: Id883ab2fa9373be133f790746c72262c49e7381f

diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 8a5ad47cd..f1258eba8 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -41,10 +41,10 @@
 		margin: 0px !important;
 		float:left;
 	}
-	[name='colorselector-0'] {
-		padding: 24px 0px 24px 20px !important;
-		margin: 0px !important;
-		float:left;
+	.colorspan {
+		width: 120px;
+		float: left;
+		padding: 0px 10px 0px 10px !important;
 	}
 	#Shadowed, #StyleNewByExample + div, #AlignTop, #AlignBottom + p, #mergecells{clear:both;}
 	#DecrementIndent + input:disabled{display: none;}
@@ -1067,11 +1067,16 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 	color: #0b87e7;
 }
 
-#tb_colorselector-0_item_color .w2ui-tb-caption > div {
+[id|=tb_colorselector] .w2ui-tb-caption > div {
 	height: 32px !important;
 	width: 32px !important;
 }
 
-[name='colorselector-0'] {
+[name|=colorselector] {
 	width: 80px;
 }
+
+.colorimage {
+	float: left;
+	height: 32px;
+}
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 61ed693c7..26b74e0f4 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -56,6 +56,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		this._toolitemHandlers['.uno:CharFontName'] = this._fontNameControl;
 		this._toolitemHandlers['.uno:FontHeight'] = this._fontHeightControl;
 		this._toolitemHandlers['.uno:FontColor'] = this._colorControl;
+		this._toolitemHandlers['.uno:BackColor'] = this._colorControl;
 
 		this._currentDepth = 0;
 	},
@@ -454,12 +455,18 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	},
 
 	_colorControl: function(parentContainer, data, builder) {
-		var colorContainer = L.DomUtil.create('div', '', parentContainer);
+		var colorContainer = L.DomUtil.create('div', 'colorspan', parentContainer);
 
 		if (data.enabled == 'false')
 			$(colorContainer).attr('disabled', 'disabled');
 
-		var toolbar = $(colorContainer);
+		var imageContainer = L.DomUtil.create('div', 'colorimagecontainer', colorContainer);
+		var image = L.DomUtil.create('img', 'colorimage', imageContainer);
+		var icon = builder._createIconPath(data.command);
+		image.src = icon;
+
+		var toolbarContainer = L.DomUtil.create('div', 'colorspan', colorContainer);
+		var toolbar = $(toolbarContainer);
 		var id = 'colorselector-' + builder._colorPickers.length;
 		var items = [{type: 'color',  id: 'color'}];
 		toolbar.w2toolbar({