Swimlanes collapsed by default.

TODO:
- Add count.
- Move list names to top, if possible. I did not get it working yet.
- Try to fit collapse+swimlane name etc at same row.

Related #2804
reviewable/pr2834/r1
Lauri Ojansivu 6 years ago
parent a636611471
commit 26e0bbce17
  1. 31
      client/components/swimlanes/swimlanes.jade
  2. 16
      client/components/swimlanes/swimlanes.js
  3. 60
      client/components/swimlanes/swimlanes.styl

@ -1,24 +1,27 @@
template(name="swimlane")
.swimlane
+swimlaneHeader
.swimlane.js-lists.js-swimlane
if isMiniScreen
if currentListIsInThisSwimlane _id
+list(currentList)
unless currentList
// Minimize swimlanes next 2 lines below https://www.w3schools.com/howto/howto_js_accordion.asp
button(class="accordion")
div(class="panel")
.swimlane.js-lists.js-swimlane
if isMiniScreen
if currentListIsInThisSwimlane _id
+list(currentList)
unless currentList
each lists
+miniList(this)
if currentUser.isBoardMember
unless currentUser.isCommentOnly
+addListForm
else
each lists
+miniList(this)
+list(this)
if currentCardIsInThisList _id ../_id
+cardDetails(currentCard)
if currentUser.isBoardMember
unless currentUser.isCommentOnly
+addListForm
else
each lists
+list(this)
if currentCardIsInThisList _id ../_id
+cardDetails(currentCard)
if currentUser.isBoardMember
unless currentUser.isCommentOnly
+addListForm
template(name="listsGroup")
.swimlane.list-group.js-lists

@ -134,6 +134,22 @@ BlazeComponent.extendComponent({
}
initSortable(boardComponent, $listsDom);
// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
},
onCreated() {
this.draggingActive = new ReactiveVar(false);

@ -1,5 +1,39 @@
@import 'nib'
// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp
.accordion
cursor: pointer
width: 30px
height: 20px
border: none
outline: none
font-size: 18px
transition: 0.4s
padding-top: 0px
margin-top: 0px
.accordion:after
// Unicode triagle right:
content: '\25B6'
color: #777
font-weight: bold
float: left
.active:after
// Unicode triangle down:
content: '\25BC'
.panel
width: 100%
max-height: 0
overflow: hidden
transition: max-height 0.2s ease-out
margin: 0px
padding: 0px
// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
.swimlane
// Even if this background color is the same as the body we can't leave it
// transparent, because that won't work during a swimlane drag.
@ -25,22 +59,22 @@
cursor: grabbing
.swimlane-header-wrap
display: flex;
flex-direction: row;
flex: 1 0 100%;
background-color: #ccc;
display: flex
flex-direction: row
flex: 1 0 100%
background-color: #ccc
.swimlane-header
font-size: 14px;
font-size: 14px
padding: 5px 5px
font-weight: bold;
min-height: 9px;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
font-weight: bold
min-height: 9px
width: 100%
overflow: hidden
-o-text-overflow: ellipsis
text-overflow: ellipsis
word-wrap: break-word
text-align: center
.swimlane-header-menu
position: absolute

Loading…
Cancel
Save