Collapse Swimlane. In Progress, does not work yet, not visible yet.

Thanks to xet7 !

client/components/swimlanes/swimlaneHeader.jade

@@ -27,6 +27,15 @@ template(name="swimlaneFixedHeader")
       if currentUser.isBoardAdmin
         a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}")
       a.fa.fa-navicon.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}")
+      //// TODO: Collapse Swimlane: make button working, etc.
+      //unless collapsed
+      //  a.js-collapse-swimlane(title="{{_ 'collapse'}}")
+      //    i.fa.fa-arrow-down.swimlane-header-collapse-down
+      //    i.fa.fa-arrow-up.swimlane-header-collapse-up
+      //if collapsed
+      //  a.js-collapse-swimlane(title="{{_ 'uncollapse'}}")
+      //    i.fa.fa-arrow-up.swimlane-header-collapse-up
+      //    i.fa.fa-arrow-down.swimlane-header-collapse-down
       unless isTouchScreen
         if isShowDesktopDragHandles
           a.swimlane-header-handle.handle.fa.fa-arrows.js-swimlane-header-handle

client/components/swimlanes/swimlaneHeader.js

@@ -18,10 +18,25 @@ BlazeComponent.extendComponent({
       swimlane.rename(newTitle.trim());
     }
   },
+  collapsed(check = undefined) {
+    const swimlane = Template.currentData();
+    const status = swimlane.isCollapsed();
+    if (check === undefined) {
+      // just check
+      return status;
+    } else {
+      swimlane.collapse(!status);
+      return !status;
+    }
+  },
 
   events() {
     return [
       {
+        'click .js-collapse-swimlane'(event) {
+          event.preventDefault();
+          this.collapsed(!this.collapsed());
+        },
         'click .js-open-swimlane-menu': Popup.open('swimlaneAction'),
         'click .js-open-add-swimlane-menu': Popup.open('swimlaneAdd'),
         submit: this.editTitle,

client/components/swimlanes/swimlanes.css

@@ -1,38 +1,3 @@
-/*
-// 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
-*/
 @media screen and (min-width: 801px) {
   .swimlane.ui-sortable {
     width: max-content;
@@ -48,6 +13,28 @@
   flex-direction: row;
   overflow: 0;
 }
+.swimlane-header-menu .swimlane-header-collapse-down {
+  font-size: 50%;
+  color: #a6a6a6;
+  position: absolute;
+  top: 5px;
+  left: 100px;
+}
+.swimlane-header-menu .swimlane-header-collapse-up {
+  font-size: 50%;
+  color: #a6a6a6;
+  position: absolute;
+  bottom: 5px;
+  left: 100px;
+}
+.swimlane-header-menu .swimlane-header-uncollapse-up {
+  font-size: 50%;
+  color: #a6a6a6;
+}
+.swimlane-header-menu .swimlane-header-uncollapse-down {
+  font-size: 50%;
+  color: #a6a6a6;
+}
 .swimlane.placeholder {
   background-color: rgba(0,0,0,0.2);
   border-color: transparent;

server/publications/cards.js

@@ -785,7 +785,7 @@ function findCards(sessionId, query) {
       ),
       ReactiveCache.getSwimlanes(
         { _id: { $in: swimlanes } },
-        { fields: { ...fields, color: 1 } },
+        { fields: { ...fields, color: 1, collapsed: 1 } },
         true,
       ),
       ReactiveCache.getLists({ _id: { $in: lists } }, { fields }, true),