My Cards development

* Popup.open() not working so simply toggle between board sort and 'due by'
* clean-up CSS classes
* code clean-up

client/components/main/myCards.jade

@@ -6,7 +6,8 @@ template(name="myCardsHeaderBar")
 
   .board-header-btns.left
     a.board-header-btn.js-toggle-my-cards-choose-sort(title="{{_ 'my-cards-sort'}}")
-      i.fa.fa-caret-down
+      //i.fa.fa-caret-down
+      i.fa.fa-sort
       if $eq myCardsSort 'board'
         i.fa.fa-th-large
         | {{_ 'my-cards-sort-board'}}
@@ -24,32 +25,33 @@ template(name="myCards")
     if $eq myCardsSort 'board'
       each board in myBoards
         .my-cards-board-wrapper
-          .board-title
+          .my-cards-board-title
             +viewer
               = board.title
           each swimlane in board.mySwimlanes
-            .swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
+            .my-cards-swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
               +viewer
                 = swimlane.title
             each list in swimlane.myLists
               .my-cards-list-wrapper
-                .list-title(class=list.colorClass)
+                .my-cards-list-title(class=list.colorClass)
                   +viewer
                     = list.title
                 each card in list.myCards
-                  a.minicard-wrapper.card-title(href=card.absoluteUrl)
-                    +minicard(card)
+                  .my-cards-card-wrapper
+                    a.minicard-wrapper(href=card.absoluteUrl)
+                      +minicard(card)
     else
       .my-cards-dueat-list-wrapper
         each card in myCardsList
-          .my-cards-card
+          .my-cards-card-wrapper
             a.minicard-wrapper.card-title(href=card.absoluteUrl)
               +minicard(card)
             ul.my-cards-context-list
               li.my-cards-context(title="{{_ 'board'}}")
                 +viewer
                   = card.board.title
-              li.my-cards-context
+              li.my-cards-context.my-cards-context-separator
                 = ' '
                 | {{_ 'context-separator'}}
                 = ' '
@@ -65,19 +67,30 @@ template(name="myCards")
                   = card.list.title
 
 
-template(name="myCardsSortPopup")
+template(name="myCardsSortChangePopup")
   ul.pop-over-list
     li
-      //with "my-cards-sort-board"
-      a.js-my-cards-sort-board
-        i.fa.fa-th-large.colorful
-        | {{_ 'my-cards-sort-board'}}
-        if $eq Utils.myCardsSort "board"
-          i.fa.fa-check
+      with "my-cards-sort-board"
+        a.js-my-cards-sort-board
+          i.fa.fa-th-large.colorful
+          | {{_ 'my-cards-sort-board'}}
+          if $eq Utils.myCardsSort "board"
+            i.fa.fa-check
     li
-      //with "my-cards-sort-dueat"
-      a.js-my-cards-sort-dueat
-        i.fa.fa-calendar.colorful
-        | {{_ 'my-cards-sort-dueat'}}
-        if $eq Utils.myCardsSort "dueAt"
-          i.fa.fa-check
+      with "my-cards-sort-dueat"
+        a.js-my-cards-sort-dueat
+          i.fa.fa-calendar.colorful
+          | {{_ 'my-cards-sort-dueat'}}
+          if $eq Utils.myCardsSort "dueAt"
+            i.fa.fa-check
+
+//template(name="myCardsSortChangePopup")
+//  ul.pop-over-list
+//    li
+//      a.js-my-cards-sort-board
+//        i.fa.fa-th-large.colorful
+//        | {{_ 'my-cards-sort-board'}}
+//    li
+//      a.js-my-cards-sort-dueat
+//        i.fa.fa-calendar.colorful
+//        | {{_ 'my-cards-sort-dueat'}}

client/components/main/myCards.js

@@ -1,7 +1,7 @@
 BlazeComponent.extendComponent({
   myCardsSort() {
     // eslint-disable-next-line no-console
-    console.log('sort:', Utils.myCardsSort());
+    // console.log('sort:', Utils.myCardsSort());
     return Utils.myCardsSort();
   },
 
@@ -9,9 +9,10 @@ BlazeComponent.extendComponent({
     return [
       {
         'click .js-toggle-my-cards-choose-sort'() {
-          Popup.open('myCardsSortPopup');
           // eslint-disable-next-line no-console
-          console.log('open sort');
+          // console.log('open sort');
+          // Popup.open('myCardsSortChange');
+          Utils.myCardsSortToggle();
         },
       },
     ];
@@ -24,17 +25,23 @@ Template.myCards.helpers({
   },
 });
 
-Template.myCardsSortPopup.events({
-  'click .js-my-cards-sort-board'() {
-    Utils.setMyCardsSort('board');
-    Popup.close();
-  },
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'click .js-my-cards-sort-board'() {
+          Utils.setMyCardsSort('board');
+          Popup.close();
+        },
 
-  'click .js-my-cards-sort-dueat'() {
-    Utils.setMyCardsSort('dueAt');
-    Popup.close();
+        'click .js-my-cards-sort-dueat'() {
+          Utils.setMyCardsSort('dueAt');
+          Popup.close();
+        },
+      },
+    ];
   },
-});
+}).register('myCardsSortChangePopup');
 
 BlazeComponent.extendComponent({
   onCreated() {
@@ -214,17 +221,17 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
-        'click .js-my-card'(evt) {
-          const card = this.currentData().card;
-          // eslint-disable-next-line no-console
-          console.log('currentData():', this.currentData());
-          // eslint-disable-next-line no-console
-          console.log('card:', card);
-          if (card) {
-            Utils.goCardId(card._id);
-          }
-          evt.preventDefault();
-        },
+        // 'click .js-my-card'(evt) {
+        //   const card = this.currentData().card;
+        //   // eslint-disable-next-line no-console
+        //   console.log('currentData():', this.currentData());
+        //   // eslint-disable-next-line no-console
+        //   console.log('card:', card);
+        //   if (card) {
+        //     Utils.goCardId(card._id);
+        //   }
+        //   evt.preventDefault();
+        // },
       },
     ];
   },

client/components/main/myCards.styl

@@ -1,24 +1,3 @@
-.my-cards-list
-  .my-cards-list-item
-    border-bottom: 1px solid darken(white, 25%)
-    padding: 10px 5px
-
-    &:last-child
-      border-bottom: none
-
-    .my-cards-list-item-keys
-      margin-top: 5px
-      float: right
-
-      kbd
-        padding: 5px 8px
-        margin: 5px
-        font-size: 18px
-
-    .my-cards-list-item-action
-      font-size: 1.4em
-      margin: 5px
-
 .my-cards-board-wrapper
   border-radius: 8px
   //padding: 0.5rem
@@ -30,14 +9,14 @@
   margin-right: auto
   margin-left: auto
 
-.board-title
+.my-cards-board-title
   font-size: 1.4rem
   font-weight: bold
   padding: 0.5rem
   background-color: grey
   color: white
 
-.swimlane-title
+.my-cards-swimlane-title
   font-size: 1.1rem
   font-weight: bold
   padding: 0.5rem
@@ -51,7 +30,7 @@
 .swimlane-default-color
   background-color: lightgrey
 
-.list-title
+.my-cards-list-title
   font-weight: bold
   font-size: 1.1rem
   //padding-bottom: 0
@@ -59,15 +38,8 @@
   text-align: center
   margin-bottom: 0.7rem
 
-.list-color-bar
-  //height: 0.3rem
-  margin-bottom: 0.3rem
-  margin-top: 0
-  padding-top: 0
-
 .my-cards-list-wrapper
   margin: 1rem
-  margin-top: 1rem
   border-radius: 5px
   padding: 1.5rem
   padding-top: 0.75rem
@@ -75,7 +47,7 @@
   min-width: 250px
   max-width: 350px
 
-.card-title
+.my-cards-card-wrapper
   margin-top: 0
   margin-bottom: 10px
 
@@ -87,14 +59,11 @@
 .my-cards-field-name
   font-weight: bold
 
-.my-cards-dueat-list
-  columns: 2
-
 .my-cards-context
   display: inline-block
 
+.my-cards-context-separator
+  font-weight: bold
+
 .my-cards-context-list
   margin-bottom: 0.7rem
-
-.my-cards-context-item
-  display: inline-block

client/lib/utils.js

@@ -56,6 +56,14 @@ Utils = {
     return sort;
   },
 
+  myCardsSortToggle() {
+    if (this.myCardsSort() === 'board') {
+      this.setMyCardsSort('dueAt');
+    } else {
+      this.setMyCardsSort('board');
+    }
+  },
+
   setMyCardsSort(sort) {
     window.localStorage.setItem('myCardsSort', sort);
     location.reload();