summaryrefslogtreecommitdiffstats
path: root/client
diff options
context:
space:
mode:
authorBenjamin Tissoires <benjamin.tissoires@redhat.com>2019-01-25 15:56:40 +0100
committerBenjamin Tissoires <benjamin.tissoires@redhat.com>2019-01-25 15:56:40 +0100
commitd0a9d8c581f9356f5e72ccb698fc3963c59e96cd (patch)
tree71acc37690c94fd446411fcdbfb3ac72c2c4878a /client
parent78c779faafad2010842bfccca9ef5c483530c892 (diff)
downloadwekan-d0a9d8c581f9356f5e72ccb698fc3963c59e96cd.tar.gz
wekan-d0a9d8c581f9356f5e72ccb698fc3963c59e96cd.tar.bz2
wekan-d0a9d8c581f9356f5e72ccb698fc3963c59e96cd.zip
colors: add per list color
Hamburger menu only. Note that I am definitively not responsible for the resulting Christmas tree. fixes #328
Diffstat (limited to 'client')
-rw-r--r--client/components/lists/list.styl81
-rw-r--r--client/components/lists/listHeader.jade15
-rw-r--r--client/components/lists/listHeader.js37
3 files changed, 132 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');