[WC-1738]: gallery selection styles (#447)

Author: Illia Obukhau

packages/modules/data-widgets/package.json

@@ -55,6 +55,7 @@
     "datagrid-web": "workspace:*",
     "dropdown-sort-web": "workspace:*",
     "gallery-web": "workspace:*",
+    "selection-helper-web": "workspace:*",
     "tree-node-web": "workspace:*"
   },
   "devDependencies": {

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -14,6 +14,7 @@ $spacing-large: 24px !default;
 $grid-border-color: #ced0d3 !default;
 
 $brand-primary: #264ae5 !default;
+$brand-light: #e6eaff !default;
 
 .table {
     position: relative;

packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss

@@ -97,3 +97,8 @@
         }
     }
 }
+
+.widget-gallery-disable-selected-items-highlight {
+    // placeholder
+    // this class in needed to disable standard styles of highlighted items
+}

packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss

@@ -58,6 +58,12 @@
         }
     }
 
+    &:not(.widget-gallery-disable-selected-items-highlight) {
+        .widget-gallery-item.widget-gallery-clickable.widget-gallery-selected {
+            background: $brand-light;
+        }
+    }
+
     .infinite-loading {
         overflow: auto;
     }

packages/modules/data-widgets/src/themesource/datawidgets/web/design-properties.json

@@ -111,6 +111,12 @@
                     "class": "widget-gallery-pagination-center"
                 }
             ]
+        },
+        {
+            "name": "Disable selection highlight",
+            "type": "Toggle",
+            "description": "Disable standard styles for highlighting of selected items.",
+            "class": "widget-gallery-disable-selected-items-highlight"
         }
     ],
     "com.mendix.widget.web.treenode.TreeNode": [

packages/pluggableWidgets/gallery-web/src/Gallery.editorConfig.ts

@@ -26,7 +26,7 @@ export function getProperties(
         hidePropertyIn(defaultProperties, values, "emptyPlaceholder");
     }
 
-    if (values.filterList?.length === 0 && values.sortList?.length === 0 && values.itemSelection !== "Multi") {
+    if (!showHeader(values)) {
         hidePropertyIn(defaultProperties, values, "filtersPlaceholder");
     }
 
@@ -187,15 +187,14 @@ export function getPreview(values: GalleryPreviewProps, isDarkMode: boolean): St
 
     return {
         type: "Container",
-        children: [
-            titleHeader,
-            ...(values.filterList.length > 0 || values.sortList.length > 0 ? [filters] : []),
-            content,
-            ...footer
-        ]
+        children: [titleHeader, ...(showHeader(values) ? [filters] : []), content, ...footer]
     };
 }
 
 function getSingularPlural(word: string, elements: number): string {
     return elements > 1 ? word + "s" : word;
 }
+
+function showHeader(values: GalleryPreviewProps): boolean {
+    return values.filterList?.length > 0 || values.sortList?.length > 0 || values.itemSelection === "Multi";
+}

packages/pluggableWidgets/selection-helper-web/src/SelectionHelper.tsx

@@ -10,7 +10,8 @@ export function SelectionHelper(props: SelectionHelperContainerProps): ReactElem
     if (contextValue.hasError) {
         return (
             <Alert bootstrapStyle="danger">
-                The Selection Helper widget must be placed inside the header of the Data grid 2.0 or Gallery widget.
+                The Selection Helper widget must be placed inside the header of the Data grid 2.0 or Gallery widget with
+                multi-selection.
             </Alert>
         );
     }