tdf#106447: Support checked items in menubar

Bin the internal command state recorder to Menubar and use the global
state recorder available in the map.

Change-Id: I32e81700e38c2d544b2d874e6a30fbe58e8d43bd

2 files changed, 22 insertions, 11 deletions

diff --git a/loleaflet/dist/menubar.css b/loleaflet/dist/menubar.css
index 70fdaee74..eb115d778 100644
--- a/loleaflet/dist/menubar.css
+++ b/loleaflet/dist/menubar.css
@@ -62,7 +62,7 @@
     cursor: default;
 }
 .lo-menu a, .lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active, .lo-menu a.highlighted {
-    padding: 5px 15px;
+    padding: 5px 22px;
     color: #000;
 }
 .lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active, .lo-menu a.highlighted {
@@ -226,3 +226,17 @@
 	top: 3px; /* This is not a menu, plain action, but we want it to appear like a menu */
     }
 }
+
+/* Some more lo-menu specific customizations */
+
+/* The smartmenus plugin doesn't seem to have support for icons, so implement our own pseudo-elements */
+.lo-menu-item-checked::before {
+    position: absolute;
+    content: '\2713';
+    left: 5px;
+    top: 5px;
+}
+
+.lo-menu-item-checked:hover::before {
+    color: #fff;
+}
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index 4cbc6b716..89048a3b8 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -296,15 +296,6 @@ L.Control.Menubar = L.Control.extend({
 		this._menubarCont = L.DomUtil.get('main-menu');
 
 		map.on('doclayerinit', this._onDocLayerInit, this);
-		map.on('commandstatechanged', this._onCommandStateChanged, this);
-	},
-
-	_onCommandStateChanged: function(e) {
-		// Store information about enabled/disabled commands
-		// Used later just before showing menu to enable/disable menu items
-		if (e.state === 'enabled' || e.state === 'disabled') {
-			this.options.commandStates[e.commandName] = e.state;
-		}
 	},
 
 	_onDocLayerInit: function() {
@@ -382,11 +373,17 @@ L.Control.Menubar = L.Control.extend({
 			if (map._permission === 'edit') {
 				if (type === 'unocommand') { // enable all depending on stored commandStates
 					var unoCommand = $(aItem).data('uno');
-					if (self.options.commandStates[unoCommand] === 'disabled') {
+					if (map['stateChangeHandler'].getItemValue(unoCommand) === 'disabled') {
 						$(aItem).addClass('disabled');
 					} else {
 						$(aItem).removeClass('disabled');
 					}
+
+					if (map['stateChangeHandler'].getItemValue(unoCommand) === 'true') {
+						$(aItem).addClass('lo-menu-item-checked');
+					} else {
+						$(aItem).removeClass('lo-menu-item-checked');
+					}
 				} else if (type === 'action') { // enable all except fullscreen on windows
 					if (id === 'fullscreen' && (L.Browser.ie || L.Browser.edge)) { // Full screen works weirdly on IE 11 and on Edge
 						$(aItem).addClass('disabled');