diff options
| -rw-r--r-- | client/components/cards/details.jade | 12 | ||||
| -rw-r--r-- | client/components/cards/labels.jade | 20 | ||||
| -rw-r--r-- | client/components/cards/labels.js | 100 | ||||
| -rw-r--r-- | client/components/cards/labels.styl | 10 |
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 |