feat: generate color entries dynamically

Closes #12
bpmn-io · Dec 9, 2022 · d5701f2 · d5701f2
1 parent cf52aaf
commit d5701f2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 47 deletions.
diff --git a/colors/ColorPopupProvider.js b/colors/ColorPopupProvider.js
@@ -1,3 +1,7 @@
+import {
+  domify
+} from 'min-dom';
+
 const COLORS = [ {
   label: 'Default',
   fill: undefined,
@@ -47,12 +51,21 @@ ColorPopupProvider.$inject = [
 ColorPopupProvider.prototype.getEntries = function(elements) {
   var self = this;
 
+  var colorIcon = domify(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
+      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)"></rect>
+    </svg>
+  `);
+
   var entries = this._colors.map(function(color) {
 
+    colorIcon.style.setProperty('--fill-color', color.fill || 'white');
+    colorIcon.style.setProperty('--stroke-color', color.stroke || 'rgb(34, 36, 42)');
+
     return {
       title: self._translate(color.label),
       id: color.label.toLowerCase() + '-color',
-      className: 'color-icon-' + color.label.toLowerCase(),
+      imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,
       action: createAction(self._modeling, elements, color)
     };
   });

diff --git a/colors/color-picker.css b/colors/color-picker.css
@@ -5,49 +5,3 @@
   background-color: rgba(255, 255, 255, 0.6);
   box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.6);
 }
-
-/* color popup menu */
-[class^="color-icon-"]:before,
-[class*=" color-icon-"]:before {
-  display: inline-block;
-  content: '';
-  width: 1.5em;
-  height: 0.6em;
-  border-radius: 0.1em;
-  border: 0.03em solid black;
-}
-
-.color-icon-clear:before {
-  background-color: white;
-  border-color: black;
-}
-
-.color-icon-blue:before {
-  background-color: #BBDEFB;
-  border-color: #1E88E5;
-}
-
-.color-icon-orange:before {
-  background-color: #FFE0B2;
-  border-color: #FB8C00;
-}
-
-.color-icon-green:before {
-  background-color: #C8E6C9;
-  border-color: #43A047;
-}
-
-.color-icon-red:before {
-  background-color: #FFCDD2;
-  border-color: #FB8C00;
-}
-
-.color-icon-purple:before {
-  background-color: #E1BEE7;
-  border-color: #8E24AA;
-}
-
-/* transparancy for shapes with colors */
-.color-transparancy {
-  fill-opacity: 0.50;
-}