Add color image preview in autofilter dialog for filter by color option

- it's not user friendly to just see color code with a radio button.
- this patch will show color image preview for filter by color options according to the color code
- it will applied only for dialogs with filter using color codes in `Autofilter`

Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Change-Id: Ifc67a2692df5c9b5c332c8a15d5ad92cde4f4bf8

browser/css/jsdialogs.css

@@ -642,6 +642,7 @@ input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:chec
 	border: none;
 	height: 18px;
 	width: 20px;
+	display: block;
 }
 
 .jsdialog .radiobutton > label {
@@ -1104,6 +1105,17 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	border-color: transparent;
 }
 
+/* hide radio in filter by color */
+.jsdialog.autofilter #background tr td:nth-of-type(1),
+.jsdialog.autofilter #textcolor tr td:nth-of-type(1) {
+	display: none;
+}
+
+/* hide arrow icons in the autofilter menu*/
+#menu img.jsdialog.autofilter.ui-treeview-checkbox {
+	display: none;
+}
+
 /* Word count dialog */
 
 #label9, #documentlabel-mobile {

browser/src/control/jsdialog/Widget.TreeView.js

@@ -29,7 +29,7 @@
  *     type: 'treelistbox',
  *     headers: [ { text: 'first column' }, { text: 'second' }],
  *     entries: [
- *         { row: 0, columns [ { text: 'a' }, { collapsed: 'collapsedIcon.svg' } ] },
+ *         { row: 0, columns [ { text: 'a' }, { collapsed: 'collapsedIcon.svg' }, { collapsedimage: '<BASE64 encoded PNG>' } ] },
  *         { row: 1, columns [ { text: 'a2' }, { expanded: 'expandedIcon.svg' }, selected: true ]}
  *     ]
  * }
@@ -41,7 +41,7 @@
  *     headers: [ { text: 'first column' }, { text: 'second' }],
  *     entries: [
  *         { row: 0, columns [ { text: 'a' }, { collapsed: 'collapsedIcon.svg' } ] },
- *         { row: 1, columns [ { text: 'a' }, { collapsed: 'collapsedIcon.svg' } ],
+ *         { row: 1, columns [ { text: 'a' }, { collapsed: 'collapsedIcon.svg' }, { expandedimage: '<BASE64 encoded PNG>' } ],
  * 			   children: [
  *                 { row: 2, columns [ { text: 'a2' }, { expanded: 'expandedIcon.svg' }, selected: true ]}
  *             ]
@@ -102,6 +102,15 @@ function _createRadioButton(parentContainer, treeViewData, builder, entry) {
 	return radioButton;
 }
 
+function _createImageColumn(parentContainer, builder, imageUrl) {
+	var colorPreviewButton = L.DomUtil.create('img', builder.options.cssClass + ' ui-treeview-checkbox', parentContainer);
+	colorPreviewButton.src = imageUrl
+	colorPreviewButton.style.setProperty('outline', '1px solid var(--color-btn-border)');
+	colorPreviewButton.style.setProperty('vertical-align', 'middle');
+
+	return colorPreviewButton;
+}
+
 function _changeCheckboxStateOnClick(checkbox, treeViewData, builder, entry) {
 	if (checkbox.checked) {
 		var foundEntry = _findEntryWithRow(treeViewData.entries, entry.row);
@@ -209,7 +218,10 @@ function _treelistboxEntry(parentContainer, treeViewData, entry, builder, isTree
 
 	var text = L.DomUtil.create('span', builder.options.cssClass + ' ui-treeview-cell', span);
 	for (var i in entry.columns) {
-		if (entry.columns[i].collapsed || entry.columns[i].expanded) {
+		var pngImage = entry.columns[i].collapsedimage ? entry.columns[i].collapsedimage : entry.columns[i].expandedimage;
+		if (pngImage) {
+			_createImageColumn(text, builder, pngImage);
+		} else if (entry.columns[i].collapsed || entry.columns[i].expanded) {
 			var icon = L.DomUtil.create('img', 'ui-listview-icon', text);
 
 			if (treeType === 'navigator')
@@ -374,8 +386,10 @@ function _headerlistboxEntry(parentContainer, treeViewData, entry, builder) {
 			var expander = L.DomUtil.create('div', builder.options.cssClass + ' ui-treeview-expander', td);
 			expander.addEventListener('click', function () { _expandTreeGrid(parentContainer); });
 		}
-
-		if (entry.columns[i].collapsed || entry.columns[i].expanded) {
+		var pngImage = entry.columns[i].collapsedimage ? entry.columns[i].collapsedimage : entry.columns[i].expandedimage;
+		if (pngImage) {
+			_createImageColumn(td, builder, pngImage);
+		} else if (entry.columns[i].collapsed || entry.columns[i].expanded) {
 			var icon = L.DomUtil.create('img', 'ui-listview-icon', td);
 			var iconId = _getCellIconId(entry.columns[i]);
 			L.DomUtil.addClass(icon, iconId + 'img');
@@ -385,7 +399,7 @@ function _headerlistboxEntry(parentContainer, treeViewData, entry, builder) {
 			td.innerText = entry.columns[i].text;
 
 		if (!disabled)
-			$(parentContainer).click(clickFunction);
+			$(td).click(clickFunction);
 	}
 
 	if (!disabled) {
@@ -412,7 +426,8 @@ function _headerlistboxEntry(parentContainer, treeViewData, entry, builder) {
 
 function _hasIcon(columns) {
 	for (var i in columns)
-		if (columns[i].collapsed !== undefined)
+		if (columns[i].collapsed !== undefined || columns[i].expanded !== undefined
+			|| columns[i].collapsedimage !== undefined || columns[i].expandedimage !== undefined)
 			return true;
 	return false;
 }

cypress_test/integration_tests/desktop/calc/autofilter_spec.js

@@ -118,7 +118,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'AutoFilter', function() {
 
 		// Find the table element with ID "background"
 		cy.cGet('table#background')
-		.find('input') // Find all input elements inside the table
+		.find('img') // Find all input elements inside the table
 		.first() // Select the first input element
 		.click(); // Click on the first input element