Issue : UI feature suggestion: drag handles and long press #1772

Resolved #1772
This commit is contained in:
hupptechnologies 2018-12-20 14:42:46 +05:30
parent ac6f8e8551
commit a9be6b17b9
5 changed files with 25 additions and 7 deletions

View file

@ -86,7 +86,7 @@ momentjs:moment@2.22.2
browser-policy-framing browser-policy-framing
mquandalle:moment mquandalle:moment
msavin:usercache msavin:usercache
wekan:wekan-ldap #wekan:wekan-ldap
wekan:accounts-cas #wekan:accounts-cas
wekan-scrollbar #wekan-scrollbar
mquandalle:perfect-scrollbar mquandalle:perfect-scrollbar

View file

@ -179,8 +179,4 @@ useraccounts:unstyled@1.14.2
verron:autosize@3.0.8 verron:autosize@3.0.8
webapp@1.4.0 webapp@1.4.0
webapp-hashing@1.0.9 webapp-hashing@1.0.9
wekan-scrollbar@3.1.3
wekan:accounts-cas@0.1.0
wekan:wekan-ldap@0.0.2
yasaricli:slugify@0.0.7
zimme:active-route@2.3.2 zimme:active-route@2.3.2

View file

@ -9,6 +9,8 @@ template(name="minicard")
each labels each labels
.minicard-label(class="card-label-{{color}}" title="{{name}}") .minicard-label(class="card-label-{{color}}" title="{{name}}")
.minicard-title .minicard-title
.handle
.fa.fa-arrows
if $eq 'prefix-with-full-path' currentBoard.presentParentTask if $eq 'prefix-with-full-path' currentBoard.presentParentTask
.parent-prefix .parent-prefix
| {{ parentString ' > ' }} | {{ parentString ' > ' }}

View file

@ -94,6 +94,19 @@
.minicard-custom-field-item .minicard-custom-field-item
max-width:50%; max-width:50%;
flex-grow:1; flex-grow:1;
.handle
width: 20px;
height: 20px;
position: absolute;
right: 5px;
top: 5px;
display:none;
@media only screen and (max-width: 1199px) {
display:block;
}
.fa-arrows
font-size:20px;
color: #ccc;
.minicard-title .minicard-title
p:last-child p:last-child
margin-bottom: 0 margin-bottom: 0

View file

@ -26,6 +26,13 @@ BlazeComponent.extendComponent({
const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)'; const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
const $cards = this.$('.js-minicards'); const $cards = this.$('.js-minicards');
if(window.matchMedia('(max-width: 1199px)').matches) {
$( '.js-minicards' ).sortable({
handle: '.handle',
});
}
$cards.sortable({ $cards.sortable({
connectWith: '.js-minicards:not(.js-list-full)', connectWith: '.js-minicards:not(.js-list-full)',
tolerance: 'pointer', tolerance: 'pointer',