custom-icons-page: add page and icons

meaningfy-ws · Dec 18, 2024 · dc76caa · dc76caa
1 parent 0ddc897
commit dc76caa
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 40 deletions.
diff --git a/mapping_workbench/frontend/src/layouts/app/config.js b/mapping_workbench/frontend/src/layouts/app/config.js
@@ -1,20 +1,18 @@
+import {useTranslation} from 'react-i18next';
+
+import DvrIcon from '@mui/icons-material/Dvr';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import TaskAltIcon from '@mui/icons-material/TaskAlt';
-import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
 import VerifiedIcon from '@mui/icons-material/Verified';
-import {useTranslation} from 'react-i18next';
-
-import SvgIcon from '@mui/material/SvgIcon';
+import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
+import LightbulbCircleIcon from '@mui/icons-material/LightbulbCircle';
+import HomeSmileIcon from 'src/icons/ui/duocolor/home-smile';
 
-import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
 import ApiIcon from '@mui/icons-material/Api';
-import LightbulbCircleIcon from '@mui/icons-material/LightbulbCircle';
-import DvrIcon from '@mui/icons-material/Dvr';
+import SvgIcon from '@mui/material/SvgIcon';
 
-import HomeSmileIcon from 'src/icons/ui/duocolor/home-smile';
-import {tokens} from 'src/locales/tokens';
 import {paths} from 'src/paths';
-
+import {tokens} from 'src/locales/tokens';
 
 export const useSections = () => {
     const {t} = useTranslation();
@@ -45,44 +43,28 @@ export const useSections = () => {
             items: [{
                 title: t(tokens.nav.elements_definition),
                 path: paths.app.fields_and_nodes.develop.index,
-                icon: (
-                    <SvgIcon fontSize="small">
-                        <ApiIcon/>
-                    </SvgIcon>
-                ),
+                icon: (<ApiIcon fontSize="small"/>),
             }]
         }],
         conceptualMappings: [{
             items: [{
                 title: t(tokens.nav.conceptual_mappings),
                 path: paths.app.conceptual_mapping_rules.develop.index,
-                icon: (
-                    <SvgIcon fontSize="small">
-                        <LightbulbCircleIcon/>
-                    </SvgIcon>
-                ),
+                icon: (<LightbulbCircleIcon fontSize="small"/>),
             }]
         }],
         technical_mappings: [{
             items: [{
                 title: t(tokens.nav.technical_mappings),
                 path: paths.app.triple_map_fragments.index,
-                icon: (
-                    <SvgIcon fontSize="small">
-                        <DvrIcon/>
-                    </SvgIcon>
-                ),
+                icon: (<DvrIcon fontSize="small"/>),
             }]
         }],
         quality_control: [{
             items: [{
                 title: t(tokens.nav.quality_control),
                 path: paths.app.sparql_test_suites.index,
-                icon: (
-                    <SvgIcon fontSize="small">
-                        <VerifiedIcon/>
-                    </SvgIcon>
-                ),
+                icon: (<VerifiedIcon fontSize="small"/>),
             }]
         }],
         mappingPackages: [
@@ -91,11 +73,7 @@ export const useSections = () => {
                     {
                         title: t(tokens.nav.mapping_packages),
                         path: paths.app.mapping_packages.index,
-                        icon: (
-                            <SvgIcon fontSize="small">
-                                <ArchiveIcon/>
-                            </SvgIcon>
-                        ),
+                        icon: (<ArchiveIcon fontSize="small"/>),
                     }]
             }
         ],
@@ -104,11 +82,7 @@ export const useSections = () => {
                 {
                     title: t(tokens.nav.process_monitor),
                     path: paths.app.tasks.index,
-                    icon: (
-                        <SvgIcon fontSize="small">
-                            <TaskAltIcon/>
-                        </SvgIcon>
-                    )
+                    icon: (<TaskAltIcon fontSize="small"/>)
                 }]
         }],
     };

diff --git a/mapping_workbench/frontend/src/pages/app/icons/index.js b/mapping_workbench/frontend/src/pages/app/icons/index.js
@@ -0,0 +1,98 @@
+import Stack from '@mui/material/Stack';
+import SvgIcon from '@mui/material/SvgIcon';
+import Tooltip from '@mui/material/Tooltip';
+import {cloneElement} from 'react';
+
+import AlignLeft02 from '../../../icons/ui/duocolor/align-left-02';
+import BarChartSquare02 from '../../../icons/ui/duocolor/bar-chart-square-02';
+import Building04 from '../../../icons/ui/duocolor/building-04';
+import CheckDone01 from '../../../icons/ui/duocolor/check-done-01';
+import CreditCard01 from '../../../icons/ui/duocolor/credit-card-01';
+import CurrencyBitcoinCircle from '../../../icons/ui/duocolor/currency-bitcoin-circle';
+import File01 from '../../../icons/ui/duocolor/file-01';
+import GraduationHat01 from '../../../icons/ui/duocolor/graduation-hat-01';
+import HomeSmile from '../../../icons/ui/duocolor/home-smile';
+import LayoutAlt02 from '../../../icons/ui/duocolor/layout-alt-02';
+import LineChartUp04 from '../../../icons/ui/duocolor/line-chart-up-04';
+import Lock011 from '../../../icons/ui/duocolor/lock-01-1';
+import LogOut01 from '../../../icons/ui/duocolor/log-out-01';
+import Mail03 from '../../../icons/ui/duocolor/mail-03';
+import MessageChatSquare from '../../../icons/ui/duocolor/message-chat-square';
+import ReceiptCheck from '../../../icons/ui/duocolor/receipt-check';
+import Share07 from '../../../icons/ui/duocolor/share-07';
+import ShoppingBag03 from '../../../icons/ui/duocolor/shopping-bag-03';
+import ShoppingCart01 from '../../../icons/ui/duocolor/shopping-cart-01';
+import Truck01 from '../../../icons/ui/duocolor/truck-01';
+import Upload04 from '../../../icons/ui/duocolor/upload-04';
+import Calendar from '../../../icons/ui/duocolor/calendar';
+import Users03 from '../../../icons/ui/duocolor/users-03';
+import XSquare from '../../../icons/ui/duocolor/x-square';
+import XSquare1 from '../../../icons/ui/duocolor/x-square-1';
+import File04 from '../../../icons/ui/duocolor/file-04';
+import Mail04 from '../../../icons/ui/duocolor/mail-04';
+import {Layout as AppLayout} from '../../../layouts/app';
+
+const ICONS = [<AlignLeft02/>,
+    <BarChartSquare02/>,
+    <Upload04/>,
+    <LineChartUp04/>,
+    <Truck01/>,
+    <MessageChatSquare/>,
+    <HomeSmile/>,
+    <ReceiptCheck/>,
+    <LogOut01/>,
+    <Lock011/>,
+    <CheckDone01/>,
+    <CurrencyBitcoinCircle/>,
+    <Calendar/>,
+    <ShoppingCart01/>,
+    <ShoppingBag03/>,
+    <Mail03/>,
+    <XSquare1/>,
+    <Lock011/>,
+    <XSquare/>,
+    <File01/>,
+    <Building04/>,
+    <LayoutAlt02/>,
+    <CreditCard01/>,
+    <Users03/>,
+    <Share07/>,
+    <GraduationHat01/>,
+    <File04/>,
+    <Mail04/>]
+
+const Page = () => {
+    return (
+        <>
+            <Stack direction='row'
+                   gap={1}>
+                {ICONS.map((icon, idx) => {
+                    return <Tooltip title={icon}>
+                        <SvgIcon key={idx}
+                                 fontSize='large'>
+                            {cloneElement(icon, {
+                                color: 'red',
+                                fill: 'blue'
+                            })}
+                        </SvgIcon>
+                    </Tooltip>
+                })}
+            </Stack>
+        </>
+    )
+
+
+// users-03.js
+// share-07.js
+// graduation-hat-01.js
+// file-04.js
+// mail-04.js
+}
+
+Page.getLayout = (page) => (
+    <AppLayout>
+        {page}
+    </AppLayout>
+);
+
+export default Page;