feat: improve icon display

+ consistent prefix `cl` of variables Closes #69
camunda · Jul 21, 2023 · 8e45f69 · 8e45f69
1 parent 6f092b8
commit 8e45f69
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 55 deletions.
diff --git a/assets/linting.css b/assets/linting.css
@@ -1,34 +1,34 @@
 :root {
-  --color-grey-225-10-15: hsl(225, 10%, 15%);
+  --cl-color-white: hsl(0, 0%, 100%);
 
-  --color-red-360-100-45: hsl(360, 100%, 45%);
-
-  --color-white: hsl(0, 0%, 100%);
-
-  --color-yellow-47-88-53: hsl(47, 88%, 53%);
-
-  --linting-annotation-error-background-color: var(--color-red-360-100-45);
-  --linting-annotation-error-fill-color: var(--color-white);
-
-  --linting-annotation-warning-background-color: var(--color-yellow-47-88-53);
-  --linting-annotation-warning-fill-color: var(--color-white);
-  --linting-annotation-warning-stroke-color: var(--color-grey-225-10-15);
+  --cl-color-info: #0f62fe;
+  --cl-color-warning: #ff832b;
+  --cl-color-error: #da1e26;
+  --cl-color-success: #52b415;
 }
 
-.bjs-linting-annotation {
+.cl-icon {
+  --icon-color: white;
+  --icon-bg-color: #333;
+  background: var(--icon-bg-color);
+  color: var(--icon-color);
+  border-radius: 100%;
+  height: .75em;
+  width: .75em;
+  border: solid 4px var(--icon-bg-color);
   display: flex;
-  flex-direction: row;
   align-items: center;
-  padding: 2px;
-  border-radius: 2px;
-  cursor: default;
-  z-index: 100000;
+  justify-content: center;
+}
+
+.cl-icon-error {
+  --icon-bg-color: var(--cl-color-error);
 }
 
-.bjs-linting-annotation--error {
-  background-color: var(--linting-annotation-error-background-color);
+.cl-icon-warn {
+  --icon-bg-color: var(--cl-color-warning);
 }
 
-.bjs-linting-annotation--warning {
-  background-color: var(--linting-annotation-warning-background-color);
+.cl-icon-info {
+  --icon-bg-color: var(--cl-color-info);
 }
diff --git a/lib/Linter.js b/lib/Linter.js
@@ -1,3 +1,5 @@
+/* global require */
+
 import BpmnModdle from 'bpmn-moddle';
 
 import { Linter as BpmnLinter } from 'bpmnlint';

diff --git a/lib/modeler/LintingAnnotations.js b/lib/modeler/LintingAnnotations.js
@@ -3,6 +3,7 @@ import { groupBy } from 'min-dash';
 import { domify } from 'min-dom';
 
 import { renderOverlay } from './OverlayComponent';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
 
 
 export default class LintingAnnotations {
@@ -38,7 +39,7 @@ export default class LintingAnnotations {
       }
 
       const html = domify(`
-        <div class="bjs-linting-annotation"></div>
+        <div class="cl-overlay-root"></div>
       `);
 
       renderOverlay(html, {
@@ -48,11 +49,10 @@ export default class LintingAnnotations {
         }
       });
 
+      const position = getAnnotationPosition(element);
+
       const overlayId = this._overlays.add(element, 'linting', {
-        position: {
-          bottom: -5,
-          left: 0
-        },
+        position,
         html,
         show: {
           minZoom: 0.5
@@ -69,4 +69,28 @@ LintingAnnotations.$inject = [
   'elementRegistry',
   'eventBus',
   'overlays'
-];
+];
+
+
+function getAnnotationPosition(element) {
+
+  if (!element.parent) {
+
+    if (is(element, 'bpmn:SubProcess')) {
+      return {
+        top: 50,
+        left: 150
+      };
+    }
+
+    return {
+      top: 20,
+      left: 150
+    };
+  }
+
+  return {
+    bottom: 13,
+    left: -6
+  };
+}
diff --git a/lib/modeler/OverlayComponent.js b/lib/modeler/OverlayComponent.js
@@ -6,40 +6,53 @@ import {
 import classNames from 'clsx';
 
 const errorSvg = html`
-  <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7Zm2.7 10.5L8 8.8l-2.7 2.7-.8-.8L7.2 8 4.5 5.3l.8-.8L8 7.2l2.7-2.7.8.8L8.8 8l2.7 2.7-.8.8Z" fill="var(--linting-annotation-error-fill-color, white)"/>
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14S23.7,2,16,2z M21.4,23L16,17.6L10.6,23L9,21.4l5.4-5.4L9,10.6L10.6,9
+    l5.4,5.4L21.4,9l1.6,1.6L17.6,16l5.4,5.4L21.4,23z" fill="currentColor" />
+</svg>
 `;
 
 const warningSvg = html`
-<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 3H4v10h8V3Z" fill="var(--linting-annotation-warning-stroke-color, black)"/>
-  <path d="M8 1C4.15 1 1 4.15 1 8s3.15 7 7 7 7-3.15 7-7-3.15-7-7-7Zm-.55 3h1.1v5.5h-1.1V4ZM8 12.5c-.4 0-.75-.35-.75-.75S7.6 11 8 11s.75.35.75.75-.35.75-.75.75Z" fill="var(--linting-annotation-warning-fill-color, white)"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<path d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25
+  c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z" fill="currentColor" />
+</svg>
+`;
+
+const infoSvg = html`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z" fill="currentColor" />
 </svg>
 `;
 
+const icons = {
+  error: errorSvg,
+  warn: warningSvg,
+  info: infoSvg
+};
+
 export function OverlayComponent(props) {
 
   const {
     onClick = () => {},
     reports
   } = props;
 
-
-  const hasErrors = reports.find(({ category }) => category === 'error');
+  const category =
+    reports.find(({ category }) => category === 'error')
+      ? 'error'
+      : reports.find(({ category }) => category === 'warn')
+        ? 'warn'
+        : 'info';
 
   return html`
-  <div
-    class=${ classNames(
-      'icon',
-      hasErrors
-        ? 'bjs-linting-annotation--error'
-        : 'bjs-linting-annotation--warning'
-    ) }
-    onClick=${ onClick }
-  >
-    ${ hasErrors ? errorSvg : warningSvg }
-  </div>
+    <div
+      class=${ classNames('cl-icon',`cl-icon-${category}`) }
+      onClick=${ onClick }
+      title="Click to show issue"
+    >
+      ${ icons[category] }
+    </div>
   `;
 }
 

diff --git a/test/spec/modeler/LintingAnnotations.spec.js b/test/spec/modeler/LintingAnnotations.spec.js
@@ -4,6 +4,8 @@ import {
   insertCSS
 } from 'bpmn-js/test/helper';
 
+import { query as domQuery } from 'min-dom';
+
 import sinon from 'sinon';
 
 import lintingModule from '../../../modeler';
@@ -20,7 +22,8 @@ insertCSS('bpmn-js.css', bpmnCSS);
 insertCSS('bpmn-embedded.css', bpmnFont);
 insertCSS('linting.css', lintingCSS);
 
-describe('LintingAnnotations', function() {
+
+describe('modeler - LintingAnnotations', function() {
 
   beforeEach(bootstrapModeler(diagramXML, {
     additionalModules: [
@@ -57,12 +60,12 @@ describe('LintingAnnotations', function() {
     const serviceTaskOverlays = overlays.get({ element: serviceTask });
 
     expect(serviceTaskOverlays).to.have.length(1);
-    expect(serviceTaskOverlays[ 0 ].html.classList.contains('bjs-linting-annotation--warning')).to.be.true;
+    expect(domQuery('.cl-icon-warning', serviceTaskOverlays[ 0 ].html)).to.exist;
 
     const startEventOverlays = overlays.get({ element: startEvent });
 
     expect(startEventOverlays).to.have.length(1);
-    expect(startEventOverlays[ 0 ].html.classList.contains('bjs-linting-annotation--error')).to.be.true;
+    expect(domQuery('.cl-icon-error', startEventOverlays[ 0 ].html)).to.exist;
   }));
 
 
@@ -111,15 +114,19 @@ describe('LintingAnnotations', function() {
 
       lintingAnnotations.setErrors(reports);
 
-      const lintingAnnotationsClickSpy = sinon.spy();
+      const clickSpy = sinon.spy();
 
-      eventBus.on('lintingAnnotations.click', lintingAnnotationsClickSpy);
+      eventBus.on('lintingAnnotations.click', clickSpy);
 
       // when
-      overlays.get({ type: 'linting' })[ 0 ].html.click();
+      const overlay = overlays.get({ type: 'linting' })[ 0 ];
+
+      const icon = domQuery('.cl-icon', overlay.html);
+
+      icon.click();
 
       // then
-      expect(lintingAnnotationsClickSpy).to.have.been.calledOnce;
+      expect(clickSpy).to.have.been.calledOnce;
     }
   ));