1 files changed, 49 insertions, 1 deletions
diff --git a/client/components/rules/actions/cardActions.js b/client/components/rules/actions/cardActions.js
index b66556b4..6c858358 100644
--- a/client/components/rules/actions/cardActions.js
+++ b/client/components/rules/actions/cardActions.js
@@ -1,3 +1,8 @@
+let cardColors;
+Meteor.startup(() => {
+  cardColors = Cards.simpleSchema()._schema.color.allowedValues;
+});
+
 BlazeComponent.extendComponent({
   onCreated() {
     this.subscribe('allRules');
@@ -112,10 +117,22 @@ BlazeComponent.extendComponent({
           boardId,
         });
       },
+      'click .js-show-color-palette'(event){
+        const funct = Popup.open('setCardActionsColor');
+        const colorButton = this.find('#color-action');
+        if (colorButton.value === '') {
+          colorButton.value = 'green';
+        }
+        funct.call(this, event);
+      },
       'click .js-set-color-action' (event) {
         const ruleName = this.data().ruleName.get();
         const trigger = this.data().triggerVar.get();
-        const selectedColor = this.find('#color-action').value;
+        const colorButton = this.find('#color-action');
+        if (colorButton.value === '') {
+          colorButton.value = 'green';
+        }
+        const selectedColor = colorButton.value;
         const boardId = Session.get('currentBoard');
         const desc = Utils.getTriggerActionDesc(event, this);
         const triggerId = Triggers.insert(trigger);
@@ -136,3 +153,34 @@ BlazeComponent.extendComponent({
   },
 
 }).register('cardActions');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.currentAction = this.currentData();
+    this.colorButton = Popup.getOpenerComponent().find('#color-action');
+    this.currentColor = new ReactiveVar(this.colorButton.value);
+  },
+
+  colors() {
+    return cardColors.map((color) => ({ color, name: '' }));
+  },
+
+  isSelected(color) {
+    return this.currentColor.get() === color;
+  },
+
+  events() {
+    return [{
+      'click .js-palette-color'() {
+        this.currentColor.set(this.currentData().color);
+      },
+      'click .js-submit' () {
+        this.colorButton.classList.remove(`card-details-${ this.colorButton.value }`);
+        this.colorButton.value = this.currentColor.get();
+        this.colorButton.innerText = `${TAPi18n.__(`color-${ this.currentColor.get() }`)}`;
+        this.colorButton.classList.add(`card-details-${ this.colorButton.value }`);
+        Popup.close();
+      },
+    }];
+  },
+}).register('setCardActionsColorPopup');