diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index df74f5ddfb..f30e3f953b 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -1,6 +1,7 @@ import Vue from 'vue'; import analogClock from './analog-clock.vue'; +import menu from './menu.vue'; import signin from './signin.vue'; import signup from './signup.vue'; import forkit from './forkit.vue'; @@ -29,6 +30,7 @@ import Othello from './othello.vue'; import welcomeTimeline from './welcome-timeline.vue'; Vue.component('mk-analog-clock', analogClock); +Vue.component('mk-menu', menu); Vue.component('mk-signin', signin); Vue.component('mk-signup', signup); Vue.component('mk-forkit', forkit); diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue new file mode 100644 index 0000000000..e5df8345b9 --- /dev/null +++ b/src/client/app/common/views/components/menu.vue @@ -0,0 +1,153 @@ + + + + + diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue index a400610a2b..951a9ed1d9 100644 --- a/src/client/app/common/views/components/note-menu.vue +++ b/src/client/app/common/views/components/note-menu.vue @@ -1,55 +1,41 @@ - - 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 bae28f3a64..2e95086f4e 100644 --- a/src/client/app/desktop/views/pages/deck/deck.column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.column.vue @@ -2,6 +2,7 @@
+
@@ -11,8 +12,16 @@ diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue index 0566989642..bfc2af1935 100644 --- a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue @@ -1,6 +1,6 @@ @@ -16,6 +17,8 @@ import Vue from 'vue'; import XTlColumn from './deck.tl-column.vue'; import XNotificationsColumn from './deck.notifications-column.vue'; +import Menu from '../../../../common/views/components/menu.vue'; +import MkUserListsWindow from '../../components/user-lists-window.vue'; import * as uuid from 'uuid'; export default Vue.extend({ @@ -55,6 +58,61 @@ export default Vue.extend({ value: deck }); } + }, + + methods: { + add() { + this.os.new(Menu, { + source: this.$refs.add, + compact: true, + items: [{ + content: '%i18n:@home%', + onClick: () => { + this.$store.dispatch('settings/addDeckColumn', { + id: uuid(), + type: 'home' + }); + } + }, { + content: '%i18n:@local%', + onClick: () => { + this.$store.dispatch('settings/addDeckColumn', { + id: uuid(), + type: 'local' + }); + } + }, { + content: '%i18n:@global%', + onClick: () => { + this.$store.dispatch('settings/addDeckColumn', { + id: uuid(), + type: 'global' + }); + } + }, { + content: '%i18n:@list%', + onClick: () => { + const w = (this as any).os.new(MkUserListsWindow); + w.$once('choosen', list => { + this.$store.dispatch('settings/addDeckColumn', { + id: uuid(), + type: 'list', + list: list + }); + w.close(); + }); + } + }, { + content: '%i18n:@notifications%', + onClick: () => { + this.$store.dispatch('settings/addDeckColumn', { + id: uuid(), + type: 'notifications' + }); + } + }] + }); + } } }); diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts index a8da5ddb55..c644e22087 100644 --- a/src/client/app/mios.ts +++ b/src/client/app/mios.ts @@ -73,12 +73,12 @@ export default class MiOS extends EventEmitter { public app: Vue; public new(vm, props) { - const w = new vm({ + const x = new vm({ parent: this.app, propsData: props }).$mount(); - document.body.appendChild(w.$el); - return w; + document.body.appendChild(x.$el); + return x; } /** diff --git a/src/client/app/store.ts b/src/client/app/store.ts index 7795c9477a..17faeb97e5 100644 --- a/src/client/app/store.ts +++ b/src/client/app/store.ts @@ -152,6 +152,44 @@ export default (os: MiOS) => new Vuex.Store({ removeMobileHomeWidget(state, widget) { state.mobileHome = state.mobileHome.filter(w => w.id != widget.id); + }, + + addDeckColumn(state, column) { + if (state.deck.columns == null) state.deck.columns = []; + state.deck.columns.push(column); + }, + + removeDeckColumn(state, id) { + if (state.deck.columns == null) return; + state.deck.columns = state.deck.columns.filter(c => c.id != id); + }, + + swapLeftDeckColumn(state, id) { + if (state.deck.columns == null) return; + state.deck.columns.some((c, i) => { + if (c.id == id) { + const left = state.deck.columns[i - 1]; + if (left) { + state.deck.columns[i - 1] = state.deck.columns[i]; + state.deck.columns[i] = left; + } + return true; + } + }); + }, + + swapRightDeckColumn(state, id) { + if (state.deck.columns == null) return; + state.deck.columns.some((c, i) => { + if (c.id == id) { + const right = state.deck.columns[i + 1]; + if (right) { + state.deck.columns[i + 1] = state.deck.columns[i]; + state.deck.columns[i] = right; + } + return true; + } + }); } }, @@ -174,6 +212,42 @@ export default (os: MiOS) => new Vuex.Store({ } }, + addDeckColumn(ctx, column) { + ctx.commit('addDeckColumn', column); + + os.api('i/update_client_setting', { + name: 'deck', + value: ctx.state.deck + }); + }, + + removeDeckColumn(ctx, id) { + ctx.commit('removeDeckColumn', id); + + os.api('i/update_client_setting', { + name: 'deck', + value: ctx.state.deck + }); + }, + + swapLeftDeckColumn(ctx, id) { + ctx.commit('swapLeftDeckColumn', id); + + os.api('i/update_client_setting', { + name: 'deck', + value: ctx.state.deck + }); + }, + + swapRightDeckColumn(ctx, id) { + ctx.commit('swapRightDeckColumn', id); + + os.api('i/update_client_setting', { + name: 'deck', + value: ctx.state.deck + }); + }, + addHomeWidget(ctx, widget) { ctx.commit('addHomeWidget', widget);