summaryrefslogtreecommitdiffstats
path: root/client/components/swimlanes
diff options
context:
space:
mode:
authorBenjamin Tissoires <benjamin.tissoires@redhat.com>2019-01-24 16:47:09 +0100
committerBenjamin Tissoires <benjamin.tissoires@redhat.com>2019-01-25 11:04:40 +0100
commit03efeaeb1abae0c8c39ad5644d44bad36f415d99 (patch)
treebe24b13d24bbcf400c26ca88923383abe6d86993 /client/components/swimlanes
parentc075187088e69d30db31489d75b22f991e1972ff (diff)
downloadwekan-03efeaeb1abae0c8c39ad5644d44bad36f415d99.tar.gz
wekan-03efeaeb1abae0c8c39ad5644d44bad36f415d99.tar.bz2
wekan-03efeaeb1abae0c8c39ad5644d44bad36f415d99.zip
Add colors to swimlanes
fixes #1688
Diffstat (limited to 'client/components/swimlanes')
-rw-r--r--client/components/swimlanes/swimlaneHeader.jade14
-rw-r--r--client/components/swimlanes/swimlaneHeader.js37
-rw-r--r--client/components/swimlanes/swimlanes.styl81
3 files changed, 131 insertions, 1 deletions
diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade
index 3e20e2d0..33eb5731 100644
--- a/client/components/swimlanes/swimlaneHeader.jade
+++ b/client/components/swimlanes/swimlaneHeader.jade
@@ -1,5 +1,5 @@
template(name="swimlaneHeader")
- .swimlane-header-wrap.js-swimlane-header
+ .swimlane-header-wrap.js-swimlane-header(class='{{#if colorClass}}swimlane-{{colorClass}}{{/if}}')
+inlinedForm
+editSwimlaneTitleForm
else
@@ -21,6 +21,9 @@ template(name="editSwimlaneTitleForm")
template(name="swimlaneActionPopup")
unless currentUser.isCommentOnly
ul.pop-over-list
+ li: a.js-set-swimlane-color {{_ 'select-color'}}
+ hr
+ ul.pop-over-list
li: a.js-close-swimlane {{_ 'archive-swimlane'}}
template(name="swimlaneAddPopup")
@@ -30,3 +33,12 @@ template(name="swimlaneAddPopup")
autocomplete="off" autofocus)
.edit-controls.clearfix
button.primary.confirm(type="submit") {{_ 'add'}}
+
+template(name="setSwimlaneColorPopup")
+ form.edit-label
+ .palette-colors: each colors
+ span.card-label.palette-color.js-palette-color(class="card-details-{{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/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js
index 632a0f50..1004cb25 100644
--- a/client/components/swimlanes/swimlaneHeader.js
+++ b/client/components/swimlanes/swimlaneHeader.js
@@ -1,5 +1,10 @@
const { calculateIndexData } = Utils;
+let swimlaneColors;
+Meteor.startup(() => {
+ swimlaneColors = Swimlanes.simpleSchema()._schema.color.allowedValues;
+});
+
BlazeComponent.extendComponent({
editTitle(evt) {
evt.preventDefault();
@@ -20,6 +25,7 @@ BlazeComponent.extendComponent({
}).register('swimlaneHeader');
Template.swimlaneActionPopup.events({
+ 'click .js-set-swimlane-color': Popup.open('setSwimlaneColor'),
'click .js-close-swimlane' (evt) {
evt.preventDefault();
this.archive();
@@ -60,3 +66,34 @@ BlazeComponent.extendComponent({
}];
},
}).register('swimlaneAddPopup');
+
+BlazeComponent.extendComponent({
+ onCreated() {
+ this.currentSwimlane = this.currentData();
+ this.currentColor = new ReactiveVar(this.currentSwimlane.color);
+ },
+
+ colors() {
+ return swimlaneColors.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.currentSwimlane.setColor(this.currentColor.get());
+ Popup.close();
+ },
+ 'click .js-remove-color'() {
+ this.currentSwimlane.setColor(null);
+ Popup.close();
+ },
+ }];
+ },
+}).register('setSwimlaneColorPopup');
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index 71089bb4..e4e2cd3b 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -53,3 +53,84 @@
.list-group
flex-direction: row
height: 100%
+
+swimlane-color(background, color...)
+ background: background !important
+ if color
+ color: color !important //overwrite text for better visibility
+
+.swimlane-white
+ swimlane-color(#ffffff, #4d4d4d) //Black text for better visibility
+ border: 1px solid #eee
+
+.swimlane-green
+ swimlane-color(#3cb500, #ffffff) //White text for better visibility
+
+.swimlane-yellow
+ swimlane-color(#fad900, #4d4d4d) //Black text for better visibility
+
+.swimlane-orange
+ swimlane-color(#ff9f19, #4d4d4d) //Black text for better visibility
+
+.swimlane-red
+ swimlane-color(#eb4646, #ffffff) //White text for better visibility
+
+.swimlane-purple
+ swimlane-color(#a632db, #ffffff) //White text for better visibility
+
+.swimlane-blue
+ swimlane-color(#0079bf, #ffffff) //White text for better visibility
+
+.swimlane-pink
+ swimlane-color(#ff78cb, #4d4d4d) //Black text for better visibility
+
+.swimlane-sky
+ swimlane-color(#00c2e0, #ffffff) //White text for better visibility
+
+.swimlane-black
+ swimlane-color(#4d4d4d, #ffffff) //White text for better visibility
+
+.swimlane-lime
+ swimlane-color(#51e898, #4d4d4d) //Black text for better visibility
+
+.swimlane-silver
+ swimlane-color(unset, #4d4d4d) //Black text for better visibility
+
+.swimlane-peachpuff
+ swimlane-color(#ffdab9, #4d4d4d) //Black text for better visibility
+
+.swimlane-crimson
+ swimlane-color(#dc143c, #ffffff) //White text for better visibility
+
+.swimlane-plum
+ swimlane-color(#dda0dd, #4d4d4d) //Black text for better visibility
+
+.swimlane-darkgreen
+ swimlane-color(#006400, #ffffff) //White text for better visibility
+
+.swimlane-slateblue
+ swimlane-color(#6a5acd, #ffffff) //White text for better visibility
+
+.swimlane-magenta
+ swimlane-color(#ff00ff, #ffffff) //White text for better visibility
+
+.swimlane-gold
+ swimlane-color(#ffd700, #4d4d4d) //Black text for better visibility
+
+.swimlane-navy
+ swimlane-color(#000080, #ffffff) //White text for better visibility
+
+.swimlane-gray
+ swimlane-color(#808080, #ffffff) //White text for better visibility
+
+.swimlane-saddlebrown
+ swimlane-color(#8b4513, #ffffff) //White text for better visibility
+
+.swimlane-paleturquoise
+ swimlane-color(#afeeee, #4d4d4d) //Black text for better visibility
+
+.swimlane-mistyrose
+ swimlane-color(#ffe4e1, #4d4d4d) //Black text for better visibility
+
+.swimlane-indigo
+ swimlane-color(#4b0082, #ffffff) //White text for better visibility