Collapse Lists.

Thanks to xet7 !

client/components/lists/list.css

@@ -7,7 +7,7 @@
   border-left: 1px solid #ccc;
   padding: 0;
   float: left;
-  min-width: 100px; /* TODO(mark-i-m): hardcoded? */
+  /* min-width: 100px; TODO(mark-i-m): hardcoded? */
   /*max-width: 270px;*/
   /* Reverted incomplete change list width: */
   /* https://github.com/wekan/wekan/issues/4558 */
@@ -82,6 +82,16 @@
   text-overflow: ellipsis;
   word-wrap: break-word;
 }
+.list-rotated {
+  width: 10px;
+  margin-top: 10px;
+  margin-left: 0;
+  margin-right: 0;
+  transform: rotate(90deg);
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .list-header .list-header-watch-icon {
   padding-left: 10px;
   color: #a6a6a6;
@@ -99,6 +109,23 @@
   color: #a6a6a6;
   margin-right: 15px;
 }
+.list-header .list-header-collapse-right {
+  color: #a6a6a6;
+}
+.list-header .list-header-collapse-left {
+  color: #a6a6a6;
+  margin-right: 15px;
+}
+.list-header .list-header-uncollapse-left {
+  color: #a6a6a6;
+}
+.list-header .list-header-uncollapse-right {
+  color: #a6a6a6;
+}
+.list-header .list-header-collapse {
+  color: #a6a6a6;
+  margin-right: 15px;
+}
 .list-header .highlight {
   color: #ce1414;
 }

client/components/lists/list.jade

@@ -1,6 +1,7 @@
 template(name='list')
   .list.js-list(id="js-list-{{_id}}"
-                style="width:{{listWidth}}px;")
+                style="{{#unless collapsed}}width:{{listWidth}}px;{{/unless}}"
+                class="{{#if collapsed}}list-collapsed{{/if}}")
     +listHeader
     +listBody
 

client/components/lists/listBody.jade

@@ -1,4 +1,5 @@
 template(name="listBody")
+  unless collapsed
     .list-body
       .minicards.clearfix.js-minicards(class="{{#if reachedWipLimit}}js-list-full{{/if}}")
         if cards.length

client/components/lists/listHeader.jade

@@ -5,9 +5,20 @@ template(name="listHeader")
     +inlinedForm
       +editListTitleForm
     else
+      unless isMiniScreen
+        if collapsed
+          a.js-collapse(title="{{_ 'uncollapse'}}")
+            i.fa.fa-arrow-left.list-header-uncollapse-left
+            i.fa.fa-arrow-right.list-header-uncollapse-right
       if isMiniScreen
         if currentList
           a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
+      unless isMiniScreen
+        if collapsed
+          if showCardsCountForList cards.length
+            br
+            span.cardCount {{cardsCount}}
+      if isMiniScreen
         h2.list-header-name(
           title="{{ moment modifiedAt 'LLL' }}"
           class="{{#if currentUser.isBoardMember}}{{#unless currentUser.isCommentOnly}}{{#unless currentUser.isWorker}}js-open-inlined-form is-editable{{/unless}}{{/unless}}{{/if}}")
@@ -17,10 +28,20 @@ template(name="listHeader")
            | (
            span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.length}}
            |/#{wipLimit.value})
-
+      unless isMiniScreen
+        div(class="{{#if collapsed}}list-rotated{{/if}}")
+          h2.list-header-name(
+            title="{{ moment modifiedAt 'LLL' }}"
+            class="{{#if currentUser.isBoardMember}}{{#unless currentUser.isCommentOnly}}{{#unless currentUser.isWorker}}js-open-inlined-form is-editable{{/unless}}{{/unless}}{{/if}}")
+            +viewer
+              = title
+            if wipLimit.enabled
+             | (
+             span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.length}}
+             |/#{wipLimit.value})
+        unless collapsed
           if showCardsCountForList cards.length
             span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.length}}
-
       if isMiniScreen
         if currentList
           if isWatching
@@ -36,12 +57,16 @@ template(name="listHeader")
       else if currentUser.isBoardMember
         if isWatching
           i.list-header-watch-icon.fa.fa-eye
+        unless collapsed
           div.list-header-menu
             unless currentUser.isCommentOnly
               //if isBoardAdmin
               //  a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}")
               if canSeeAddCard
                 a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
+                a.js-collapse(title="{{_ 'collapse'}}")
+                  i.fa.fa-arrow-right.list-header-collapse-right
+                  i.fa.fa-arrow-left.list-header-collapse-left
                 a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
             if currentUser.isBoardAdmin
               if isTouchScreenOrShowDesktopDragHandles

client/components/lists/listHeader.js

@@ -31,6 +31,17 @@ BlazeComponent.extendComponent({
       return !status;
     }
   },
+  collapsed(check = undefined) {
+    const list = Template.currentData();
+    const status = list.isCollapsed();
+    if (check === undefined) {
+      // just check
+      return status;
+    } else {
+      list.collapse(!status);
+      return !status;
+    }
+  },
   editTitle(event) {
     event.preventDefault();
     const newTitle = this.childComponents('inlinedForm')[0]
@@ -104,6 +115,10 @@ BlazeComponent.extendComponent({
           event.preventDefault();
           this.starred(!this.starred());
         },
+        'click .js-collapse'(event) {
+          event.preventDefault();
+          this.collapsed(!this.collapsed());
+        },
         'click .js-open-list-menu': Popup.open('listAction'),
         'click .js-add-card.list-header-plus-top'(event) {
           const listDom = $(event.target).parents(

imports/i18n/data/en.i18n.json

@@ -1246,5 +1246,7 @@
   "show-checklist-at-minicard": "Show checklist at minicard",
   "show-subtasks-field": "Show subtasks field",
   "convert-to-markdown": "Convert to markdown",
-  "import-board-zip": "Add .zip file that has board JSON files, and board name subdirectories with attachments"
+  "import-board-zip": "Add .zip file that has board JSON files, and board name subdirectories with attachments",
+  "collapse": "Collapse",
+  "uncollapse": "Uncollapse"
 }

models/lists.js

@@ -156,6 +156,13 @@ Lists.attachSchema(
       type: String,
       defaultValue: 'list',
     },
+    collapsed: {
+      /**
+       * is the list collapsed
+       */
+      type: Boolean,
+      defaultValue: false,
+    },
   }),
 );
 
@@ -286,6 +293,10 @@ Lists.helpers({
     return this.starred === true;
   },
 
+  isCollapsed() {
+    return this.collapsed === true;
+  },
+
   absoluteUrl() {
     const card = ReactiveCache.getCard({ listId: this._id });
     return card && card.absoluteUrl();
@@ -306,6 +317,9 @@ Lists.mutations({
   star(enable = true) {
     return { $set: { starred: !!enable } };
   },
+  collapse(enable = true) {
+    return { $set: { collapsed: !!enable } };
+  },
 
   archive() {
     if (this.isTemplateList()) {

models/swimlanes.js

@@ -107,6 +107,13 @@ Swimlanes.attachSchema(
       type: String,
       defaultValue: 'swimlane',
     },
+    collapsed: {
+      /**
+       * is the swimlane collapsed
+       */
+      type: Boolean,
+      defaultValue: false,
+    },
   }),
 );
 
@@ -232,6 +239,10 @@ Swimlanes.helpers({
     return ret;
   },
 
+  isCollapsed() {
+    return this.collapsed === true;
+  },
+
   board() {
     return ReactiveCache.getBoard(this.boardId);
   },
@@ -274,6 +285,10 @@ Swimlanes.mutations({
     return { $set: { title } };
   },
 
+  collapse(enable = true) {
+    return { $set: { collapsed: !!enable } };
+  },
+
   archive() {
     if (this.isTemplateSwimlane()) {
       this.myLists().forEach(list => {

server/publications/boards.js

@@ -61,6 +61,7 @@ Meteor.publishRelations('boards', function() {
               title: 1,
               boardId: 1,
               archived: 1,
+              collapsed: 1,
               sort: 1
             }
           },
@@ -221,7 +222,7 @@ Meteor.publishRelations('board', function(boardId, isArchived) {
     ),
     function(boardId, board) {
       this.cursor(ReactiveCache.getLists({ boardId, archived: isArchived }, {}, true));
-      this.cursor(ReactiveCache.getSwimlanes({ boardId, archived: isArchived }, {}, true));
+      this.cursor(ReactiveCache.getSwimlanes({ boardId, collapsed: 1, archived: isArchived }, {}, true));
       this.cursor(ReactiveCache.getIntegrations({ boardId }, {}, true));
       this.cursor(ReactiveCache.getCardCommentReactions({ boardId }, {}, true));
       this.cursor(