fix(palette): correct separator spacing

bpmn-io · Mar 27, 2022 · f697584 · f697584
1 parent 6477c34
commit f697584
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/assets/diagram-js.css b/assets/diagram-js.css
@@ -385,7 +385,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-palette .separator {
-  margin: 0 5px;
+  margin: 5px;
   padding-top: 5px;
 
   border: none;
@@ -395,7 +395,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-palette .entry:before {
-  vertical-align: text-bottom;
+  vertical-align: initial;
 }
 
 .djs-palette .djs-palette-toggle {

diff --git a/test/spec/features/palette/PaletteSpec.js b/test/spec/features/palette/PaletteSpec.js
@@ -137,6 +137,13 @@ describe('features/palette', function() {
 
     it('should add palette entries', inject(function(canvas, palette) {
 
+      var img =
+        '<svg width="46" height="46" viewBox="-2 -2 9.82 9.82" xmlns="http://www.w3.org/2000/svg">' +
+          '<path d="m1.86 5.12-.72-.53 1.17-1.5c-.61-.16-1.22-.32-1.83-.5l.28-.85 1.78.65L2.46.5h.9l-.08 1.9 1.78-.66.28.86-1.83.5 1.17 1.49-.72.53-1.05-1.58-1.05 1.58Z" />' +
+        '</svg>';
+
+      var imgUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(img);
+
       // given
       var entries = {
         'entryA': {
@@ -146,9 +153,35 @@ describe('features/palette', function() {
             console.log('click entryA', arguments);
           }
         },
+        'entryA2': {
+          alt: 'A2',
+          className: 'FOO',
+          action: function() {
+            console.log('click entryA2', arguments);
+          }
+        },
+        'separator1': {
+          separator: true
+        },
+        'entryB': {
+          alt: 'B',
+          imageUrl: imgUrl,
+          action: {
+            click: function() {
+              console.log('click entryB');
+            },
+            dragstart: function(event) {
+              console.log('dragstart entryB');
+              event.preventDefault();
+            }
+          }
+        },
+        'separator2': {
+          separator: true
+        },
         'entryB': {
           alt: 'B',
-          imageUrl: 'http://placehold.it/40x40',
+          imageUrl: imgUrl,
           action: {
             click: function() {
               console.log('click entryB');
@@ -158,6 +191,15 @@ describe('features/palette', function() {
               event.preventDefault();
             }
           }
+        },
+        'entryC': {
+          alt: 'C',
+          imageUrl: imgUrl,
+          action: {
+            click: function() {
+              console.log('click entryB');
+            }
+          }
         }
       };