From 0975f253aba6ac18e01283bbe93d9cdf1d815147 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 4 Mar 2020 17:48:20 +0100 Subject: [PATCH] Display body and tags --- .../src/less2/include/markdown.less | 43 ++++++ www/code/app-code.less | 39 +---- www/kanban/app-kanban.less | 133 +++++++++++++++--- www/kanban/inner.js | 40 +++++- www/kanban/jkanban.js | 26 +++- 5 files changed, 224 insertions(+), 57 deletions(-) diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index a79717550..841f47679 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/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; diff --git a/www/code/app-code.less b/www/code/app-code.less index 219143a34..39d7db27a 100644 --- a/www/code/app-code.less +++ b/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; } diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 3e2e1665c..122138614 100644 --- a/www/kanban/app-kanban.less +++ b/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; diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 9492fc1d0..e1658c1af 100644 --- a/www/kanban/inner.js +++ b/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; }; diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js index bb0484dc3..a5d2d1062 100644 --- a/www/kanban/jkanban.js +++ b/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(); }