Display body and tags
This commit is contained in:
yflory
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) {
|
||||
pre > code {
|
||||
display: block;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user