New feature: Now there is popup selection of Lists/Swimlanes/Calendar/Roles.

New feature, not set visible yet, because switching to it does not
work properly yet: Collapsible Swimlanes #2804

Fix: Public board now loads correctly. When you select one of Lists/Swimlanes/Calendar view and
reload webbrowser page, it can change view. Closes #2311

Fix: List sorting commented out. Closes #2800

Fix: Errors hasHiddenMinicardText, hasShowDragHandles, showSort, hasSortBy, profile,
FirefoxAndroid/IE11/Vivaldi/Chromium browsers not working by using
cookies instead of database.
More details at https://github.com/wekan/wekan/issues/2643#issuecomment-554907955
Note: Cookie changes are not always immediate, if there is no effect,
you may need to reload webbrowser page.
Closes #2643 .

Thanks to xet7 !

client/components/boards/boardBody.js

@@ -192,10 +192,13 @@ BlazeComponent.extendComponent({
     // ugly touch event hotfix
     enableClickOnTouch('.js-swimlane:not(.placeholder)');
 
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
+
     this.autorun(() => {
       if (
         Utils.isMiniScreen() ||
-        (!Utils.isMiniScreen() && Meteor.user().hasShowDesktopDragHandles())
+        (!Utils.isMiniScreen() && cookies.has('showDesktopDragHandles'))
       ) {
         $swimlanesDom.sortable({
           handle: '.js-swimlane-header-handle',
@@ -227,20 +230,32 @@ BlazeComponent.extendComponent({
   },
 
   isViewSwimlanes() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
     const currentUser = Meteor.user();
-    if (!currentUser) return false;
+    if (!currentUser) {
+      return cookies.get('boardView') === 'board-view-swimlanes';
+    }
     return (currentUser.profile || {}).boardView === 'board-view-swimlanes';
   },
 
   isViewLists() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
     const currentUser = Meteor.user();
-    if (!currentUser) return true;
+    if (!currentUser) {
+      return cookies.get('boardView') === 'board-view-lists';
+    }
     return (currentUser.profile || {}).boardView === 'board-view-lists';
   },
 
   isViewCalendar() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
     const currentUser = Meteor.user();
-    if (!currentUser) return false;
+    if (!currentUser) {
+      return cookies.get('boardView') === 'board-view-cal';
+    }
     return (currentUser.profile || {}).boardView === 'board-view-cal';
   },
 
@@ -398,8 +413,12 @@ BlazeComponent.extendComponent({
     };
   },
   isViewCalendar() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
     const currentUser = Meteor.user();
-    if (!currentUser) return false;
+    if (!currentUser) {
+      return cookies.get('boardView') === 'board-view-cal';
+    }
     return (currentUser.profile || {}).boardView === 'board-view-cal';
   },
 }).register('calendarView');

client/components/boards/boardHeader.jade

@@ -77,10 +77,11 @@ template(name="boardHeaderBar")
             i.fa.fa-archive
             span {{_ 'archives'}}
 
-      if showSort
-       a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
-        i.fa(class="{{directionClass}}")
-        span {{_ 'sort'}}{{_ listSortShortDesc}}
+      //if showSort
+      //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
+      //    i.fa(class="{{directionClass}}")
+      //    span {{_ 'sort'}}{{_ listSortShortDesc}}
+
       a.board-header-btn.js-open-filter-view(
           title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
           class="{{#if Filter.isActive}}emphasis{{/if}}")
@@ -89,15 +90,6 @@ template(name="boardHeaderBar")
         if Filter.isActive
           a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
             i.fa.fa-times-thin
-            
-      if currentUser.isAdmin
-        a.board-header-btn.js-open-rules-view(title="{{_ 'rules'}}")
-          i.fa.fa-magic
-          span {{_ 'rules'}}
-      else if currentUser.isBoardAdmin
-        a.board-header-btn.js-open-rules-view(title="{{_ 'rules'}}")
-          i.fa.fa-magic
-          span {{_ 'rules'}}
 
       a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
         i.fa.fa-search
@@ -106,8 +98,19 @@ template(name="boardHeaderBar")
       unless currentBoard.isTemplatesBoard
         a.board-header-btn.js-toggle-board-view(
           title="{{_ 'board-view'}}")
-          i.fa.fa-th-large
-          span {{#if currentUser.profile.boardView}}{{_ currentUser.profile.boardView}}{{else}}{{_ 'board-view-lists'}}{{/if}}
+          i.fa.fa-caret-down
+          if $eq boardView 'board-view-lists'
+            i.fa.fa-trello
+          if $eq boardView 'board-view-swimlanes'
+            i.fa.fa-th-large
+          //  unless collapseSwimlane
+          //    i.fa.fa-th-large
+          //  if collapseSwimlane
+          //    i.fa.fa-play
+          if $eq boardView 'board-view-cal'
+            i.fa.fa-calendar
+          span {{#if boardView}}{{_ boardView}}{{else}}{{_ 'board-view-lists'}}{{/if}}
+          //span {{#if collapseSwimlane}}{{_ 'board-view-collapse'}}{{else}}{{#if boardView}}{{_ boardView}}{{else}}{{_ 'board-view-lists'}}{{/if}}{{/if}}
 
       if canModifyBoard
         a.board-header-btn.js-multiselection-activate(
@@ -172,6 +175,51 @@ template(name="boardChangeWatchPopup")
             i.fa.fa-check
           span.sub-name {{_ 'muted-info'}}
 
+template(name="boardChangeViewPopup")
+  ul.pop-over-list
+    li
+      with "board-view-lists"
+        a.js-open-lists-view
+          i.fa.fa-trello.colorful
+          | {{_ 'board-view-lists'}}
+          if $eq Utils.boardView "board-view-lists"
+            i.fa.fa-check
+    li
+      with "board-view-swimlanes"
+        a.js-open-swimlanes-view
+          i.fa.fa-th-large.colorful
+          | {{_ 'board-view-swimlanes'}}
+          if $eq Utils.boardView "board-view-swimlanes"
+            i.fa.fa-check
+    //li
+    //  with "board-view-collapse"
+    //    a.js-open-collapse-view
+    //      i.fa.fa-play.colorful
+    //      | {{_ 'board-view-collapse'}}
+    //      if $eq Utils.boardView "board-view-collapse"
+    //        i.fa.fa-check
+    li
+      with "board-view-cal"
+        a.js-open-cal-view
+          i.fa.fa-calendar.colorful
+          | {{_ 'board-view-cal'}}
+          if $eq Utils.boardView "board-view-cal"
+            i.fa.fa-check
+    if currentUser.isAdmin
+      hr
+      li
+        with "board-view-rules"
+          a.js-open-rules-view(title="{{_ 'rules'}}")
+            i.fa.fa-magic
+            | {{_ 'rules'}}
+    else if currentUser.isBoardAdmin
+      hr
+      li
+        with "board-view-rules"
+          a.js-open-rules-view(title="{{_ 'rules'}}")
+            i.fa.fa-magic
+            | {{_ 'rules'}}
+
 template(name="createBoard")
   form
     label
@@ -198,19 +246,19 @@ template(name="createBoard")
       | /
       a.js-board-template {{_ 'template'}}
 
-template(name="listsortPopup")
-  h2
-   | {{_ 'list-sort-by'}}
-  hr
-  ul.pop-over-list
-    each value in allowedSortValues
-     li
-      a.js-sort-by(name="{{value.name}}")
-        if $eq sortby value.name
-           i(class="fa {{Direction}}") 
-        | {{_ value.label }}{{_ value.shortLabel}}
-        if $eq sortby value.name
-           i(class="fa fa-check")
+//template(name="listsortPopup")
+//  h2
+//   | {{_ 'list-sort-by'}}
+//  hr
+//  ul.pop-over-list
+//    each value in allowedSortValues
+//     li
+//      a.js-sort-by(name="{{value.name}}")
+//        if $eq sortby value.name
+//           i(class="fa {{Direction}}")
+//        | {{_ value.label }}{{_ value.shortLabel}}
+//        if $eq sortby value.name
+//           i(class="fa fa-check")
 
 template(name="boardChangeTitlePopup")
   form

client/components/boards/boardHeader.js

@@ -1,5 +1,7 @@
+/*
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';
+*/
 Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
   'click .js-custom-fields'() {
@@ -82,6 +84,7 @@ BlazeComponent.extendComponent({
     const currentBoard = Boards.findOne(Session.get('currentBoard'));
     return currentBoard && currentBoard.stars >= 2;
   },
+  /*
   showSort() {
     return Meteor.user().hasSortBy();
   },
@@ -101,6 +104,7 @@ BlazeComponent.extendComponent({
   listSortShortDesc() {
     return `list-label-short-${this.currentListSortBy()}`;
   },
+  */
   events() {
     return [
       {
@@ -114,30 +118,14 @@ BlazeComponent.extendComponent({
         'click .js-open-archived-board'() {
           Modal.open('archivedBoards');
         },
-        'click .js-toggle-board-view'() {
-          const currentUser = Meteor.user();
-          if (
-            (currentUser.profile || {}).boardView === 'board-view-swimlanes'
-          ) {
-            currentUser.setBoardView('board-view-cal');
-          } else if (
-            (currentUser.profile || {}).boardView === 'board-view-lists'
-          ) {
-            currentUser.setBoardView('board-view-swimlanes');
-          } else if (
-            (currentUser.profile || {}).boardView === 'board-view-cal'
-          ) {
-            currentUser.setBoardView('board-view-lists');
-          } else {
-            currentUser.setBoardView('board-view-swimlanes');
-          }
-        },
+        'click .js-toggle-board-view': Popup.open('boardChangeView'),
         'click .js-toggle-sidebar'() {
           Sidebar.toggle();
         },
         'click .js-open-filter-view'() {
           Sidebar.setView('filter');
         },
+        /*
         'click .js-open-sort-view'(evt) {
           const target = evt.target;
           if (target.tagName === 'I') {
@@ -148,6 +136,7 @@ BlazeComponent.extendComponent({
             Popup.open('listsort')(evt);
           }
         },
+        */
         'click .js-filter-reset'(event) {
           event.stopPropagation();
           Sidebar.setView();
@@ -156,9 +145,6 @@ BlazeComponent.extendComponent({
         'click .js-open-search-view'() {
           Sidebar.setView('search');
         },
-        'click .js-open-rules-view'() {
-          Modal.openWide('rulesMain');
-        },
         'click .js-multiselection-activate'() {
           const currentCard = Session.get('currentCard');
           MultiSelection.activate();
@@ -186,6 +172,85 @@ Template.boardHeaderBar.helpers({
       !Meteor.user().isCommentOnly()
     );
   },
+  boardView() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
+    if (cookies.get('boardView') === 'board-view-lists') {
+      return 'board-view-lists';
+    } else if (cookies.get('boardView') === 'board-view-swimlanes') {
+      return 'board-view-swimlanes';
+    } else if (cookies.get('boardView') === 'board-view-collapse') {
+      return 'board-view-collapse';
+    } else if (cookies.get('boardView') === 'board-view-cal') {
+      return 'board-view-cal';
+    } else {
+      return false;
+    }
+  },
+  collapseSwimlane() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
+    if (cookies.has('collapseSwimlane')) {
+      return true;
+    } else {
+      return false;
+    }
+  },
+});
+
+Template.boardChangeViewPopup.events({
+  'click .js-open-lists-view'() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
+    if (cookies.get('boardView') !== 'board-view-lists') {
+      cookies.set('boardView', 'board-view-lists');
+      const currentUser = Meteor.user();
+      if (currentUser) {
+        Meteor.user().setBoardView('board-view-lists');
+      }
+    }
+    Popup.close();
+  },
+  'click .js-open-swimlanes-view'() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
+    if (cookies.get('boardView') !== 'board-view-swimlanes') {
+      cookies.set('boardView', 'board-view-swimlanes');
+      cookies.remove('collapseSwimlane');
+      const currentUser = Meteor.user();
+      if (currentUser) {
+        Meteor.user().setBoardView('board-view-swimlanes');
+      }
+    }
+    Popup.close();
+  },
+  'click .js-open-collapse-view'() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
+    if (cookies.get('boardView') !== 'board-view-swimlanes') {
+      cookies.set('boardView', 'board-view-swimlanes');
+      cookies.set('collapseSwimlane', 'true');
+      const currentUser = Meteor.user();
+      if (currentUser) {
+        Meteor.user().setBoardView('board-view-swimlanes');
+      }
+    }
+    Popup.close();
+  },
+  'click .js-open-cal-view'() {
+    import { Cookies } from 'meteor/ostrio:cookies';
+    const cookies = new Cookies();
+    cookies.set('boardView', 'board-view-cal');
+    const currentUser = Meteor.user();
+    if (currentUser) {
+      Meteor.user().setBoardView('board-view-cal');
+    }
+    Popup.close();
+  },
+  'click .js-open-rules-view'() {
+    Modal.openWide('rulesMain');
+    Popup.close();
+  },
 });
 
 const CreateBoard = BlazeComponent.extendComponent({
@@ -308,6 +373,7 @@ BlazeComponent.extendComponent({
   },
 }).register('boardChangeWatchPopup');
 
+/*
 BlazeComponent.extendComponent({
   onCreated() {
     //this.sortBy = new ReactiveVar();
@@ -377,3 +443,4 @@ BlazeComponent.extendComponent({
     ];
   },
 }).register('listsortPopup');
+*/