From d0a9d8c581f9356f5e72ccb698fc3963c59e96cd Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 15:56:40 +0100 Subject: colors: add per list color Hamburger menu only. Note that I am definitively not responsible for the resulting Christmas tree. fixes #328 --- client/components/lists/list.styl | 81 +++++++++++++++++++++++++++++++++ client/components/lists/listHeader.jade | 15 +++++- client/components/lists/listHeader.js | 37 +++++++++++++++ 3 files changed, 132 insertions(+), 1 deletion(-) (limited to 'client/components/lists') 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 @@ -49,6 +50,9 @@ template(name="listActionPopup") li: a.js-toggle-watch-list {{#if isWatching}}{{_ 'unwatch'}}{{else}}{{_ 'watch'}}{{/if}} 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'}} @@ -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'); -- cgit v1.2.3-1-g7c22