Merge branch 'kanban_UI_fixes' into staging

www/kanban/app-kanban.less

@@ -21,14 +21,16 @@
     @board-bg: #eaeaea;
 
     @palette0: #C9C9C9; // Default bg color for header
-    @palette1: #FFD4D4;
+
-    @palette2: #FFDECA;
+    @kanban-colors:
-    @palette3: #FFE69C;
+        #FFD4D4,
-    @palette4: #DBFFB7;
+        #FFDECA,
-    @palette5: #AFFDC2;
+        #FFE69C,
-    @palette6: #C9FFFE;
+        #DBFFB7,
-    @palette7: #C8D6FF;
+        #AFFDC2,
-    @palette8: #E4CAFF;
+        #C9FFFE,
+        #C8D6FF,
+        #E4CAFF;
 
     .kanban-board-header {
         background-color: @palette0;
@@ -46,54 +48,21 @@
     .cp-kanban-palette-nocolor {
         background-color: @palette0;
     }
-    .cp-kanban-palette-color1 {
+
-        background-color: @palette1;
+    .kanban-colors(@kanban-colors; @index) when (@index > 0){
+        // loop through the @colors
+        .kanban-colors(@kanban-colors; (@index - 1));
+        @color: extract(@kanban-colors, @index);
+        // make a numbered class selector for each color
+        .cp-kanban-palette-color@{index}{
+            background-color: @color;
             &.kanban-board-inner {
-            background-color: lighten(@palette1, 5%);
+                background-color: fade(@color, 50%);
             }
         }
-    .cp-kanban-palette-color2 {
-        background-color: @palette2;
-        &.kanban-board-inner {
-            background-color: lighten(@palette2, 5%);
-        }
-    }
-    .cp-kanban-palette-color3 {
-        background-color: @palette3;
-        &.kanban-board-inner {
-            background-color: lighten(@palette3, 10%);
-        }
-    }
-    .cp-kanban-palette-color4 {
-        background-color: @palette4;
-        &.kanban-board-inner {
-            background-color: lighten(@palette4, 10%);
-        }
-    }
-    .cp-kanban-palette-color5 {
-        background-color: @palette5;
-        &.kanban-board-inner {
-            background-color: lighten(@palette5, 10%);
-        }
-    }
-    .cp-kanban-palette-color6 {
-        background-color: @palette6;
-        &.kanban-board-inner {
-            background-color: lighten(@palette6, 5%);
-        }
-    }
-    .cp-kanban-palette-color7 {
-        background-color: @palette7;
-        &.kanban-board-inner {
-            background-color: lighten(@palette7, 5%);
-        }
-    }
-    .cp-kanban-palette-color8 {
-        background-color: @palette8;
-        &.kanban-board-inner {
-            background-color: lighten(@palette8, 5%);
-        }
     }
+    // call the loop
+    .kanban-colors(@kanban-colors; length(@kanban-colors));
 
     .cp-kanban-edit-modal {
         display: flex;
@@ -105,8 +74,12 @@
         background: #eee;
         color: @cryptpad_text_col;
         font-size: 14px;
+        div {
+            display: inline;
+        }
         .cp-kanban-cursors {
-            margin-top: 5px;
+            display: inline;
+            margin-left: 5px;
         }
         margin-bottom: 5px;
     }
@@ -122,6 +95,12 @@
         .cp-markdown-toolbar {
             background-color: #eee;
             color: @cryptpad_text_col;
+            button {
+                &:hover {
+                    background-color: @cryptpad_text_col;
+                    color: white;
+                }
+            }
         }
         margin-bottom: 15px;
     }
@@ -141,6 +120,7 @@
     #cp-kanban-edit-tags {
         .tokenfield {
             margin: 0;
+            width: 100%;
         }
         margin-bottom: 15px;
     }
@@ -161,6 +141,7 @@
 
     .kanban-edit-item {
         padding: 5px;
+        align-self: flex-start;
     }
 
     .cp-kanban-cursors {
@@ -201,8 +182,32 @@
             .markdown_cryptpad();
             .markdown_preformatted-code;
             .markdown_gfm-table(black);
+            p {
+                margin-bottom: 5px;
+            }
             ul {
-                padding-left: 30px;
+                padding-left: 20px;
+            }
+            img {
+                max-width: 100%;
+            }
+            pre > code {
+                border: none;
+                padding: 5px;
+                margin: 0;
+                background-color: @cryptpad_color_light_grey;
+                width: 100%;
+            }
+            table {
+                color: @cryptpad_text_col;
+                border-color: @cryptpad_text_col;
+                th {
+                    padding: 5px !important;
+                    background-color: fade(@cryptpad_text_col, 10%);
+                }
+                td {
+                    padding: 5px;
+                }
             }
         }
         .kanban-item-tags {
@@ -268,7 +273,8 @@
                 .tools_unselectable();
                 outline: none;
                 width: 100%;
-                border: 1px solid @cryptpad_text_col;
+                border: 1px solid fade(@cryptpad_text_col, 70%);
+                color: fade(@cryptpad_text_col, 70%);
                 border-radius: 0px;
                 font-size: 40px;
                 display: inline-flex;
@@ -298,9 +304,12 @@
             max-width: 80%;
             min-width: 150px;
 
-            &> i {
+            .cp-kanban-filterTags-reset {
                 cursor: pointer;
                 margin-left: 10px;
+                i {
+                    margin-right: 5px;
+                }
             }
             .cp-kanban-filterTags-name {
                 flex-shrink: 0;
@@ -392,6 +401,7 @@
             display: flex;
             min-height: 0;
             .kanban-container {
+                padding: 0px 5px;
                 flex: 1;
                 display: flex;
                 max-height: 100%;
@@ -416,9 +426,14 @@
                 right: 0;
             }
             &.kanban-trash-active {
-                color: red;
+                color: @colortheme_notification-warn;
                 div {
-                    background: rgba(255,0,0,0.5);
+                    background: fade(@colortheme_notification-warn, 20%);
+                }
+            }
+            &.kanban-trash-suggest {
+                div {
+                    background: fade(@cryptpad_text_col, 20%);
                 }
             }
             .kanban-item, .kanban-board {

www/kanban/inner.js

@@ -64,6 +64,9 @@ define([
     Messages.kanban_tags = "Filter tags"; // XXX
     Messages.kanban_noTags = "No tags"; // XXX
     Messages.kanban_conflicts = "Currently editing:"; // XXX
+    Messages.kanban_clearFilter = "clear filter"; // XXX
+    Messages.kanban_editCard = "edit this card" // XXX
+    Messages.kanban_editBoard = "edit this board" // XXX
 
 // XXX
 // Conflicts
@@ -461,6 +464,7 @@ define([
             var itemId = $(el).attr('data-eid');
             $('<button>', {
                 'class': 'kanban-edit-item btn btn-default fa fa-pencil',
+                'alt': Messages.kanban_editCard,
             }).click(function (e) {
                 getItemEditModal(framework, kanban, itemId);
                 e.stopPropagation();
@@ -470,6 +474,7 @@ define([
             var itemId = $(el).attr('data-id');
             $('<button>', {
                 'class': 'kanban-edit-item btn btn-default fa fa-pencil',
+                'alt': Messages.kanban_editBoard,
             }).click(function (e) {
                 getBoardEditModal(framework, kanban, itemId);
                 e.stopPropagation();
@@ -809,11 +814,11 @@ define([
             // Tags filter
             var existing = getExistingTags(kanban.options.boards);
             var list = h('div.cp-kanban-filterTags-list');
-            var reset = h('i.cp-kanban-filterTags-reset.fa.fa-times');
+            var reset = h('span.cp-kanban-filterTags-reset', [h('i.fa.fa-times'), Messages.kanban_clearFilter]);
             var tags = h('div.cp-kanban-filterTags', [
                 h('span.cp-kanban-filterTags-name', Messages.kanban_tags),
-                reset,
+                list,
-                list
+                reset
             ]);
             var $reset = $(reset);
             var $list = $(list);

www/kanban/jkanban.js

@@ -178,22 +178,26 @@
                                 if (typeof (el.dragfn) === 'function') {
                                     el.dragfn(el, source);
                                 }
+                                $('.kanban-trash').addClass('kanban-trash-suggest');
                                 $(document).on('mousemove', onMouseMove());
                             })
                             .on('dragend', function (el) {
                                 el.classList.remove('is-moving');
                                 self.options.dragendBoard(el);
                                 $(document).off('mousemove');
+                                $('.kanban-trash').removeClass('kanban-trash-suggest');
                                 if (typeof (el.dragendfn) === 'function')
                                     el.dragendfn(el);
                             })
                             .on('over', function (el, target, source) {
                                 if (!target.classList.contains('kanban-trash')) { return false; }
                                 $('.kanban-trash').addClass('kanban-trash-active');
+                                $('.kanban-trash').removeClass('kanban-trash-suggest');
                             })
                             .on('out', function (el, target) {
                                 if (!target.classList.contains('kanban-trash')) { return false; }
                                 $('.kanban-trash').removeClass('kanban-trash-active');
+                                $('.kanban-trash').addClass('kanban-trash-suggest');
                             })
                             .on('drop', function (el, target, source, sibling) {
                                 el.classList.remove('is-moving');
@@ -260,6 +264,7 @@
                                 setActiveDrag();
                                 el.classList.add('is-moving');
                                 $(document).on('mousemove', onMouseMove(el));
+                                $('.kanban-trash').addClass('kanban-trash-suggest');
 
                                 self.options.dragEl(el, source);
                                 if (el !== null && typeof (el.dragfn) === 'function') {
@@ -270,6 +275,7 @@
                                 console.log("In dragend");
                                 el.classList.remove('is-moving');
                                 self.options.dragendEl(el);
+                                $('.kanban-trash').removeClass('kanban-trash-suggest');
                                 $(document).off('mousemove');
                                 if (el !== null && typeof (el.dragendfn) === 'function') {
                                     el.dragendfn(el);
@@ -284,12 +290,16 @@
                             .on('over', function (el, target, source) {
                                 setActiveDrag(target);
                                 if (!target.classList.contains('kanban-trash')) { return false; }
+                                target.classList.remove('kanban-trash-suggest');
                                 target.classList.add('kanban-trash-active');
+
                             })
                             .on('out', function (el, target) {
                                 setActiveDrag();
                                 if (!target.classList.contains('kanban-trash')) { return false; }
                                 target.classList.remove('kanban-trash-active');
+                                target.classList.add('kanban-trash-suggest');
+
                             })
                             .on('drop', function(el, target, source, sibling) {
                                 self.enableAllBoards();