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: Ifc67a2692df5c9b5c332c8a15d5ad92cde4f4bf8pull/7026/head cp-24.04.1-3
parent
ce0536eae5
commit
89a7742206
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Reference in New Issue