summaryrefslogtreecommitdiffstats
path: root/client/components/swimlanes
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/swimlanes')
-rw-r--r--client/components/swimlanes/swimlaneHeader.jade23
-rw-r--r--client/components/swimlanes/swimlaneHeader.js74
-rw-r--r--client/components/swimlanes/swimlanes.jade48
-rw-r--r--client/components/swimlanes/swimlanes.js42
-rw-r--r--client/components/swimlanes/swimlanes.styl103
5 files changed, 200 insertions, 90 deletions
diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade
index 483de06f..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
@@ -8,6 +8,7 @@ template(name="swimlaneHeader")
= title
.swimlane-header-menu
unless currentUser.isCommentOnly
+ a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon
a.fa.fa-navicon.js-open-swimlane-menu
template(name="editSwimlaneTitleForm")
@@ -20,4 +21,24 @@ 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")
+ unless currentUser.isCommentOnly
+ form
+ input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
+ 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 50635f86..1004cb25 100644
--- a/client/components/swimlanes/swimlaneHeader.js
+++ b/client/components/swimlanes/swimlaneHeader.js
@@ -1,3 +1,10 @@
+const { calculateIndexData } = Utils;
+
+let swimlaneColors;
+Meteor.startup(() => {
+ swimlaneColors = Swimlanes.simpleSchema()._schema.color.allowedValues;
+});
+
BlazeComponent.extendComponent({
editTitle(evt) {
evt.preventDefault();
@@ -11,15 +18,82 @@ BlazeComponent.extendComponent({
events() {
return [{
'click .js-open-swimlane-menu': Popup.open('swimlaneAction'),
+ 'click .js-open-add-swimlane-menu': Popup.open('swimlaneAdd'),
submit: this.editTitle,
}];
},
}).register('swimlaneHeader');
Template.swimlaneActionPopup.events({
+ 'click .js-set-swimlane-color': Popup.open('setSwimlaneColor'),
'click .js-close-swimlane' (evt) {
evt.preventDefault();
this.archive();
Popup.close();
},
});
+
+BlazeComponent.extendComponent({
+ onCreated() {
+ this.currentSwimlane = this.currentData();
+ },
+
+ events() {
+ return [{
+ submit(evt) {
+ evt.preventDefault();
+ const currentBoard = Boards.findOne(Session.get('currentBoard'));
+ const nextSwimlane = currentBoard.nextSwimlane(this.currentSwimlane);
+ const titleInput = this.find('.swimlane-name-input');
+ const title = titleInput.value.trim();
+ const sortValue = calculateIndexData(this.currentSwimlane, nextSwimlane, 1);
+
+ if (title) {
+ Swimlanes.insert({
+ title,
+ boardId: Session.get('currentBoard'),
+ sort: sortValue.base,
+ });
+
+ titleInput.value = '';
+ titleInput.focus();
+ }
+ // XXX ideally, we should move the popup to the newly
+ // created swimlane so a user can add more than one swimlane
+ // with a minimum of interactions
+ Popup.close();
+ },
+ }];
+ },
+}).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.jade b/client/components/swimlanes/swimlanes.jade
index 76f54c66..cd864a7c 100644
--- a/client/components/swimlanes/swimlanes.jade
+++ b/client/components/swimlanes/swimlanes.jade
@@ -1,21 +1,22 @@
template(name="swimlane")
.swimlane.js-lists.js-swimlane
+swimlaneHeader
- if isMiniScreen
- if currentList
- +list(currentList)
+ .swimlane.list-group.js-lists
+ if isMiniScreen
+ if currentList
+ +list(currentList)
+ else
+ each currentBoard.lists
+ +miniList(this)
+ if currentUser.isBoardMember
+ +addListForm
else
each currentBoard.lists
- +miniList(this)
+ +list(this)
+ if currentCardIsInThisList _id ../_id
+ +cardDetails(currentCard)
if currentUser.isBoardMember
+addListForm
- else
- each currentBoard.lists
- +list(this)
- if currentCardIsInThisList _id ../_id
- +cardDetails(currentCard)
- if currentUser.isBoardMember
- +addListAndSwimlaneForm
template(name="listsGroup")
.swimlane.list-group.js-lists
@@ -35,31 +36,6 @@ template(name="listsGroup")
if currentUser.isBoardMember
+addListForm
-template(name="addListAndSwimlaneForm")
- .list.list-composer.js-list-composer
- .list-header
- +inlinedForm(autoclose=false)
- input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
- autocomplete="off" autofocus)
- .edit-controls.clearfix
- button.primary.confirm(type="submit") {{_ 'save'}}
- a.fa.fa-times-thin.js-close-inlined-form
- else
- a.open-list-composer.js-open-inlined-form
- i.fa.fa-plus
- | {{_ 'add-list'}}
- .list-header
- +inlinedForm(autoclose=false)
- input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
- autocomplete="off" autofocus)
- .edit-controls.clearfix
- button.primary.confirm(type="submit") {{_ 'save'}}
- a.fa.fa-times-thin.js-close-inlined-form
- else
- a.open-list-composer.js-open-inlined-form
- i.fa.fa-plus
- | {{_ 'add-swimlane'}}
-
template(name="addListForm")
.list.list-composer.js-list-composer
.list-header
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index 865895a9..71317714 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@@ -175,48 +175,6 @@ BlazeComponent.extendComponent({
},
}).register('addListForm');
-BlazeComponent.extendComponent({
- // Proxy
- open() {
- this.childComponents('inlinedForm')[0].open();
- },
-
- events() {
- return [{
- submit(evt) {
- evt.preventDefault();
- let titleInput = this.find('.list-name-input');
- if (titleInput) {
- const title = titleInput.value.trim();
- if (title) {
- Lists.insert({
- title,
- boardId: Session.get('currentBoard'),
- sort: $('.list').length,
- });
-
- titleInput.value = '';
- titleInput.focus();
- }
- } else {
- titleInput = this.find('.swimlane-name-input');
- const title = titleInput.value.trim();
- if (title) {
- Swimlanes.insert({
- title,
- boardId: Session.get('currentBoard'),
- sort: $('.swimlane').length,
- });
-
- titleInput.value = '';
- titleInput.focus();
- }
- }
- },
- }];
- },
-}).register('addListAndSwimlaneForm');
-
Template.swimlane.helpers({
canSeeAddList() {
return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index abcc90d4..e4e2cd3b 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -5,7 +5,7 @@
// transparent, because that won't work during a swimlane drag.
background: darken(white, 13%)
display: flex
- flex-direction: row
+ flex-direction: column
overflow: 0;
max-height: 100%
@@ -27,20 +27,15 @@
.swimlane-header-wrap
display: flex;
flex-direction: row;
- flex: 0 0 50px;
- padding-bottom: 30px;
- border-bottom: 1px solid #CCC
+ flex: 0 0 24px;
+ background-color: #ccc;
.swimlane-header
- -ms-writing-mode: tb-rl;
- writing-mode: vertical-rl;
- transform: rotate(180deg);
font-size: 14px;
- line-height: 50px;
- margin-top: 50px;
+ padding: 5px 5px
font-weight: bold;
min-height: 9px;
- width: 50px;
+ width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
@@ -49,7 +44,93 @@
.swimlane-header-menu
position: absolute
- padding: 20px 20px
+ padding: 5px 5px
+
+ .swimlane-header-plus-icon
+ margin-left: 5px
+ margin-right: 10px
.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
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-09-22 20:39:22 +0000