[MOO-1004]: Update widgets icons and structure preview (#41)

mendix · Jul 25, 2023 · 7f58fe2 · 7f58fe2
2 parents 5f89a51 + 14c4e90
commit 7f58fe2
Show file tree

Hide file tree

Showing 190 changed files with 580 additions and 576 deletions.
diff --git a/packages/jsActions/mobile-resources-native/CHANGELOG.md b/packages/jsActions/mobile-resources-native/CHANGELOG.md
@@ -6,113 +6,138 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We changed the JS actions and widgets icons.
+
 ## [4.0.3] Native Mobile Resources - 2023-5-24
+
 ### Fixed
 
 -   We've updated react-native-device-info library.
 
 ## [3.2.2] BottomSheet
+
 ### Fixed
 
 -   We've updated react-native-device-info library.
 
 ## [1.0.2] Gallery
+
 ### Fixed
 
 -   We've updated react-native-device-info library.
 
 ## [3.2.3] IntroScreen
+
 ### Fixed
 
 -   We've updated react-native-device-info library.
 
 ## [4.0.2] Native Mobile Resources - 2023-5-17
 
-
 ## [3.0.1] BarChart
+
 ### Fixed
 
 -   We fixed an issue where height or width with a value of 0 crash the app.
 
 ## [2.0.1] ColumnChart
+
 ### Fixed
 
 -   We fixed an issue where height or width with a value of 0 crash the app.
 
 ## [3.0.1] LineChart
+
 ### Fixed
 
 -   We fixed an issue where height or width with a value of 0 crash the app.
 
 ## [2.0.1] PieDoughnutChart
+
 ### Fixed
 
 -   We fixed an issue where height or width with a value of 0 crash the app.
 
 ## [4.0.0] Native Mobile Resources - 2023-3-28
-undefined
+
+-   We made widgets compatible with React Native 0.70.7
 
 ## [4.0.0] AppEvents
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [3.0.0] BarChart
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [4.0.0] BarcodeScanner
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [3.0.0] Carousel
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [2.0.0] ColorPicker
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [2.0.0] ColumnChart
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [4.0.0] FloatingActionButton
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [3.0.0] LineChart
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [3.0.0] ListViewSwipe
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [4.0.0] Maps
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [4.0.0] Notifications
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [2.0.0] PieDoughnutChart
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [3.0.0] PopupMenu
+
 ### Added
 
 -   Added id for testing
@@ -122,41 +147,49 @@ undefined
 -   We made the widget compatible with React Native 0.70.7
 
 ## [4.2.1] ProgressBar
+
 ### Changed
 
 -   Bumped react-native-progress dependency
 
 ## [3.1.1] ProgressCircle
+
 ### Changed
 
 -   Bumped react-native-progress dependency
 
 ## [3.0.0] Rating
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [2.0.0] Signature
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [3.0.0] Slider
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [4.0.0] VideoPlayer
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [4.0.0] WebView
+
 ## BREAKING
 
 -   We made the widget compatible with React Native 0.70.7
 
 ## [3.13.1] Native Mobile Resources - 2022-12-28
+
 ### Changed
 
 -   We reduced the widget file size by reducing the dependencies list file size.

diff --git a/packages/jsActions/mobile-resources-native/package.json b/packages/jsActions/mobile-resources-native/package.json
@@ -9,7 +9,7 @@
     "url": "https://github.com/mendix/native-widgets.git"
   },
   "marketplace": {
-    "minimumMXVersion": "10.0.0-beta.2",
+    "minimumMXVersion": "10.0.0.8352",
     "marketplaceId": 109513
   },
   "testProject": {
@@ -52,4 +52,4 @@
     "rimraf": "^2.7.1",
     "rollup": "^2.68.0"
   }
-}
+}
diff --git a/packages/jsActions/nanoflow-actions-native/CHANGELOG.md b/packages/jsActions/nanoflow-actions-native/CHANGELOG.md
@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We changed the JS actions and widgets icons.
+
+## [3.0.0] Native Mobile Resources - 2023-3-28
+
+-   We made widgets compatible with React Native 0.70.7
+
 ## [2.6.1] Nanoflow Commons - 2022-9-23
 
 ### Fixed

diff --git a/packages/jsActions/nanoflow-actions-native/package.json b/packages/jsActions/nanoflow-actions-native/package.json
@@ -9,7 +9,7 @@
     "url": "https://github.com/mendix/native-widgets.git"
   },
   "marketplace": {
-    "minimumMXVersion": "10.0.0-beta.2",
+    "minimumMXVersion": "10.0.0.8352",
     "marketplaceId": 109515
   },
   "testProject": {
@@ -36,4 +36,4 @@
     "eslint": "^7.20.0",
     "rollup": "^2.68.0"
   }
-}
+}
diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts b/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts
@@ -1,18 +1,17 @@
-import { StructurePreviewProps, ContainerProps } from "@mendix/piw-utils-internal";
+import { StructurePreviewProps, ContainerProps, topBar, getColors } from "@mendix/piw-utils-internal";
 import { changePropertyIn, hidePropertyIn, Properties, Problem } from "@mendix/pluggable-widgets-tools";
 
 import { AccordionPreviewProps, GroupsPreviewType } from "../typings/AccordionProps";
 
 export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean): StructurePreviewProps {
-    const headerBackgroundColor: string = isDarkMode ? "#454545" : "#F5F5F5";
-
+    const colors = getColors(isDarkMode);
     const noGroupsContainer: ContainerProps = {
         type: "Container",
         borders: true,
         children: [
             {
                 type: "Container",
-                backgroundColor: headerBackgroundColor,
+                backgroundColor: colors.background.topBar.standard,
                 children: [
                     {
                         type: "RowLayout",
@@ -22,7 +21,7 @@ export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean):
                             { type: "Container" },
                             {
                                 type: "Text",
-                                fontColor: isDarkMode ? "#A4A4A4" : "#0A1324",
+                                fontColor: colors.text.primary,
                                 bold: true,
                                 content: "[No groups configured]"
                             },
@@ -43,7 +42,7 @@ export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean):
                             {
                                 type: "Text",
                                 content: "Add groups in order to place widgets here",
-                                fontColor: isDarkMode ? "#A4A4A4" : "#6B707B"
+                                fontColor: colors.text.secondary
                             },
                             { type: "Container" }
                         ]
@@ -53,61 +52,39 @@ export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean):
         ]
     };
 
-    return {
+    const content: StructurePreviewProps = {
         type: "Container",
-        borders: true,
         children: [
-            {
-                type: "Container",
-                backgroundColor: headerBackgroundColor,
-                children: [
-                    {
-                        type: "Container",
-                        padding: 4,
-                        borders: true,
-                        children: [
-                            {
-                                type: "Text",
-                                fontColor: isDarkMode ? "#DEDEDE" : "#6B707B",
-                                content: "Accordion"
-                            }
-                        ]
-                    }
-                ]
-            },
-            {
-                type: "Container",
-                children: [
-                    ...(values.groups.length === 0
-                        ? [noGroupsContainer]
-                        : values.groups
-                              .map<StructurePreviewProps[]>((group, index) =>
-                                  group.headerRenderMode === "custom"
-                                      ? [
-                                            {
-                                                type: "DropZone",
-                                                property: group.headerContent,
-                                                placeholder: `Group/${index + 1}/Header`
-                                            },
-                                            {
-                                                type: "DropZone",
-                                                property: group.content,
-                                                placeholder: `Group/${index + 1}/Content`
-                                            }
-                                        ]
-                                      : [
-                                            {
-                                                type: "DropZone",
-                                                property: group.content,
-                                                placeholder: `Group/${index + 1}/Content`
-                                            }
-                                        ]
-                              )
-                              .reduce((previousValue, currentValue) => previousValue.concat(currentValue), []))
-                ]
-            }
+            ...(values.groups.length === 0
+                ? [noGroupsContainer]
+                : values.groups
+                      .map<StructurePreviewProps[]>((group, index) =>
+                          group.headerRenderMode === "custom"
+                              ? [
+                                    {
+                                        type: "DropZone",
+                                        property: group.headerContent,
+                                        placeholder: `Group/${index + 1}/Header`
+                                    },
+                                    {
+                                        type: "DropZone",
+                                        property: group.content,
+                                        placeholder: `Group/${index + 1}/Content`
+                                    }
+                                ]
+                              : [
+                                    {
+                                        type: "DropZone",
+                                        property: group.content,
+                                        placeholder: `Group/${index + 1}/Content`
+                                    }
+                                ]
+                      )
+                      .reduce((previousValue, currentValue) => previousValue.concat(currentValue), []))
         ]
     };
+
+    return topBar("Accordion", content, isDarkMode);
 }
 
 export function getProperties(values: AccordionPreviewProps, defaultProperties: Properties): Properties {

diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.icon.dark.png b/packages/pluggableWidgets/accordion-native/src/Accordion.icon.dark.png
diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.icon.png b/packages/pluggableWidgets/accordion-native/src/Accordion.icon.png
diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.tile.dark.png b/packages/pluggableWidgets/accordion-native/src/Accordion.tile.dark.png
diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.tile.png b/packages/pluggableWidgets/accordion-native/src/Accordion.tile.png
diff --git a/.../pluggableWidgets/activity-indicator-native/src/ActivityIndicator.icon.dark.png b/.../pluggableWidgets/activity-indicator-native/src/ActivityIndicator.icon.dark.png
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.icon.png b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.icon.png
diff --git a/.../pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tile.dark.png b/.../pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tile.dark.png
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tile.png b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tile.png