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

[Szymon KÅ‚os (via logerrit)]

 loleaflet/css/notebookbar.css                       |   17 +++++++++++++++--
 loleaflet/src/control/Control.JSDialogBuilder.js    |   14 +++++++++++++-
 loleaflet/src/control/Control.NotebookbarBuilder.js |    6 ++++++
 3 files changed, 34 insertions(+), 3 deletions(-)

New commits:
commit 100396286b730bfde5bb97d7cba51c493186954e
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Thu Apr 30 16:17:57 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Mon May 4 08:54:01 2020 +0200

    notebookbar: show inline labels for small icons
    
    Change-Id: Id8128c2b043eb17d2f31773ba966a6ab9944ec04
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/93303
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index b85f9b52e..22065a7f5 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -62,11 +62,11 @@ div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookb
 	height: 24px !important;
 }
 
-.ui-content.notebookbar .unobutton.selected {
+.unotoolbutton.notebookbar .unobutton.selected {
 	box-shadow: 0 0 0px 4px #e6e6e640 !important;
 }
 
-.ui-content.notebookbar .unobutton:hover, #clearFormatting.notebookbar div img:hover {
+.unotoolbutton.notebookbar:hover, #clearFormatting.notebookbar div img:hover {
 	box-shadow: 0 0 0px 4px #e6e6e6b0;
 	border-radius: 0.1px;
 	background-color: #e6e6e6b0;
@@ -81,6 +81,19 @@ div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookb
 	border: 1px solid silver;
 }
 
+/* unobuttons with inline labels */
+
+.inline.notebookbar {
+	float: left;
+	width: max-content;
+	display: inline-table;
+}
+
+#FormatPaintbrush span
+{
+	display: none;
+}
+
 /* Home tab */
 #clearFormatting.notebookbar div img {
 	width: 24px !important;
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 459172901..7573c1376 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -17,7 +17,10 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		cssClass: 'mobile-wizard',
 
 		// create only icon without label
-		noLabelsForUnoButtons: false
+		noLabelsForUnoButtons: false,
+
+		// create labels next to the icon
+		useInLineLabelsForUnoButtons: false
 	},
 
 	/* Handler is a function which takes three parameters:
@@ -1545,6 +1548,15 @@ L.Control.JSDialogBuilder = L.Control.extend({
 				$(div).tooltip();
 			}
 
+			if (builder.options.useInLineLabelsForUnoButtons === true) {
+				$(div).addClass('inline');
+				label = L.DomUtil.create('span', 'ui-content unolabel', div);
+				label.for = buttonId;
+				label.innerHTML = data.text;
+
+				controls['label'] = label;
+			}
+
 			var updateFunction = function() {
 				var items = builder.map['stateChangeHandler'];
 				var state = items.getItemValue(data.command);
diff --git a/loleaflet/src/control/Control.NotebookbarBuilder.js b/loleaflet/src/control/Control.NotebookbarBuilder.js
index e49ce2c3f..a651b7255 100644
--- a/loleaflet/src/control/Control.NotebookbarBuilder.js
+++ b/loleaflet/src/control/Control.NotebookbarBuilder.js
@@ -8,6 +8,7 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 
 	_customizeOptions: function() {
 		this.options.noLabelsForUnoButtons = true;
+		this.options.useInLineLabelsForUnoButtons = false;
 		this.options.cssClass = 'notebookbar';
 	},
 
@@ -392,11 +393,16 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 				else
 					console.warn('Unsupported control type: \"' + childType + '\"');
 
+				if (childType === 'toolbox' && hasVerticalParent === true && childData.children.length === 1)
+					this.options.useInLineLabelsForUnoButtons = true;
+
 				if (processChildren && childData.children != undefined)
 					this.build(childObject, childData.children, isVertical, hasManyChildren);
 				else if (childData.visible && (childData.visible === false || childData.visible === 'false')) {
 					$('#' + childData.id).addClass('hidden-from-event');
 				}
+
+				this.options.useInLineLabelsForUnoButtons = false;
 			}
 		}
 	}