Fix #199

client/components/cards/details.jade

@@ -102,18 +102,6 @@ template(name="cardMembersPopup")
           if isCardMember
             i.fa.fa-check
 
-template(name="cardLabelsPopup")
-  ul.edit-labels-pop-over
-    each board.labels
-      li
-        a.card-label-edit-button.fa.fa-pencil.js-edit-label
-        span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}"
-          class="{{# if isLabelSelected ../_id }}active{{/ if }}")
-            = name
-            if currentUser.isBoardAdmin
-              span.card-label-selectable-icon.fa.fa-check
-  a.quiet-button.full.js-add-label {{_ 'label-create'}}
-
 template(name="cardMorePopup")
   p.quiet
     span.clearfix

client/components/cards/labels.jade

@@ -1,12 +1,11 @@
 template(name="formLabel")
-  .colors
   label(for="labelName") {{_ 'name'}}
   input.js-label-name#labelName(type="text" name="name" value=name autofocus)
 
   label {{_ "select-color"}}
-  each labels
+  .palette-colors: each labels
-    span.card-label.card-label--selectable.palette-color.js-palette-color(class="card-label-{{color}}")
+    span.card-label.palette-color.js-palette-color(class="card-label-{{color}}")
-      if($eq color ../color)
+      if(isSelected color)
         i.fa.fa-check
 
 template(name="createLabelPopup")
@@ -21,7 +20,18 @@ template(name="editLabelPopup")
     button.primary.wide.left(type="submit") {{_ 'save'}}
     span.right
 
-
 template(name="deleteLabelPopup")
   p {{_ "label-delete-pop"}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="cardLabelsPopup")
+  ul.edit-labels-pop-over
+    each board.labels
+      li
+        a.card-label-edit-button.fa.fa-pencil.js-edit-label
+        span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}"
+          class="{{# if isLabelSelected ../_id }}active{{/ if }}")
+            = name
+            if currentUser.isBoardAdmin
+              span.card-label-selectable-icon.fa.fa-check
+  a.quiet-button.full.js-add-label {{_ 'label-create'}}

client/components/cards/labels.js

@@ -1,3 +1,49 @@
+
+var labelColors;
+Meteor.startup(function() {
+  labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
+});
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'formLabel';
+  },
+
+  onCreated: function() {
+    this.currentColor = new ReactiveVar(this.data().color);
+  },
+
+  labels: function() {
+    return _.map(labelColors, function(color) {
+      return { color: color, name: '' };
+    });
+  },
+
+  isSelected: function(color) {
+    return this.currentColor.get() === color;
+  },
+
+  events: function() {
+    return [{
+      'click .js-palette-color': function() {
+        this.currentColor.set(this.currentData().color);
+      }
+    }];
+  }
+}).register('formLabel');
+
+Template.createLabelPopup.helpers({
+  // This is the default color for a new label. We search the first color that
+  // is not already used in the board (although it's not a problem if two
+  // labels have the same color).
+  defaultColor: function() {
+    var labels = this.labels || this.card.board().labels;
+    var usedColors = _.pluck(labels, 'color');
+    var availableColors = _.difference(labelColors, usedColors);
+    return availableColors.length > 1 ? availableColors[0] : labelColors[0];
+  }
+});
+
 Template.cardLabelsPopup.events({
   'click .js-select-label': function(evt) {
     var cardId = Template.parentData(2).data._id;
@@ -36,17 +82,18 @@ Template.createLabelPopup.events({
   'submit .create-label': function(evt, tpl) {
     var name = tpl.$('#labelName').val().trim();
     var boardId = Session.get('currentBoard');
-    var selectLabelDom = tpl.$('.js-palette-select').get(0);
+    var color = Blaze.getData(tpl.find('.fa-check')).color;
-    var selectLabel = Blaze.getData(selectLabelDom);
+
     Boards.update(boardId, {
       $push: {
         labels: {
           _id: Random.id(6),
           name: name,
-          color: selectLabel.color
+          color: color
         }
       }
     });
+
     Popup.back();
     evt.preventDefault();
   }
@@ -62,35 +109,23 @@ Template.editLabelPopup.events({
         }
       }
     });
+
     Popup.back(2);
   }),
   'submit .edit-label': function(evt, tpl) {
+    evt.preventDefault();
     var name = tpl.$('#labelName').val().trim();
     var boardId = Session.get('currentBoard');
     var getLabel = Utils.getLabelIndex(boardId, this._id);
-    var selectLabelDom = tpl.$('.js-palette-select').get(0);
+    var color = Blaze.getData(tpl.find('.fa-check')).color;
-    var selectLabel = Blaze.getData(selectLabelDom);
+
     var $set = {};
-
-    // set label index
     $set[getLabel.key('name')] = name;
+    $set[getLabel.key('color')] = color;
 
-    // set color
-    $set[getLabel.key('color')] = selectLabel.color;
-
-    // update
     Boards.update(boardId, { $set: $set });
 
-    // return to the previous popup view trigger
     Popup.back();
-
-    evt.preventDefault();
-  },
-  'click .js-select-label': function() {
-    Cards.remove(this.cardId);
-
-    // redirect board
-    Utils.goBoardId(this.boardId);
   }
 });
 
@@ -99,28 +134,3 @@ Template.cardLabelsPopup.helpers({
     return _.contains(Cards.findOne(cardId).labelIds, this._id);
   }
 });
-
-var labelColors;
-Meteor.startup(function() {
-  labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
-});
-
-Template.createLabelPopup.helpers({
-  // This is the default color for a new label. We search the first color that
-  // is not already used in the board (although it's not a problem if two
-  // labels have the same color).
-  defaultColor: function() {
-    var labels = this.labels || this.card.board().labels;
-    var usedColors = _.pluck(labels, 'color');
-    var availableColors = _.difference(labelColors, usedColors);
-    return availableColors.length > 1 ? availableColors[0] : labelColors[0];
-  }
-});
-
-Template.formLabel.helpers({
-  labels: function() {
-    return _.map(labelColors, function(color) {
-      return { color: color, name: '' };
-    });
-  }
-});

client/components/cards/labels.styl

@@ -25,6 +25,16 @@
   &.add-label
     box-shadow: 0 0 0 2px darken(white, 25%) inset
 
+.palette-colors
+  display: flex
+  flex-wrap: wrap
+
+  .palette-color
+    flex-grow: 1
+    display: flex
+    align-items: center
+    justify-content: center
+
 .card-label-green
   background-color: #3cb500