Non-selectable options in dropdowns should not be interactable #3521

enonic · Apr 8, 2024 · 14f72af · 14f72af
1 parent 5b0eaf0
commit 14f72af
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 37 deletions.
diff --git a/src/main/resources/assets/admin/common/js/ui/selector/DropdownGrid.ts b/src/main/resources/assets/admin/common/js/ui/selector/DropdownGrid.ts
@@ -254,18 +254,6 @@ export abstract class DropdownGrid<OPTION_DISPLAY_VALUE> {
         }
     }
 
-    markReadOnly(selectedOptions: Option<OPTION_DISPLAY_VALUE>[]) {
-
-        let stylesHash: Slick.CellCssStylesHash = {};
-        selectedOptions.forEach((selectedOption: Option<OPTION_DISPLAY_VALUE>) => {
-            if (selectedOption.isReadOnly()) {
-                let row = this.getRowByValue(selectedOption.getValue());
-                stylesHash[row] = {_checkbox_selector: 'readonly', option: 'readonly'};
-            }
-        });
-        this.getGrid().setCellCssStyles('readonly', stylesHash);
-    }
-
     hasActiveRow(): boolean {
         return !!this.getGrid().getActiveCell();
     }

diff --git a/src/main/resources/assets/admin/common/js/ui/selector/DropdownList.ts b/src/main/resources/assets/admin/common/js/ui/selector/DropdownList.ts
@@ -127,8 +127,6 @@ export class DropdownList<OPTION_DISPLAY_VALUE> {
             if (selectedOptions) {
                 this.dropdownGrid.markSelections(selectedOptions);
                 if (selectedOptions.length > 0) {
-                    this.dropdownGrid.markReadOnly(selectedOptions);
-
                     if (!isShown) {
                         this.navigateToRowIfNotActive(selectedOptions[0]);
                     }

diff --git a/src/main/resources/assets/admin/common/js/ui/selector/DropdownListGrid.ts b/src/main/resources/assets/admin/common/js/ui/selector/DropdownListGrid.ts
@@ -3,6 +3,8 @@ import {Grid} from '../grid/Grid';
 import {DataView} from '../grid/DataView';
 import {DropdownGrid, DropdownGridConfig} from './DropdownGrid';
 import {Option} from './Option';
+import {i18n} from '../../util/Messages';
+import {StringHelper} from '../../util/StringHelper';
 
 export class DropdownListGrid<OPTION_DISPLAY_VALUE>
     extends DropdownGrid<OPTION_DISPLAY_VALUE> {
@@ -31,10 +33,37 @@ export class DropdownListGrid<OPTION_DISPLAY_VALUE>
 
         this.grid = new Grid<Option<OPTION_DISPLAY_VALUE>>(this.gridData, this.createColumns(), this.createOptions());
 
+        this.gridData.setItemMetadataHandler(this.handleItemMetadata.bind(this));
+
         this.gridData.onRowCountChanged(() => this.notifyRowCountChanged());
     }
 
     protected getGridData(): DataView<Option<OPTION_DISPLAY_VALUE>> {
         return this.gridData;
     }
+
+    protected handleItemMetadata(row: number) {
+        let option = this.gridData.getItem(row);
+        let cssClasses = '';
+        let title = '';
+
+        if (option.isReadOnly()) {
+            cssClasses += ' readonly';
+            title = i18n('field.readOnly');
+        }
+
+        if (option.isSelectable()) {
+            cssClasses += ' selectable';
+        }
+
+        if (option.isExpandable()) {
+            cssClasses += ' expandable';
+        }
+
+        if (!StringHelper.isBlank(cssClasses) || !StringHelper.isBlank(title)) {
+            return {cssClasses: cssClasses, title: title};
+        }
+
+        return null;
+    }
 }
diff --git a/src/main/resources/assets/admin/common/js/ui/selector/combobox/ComboBoxDropdown.ts b/src/main/resources/assets/admin/common/js/ui/selector/combobox/ComboBoxDropdown.ts
@@ -7,18 +7,6 @@ export class ComboBoxDropdown<OPTION_DISPLAY_VALUE>
 
     setOptions(options: Option<OPTION_DISPLAY_VALUE>[], noOptionsText: string, selectedOptions: Option<OPTION_DISPLAY_VALUE>[] = [],
                saveSelection?: boolean) {
-
-        selectedOptions.forEach((selectedOption: Option<OPTION_DISPLAY_VALUE>) => {
-            if (selectedOption.isReadOnly()) {
-                for (const option of options) {
-                    if (selectedOption.getValue() === option.getValue()) {
-                        option.setReadOnly(true);
-                        break;
-                    }
-                }
-            }
-        });
-
         // `from` is used to determine, from which point should selection be updated
         const from = this.getDropdownGrid().getOptionCount();
 

diff --git a/src/main/resources/assets/admin/common/js/ui/selector/dropdown/Dropdown.ts b/src/main/resources/assets/admin/common/js/ui/selector/dropdown/Dropdown.ts
@@ -431,10 +431,6 @@ export class Dropdown<OPTION_DISPLAY_VALUE>
         return this.input.getValue() === '';
     }
 
-    markReadOnly(options: Option<OPTION_DISPLAY_VALUE>[]) {
-        this.dropdownList.getDropdownGrid().markReadOnly(options);
-    }
-
     private setupListeners() {
         AppHelper.focusInOut(this, () => {
             if (this.isVisible()) {

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/selector/dropdown-grid.less b/src/main/resources/assets/admin/common/styles/api/ui/selector/dropdown-grid.less
@@ -1,14 +1,30 @@
 .dropdown-grid {
-  .slick-row .slick-cell {
-    .compact-option-viewer();
+  .slick-row {
+    .slick-cell {
+      .compact-option-viewer();
 
-    &:first-child {
-      flex-grow: 1;
+      &:first-child {
+        flex-grow: 1;
+      }
+
+      &:not(:first-child) {
+        flex-basis: 50px;
+        flex-shrink: 0;
+      }
     }
 
-    &:not(:first-child) {
-      flex-basis: 50px;
-      flex-shrink: 0;
+    &.readonly {
+      .slick-cell {
+        pointer-events: none;
+
+        > *:not(.toggle) {
+          opacity: 0.5;
+        }
+
+        .toggle {
+          pointer-events: all;
+        }
+      }
     }
   }
 }