summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/details.jade12
-rw-r--r--client/components/cards/labels.jade20
-rw-r--r--client/components/cards/labels.js100
-rw-r--r--client/components/cards/labels.styl10
4 files changed, 80 insertions, 62 deletions
diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade
index f8e99d77..877acd9a 100644
--- a/client/components/cards/details.jade
+++ b/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
diff --git a/client/components/cards/labels.jade b/client/components/cards/labels.jade
index acd1b5ae..5089f90a 100644
--- a/client/components/cards/labels.jade
+++ b/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
- span.card-label.card-label--selectable.palette-color.js-palette-color(class="card-label-{{color}}")
- if($eq color ../color)
+ .palette-colors: each labels
+ span.card-label.palette-color.js-palette-color(class="card-label-{{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'}}
diff --git a/client/components/cards/labels.js b/client/components/cards/labels.js
index 36a35f82..731e6367 100644
--- a/client/components/cards/labels.js
+++ b/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 selectLabel = Blaze.getData(selectLabelDom);
+ var color = Blaze.getData(tpl.find('.fa-check')).color;
+
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 selectLabel = Blaze.getData(selectLabelDom);
- var $set = {};
+ var color = Blaze.getData(tpl.find('.fa-check')).color;
- // set label index
+ var $set = {};
$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: '' };
- });
- }
-});
diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl
index cbe4d2b3..0d731e33 100644
--- a/client/components/cards/labels.styl
+++ b/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