Display body and tags

customize.dist/src/less2/include/markdown.less

@@ -53,6 +53,49 @@
     }
 }
 
+.markdown_cryptpad() {
+    word-wrap: break-word;
+
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: bold;
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid #eee;
+    }
+    li {
+        min-height: 22px;
+    }
+    .todo-list-item {
+        list-style: none;
+        position: relative;
+        .fa {
+            position: absolute;
+            margin-left: -17px;
+            margin-top: 4px;
+            &.fa-check-square {
+                font-size: 15px;
+                margin-top: 5px;
+            }
+        }
+    }
+    media-tag {
+        * {
+            max-width: 100%;
+        }
+        iframe[src$=".pdf"] {
+            width: 100%;
+            height: 80vh;
+            max-height: 90vh;
+        }
+    }
+    media-tag:empty {
+        width: 100px;
+        height: 100px;
+        display: inline-block;
+        border: 1px solid #BBB;
+    }
+
+}
+
 .markdown_preformatted-code (@color: #333) {
     pre > code {
         display: block;

www/code/app-code.less

@@ -65,47 +65,12 @@
         box-sizing: border-box;
         //font-family: Calibri,Ubuntu,sans-serif;
         font: @colortheme_app-font;
-        word-wrap: break-word;
         position: relative;
         flex: 1;
-        h1, h2, h3, h4, h5, h6 {
-            font-weight: bold;
-            padding-bottom: 0.3em;
-            border-bottom: 1px solid #eee;
-        }
-        li {
-            min-height: 22px;
-        }
-        .todo-list-item {
-            list-style: none;
-            .fa {
-                position: absolute;
-                margin-left: -17px;
-                margin-top: 4px;
-                &.fa-check-square {
-                    font-size: 15px;
-                    margin-top: 5px;
-                }
-            }
-        }
-        media-tag {
-            * {
-                max-width:100%;
-            }
-            iframe[src$=".pdf"] {
-                width: 100%;
-                height: 80vh;
-                max-height: 90vh;
-            }
-        }
-        media-tag:empty {
-            width: 100px;
-            height: 100px;
-            display: inline-block;
-            border: 1px solid #BBB;
-        }
 
         .markdown_main();
+        .markdown_cryptpad();
+
         .cp-app-code-preview-empty {
             display: none;
         }

www/kanban/app-kanban.less

@@ -1,6 +1,7 @@
 @import (reference) "../../customize/src/less2/include/browser.less";
 @import (reference) "../../customize/src/less2/include/framework.less";
 @import (reference) "../../customize/src/less2/include/tools.less";
+@import (reference) "../../customize/src/less2/include/markdown.less";
 
 // body
 &.cp-app-kanban {
@@ -16,6 +17,8 @@
     min-height: auto;
     color: @cryptpad_text_col;
 
+    @board-bg: #eaeaea;
+
     @palette0: #888; // Default bg color for header
     @palette1: #FFD4D4;
     @palette2: #FFDECA;
@@ -108,6 +111,59 @@
         height: 100%;
         overflow: hidden;
     }
+
+    .kanban-edit-item {
+        padding: 5px;
+    }
+
+    .kanban-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px;
+        flex-wrap: wrap;
+        .kanban-item-body, .kanban-item-tags {
+            .tools_unselectable();
+            width: 100%;
+        }
+        .kanban-item-body {
+            margin: 10px 0;
+            font-size: 0.8em;
+            :last-child {
+                margin-bottom: 0px;
+            }
+            .markdown_main();
+            .markdown_cryptpad();
+            .markdown_preformatted-code;
+            .markdown_gfm-table(black);
+            ul {
+                padding-left: 30px;
+            }
+        }
+        .kanban-item-tags {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            span {
+                padding: 0 5px;
+                margin-right: 5px;
+                margin-top: 5px;
+                background-color: rgba(0,0,0,0.1);
+                display: inline-block;
+                font-size: 12px;
+            }
+        }
+        &.new-item {
+            padding: 10px;
+        }
+        .kanban-item-text {
+            .tools_unselectable();
+            cursor: text;
+            overflow-wrap: anywhere;
+            flex: 1;
+        }
+    }
+
     #cp-app-kanban-content {
         flex: 1;
         display: flex;
@@ -126,8 +182,66 @@
                 max-height: 100%;
             }
         }
+        #cp-kanban-controls {
+            height: 40px;
+            padding: 10px;
+            display: flex;
+            position: relative;
+            width: 100%;
+            justify-content: space-between;
+            position: relative;
+            .cp-kanban-changeView {
+                height: 30px;
+                width: 60px;
+                span {
+                    position: fixed;
+                    height: 30px;
+                    width: 30px;
+                    line-height: 30px;
+                    text-align: center;
+                    display: inline-block;
+                    background-color: @board-bg;
+                    cursor: pointer;
+                    &:hover {
+                        background-color: darken(@board-bg, 10%);
+                    }
+                    &:last-child {
+                        right: 10px;
+                    }
+                }
+            }
+        }
+        &:not(.cp-kanban-quick) {
+            #cp-kanban-controls {
+                .cp-kanban-changeView {
+                    span.cp-kanban-view {
+                        background-color: @cryptpad_text_col !important;
+                        color: white;
+                    }
+                    span.cp-kanban-view-small {
+                    }
+                }
+            }
+        }
+        &.cp-kanban-quick {
+            #cp-kanban-controls {
+                .cp-kanban-changeView {
+                    span.cp-kanban-view {
+                    }
+                    span.cp-kanban-view-small {
+                        background-color: @cryptpad_text_col !important;
+                        color: white;
+                    }
+                }
+            }
+            .kanban-item {
+                .kanban-item-body, .kanban-item-tags {
+                    display: none;
+                }
+            }
+        }
         #kanban-trash {
-            height: 100px;
+            height: 60px;
             font-size: 40px;
             display: flex;
             align-items: center;
@@ -147,23 +261,8 @@
             }
         }
 
-        .kanban-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 5px 10px 10px;
-            &.new-item {
-                padding: 10px;
-            }
-            .kanban-item-text {
-                cursor: text;
-                overflow-wrap: anywhere;
-                flex: 1;
-            }
-        }
-
         .kanban-board {
-            background-color: #eaeaea;
+            background-color: @board-bg;
             color: @cryptpad_text_col;
             main {
                 min-height: 0;

www/kanban/inner.js

@@ -12,6 +12,7 @@ define([
     '/customize/messages.js',
     '/common/hyperscript.js',
     '/common/text-cursor.js',
+    '/common/diffMarked.js',
     '/bower_components/chainpad/chainpad.dist.js',
     '/bower_components/marked/marked.min.js',
     'cm/lib/codemirror',
@@ -42,6 +43,7 @@ define([
     Messages,
     h,
     TextCursor,
+    DiffMd,
     ChainPad,
     Marked,
     CodeMirror)
@@ -64,7 +66,7 @@ define([
         var $input = $(input);
         var focus = _cursor || $input.is(':focus');
         var oldVal = $input.val();
-        var ops = ChainPad.Diff.diff(_cursor.value || oldVal, val);
+        var ops = ChainPad.Diff.diff(_cursor ? _cursor.value : oldVal, val);
 
         var cursor = _cursor || input;
 
@@ -356,7 +358,7 @@ define([
             }).click(function (e) {
                 getItemEditModal(framework, kanban, itemId);
                 e.stopPropagation();
-            }).appendTo($(el));
+            }).insertAfter($(el).find('.kanban-item-text'));
         });
         $container.find('.kanban-board').each(function (i, el) {
             var itemId = $(el).attr('data-id');
@@ -639,6 +641,9 @@ define([
                     }
                 });
             },
+            renderMd: function (md) {
+                return DiffMd.render(md, true, false);
+            },
             addItemButton: true,
             boards: boards
         });
@@ -663,6 +668,37 @@ define([
             kanban.onChange();
         });
 
+        var $container = $('#cp-app-kanban-content');
+        var addControls = function () {
+            var small = h('span.cp-kanban-view-small.fa.fa-minus');
+            var big = h('span.cp-kanban-view.fa.fa-bars');
+            $(small).click(function () {
+                if ($container.hasClass('cp-kanban-quick')) { return; }
+                $container.addClass('cp-kanban-quick');
+                framework._.sfCommon.setPadAttribute('quickMode', true);
+            });
+            $(big).click(function () {
+                if (!$container.hasClass('cp-kanban-quick')) { return; }
+                $container.removeClass('cp-kanban-quick');
+                framework._.sfCommon.setPadAttribute('quickMode', false);
+            });
+            var container = h('div#cp-kanban-controls', [
+                h('div', "Tags"), // XXX
+                h('div.cp-kanban-changeView', [
+                    small,
+                    big
+                ])
+            ]);
+            $container.prepend(container);
+            return container;
+        };
+        addControls();
+        framework._.sfCommon.getPadAttribute('quickMode', function (err, res) {
+            if (!err && res) {
+                $container.addClass('cp-kanban-quick');
+            }
+        });
+
         return kanban;
     };
 

www/kanban/jkanban.js

@@ -71,6 +71,7 @@
                     buttonClick: function (el, boardId) {},
                     colorClick: function (el, type) {},
                     addItemClick: function (el, boardId) {},
+                    renderMd: function (md) {},
                     onChange: function () {}
                 };
 
@@ -168,7 +169,7 @@
                             moves: function (el, source, handle, sibling) {
                                 if (self.options.readOnly) { return false; }
                                 if (el.classList.contains('new-item')) { return false; }
-                                return handle.classList.contains('kanban-item');
+                                return el.classList.contains('kanban-item');
                             },
                             accepts: function (el, target, source, sibling) {
                                 if (self.options.readOnly) { return false; }
@@ -336,6 +337,26 @@
                     nodeItemText.dataset.eid = element.id;
                     nodeItemText.innerText = element.title;
                     nodeItem.appendChild(nodeItemText);
+                    if (element.body) {
+                        var html = self.renderMd(element.body);
+                        var nodeBody = document.createElement('div');
+                        nodeBody.classList.add('kanban-item-body');
+                        nodeBody.onclick = function (e) {
+                            e.preventDefault();
+                        };
+                        nodeBody.innerHTML = html;
+                        nodeItem.appendChild(nodeBody);
+                    }
+                    if (Array.isArray(element.tags)) {
+                        var nodeTags = document.createElement('div');
+                        nodeTags.classList.add('kanban-item-tags');
+                        element.tags.forEach(function (_tag) {
+                            var tag = document.createElement('span');
+                            tag.innerText = _tag;
+                            nodeTags.appendChild(tag);
+                        });
+                        nodeItem.appendChild(nodeTags);
+                    }
                     //add function
                     nodeItem.clickfn = element.click;
                     nodeItem.dragfn = element.drag;
@@ -549,6 +570,9 @@
 
                 }
 
+                this.renderMd = function (md) {
+                    return self.options.renderMd(md);
+                }
                 this.onChange = function () {
                     self.options.onChange();
                 }