web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix UI issues

Browse Source
This commit is contained in:
yflory 2020-03-09 14:27:33 +01:00
parent bc6a329f06
commit 03f65438fd
5 changed files with 171 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/src/less2/include/toolbar.less
View File

@ -168,6 +168,7 @@
position: relative; position: relative;
order: -2; order: -2;
resize: horizontal; resize: horizontal;
z-index: 1;
#cp-app-contacts-container { #cp-app-contacts-container {
height: 100%; height: 100%;
} }
@ -196,6 +197,7 @@
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
order: -3; order: -3;
z-index: 1;
.cp-toolbar-userlist-drawer-close { .cp-toolbar-userlist-drawer-close {
position: absolute; position: absolute;
margin-top: -10px; margin-top: -10px;

270
www/kanban/app-kanban.less
View File

@ -200,110 +200,122 @@
} }
} }
#cp-app-kanban-content { .kanban-board {
flex: 1; main {
display: flex; padding: 0 10px;
flex-flow: column; margin: 10px 0;
max-height: 100%;
overflow-x: auto;
.kanban-container-outer {
flex: 1; flex: 1;
overflow-y: auto;
justify-content: space-around;
min-height: 50px;
}
header {
display: flex; display: flex;
min-height: 0; align-items: center;
.kanban-container { padding: 5px 10px;
.kanban-title-board {
flex: 1; flex: 1;
display: flex; margin-right: 10px;
max-height: 100%; min-width: 0;
overflow: hidden;
//white-space: nowrap;
text-overflow: ellipsis;
}
#kanban-edit {
font-weight: bold;
}
&:hover {
cursor: move;
} }
} }
#cp-kanban-controls { footer {
padding: 10px; margin: 10px;
display: flex; margin-top: 0px;
position: relative; span {
width: 100%; .tools_unselectable();
justify-content: space-between; outline: none;
position: relative; width: 100%;
.cp-kanban-filterTags { border: 1px solid @cryptpad_text_col;
border-radius: 0px;
font-size: 40px;
display: inline-flex; display: inline-flex;
align-items: baseline; justify-content: center;
flex: 1; align-items: center;
max-width: 80%; line-height: 1;
min-width: 150px; cursor: pointer;
&:hover {
&> i { background-color: rgba(0,0,0,0.1);
cursor: pointer;
margin-left: 10px;
}
.cp-kanban-filterTags-name {
flex-shrink: 0;
}
.cp-kanban-filterTags-list {
margin-left: 10px;
display: flex;
flex-wrap: wrap;
em {
font-size: 14px;
color: lighten(@cryptpad_text_col, 10%);
}
span {
.tools_unselectable();
padding: 0 5px;
margin-right: 5px;
margin-top: 5px;
background-color: rgba(0,0,0,0.1);
display: inline-block;
font-size: 14px;
cursor: pointer;
&.active {
background-color: @cryptpad_text_col;
color: #fff;
}
}
}
&> .tokenfield {
border-radius: 0px;
display: inline-flex;
border: 1px solid @cryptpad_text_col;
flex-wrap: nowrap;
align-items: center;
width: 100px;
input {
margin-right: 5px;
}
.token {
order: 2;
border-radius: 0;
margin-left: 5px;
margin-right: 0px;
.token-label {
font-size: 12px;
}
}
} }
} }
.cp-kanban-changeView { }
height: 30px; }
width: 60px;
#cp-kanban-controls {
padding: 10px;
display: flex;
position: relative;
width: 100%;
justify-content: space-between;
position: relative;
min-height: 50px;
.cp-kanban-filterTags {
display: inline-flex;
align-items: baseline;
flex: 1;
max-width: 80%;
min-width: 150px;
&> i {
cursor: pointer;
margin-left: 10px;
}
.cp-kanban-filterTags-name {
flex-shrink: 0;
}
.cp-kanban-filterTags-list {
margin-left: 10px;
display: flex;
flex-wrap: wrap;
em {
font-size: 14px;
color: lighten(@cryptpad_text_col, 10%);
}
span { span {
position: fixed; .tools_unselectable();
height: 30px; padding: 0 5px;
width: 30px; margin-right: 5px;
line-height: 30px; margin-top: 5px;
text-align: center; background-color: rgba(0,0,0,0.1);
display: inline-block; display: inline-block;
background-color: @board-bg; font-size: 14px;
cursor: pointer; cursor: pointer;
&:hover { &.active {
background-color: darken(@board-bg, 10%); background-color: @cryptpad_text_col;
} color: #fff;
&:last-child {
right: 10px;
} }
} }
} }
} }
.cp-kanban-changeView {
right: 10px;
height: 30px;
width: 60px;
span {
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%);
}
}
}
}
#cp-app-kanban-container {
&:not(.cp-kanban-quick) { &:not(.cp-kanban-quick) {
#cp-kanban-controls { #cp-kanban-controls {
.cp-kanban-changeView { .cp-kanban-changeView {
@ -333,6 +345,24 @@
} }
} }
} }
}
#cp-app-kanban-content {
flex: 1;
display: flex;
flex-flow: column;
max-height: 100%;
overflow-x: auto;
.kanban-container-outer {
flex: 1;
display: flex;
min-height: 0;
.kanban-container {
flex: 1;
display: flex;
max-height: 100%;
}
}
#kanban-trash { #kanban-trash {
height: 60px; height: 60px;
font-size: 40px; font-size: 40px;
@ -341,69 +371,27 @@
justify-content: center; justify-content: center;
position: relative; position: relative;
width: 100%; width: 100%;
//pointer-events: none;
i { i {
position: fixed; position: fixed;
} }
div {
width: 100%;
height: 60px;
position: fixed;
right: 0;
}
&.kanban-trash-active { &.kanban-trash-active {
color: red; color: red;
border: 1px solid red; div {
background-color: rgba(255,0,0,0.5); background: rgba(255,0,0,0.5);
}
} }
.kanban-item, .kanban-board { .kanban-item, .kanban-board {
display: none; display: none;
} }
} }
.kanban-board {
main {
padding: 0 10px;
margin: 10px 0;
flex: 1;
overflow-y: auto;
justify-content: space-around;
min-height: 50px;
}
header {
display: flex;
align-items: center;
padding: 5px 10px;
.kanban-title-board {
flex: 1;
margin-right: 10px;
min-width: 0;
overflow: hidden;
//white-space: nowrap;
text-overflow: ellipsis;
}
#kanban-edit {
font-weight: bold;
}
&:hover {
cursor: move;
}
}
footer {
margin: 10px;
margin-top: 0px;
span {
.tools_unselectable();
outline: none;
width: 100%;
border: 1px solid @cryptpad_text_col;
border-radius: 0px;
font-size: 40px;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1;
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.1);
}
}
}
}
#kanban-edit { #kanban-edit {
width: 100%; width: 100%;
background: transparent; background: transparent;

25
www/kanban/inner.js
View File

@ -66,6 +66,9 @@ define([
// use cursor channel to tell others what you are editing // use cursor channel to tell others what you are editing
// add outline + warning inside the modal? // add outline + warning inside the modal?
// XXX
// Fix contrast on migrated card (squad kanban green cards)
var setValueAndCursor = function (input, val, _cursor) { var setValueAndCursor = function (input, val, _cursor) {
if (!input) { return; } if (!input) { return; }
var $input = $(input); var $input = $(input);
@ -711,18 +714,22 @@ define([
}); });
var $container = $('#cp-app-kanban-content'); var $container = $('#cp-app-kanban-content');
$container[0].onclick = function (e) {
console.warn(e);
};
var $cContainer = $('#cp-app-kanban-container');
var addControls = function () { var addControls = function () {
// Quick or normal mode // Quick or normal mode
var small = h('span.cp-kanban-view-small.fa.fa-minus'); var small = h('span.cp-kanban-view-small.fa.fa-minus');
var big = h('span.cp-kanban-view.fa.fa-bars'); var big = h('span.cp-kanban-view.fa.fa-bars');
$(small).click(function () { $(small).click(function () {
if ($container.hasClass('cp-kanban-quick')) { return; } if ($cContainer.hasClass('cp-kanban-quick')) { return; }
$container.addClass('cp-kanban-quick'); $cContainer.addClass('cp-kanban-quick');
framework._.sfCommon.setPadAttribute('quickMode', true); framework._.sfCommon.setPadAttribute('quickMode', true);
}); });
$(big).click(function () { $(big).click(function () {
if (!$container.hasClass('cp-kanban-quick')) { return; } if (!$cContainer.hasClass('cp-kanban-quick')) { return; }
$container.removeClass('cp-kanban-quick'); $cContainer.removeClass('cp-kanban-quick');
framework._.sfCommon.setPadAttribute('quickMode', false); framework._.sfCommon.setPadAttribute('quickMode', false);
}); });
@ -746,9 +753,9 @@ define([
var commitTags = function () { var commitTags = function () {
var t = getTags(); var t = getTags();
if (t.length) { if (t.length) {
$reset.show(); $reset.css('visibility', '');
} else { } else {
$reset.hide(); $reset.css('visibility', 'hidden');
} }
framework._.sfCommon.setPadAttribute('tagsFilter', t); framework._.sfCommon.setPadAttribute('tagsFilter', t);
kanban.options.tags = t; kanban.options.tags = t;
@ -795,7 +802,7 @@ define([
}); });
framework._.sfCommon.setPadAttribute('tagsFilter', tags); framework._.sfCommon.setPadAttribute('tagsFilter', tags);
}; };
$reset.hide().click(function () { $reset.css('visibility', 'hidden').click(function () {
setTags([]); setTags([]);
commitTags(); commitTags();
}); });
@ -807,7 +814,7 @@ define([
big big
]) ])
]); ]);
$container.prepend(container); $container.before(container);
onRedraw.reg(function () { onRedraw.reg(function () {
// Redraw if new tags have been added to items // Redraw if new tags have been added to items
@ -827,7 +834,7 @@ define([
}); });
framework._.sfCommon.getPadAttribute('quickMode', function (err, res) { framework._.sfCommon.getPadAttribute('quickMode', function (err, res) {
if (!err && res) { if (!err && res) {
$container.addClass('cp-kanban-quick'); $cContainer.addClass('cp-kanban-quick');
} }
}); });
}; };

2
www/kanban/jkanban.css
View File

@ -50,7 +50,7 @@
.kanban-item { .kanban-item {
background: #fff; background: #fff;
padding: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 10px;
} }
.kanban-item:hover { .kanban-item:hover {

25
www/kanban/jkanban.js
View File

@ -84,6 +84,21 @@
this.init = function () { this.init = function () {
// set initial boards // set initial boards
__setBoard(); __setBoard();
var $el = $(self.element)
var $inner = $el.find('.kanban-container');
var leftRegion = $el.position().left + 10;
var rightRegion = $(window).width() - 10;
var onMouseMove = function (e) {
if (e.which !== 1) { return; } // left click
var distance = 20;
if (e.pageX < leftRegion) {
distance *= -1;
$el.scrollLeft(distance + $el.scrollLeft()) ;
} else if (e.pageX >= rightRegion) {
$el.scrollLeft(distance + $el.scrollLeft()) ;
}
};
//set drag with dragula //set drag with dragula
if (window.innerWidth > self.options.responsive) { if (window.innerWidth > self.options.responsive) {
@ -109,20 +124,22 @@
if (typeof (el.dragfn) === 'function') { if (typeof (el.dragfn) === 'function') {
el.dragfn(el, source); el.dragfn(el, source);
} }
$(document).on('mousemove', onMouseMove);
}) })
.on('dragend', function (el) { .on('dragend', function (el) {
el.classList.remove('is-moving'); el.classList.remove('is-moving');
self.options.dragendBoard(el); self.options.dragendBoard(el);
$(document).off('mousemove', onMouseMove);
if (typeof (el.dragendfn) === 'function') if (typeof (el.dragendfn) === 'function')
el.dragendfn(el); el.dragendfn(el);
}) })
.on('over', function (el, target, source) { .on('over', function (el, target, source) {
if (!target.classList.contains('kanban-trash')) { return false; } if (!target.classList.contains('kanban-trash')) { return false; }
target.classList.add('kanban-trash-active'); $('.kanban-trash').addClass('kanban-trash-active');
}) })
.on('out', function (el, target) { .on('out', function (el, target) {
if (!target.classList.contains('kanban-trash')) { return false; } if (!target.classList.contains('kanban-trash')) { return false; }
target.classList.remove('kanban-trash-active'); $('.kanban-trash').removeClass('kanban-trash-active');
}) })
.on('drop', function (el, target, source, sibling) { .on('drop', function (el, target, source, sibling) {
el.classList.remove('is-moving'); el.classList.remove('is-moving');
@ -187,6 +204,7 @@
self.dragItemPos = self.findElementPosition(el); self.dragItemPos = self.findElementPosition(el);
el.classList.add('is-moving'); el.classList.add('is-moving');
$(document).on('mousemove', onMouseMove);
self.options.dragEl(el, source); self.options.dragEl(el, source);
if (el !== null && typeof (el.dragfn) === 'function') { if (el !== null && typeof (el.dragfn) === 'function') {
@ -197,6 +215,7 @@
console.log("In dragend"); console.log("In dragend");
el.classList.remove('is-moving'); el.classList.remove('is-moving');
self.options.dragendEl(el); self.options.dragendEl(el);
$(document).off('mousemove', onMouseMove);
if (el !== null && typeof (el.dragendfn) === 'function') { if (el !== null && typeof (el.dragendfn) === 'function') {
el.dragendfn(el); el.dragendfn(el);
} }
@ -631,9 +650,11 @@
var trash = self.trashContainer = document.createElement('div'); var trash = self.trashContainer = document.createElement('div');
trash.setAttribute('id', 'kanban-trash'); trash.setAttribute('id', 'kanban-trash');
trash.setAttribute('class', 'kanban-trash'); trash.setAttribute('class', 'kanban-trash');
var trashBg = document.createElement('div');
var trashIcon = document.createElement('i'); var trashIcon = document.createElement('i');
trashIcon.setAttribute('class', 'fa fa-trash'); trashIcon.setAttribute('class', 'fa fa-trash');
trash.appendChild(trashIcon); trash.appendChild(trashIcon);
trash.appendChild(trashBg);
self.boardContainer.push(trash); self.boardContainer.push(trash);
self.container = boardContainer; self.container = boardContainer;