feat(client): add setColor button to toolbar

Related to #866

client/src/app/App.js

@@ -17,7 +17,6 @@ import debug from 'debug';
 import {
   Button,
   DropdownButton,
-  MultiButton,
   TabLinks,
   TabContainer,
   Tab
@@ -639,7 +638,7 @@ export class App extends Component {
 
           <Toolbar />
 
-          <Fill name="buttons" group="general">
+          <Fill name="toolbar" group="general">
             <DropdownButton
               text="File"
               items={ [
@@ -666,7 +665,7 @@ export class App extends Component {
             </Button>
           </Fill>
 
-          <Fill name="buttons" group="navigation">
+          <Fill name="toolbar" group="navigation">
             <Button onClick={ this.composeAction('select-tab', 'previous') }>&laquo;</Button>
             <Button onClick={ this.composeAction('select-tab', 'next') }>&raquo;</Button>
           </Fill>

client/src/app/Toolbar.js

@@ -10,7 +10,7 @@ export default class Toolbar extends Component {
   render() {
     return (
       <div className={ ToolbarContainer }>
-        <Slot name="buttons" group={ groupButtons } separator={ (key) => <Separator key={ key } /> } />
+        <Slot name="toolbar" group={ groupButtons } separator={ (key) => <Separator key={ key } /> } />
       </div>
     );
   }

client/src/app/primitives/DropdownButton.js

@@ -45,17 +45,28 @@ export default class DropdownButton extends Component {
   }
 
   onItemClick = item => {
-    return () => {
+    if (typeof item.onClick === 'function') {
+      item.onClick();
+    }
+  }
 
-      if (typeof item.onClick === 'function') {
-        item.onClick();
-      }
+  onDropdownClick = () => {
+    const {
+      closeOnClick
+    } = this.props;
 
+    if (closeOnClick !== false) {
       this.close();
-    };
+    }
   }
 
   toggle = () => {
+    const { disabled } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
     const { active } = this.state;
 
     this.setState({
@@ -81,7 +92,10 @@ export default class DropdownButton extends Component {
                 <li
                   key={ index }
                   className="item"
-                  onClick={ this.onItemClick(item) }>
+                  onClick={ () => {
+                    this.onItemClick(item);
+                    this.onDropdownClick();
+                  } }>
                   { item.text }
                 </li>
               );
@@ -91,7 +105,10 @@ export default class DropdownButton extends Component {
       );
     } else {
       return (
-        <div className="dropdown">
+        <div
+          className="dropdown"
+          onClick={ this.onDropdownClick }
+          >
           { this.props.children }
         </div>
       );

client/src/app/primitives/__tests__/DropdownButtonSpec.js

@@ -47,30 +47,46 @@ describe('DropdownButton', function() {
   });
 
 
+  it('should NOT open dropdown if disabled', function() {
+
+    // given
+    const wrapper = shallow(<DropdownButton disabled={ true } />);
+
+    // when
+    wrapper.find('button').simulate('click');
+
+    // then
+    expect(wrapper.exists('.dropdown')).to.be.false;
+  });
 
-  describe('close', function() {
 
-    let wrapper;
 
-    beforeEach(function() {
+  describe('close', function() {
+
+    function openDropdown(props) {
 
       const items = [{
         text: 'foo'
       }, {
         text: 'bar'
       }];
 
-      wrapper = shallow(<DropdownButton items={ items } />);
+      const wrapper = shallow(<DropdownButton items={ items } { ...props } />);
 
       // open dropdown
       wrapper.setState({
         active: true
       });
-    });
+
+      return wrapper;
+    }
 
 
     it('should close dropdown on item click', function() {
 
+      // given
+      const wrapper = openDropdown();
+
       // when
       const item = wrapper.find('.item').first();
 
@@ -84,13 +100,33 @@ describe('DropdownButton', function() {
     // TODO(philippfromme): fix
     it.skip('should close dropdown on global click', function() {
 
+      // given
+      const wrapper = openDropdown();
+
       // when
       document.body.click();
 
       // then
       expect(wrapper.state().active).to.be.false;
     });
 
+
+    it('should NOT close on click if specified', function() {
+
+      // given
+      const wrapper = openDropdown({
+        closeOnClick: false
+      });
+
+      // when
+      const item = wrapper.find('.item').first();
+
+      item.simulate('click');
+
+      // then
+      expect(wrapper.state().active).to.be.true;
+    });
+
   });
 
 

client/src/app/slot-fill/Slot.js

@@ -10,12 +10,12 @@ import SlotContext from './SlotContext';
  *
  * <!-- default slot, shows fills in registration order -->
  *
- * <Slot name="buttons" />
+ * <Slot name="toolbar" />
  *
  * <!-- slot with custom grouping and separators -->
  *
  * <Slot
- *   name="buttons"
+ *   name="toolbar"
  *   group={ (fills) => [ fills ] }
  *   separator={ () => <hr /> }
  * />

client/src/app/tabs/MultiSheetTab.js

@@ -181,8 +181,6 @@ class MultiSheetTab extends CachedComponent {
 
     const Editor = activeSheet.provider.editor;
 
-    console.log('%cMultiSheetTab#render', 'background: #52B415; color: white; padding: 2px 4px');
-
     return (
       <div className={ css.MultiSheetTab }>
         <TabContainer className="content tab">

client/src/app/tabs/bpmn/BpmnEditor.js

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { Fill } from '../../slot-fill';
 
-import { Button } from '../../primitives';
+import {
+  Button,
+  DropdownButton
+} from '../../primitives';
 
 import {
   WithCache,
@@ -22,6 +25,32 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 
 import css from './BpmnEditor.less';
 
+const COLORS = [{
+  title: 'White',
+  fill: 'white',
+  stroke: 'black'
+}, {
+  title: 'Blue',
+  fill: 'rgb(187, 222, 251)',
+  stroke: 'rgb(30, 136, 229)'
+}, {
+  title: 'Orange',
+  fill: 'rgb(255, 224, 178)',
+  stroke: 'rgb(251, 140, 0)'
+}, {
+  title: 'Green',
+  fill: 'rgb(200, 230, 201)',
+  stroke: 'rgb(67, 160, 71)'
+}, {
+  title: 'Red',
+  fill: 'rgb(255, 205, 210)',
+  stroke: 'rgb(229, 57, 53)'
+}, {
+  title: 'Purple',
+  fill: 'rgb(225, 190, 231)',
+  stroke: 'rgb(142, 36, 170)'
+}];
+
 
 export class BpmnEditor extends CachedComponent {
 
@@ -125,10 +154,13 @@ export class BpmnEditor extends CachedComponent {
     const commandStack = modeler.get('commandStack');
     const selection = modeler.get('selection');
 
+    const selectionLength = selection.get().length;
+
     this.setState({
       undo: commandStack.canUndo(),
       redo: commandStack.canRedo(),
-      align: selection.get().length > 1
+      align: selectionLength > 1,
+      setColor: selectionLength
     });
   }
 
@@ -168,12 +200,12 @@ export class BpmnEditor extends CachedComponent {
     });
   }
 
-  handleTriggerEditorAction = (event, context) => {
+  handleTriggerEditorAction = (editorAction, context) => {
     const {
       modeler
     } = this.getCached();
 
-    modeler.get('editorActions').trigger(context.editorAction);
+    modeler.get('editorActions').trigger(editorAction, context);
   }
 
   saveDiagram = () => {
@@ -186,29 +218,53 @@ export class BpmnEditor extends CachedComponent {
     });
   }
 
-  handleSetColor = (event, context) => {
-    const {
-      modeler
-    } = this.getCached();
-
-    const selection = modeler.get('selection').get();
-
-    if (!selection.length) {
-      return;
-    }
-
-    modeler.get('modeling').setColor(selection, context);
+  handleSetColor = (fill, stroke) => {
+    this.handleTriggerEditorAction('setColor', {
+      fill,
+      stroke
+    });
   }
 
   render() {
     return (
       <div className={ css.BpmnEditor }>
 
-        <Fill name="buttons">
+        <Fill name="toolbar" group="general">
+          <Button onClick={ this.saveDiagram }>Save Diagram</Button>
+        </Fill>
+
+        <Fill name="toolbar" group="commandstack">
           <Button disabled={ !this.state.undo } onClick={ this.undo }>Undo</Button>
           <Button disabled={ !this.state.redo } onClick={ this.redo }>Redo</Button>
+        </Fill>
+
+        <Fill name="toolbar" group="image-export">
+          <Button onClick={ () => console.log('Export Image') }>Export Image</Button>
+        </Fill>
+
+        <Fill name="toolbar" group="color">
+          <DropdownButton
+            disabled={ !this.state.setColor }
+            text="Set Color">
+            {
+              COLORS.map((color, index) => {
+                const { fill, stroke, title } = color;
+
+                return (
+                  <Color
+                    fill={ fill }
+                    key={ index }
+                    stroke={ stroke }
+                    title={ title }
+                    onClick={ () => this.handleSetColor(fill, stroke) } />
+                );
+              })
+            }
+          </DropdownButton>
+        </Fill>
+
+        <Fill name="toolbar" group="align">
           <Button disabled={ !this.state.align } onClick={ () => this.align('left') }>Align Left</Button>
-          <Button onClick={ this.saveDiagram }>Save Diagram</Button>
         </Fill>
 
         <div className="diagram" ref={ this.ref }></div>
@@ -241,4 +297,28 @@ export class BpmnEditor extends CachedComponent {
 }
 
 
-export default WithCache(WithCachedState(BpmnEditor));
+export default WithCache(WithCachedState(BpmnEditor));
+
+class Color extends Component {
+  render() {
+    const {
+      fill,
+      onClick,
+      stroke,
+      title,
+      ...rest
+    } = this.props;
+
+    return (
+      <div
+        className={ css.Color }
+        onClick={ onClick }
+        style={ {
+          backgroundColor: fill,
+          borderColor: stroke
+        } }
+        title={ title }
+        { ...rest }></div>
+    );
+  }
+}

client/src/app/tabs/bpmn/BpmnEditor.less

@@ -74,4 +74,11 @@
     }
   }
 
+}
+
+:local(.Color) {
+  border: solid 1px #444;
+  margin: 4px;
+  width: 64px;
+  height: 16px;
 }