MisskeyDeck: ドラッグでカラムを入れ替えられるように
This commit is contained in:
parent
fa171f237d
commit
b05feb5bf7
2 changed files with 80 additions and 3 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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');
|
||||||
|
|
Loading…
Reference in a new issue