Display body and tags

pull/1/head
yflory 5 years ago
parent 04bd69f2f5
commit 0975f253ab

@ -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) { .markdown_preformatted-code (@color: #333) {
pre > code { pre > code {
display: block; display: block;

@ -65,47 +65,12 @@
box-sizing: border-box; box-sizing: border-box;
//font-family: Calibri,Ubuntu,sans-serif; //font-family: Calibri,Ubuntu,sans-serif;
font: @colortheme_app-font; font: @colortheme_app-font;
word-wrap: break-word;
position: relative; position: relative;
flex: 1; 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_main();
.markdown_cryptpad();
.cp-app-code-preview-empty { .cp-app-code-preview-empty {
display: none; display: none;
} }

@ -1,6 +1,7 @@
@import (reference) "../../customize/src/less2/include/browser.less"; @import (reference) "../../customize/src/less2/include/browser.less";
@import (reference) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
@import (reference) "../../customize/src/less2/include/tools.less"; @import (reference) "../../customize/src/less2/include/tools.less";
@import (reference) "../../customize/src/less2/include/markdown.less";
// body // body
&.cp-app-kanban { &.cp-app-kanban {
@ -16,6 +17,8 @@
min-height: auto; min-height: auto;
color: @cryptpad_text_col; color: @cryptpad_text_col;
@board-bg: #eaeaea;
@palette0: #888; // Default bg color for header @palette0: #888; // Default bg color for header
@palette1: #FFD4D4; @palette1: #FFD4D4;
@palette2: #FFDECA; @palette2: #FFDECA;
@ -108,6 +111,59 @@
height: 100%; height: 100%;
overflow: hidden; 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 { #cp-app-kanban-content {
flex: 1; flex: 1;
display: flex; display: flex;
@ -126,8 +182,66 @@
max-height: 100%; 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 { #kanban-trash {
height: 100px; height: 60px;
font-size: 40px; font-size: 40px;
display: flex; display: flex;
align-items: center; 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 { .kanban-board {
background-color: #eaeaea; background-color: @board-bg;
color: @cryptpad_text_col; color: @cryptpad_text_col;
main { main {
min-height: 0; min-height: 0;

@ -12,6 +12,7 @@ define([
'/customize/messages.js', '/customize/messages.js',
'/common/hyperscript.js', '/common/hyperscript.js',
'/common/text-cursor.js', '/common/text-cursor.js',
'/common/diffMarked.js',
'/bower_components/chainpad/chainpad.dist.js', '/bower_components/chainpad/chainpad.dist.js',
'/bower_components/marked/marked.min.js', '/bower_components/marked/marked.min.js',
'cm/lib/codemirror', 'cm/lib/codemirror',
@ -42,6 +43,7 @@ define([
Messages, Messages,
h, h,
TextCursor, TextCursor,
DiffMd,
ChainPad, ChainPad,
Marked, Marked,
CodeMirror) CodeMirror)
@ -64,7 +66,7 @@ define([
var $input = $(input); var $input = $(input);
var focus = _cursor || $input.is(':focus'); var focus = _cursor || $input.is(':focus');
var oldVal = $input.val(); 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; var cursor = _cursor || input;
@ -356,7 +358,7 @@ define([
}).click(function (e) { }).click(function (e) {
getItemEditModal(framework, kanban, itemId); getItemEditModal(framework, kanban, itemId);
e.stopPropagation(); e.stopPropagation();
}).appendTo($(el)); }).insertAfter($(el).find('.kanban-item-text'));
}); });
$container.find('.kanban-board').each(function (i, el) { $container.find('.kanban-board').each(function (i, el) {
var itemId = $(el).attr('data-id'); var itemId = $(el).attr('data-id');
@ -639,6 +641,9 @@ define([
} }
}); });
}, },
renderMd: function (md) {
return DiffMd.render(md, true, false);
},
addItemButton: true, addItemButton: true,
boards: boards boards: boards
}); });
@ -663,6 +668,37 @@ define([
kanban.onChange(); 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; return kanban;
}; };

@ -71,6 +71,7 @@
buttonClick: function (el, boardId) {}, buttonClick: function (el, boardId) {},
colorClick: function (el, type) {}, colorClick: function (el, type) {},
addItemClick: function (el, boardId) {}, addItemClick: function (el, boardId) {},
renderMd: function (md) {},
onChange: function () {} onChange: function () {}
}; };
@ -168,7 +169,7 @@
moves: function (el, source, handle, sibling) { moves: function (el, source, handle, sibling) {
if (self.options.readOnly) { return false; } if (self.options.readOnly) { return false; }
if (el.classList.contains('new-item')) { 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) { accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; } if (self.options.readOnly) { return false; }
@ -336,6 +337,26 @@
nodeItemText.dataset.eid = element.id; nodeItemText.dataset.eid = element.id;
nodeItemText.innerText = element.title; nodeItemText.innerText = element.title;
nodeItem.appendChild(nodeItemText); 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 //add function
nodeItem.clickfn = element.click; nodeItem.clickfn = element.click;
nodeItem.dragfn = element.drag; nodeItem.dragfn = element.drag;
@ -549,6 +570,9 @@
} }
this.renderMd = function (md) {
return self.options.renderMd(md);
}
this.onChange = function () { this.onChange = function () {
self.options.onChange(); self.options.onChange();
} }

Loading…
Cancel
Save