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

This commit is contained in:
syuilo 2018-06-08 04:34:15 +09:00
parent 79d592b431
commit caabdc68f3
4 changed files with 55 additions and 5 deletions

View file

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

View file

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

View file

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

View file

@ -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) { stackLeftDeckColumn(state, id) {
const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1); const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
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));
@ -288,6 +316,16 @@ export default (os: MiOS) => new Vuex.Store({
ctx.dispatch('saveDeck'); 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) { stackLeftDeckColumn(ctx, id) {
ctx.commit('stackLeftDeckColumn', id); ctx.commit('stackLeftDeckColumn', id);
ctx.dispatch('saveDeck'); ctx.dispatch('saveDeck');