MisskeyDeck: ドラッグでカラムを入れ替えられるように

This commit is contained in:
syuilo 2018-06-08 08:38:32 +09:00
parent fa171f237d
commit b05feb5bf7
2 changed files with 80 additions and 3 deletions

View File

@ -1,6 +1,15 @@
<template> <template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked }"> <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging }">
<header :class="{ indicate: count > 0 }" @click="toggleActive"> <header :class="{ indicate: count > 0 }"
draggable="true"
@click="toggleActive"
@dragstart="onDragstart"
@dragend="onDragend"
@dragover.prevent.stop="onDragover"
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
>
<slot name="header"></slot> <slot name="header"></slot>
<span class="count" v-if="count > 0">({{ count }})</span> <span class="count" v-if="count > 0">({{ count }})</span>
<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button> <button ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
@ -53,7 +62,9 @@ export default Vue.extend({
data() { data() {
return { return {
count: 0, count: 0,
active: true active: true,
dragging: false,
draghover: false
}; };
}, },
@ -162,6 +173,49 @@ export default Vue.extend({
compact: false, compact: false,
items items
}); });
},
onDragstart(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('mk-deck-column', this.column.id);
this.dragging = true;
},
onDragend(e) {
this.dragging = false;
},
onDragover(e) {
//
if (this.dragging) {
//
e.dataTransfer.dropEffect = 'none';
return;
}
const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
},
onDragenter() {
if (!this.dragging) this.draghover = true;
},
onDragleave() {
this.draghover = false;
},
onDrop(e) {
this.draghover = false;
const id = e.dataTransfer.getData('mk-deck-column');
if (id != null && id != '') {
this.$store.dispatch('settings/swapDeckColumn', {
a: this.column.id,
b: id
});
}
} }
} }
}); });
@ -181,6 +235,10 @@ root(isDark)
box-shadow 0 2px 16px rgba(#000, 0.1) box-shadow 0 2px 16px rgba(#000, 0.1)
overflow hidden overflow hidden
&.draghover
&.dragging
box-shadow 0 0 0 2px rgba($theme-color, 0.7)
&:not(.active) &:not(.active)
flex-basis $header-height flex-basis $header-height
min-height $header-height min-height $header-height
@ -213,6 +271,9 @@ root(isDark)
&, * &, *
user-select none user-select none
*:not(button)
pointer-events none
&.indicate &.indicate
box-shadow 0 3px 0 0 $theme-color box-shadow 0 3px 0 0 $theme-color

View File

@ -182,6 +182,17 @@ export default (os: MiOS) => new Vuex.Store({
state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id)); state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
}, },
swapDeckColumn(state, x) {
const a = x.a;
const b = x.b;
const aX = state.deck.layout.findIndex(ids => ids.indexOf(a) != -1);
const aY = state.deck.layout[aX].findIndex(id => id == a);
const bX = state.deck.layout.findIndex(ids => ids.indexOf(b) != -1);
const bY = state.deck.layout[bX].findIndex(id => id == b);
state.deck.layout[aX][aY] = b;
state.deck.layout[bX][bY] = a;
},
swapLeftDeckColumn(state, id) { swapLeftDeckColumn(state, id) {
state.deck.layout.some((ids, i) => { state.deck.layout.some((ids, i) => {
if (ids.indexOf(id) != -1) { if (ids.indexOf(id) != -1) {
@ -306,6 +317,11 @@ export default (os: MiOS) => new Vuex.Store({
ctx.dispatch('saveDeck'); ctx.dispatch('saveDeck');
}, },
swapDeckColumn(ctx, id) {
ctx.commit('swapDeckColumn', id);
ctx.dispatch('saveDeck');
},
swapLeftDeckColumn(ctx, id) { swapLeftDeckColumn(ctx, id) {
ctx.commit('swapLeftDeckColumn', id); ctx.commit('swapLeftDeckColumn', id);
ctx.dispatch('saveDeck'); ctx.dispatch('saveDeck');