mirror of
https://iceshrimp.dev/iceshrimp/iceshrimp
synced 2024-12-05 10:18:05 +09:00
MisskeyDeck: ドラッグでカラムを入れ替えられるように
This commit is contained in:
parent
685244e282
commit
41866263ba
@ -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
|
||||
|
||||
|
@ -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');
|
||||
|
Loading…
Reference in New Issue
Block a user