Color adjustments modal icons (#908)

* color adjustment

* generate icon script adjust
automatically add .inline to file name

* generate icon script adjust
automatically add .inline to file name

* fix linting

* Automatic frontend build

assets/build/generate-icon-index.ts

@@ -31,15 +31,16 @@ if (!fs.existsSync(SVG_FOLDER)) {
     process.exit(1);
 }
 
-const files: string[] = fs.readdirSync(SVG_FOLDER as string).filter(file => file.endsWith('.inline.svg'));
+const files: string[] = fs.readdirSync(SVG_FOLDER as string).filter(file => file.endsWith('.svg'));
 
 if (files.length === 0) {
     console.log(`No SVG files found in ${SVG_FOLDER}`);
     process.exit(0);
 }
 
 const generateVariableName = (fileName: string): string => {
-    const baseName = fileName.replace('.inline.svg', '');
+    let baseName = fileName.replace('.svg', '').replace('.inline', '');
+
     let variableName = baseName
         .replace(/[-_\s]+(.)?/g, (_, letter) => letter ? letter.toUpperCase() : '')
         .replace(/^./, str => str.toLowerCase());
@@ -52,14 +53,14 @@ const generateVariableName = (fileName: string): string => {
 };
 
 const generateIconEntry = (fileName: string): string => {
-    const iconName = fileName.replace('.inline.svg', '');
+    const iconName = fileName.replace('.svg', '').replace('.inline', '');
 
     const variableName = generateVariableName(fileName)
     return `
     iconLibrary.register({
       name: '${iconName}',
       component: ${variableName}
-    });`;
+    })`;
 };
 
 const modifySvgAttributes = (filePath: string): void => {
@@ -75,6 +76,16 @@ const modifySvgAttributes = (filePath: string): void => {
     fs.writeFileSync(filePath, svgContent, 'utf-8');
 };
 
+const renameSvgFile = (filePath: string): void => {
+    const newFilePath = filePath.endsWith('.inline.svg')
+        ? filePath
+        : filePath.replace('.svg', '.inline.svg');
+
+    if (newFilePath !== filePath) {
+        fs.renameSync(filePath, newFilePath);
+    }
+};
+
 const variableNameSet = new Set<string>();
 files.forEach(file => {
     const variableName = generateVariableName(file);
@@ -103,19 +114,23 @@ let content = `
 
 /* eslint-disable max-lines */
 
-import { container } from '@Pimcore/app/depency-injection';
-import { moduleSystem } from '@Pimcore/app/module-system/module-system';
-import { serviceIds } from '@Pimcore/app/config/services/service-ids';
-import { type IconLibrary } from './services/icon-library';
+import { container } from '@Pimcore/app/depency-injection'
+import { moduleSystem } from '@Pimcore/app/module-system/module-system'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { type IconLibrary } from './services/icon-library'
 `;
-
 files.forEach((file: string) => {
     const filePath: string = path.join(SVG_FOLDER as string, file);
     modifySvgAttributes(filePath);
+    renameSvgFile(filePath);
+
+    const importFileName = file.endsWith('.inline.svg')
+        ? file
+        : file.replace('.svg', '.inline.svg');
 
     const variableName: string = generateVariableName(file);
     content += `
-import ${variableName} from '@Pimcore/assets/icons/${file}';`;
+import ${variableName} from '@Pimcore/assets/icons/${importFileName}'`;
 });
 
 content += `
@@ -130,7 +145,7 @@ files.forEach(file => {
 
 content += `
   }
-});
+})
 `;
 
 try {

assets/js/src/core/components/modal/alert-modal/alert-modal.stories.tsx

@@ -36,6 +36,11 @@ const AlertModalComponent = (args: { type: string, content: string }): React.JSX
           content: args.content
         })
         break
+      case 'success':
+        modal.success({
+          content: args.content
+        })
+        break
     }
   }
 
@@ -52,7 +57,7 @@ const config: Meta = {
   },
   argTypes: {
     type: {
-      options: ['info', 'error', 'warn'],
+      options: ['info', 'error', 'warn', 'success'],
       control: {
         type: 'select',
         labels: {
@@ -86,3 +91,10 @@ export const WithWarn = {
     content: 'This is an info message'
   }
 }
+
+export const WithSuccess = {
+  args: {
+    type: 'success',
+    content: 'This is an success message'
+  }
+}

assets/js/src/core/components/modal/alert-modal/hooks/use-alert-modal.tsx

@@ -26,10 +26,12 @@ export interface UseAlertModalResponse {
   info: (props: ContentAware) => { destroy: () => void, update: (configUpdate: ConfigUpdate) => void }
   error: (props: ContentAware) => { destroy: () => void, update: (configUpdate: ConfigUpdate) => void }
   warn: (props: ContentAware) => { destroy: () => void, update: (configUpdate: ConfigUpdate) => void }
+  success: (props: ContentAware) => { destroy: () => void, update: (configUpdate: ConfigUpdate) => void }
 }
 
 export const useAlertModal = (): UseAlertModalResponse => {
   const { modal } = App.useApp()
+
   const { t } = useTranslation()
 
   return useMemo<UseAlertModalResponse>(
@@ -51,6 +53,12 @@ export const useAlertModal = (): UseAlertModalResponse => {
           title: t('warning'),
           content
         })
+      ),
+      success: ({ content }) => (
+        modal.success({
+          title: t('success'),
+          content
+        })
       )
     }),
     []

assets/js/src/core/components/modal/modal.styles.tsx

@@ -18,25 +18,25 @@ export const useStyle = createStyles(({ token, css }) => {
     modal: css`
         &.error {
             .ant-modal-content .ant-modal-header .ant-modal-title .pimcore-icon {
-                color: red; 
+                color:  ${token.colorError}; 
             }
         }
         
         &.success {
             .ant-modal-content .ant-modal-header .ant-modal-title .pimcore-icon {
-                color: green; 
+                color: ${token.colorSuccess}; 
             }
         }
         
         &.info {
             .ant-modal-content .ant-modal-header .ant-modal-title .pimcore-icon {
-                color: orange; 
+                color: ${token.colorPrimary}; 
             }
         }
         
         &.alert {
             .ant-modal-content .ant-modal-header .ant-modal-title .pimcore-icon {
-                color: orange; 
+                color: ${token.colorWarning}; 
             }
         }
         

assets/js/src/core/modules/icon-library/index.ts

@@ -161,7 +161,10 @@ import properties from '@Pimcore/assets/icons/properties.inline.svg'
 import published from '@Pimcore/assets/icons/published.inline.svg'
 import questionmark from '@Pimcore/assets/icons/questionmark.inline.svg'
 import refresh from '@Pimcore/assets/icons/refresh.inline.svg'
+import removeImageThumbnail from '@Pimcore/assets/icons/remove-image-thumbnail.inline.svg'
 import removeMarker from '@Pimcore/assets/icons/remove-marker.inline.svg'
+import removePdfThumbnail from '@Pimcore/assets/icons/remove-pdf-thumbnail.inline.svg'
+import removeVideoThumbnail from '@Pimcore/assets/icons/remove-video-thumbnail.inline.svg'
 import rename from '@Pimcore/assets/icons/rename.inline.svg'
 import requiredBy from '@Pimcore/assets/icons/required-by.inline.svg'
 import requires from '@Pimcore/assets/icons/requires.inline.svg'
@@ -202,9 +205,6 @@ import widget from '@Pimcore/assets/icons/widget.inline.svg'
 import workflow from '@Pimcore/assets/icons/workflow.inline.svg'
 import xCircle from '@Pimcore/assets/icons/x-circle.inline.svg'
 import xlsxCsv from '@Pimcore/assets/icons/xlsx-csv.inline.svg'
-import removeImageThumbnails from '@Pimcore/assets/icons/remove-image-thumbnail.inline.svg'
-import removeVideoThumbnails from '@Pimcore/assets/icons/remove-video-thumbnail.inline.svg'
-import removePdfThumbnails from '@Pimcore/assets/icons/remove-pdf-thumbnail.inline.svg'
 
 moduleSystem.registerModule({
   onInit: () => {
@@ -781,10 +781,22 @@ moduleSystem.registerModule({
       name: 'refresh',
       component: refresh
     })
+    iconLibrary.register({
+      name: 'remove-image-thumbnail',
+      component: removeImageThumbnail
+    })
     iconLibrary.register({
       name: 'remove-marker',
       component: removeMarker
     })
+    iconLibrary.register({
+      name: 'remove-pdf-thumbnail',
+      component: removePdfThumbnail
+    })
+    iconLibrary.register({
+      name: 'remove-video-thumbnail',
+      component: removeVideoThumbnail
+    })
     iconLibrary.register({
       name: 'rename',
       component: rename
@@ -945,17 +957,5 @@ moduleSystem.registerModule({
       name: 'xlsx-csv',
       component: xlsxCsv
     })
-    iconLibrary.register({
-      name: 'remove-image-thumbnails',
-      component: removeImageThumbnails
-    })
-    iconLibrary.register({
-      name: 'remove-video-thumbnails',
-      component: removeVideoThumbnails
-    })
-    iconLibrary.register({
-      name: 'remove-pdf-thumbnails',
-      component: removePdfThumbnails
-    })
   }
 })

public/build/3ba4af5f-6174-411e-b1ea-f65d6e0696da/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/3ba4af5f-6174-411e-b1ea-f65d6e0696da/vendor.js"
+      ]
+    }
+  }
+}

public/build/3ba4af5f-6174-411e-b1ea-f65d6e0696da/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/3ba4af5f-6174-411e-b1ea-f65d6e0696da/vendor.js": "/bundles/pimcorestudioui/build/3ba4af5f-6174-411e-b1ea-f65d6e0696da/vendor.js"
+}

public/build/7a38696d-1448-49d3-be82-f7a44bd659d4/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/7a38696d-1448-49d3-be82-f7a44bd659d4/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/7a38696d-1448-49d3-be82-f7a44bd659d4/core-dll.js"
+      ]
+    }
+  }
+}