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
src/client/app
desktop/views/pages/deck
store.ts

View file

@ -1,6 +1,15 @@
<template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked }">
<header :class="{ indicate: count > 0 }" @click="toggleActive">
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging }">
<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>
<span class="count" v-if="count > 0">({{ count }})</span>
<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
@ -53,7 +62,9 @@ export default Vue.extend({
data() {
return {
count: 0,
active: true
active: true,
dragging: false,
draghover: false
};
},
@ -162,6 +173,49 @@ export default Vue.extend({
compact: false,
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)
overflow hidden
&.draghover
&.dragging
box-shadow 0 0 0 2px rgba($theme-color, 0.7)
&:not(.active)
flex-basis $header-height
min-height $header-height
@ -213,6 +271,9 @@ root(isDark)
&, *
user-select none
*:not(button)
pointer-events none
&.indicate
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));
},
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) {
state.deck.layout.some((ids, i) => {
if (ids.indexOf(id) != -1) {
@ -306,6 +317,11 @@ export default (os: MiOS) => new Vuex.Store({
ctx.dispatch('saveDeck');
},
swapDeckColumn(ctx, id) {
ctx.commit('swapDeckColumn', id);
ctx.dispatch('saveDeck');
},
swapLeftDeckColumn(ctx, id) {
ctx.commit('swapLeftDeckColumn', id);
ctx.dispatch('saveDeck');