From b05feb5bf76922d1777ec2f6c97159069d2e3df1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 8 Jun 2018 08:38:32 +0900
Subject: [PATCH] =?UTF-8?q?MisskeyDeck:=20=E3=83=89=E3=83=A9=E3=83=83?=
=?UTF-8?q?=E3=82=B0=E3=81=A7=E3=82=AB=E3=83=A9=E3=83=A0=E3=82=92=E5=85=A5?=
=?UTF-8?q?=E3=82=8C=E6=9B=BF=E3=81=88=E3=82=89=E3=82=8C=E3=82=8B=E3=82=88?=
=?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../desktop/views/pages/deck/deck.column.vue | 67 ++++++++++++++++++-
src/client/app/store.ts | 16 +++++
2 files changed, 80 insertions(+), 3 deletions(-)
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 3e26d8630..7c97e4506 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -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
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index e6c3863d7..0dbdf9bd5 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -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');