diff options
| -rw-r--r-- | client/components/lists/list.styl | 81 | ||||
| -rw-r--r-- | client/components/lists/listHeader.jade | 15 | ||||
| -rw-r--r-- | client/components/lists/listHeader.js | 37 | ||||
| -rw-r--r-- | i18n/en.i18n.json | 2 | ||||
| -rw-r--r-- | models/lists.js | 32 |
5 files changed, 166 insertions, 1 deletions
diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index c2bfa3db..91823bdb 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -197,3 +197,84 @@ .search-card-results max-height: 250px overflow: hidden + +list-header-color(background, color...) + background: background !important + if color + color: color !important //overwrite text for better visibility + +.list-header-white + list-header-color(#ffffff, #4d4d4d) //Black text for better visibility + border: 1px solid #eee + +.list-header-green + list-header-color(#3cb500, #ffffff) //White text for better visibility + +.list-header-yellow + list-header-color(#fad900, #4d4d4d) //Black text for better visibility + +.list-header-orange + list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility + +.list-header-red + list-header-color(#eb4646, #ffffff) //White text for better visibility + +.list-header-purple + list-header-color(#a632db, #ffffff) //White text for better visibility + +.list-header-blue + list-header-color(#0079bf, #ffffff) //White text for better visibility + +.list-header-pink + list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility + +.list-header-sky + list-header-color(#00c2e0, #ffffff) //White text for better visibility + +.list-header-black + list-header-color(#4d4d4d, #ffffff) //White text for better visibility + +.list-header-lime + list-header-color(#51e898, #4d4d4d) //Black text for better visibility + +.list-header-silver + list-header-color(unset, #4d4d4d) //Black text for better visibility + +.list-header-peachpuff + list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility + +.list-header-crimson + list-header-color(#dc143c, #ffffff) //White text for better visibility + +.list-header-plum + list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility + +.list-header-darkgreen + list-header-color(#006400, #ffffff) //White text for better visibility + +.list-header-slateblue + list-header-color(#6a5acd, #ffffff) //White text for better visibility + +.list-header-magenta + list-header-color(#ff00ff, #ffffff) //White text for better visibility + +.list-header-gold + list-header-color(#ffd700, #4d4d4d) //Black text for better visibility + +.list-header-navy + list-header-color(#000080, #ffffff) //White text for better visibility + +.list-header-gray + list-header-color(#808080, #ffffff) //White text for better visibility + +.list-header-saddlebrown + list-header-color(#8b4513, #ffffff) //White text for better visibility + +.list-header-paleturquoise + list-header-color(#afeeee, #4d4d4d) //Black text for better visibility + +.list-header-mistyrose + list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility + +.list-header-indigo + list-header-color(#4b0082, #ffffff) //White text for better visibility diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 25ab8c20..48005eaf 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -1,5 +1,6 @@ template(name="listHeader") - .list-header.js-list-header + .list-header.js-list-header( + class="{{#if colorClass}}list-header-{{colorClass}}{{/if}}") +inlinedForm +editListTitleForm else @@ -50,6 +51,9 @@ template(name="listActionPopup") unless currentUser.isCommentOnly hr ul.pop-over-list + li: a.js-set-color-list {{_ 'set-color-list'}} + hr + ul.pop-over-list if cards.count li: a.js-select-cards {{_ 'list-select-cards'}} hr @@ -111,3 +115,12 @@ template(name="wipLimitErrorPopup") p {{_ 'wipLimitErrorPopup-dialog-pt1'}} p {{_ 'wipLimitErrorPopup-dialog-pt2'}} button.full.js-back-view(type="submit") {{_ 'cancel'}} + +template(name="setListColorPopup") + form.edit-label + .palette-colors: each colors + span.card-label.palette-color.js-palette-color(class="list-header-{{color}}") + if(isSelected color) + i.fa.fa-check + button.primary.confirm.js-submit {{_ 'save'}} + button.js-remove-color.negate.wide.right {{_ 'unset-color'}} diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index abcc4639..25e6cb69 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -1,3 +1,8 @@ +let listsColors; +Meteor.startup(() => { + listsColors = Lists.simpleSchema()._schema.color.allowedValues; +}); + BlazeComponent.extendComponent({ canSeeAddCard() { const list = Template.currentData(); @@ -72,6 +77,7 @@ Template.listActionPopup.helpers({ Template.listActionPopup.events({ 'click .js-list-subscribe' () {}, + 'click .js-set-color-list': Popup.open('setListColor'), 'click .js-select-cards' () { const cardIds = this.allCards().map((card) => card._id); MultiSelection.add(cardIds); @@ -154,3 +160,34 @@ Template.listMorePopup.events({ Utils.goBoardId(this.boardId); }), }); + +BlazeComponent.extendComponent({ + onCreated() { + this.currentList = this.currentData(); + this.currentColor = new ReactiveVar(this.currentList.color); + }, + + colors() { + return listsColors.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.currentList.setColor(this.currentColor.get()); + Popup.close(); + }, + 'click .js-remove-color'() { + this.currentList.setColor(null); + Popup.close(); + }, + }]; + }, +}).register('setListColorPopup'); diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 409946bb..2c2d41da 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -335,6 +335,7 @@ "list-archive-cards-pop": "This will remove all the cards in this list from the board. To view cards in Archive and bring them back to the board, click “Menu” > “Archive”.", "list-move-cards": "Move all cards in this list", "list-select-cards": "Select all cards in this list", + "set-color-list": "Set Color", "listActionPopup-title": "List Actions", "swimlaneActionPopup-title": "Swimlane Actions", "swimlaneAddPopup-title": "Add a Swimlane below", @@ -521,6 +522,7 @@ "setCardColorPopup-title": "Set color", "setCardActionsColorPopup-title": "Choose a color", "setSwimlaneColorPopup-title": "Choose a color", + "setListColorPopup-title": "Choose a color", "assigned-by": "Assigned By", "requested-by": "Requested By", "board-delete-notice": "Deleting is permanent. You will lose all lists, cards and actions associated with this board.", diff --git a/models/lists.js b/models/lists.js index 39ff130a..54e7d037 100644 --- a/models/lists.js +++ b/models/lists.js @@ -92,6 +92,21 @@ Lists.attachSchema(new SimpleSchema({ type: Boolean, defaultValue: false, }, + color: { + /** + * the color of the list + */ + type: String, + optional: true, + // silver is the default, so it is left out + allowedValues: [ + 'white', 'green', 'yellow', 'orange', 'red', 'purple', + 'blue', 'sky', 'lime', 'pink', 'black', + 'peachpuff', 'crimson', 'plum', 'darkgreen', + 'slateblue', 'magenta', 'gold', 'navy', 'gray', + 'saddlebrown', 'paleturquoise', 'mistyrose', 'indigo', + ], + }, })); Lists.allow({ @@ -148,6 +163,12 @@ Lists.helpers({ return list.wipLimit[option] ? list.wipLimit[option] : 0; // Necessary check to avoid exceptions for the case where the doc doesn't have the wipLimit field yet set } }, + + colorClass() { + if (this.color) + return this.color; + return ''; + }, }); Lists.mutations({ @@ -174,6 +195,17 @@ Lists.mutations({ setWipLimit(limit) { return { $set: { 'wipLimit.value': limit } }; }, + + setColor(newColor) { + if (newColor === 'silver') { + newColor = null; + } + return { + $set: { + color: newColor, + }, + }; + }, }); Meteor.methods({ |