infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix UI issues

Browse Source
pull/1/head
yflory 5 years ago
parent bc6a329f06
commit 03f65438fd
5 changed files with 169 additions and 151 deletions
Show Stats Download Patch File Download Diff File

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

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

266
www/kanban/app-kanban.less
Unescape Escape View File

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

25
www/kanban/inner.js
Unescape Escape View File

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

2
www/kanban/jkanban.css
Unescape Escape View File

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

25
www/kanban/jkanban.js
Unescape Escape View File

@ -84,6 +84,21 @@
this.init = function () {
// set initial boards
__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
if (window.innerWidth > self.options.responsive) {
@ -109,20 +124,22 @@
if (typeof (el.dragfn) === 'function') {
el.dragfn(el, source);
}
$(document).on('mousemove', onMouseMove);
})
.on('dragend', function (el) {
el.classList.remove('is-moving');
self.options.dragendBoard(el);
$(document).off('mousemove', onMouseMove);
if (typeof (el.dragendfn) === 'function')
el.dragendfn(el);
})
.on('over', function (el, target, source) {
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) {
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) {
el.classList.remove('is-moving');
@ -187,6 +204,7 @@
self.dragItemPos = self.findElementPosition(el);
el.classList.add('is-moving');
$(document).on('mousemove', onMouseMove);
self.options.dragEl(el, source);
if (el !== null && typeof (el.dragfn) === 'function') {
@ -197,6 +215,7 @@
console.log("In dragend");
el.classList.remove('is-moving');
self.options.dragendEl(el);
$(document).off('mousemove', onMouseMove);
if (el !== null && typeof (el.dragendfn) === 'function') {
el.dragendfn(el);
}
@ -631,9 +650,11 @@
var trash = self.trashContainer = document.createElement('div');
trash.setAttribute('id', 'kanban-trash');
trash.setAttribute('class', 'kanban-trash');
var trashBg = document.createElement('div');
var trashIcon = document.createElement('i');
trashIcon.setAttribute('class', 'fa fa-trash');
trash.appendChild(trashIcon);
trash.appendChild(trashBg);
self.boardContainer.push(trash);
self.container = boardContainer;

Write Preview
Loading…
Cancel
Save