MisskeyDeck: スタックしたカラムを上下移動できるように

locales/ja.yml

@@ -85,6 +85,8 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"

src/client/app/common/views/components/menu.vue

@@ -3,8 +3,8 @@
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ hukidasi }" ref="popover">
 		<template v-for="item in items">
-			<div v-if="item == null"></div>
-			<button v-else @click="clicked(item.onClick)" v-html="item.content"></button>
+			<div v-if="item === null"></div>
+			<button v-if="item" @click="clicked(item.onClick)" v-html="item.content"></button>
 		</template>
 	</div>
 </div>

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -111,17 +111,27 @@ export default Vue.extend({
 				onClick: () => {
 					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
 				}
-			}, null, {
+			}, this.isStacked ? {
+				content: '%fa:arrow-up% %i18n:common.deck.swap-up%',
+				onClick: () => {
+					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
+				}
+			} : undefined, this.isStacked ? {
+				content: '%fa:arrow-down% %i18n:common.deck.swap-down%',
+				onClick: () => {
+					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
 				content: '%fa:window-restore R% %i18n:common.deck.stack-left%',
 				onClick: () => {
 					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
 				}
-			}, {
+			}, this.isStacked ? {
 				content: '%fa:window-restore R% %i18n:common.deck.pop-right%',
 				onClick: () => {
 					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
 				}
-			}, null, {
+			} : undefined, null, {
 				content: '%fa:trash-alt R% %i18n:common.deck.remove%',
 				onClick: () => {
 					this.$store.dispatch('settings/removeDeckColumn', this.column.id);

src/client/app/store.ts

@@ -208,6 +208,34 @@ export default (os: MiOS) => new Vuex.Store({
 					});
 				},
 
+				swapUpDeckColumn(state, id) {
+					const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
+					ids.some((x, i) => {
+						if (x == id) {
+							const up = ids[i - 1];
+							if (up) {
+								ids[i - 1] = id;
+								ids[i] = up;
+							}
+							return true;
+						}
+					});
+				},
+
+				swapDownDeckColumn(state, id) {
+					const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
+					ids.some((x, i) => {
+						if (x == id) {
+							const down = ids[i + 1];
+							if (down) {
+								ids[i + 1] = id;
+								ids[i] = down;
+							}
+							return true;
+						}
+					});
+				},
+
 				stackLeftDeckColumn(state, id) {
 					const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
 					state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
@@ -288,6 +316,16 @@ export default (os: MiOS) => new Vuex.Store({
 					ctx.dispatch('saveDeck');
 				},
 
+				swapUpDeckColumn(ctx, id) {
+					ctx.commit('swapUpDeckColumn', id);
+					ctx.dispatch('saveDeck');
+				},
+
+				swapDownDeckColumn(ctx, id) {
+					ctx.commit('swapDownDeckColumn', id);
+					ctx.dispatch('saveDeck');
+				},
+
 				stackLeftDeckColumn(ctx, id) {
 					ctx.commit('stackLeftDeckColumn', id);
 					ctx.dispatch('saveDeck');