Added icons for palette items

Altinn · Nov 23, 2023 · 7b8e4e2 · 7b8e4e2
1 parent 2d82bc5
commit 7b8e4e2
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 13 deletions.
diff --git a/frontend/packages/process-editor/img/ConfirmationTask.svg b/frontend/packages/process-editor/img/ConfirmationTask.svg
diff --git a/frontend/packages/process-editor/img/DataTask.svg b/frontend/packages/process-editor/img/DataTask.svg
diff --git a/frontend/packages/process-editor/img/FeedbackTask.svg b/frontend/packages/process-editor/img/FeedbackTask.svg
diff --git a/frontend/packages/process-editor/img/PaymentTask.svg b/frontend/packages/process-editor/img/PaymentTask.svg
diff --git a/frontend/packages/process-editor/img/SignTask.svg b/frontend/packages/process-editor/img/SignTask.svg
diff --git a/frontend/packages/process-editor/src/bpmnProviders/SupportedPaletteProvider.js b/frontend/packages/process-editor/src/bpmnProviders/SupportedPaletteProvider.js
@@ -1,9 +1,4 @@
-const supportedEntries = [
-  'create.exclusive-gateway',
-  'create.start-event',
-  'create.end-event',
-  'create.task',
-];
+const supportedEntries = ['create.exclusive-gateway', 'create.start-event', 'create.end-event'];
 
 class SupportedPaletteProvider {
   constructor(bpmnFactory, create, elementFactory, palette, translate, modeling) {
@@ -87,7 +82,7 @@ class SupportedPaletteProvider {
       const customEntries = {
         'create.altinn-data-task': {
           group: 'activity',
-          className: 'bpmn-icon-task',
+          className: 'bpmn-icon-task-generic bpmn-icon-data-task',
           title: translate('Create Altinn Data Task'),
           action: {
             dragstart: createCustomTask('data'),
@@ -96,22 +91,22 @@ class SupportedPaletteProvider {
         'create.altinn-confirmation-task': {
           group: 'activity',
           title: translate('Create Altinn Confirm Task'),
-          className: 'bpmn-icon-task',
+          className: 'bpmn-icon-task-generic bpmn-icon-confirmation-task',
           action: {
             dragstart: createCustomTask('confirmation'),
           },
         },
         'create.altinn-feedback-task': {
           group: 'activity',
           title: translate('Create Altinn Feedback Task'),
-          className: 'bpmn-icon-task',
+          className: 'bpmn-icon-task-generic bpmn-icon-feedback-task',
           action: {
             dragstart: createCustomTask('feedback'),
           },
         },
         'create.altinn-signing-task': {
           group: 'activity',
-          className: 'bpmn-icon-task',
+          className: 'bpmn-icon-task-generic bpmn-icon-signing-task',
           title: translate('Create Altinn signing Task'),
           action: {
             dragstart: createCustomSigningTask(),

diff --git a/frontend/packages/process-editor/src/components/Canvas/Canvas.module.css b/frontend/packages/process-editor/src/components/Canvas/Canvas.module.css
@@ -3,6 +3,11 @@
   box-sizing: border-box;
 }
 
+.canvasContainer {
+  height: 100vh;
+  --svg-data-task-icon: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3.4111" y="4.53186" width="18" height="15.4684" rx="2" stroke="currentColor" stroke-width="1.5"/><rect x="7.1311" y="6.96924" width="10.56" height="10.5937" rx="1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.0316 12.2661H14.7905" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M10.0316 9.50235H14.7906" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M10.367 15.0298H13.9362" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>');
+}
+
 .canvasMenuContainer {
   composes: container;
   justify-content: space-between;
@@ -15,7 +20,35 @@
   font-weight: 500;
 }
 
-.alertContainer  {
+.alertContainer {
   composes: container;
   max-width: 780px;
-}
+}
+
+div[class*='bpmn-icon-task-generic'] {
+  background-color: black;
+}
+
+div[class*='bpmn-icon-task-generic']:hover {
+  background-color: #0086e6;
+}
+
+div[class*='bpmn-icon-data-task'] {
+  -webkit-mask: url('../../../img/DataTask.svg') 0 0 /46px 46px;
+  mask: url('../../../img/DataTask.svg') 0 0 /46px 46px;
+}
+
+div[class*='bpmn-icon-confirmation-task'] {
+  -webkit-mask: url('../../../img/ConfirmationTask.svg') 0 0/46px 46px;
+  mask: url('../../../img/ConfirmationTask.svg') 0 0/46px 46px;
+}
+
+div[class*='bpmn-icon-feedback-task'] {
+  -webkit-mask: url('../../../img/FeedbackTask.svg') 0 0/46px 46px;
+  mask: url('../../../img/FeedbackTask.svg') 0 0/46px 46px;
+}
+
+div[class*='bpmn-icon-signing-task'] {
+  -webkit-mask: url('../../../img/SignTask.svg') 0 0/46px 46px;
+  mask: url('../../../img/SignTask.svg') 0 0/46px 46px;
+}
diff --git a/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx b/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx
@@ -87,7 +87,7 @@ export const Viewer = (): JSX.Element => {
 
 const Editor = (): JSX.Element => {
   const { canvasRef } = useBpmnEditor();
-  return <div ref={canvasRef}></div>;
+  return <div className={classes.canvasContainer} ref={canvasRef}></div>;
 };
 
 type CanvasActionsProps = {