Draw separators in IconView

Depends on core commit 5b6fd1bcdb417e73307885f92c31464fe326ec9e Signed-off-by: Mike Kaganski <[email protected]> Change-Id: I6093df157dd14bd6035dd7135d95810a8ba64227
faslurkm · Aug 21, 2022 · fa19a32 · fa19a32
1 parent a8c7382
commit fa19a32
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
@@ -560,6 +560,10 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	background-color: var(--color-background-darker);
 }
 
+.ui-iconview-separator {
+	flex: 0 0 99%;
+}
+
 /* Autofilter dropdown */
 
 .autofilter.row {

diff --git a/browser/src/control/Control.JSDialogBuilder.js b/browser/src/control/Control.JSDialogBuilder.js
@@ -2009,10 +2009,16 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	_iconViewEntry: function (parentContainer, parentData, entry, builder) {
 		var disabled = parentData.enabled === 'false' || parentData.enabled === false;
 
+		if (entry.separator && (entry.separator === 'true' || entry.separator === true)) {
+			L.DomUtil.create('hr', builder.options.cssClass + ' ui-iconview-separator', parentContainer);
+			return;
+		}
+
+		var entryContainer = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview-entry', parentContainer);
 		if (entry.selected && (entry.selected === 'true' || entry.selected === true))
-			$(parentContainer).addClass('selected');
+			$(entryContainer).addClass('selected');
 
-		var icon = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview-icon', parentContainer);
+		var icon = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview-icon', entryContainer);
 		var img = L.DomUtil.create('img', builder.options.cssClass, icon);
 		if (entry.image)
 			img.src = entry.image;
@@ -2024,20 +2030,20 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 		if (!disabled) {
 			var singleClick = parentData.singleclickactivate === 'true' || parentData.singleclickactivate === true;
-			$(parentContainer).click(function() {
+			$(entryContainer).click(function() {
 				$('#' + parentData.id + ' .ui-treeview-entry').removeClass('selected');
 				builder.callback('iconview', 'select', parentData, entry.row, builder);
 				if (singleClick) {
 					builder.callback('iconview', 'activate', parentData, entry.row, builder);
 				}
 			});
 			if (!singleClick) {
-				$(parentContainer).dblclick(function() {
+				$(entryContainer).dblclick(function() {
 					$('#' + parentData.id + ' .ui-treeview-entry').removeClass('selected');
 					builder.callback('iconview', 'activate', parentData, entry.row, builder);
 				});
 			}
-			builder._preventDocumentLosingFocusOnClick(parentContainer);
+			builder._preventDocumentLosingFocusOnClick(entryContainer);
 		}
 	},
 
@@ -2062,8 +2068,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			L.DomUtil.addClass(container, 'disabled');
 
 		for (var i in data.entries) {
-			var entry = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview-entry', container);
-			builder._iconViewEntry(entry, data, data.entries[i], builder);
+			builder._iconViewEntry(container, data, data.entries[i], builder);
 		}
 
 		var firstSelected = $(container).children('.selected').get(0);