Fix UI issues
This commit is contained in:
yflory
parent
bc6a329f06
commit
03f65438fd
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
|
||||
@ -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');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
.kanban-item {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kanban-item:hover {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user