From a1692ebc7cfa7b3c6943d552ae059261fa5d18d3 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 17 May 2018 16:24:01 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E7=89=88?= =?UTF-8?q?=E3=81=AE=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7=E3=83=83=E3=83=88?= =?UTF-8?q?=E5=BE=A9=E6=B4=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/common/scripts/streaming/home.ts | 11 ++++ src/client/app/mobile/script.ts | 2 + .../app/mobile/views/components/ui.nav.vue | 1 + .../pages/{dashboard.vue => widgets.vue} | 57 +++++++------------ src/client/app/store.ts | 36 ++++++++++++ 5 files changed, 71 insertions(+), 36 deletions(-) rename src/client/app/mobile/views/pages/{dashboard.vue => widgets.vue} (77%) diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts index 32685f3c2c..09d830bece 100644 --- a/src/client/app/common/scripts/streaming/home.ts +++ b/src/client/app/common/scripts/streaming/home.ts @@ -48,6 +48,17 @@ export class HomeStream extends Stream { } }); + this.on('mobile_home_updated', x => { + if (x.home) { + os.store.commit('settings/setMobileHome', x.home); + } else { + os.store.commit('settings/setMobileHomeWidget', { + id: x.id, + data: x.data + }); + } + }); + // トークンが再生成されたとき // このままではMisskeyが利用できないので強制的にサインアウトさせる this.on('my_token_regenerated', () => { diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 2e9805e0d0..1405139be6 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -23,6 +23,7 @@ import MkUser from './views/pages/user.vue'; import MkSelectDrive from './views/pages/selectdrive.vue'; import MkDrive from './views/pages/drive.vue'; import MkNotifications from './views/pages/notifications.vue'; +import MkWidgets from './views/pages/widgets.vue'; import MkMessaging from './views/pages/messaging.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue'; import MkNote from './views/pages/note.vue'; @@ -56,6 +57,7 @@ init((launch) => { { path: '/i/settings', component: MkSettings }, { path: '/i/settings/profile', component: MkProfileSetting }, { path: '/i/notifications', name: 'notifications', component: MkNotifications }, + { path: '/i/widgets', name: 'widgets', component: MkWidgets }, { path: '/i/messaging', name: 'messaging', component: MkMessaging }, { path: '/i/messaging/:user', component: MkMessagingRoom }, { path: '/i/drive', name: 'drive', component: MkDrive }, diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue index 5c65d52237..ec42dbc99d 100644 --- a/src/client/app/mobile/views/components/ui.nav.vue +++ b/src/client/app/mobile/views/components/ui.nav.vue @@ -21,6 +21,7 @@ <li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li> </ul> <ul> + <li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:quidditch%%i18n:@widgets%%fa:angle-right%</router-link></li> <li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li> </ul> <ul> diff --git a/src/client/app/mobile/views/pages/dashboard.vue b/src/client/app/mobile/views/pages/widgets.vue similarity index 77% rename from src/client/app/mobile/views/pages/dashboard.vue rename to src/client/app/mobile/views/pages/widgets.vue index a5ca6cb4a2..338a5288bb 100644 --- a/src/client/app/mobile/views/pages/dashboard.vue +++ b/src/client/app/mobile/views/pages/widgets.vue @@ -40,7 +40,7 @@ </x-draggable> </template> <template v-else> - <component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/> + <component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true"/> </template> </main> </mk-ui> @@ -55,17 +55,24 @@ export default Vue.extend({ components: { XDraggable }, + data() { return { showNav: false, - widgets: [], customizing: false, widgetAdderSelected: null }; }, + + computed: { + widgets(): any[] { + return this.$store.state.settings.data.mobileHome; + } + }, + created() { - if ((this as any).clientSettings.mobileHome == null) { - Vue.set((this as any).clientSettings, 'mobileHome', [{ + if (this.widgets.length == 0) { + this.widgets = [{ name: 'calendar', id: 'a', data: {} }, { @@ -86,18 +93,9 @@ export default Vue.extend({ }, { name: 'version', id: 'g', data: {} - }]); - this.widgets = (this as any).clientSettings.mobileHome; + }]; this.saveHome(); - } else { - this.widgets = (this as any).clientSettings.mobileHome; } - - this.$watch('clientSettings', i => { - this.widgets = (this as any).clientSettings.mobileHome; - }, { - deep: true - }); }, mounted() { @@ -105,46 +103,33 @@ export default Vue.extend({ }, methods: { - onHomeUpdated(data) { - if (data.home) { - (this as any).clientSettings.mobileHome = data.home; - this.widgets = data.home; - } else { - const w = (this as any).clientSettings.mobileHome.find(w => w.id == data.id); - if (w != null) { - w.data = data.data; - this.$refs[w.id][0].preventSave = true; - this.$refs[w.id][0].props = w.data; - this.widgets = (this as any).clientSettings.mobileHome; - } - } - }, hint() { alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。'); }, + widgetFunc(id) { const w = this.$refs[id][0]; if (w.func) w.func(); }, + onWidgetSort() { this.saveHome(); }, + addWidget() { - const widget = { + this.$store.dispatch('settings/addMobileHomeWidget', { name: this.widgetAdderSelected, id: uuid(), data: {} - }; + }); + }, - this.widgets.unshift(widget); - this.saveHome(); - }, removeWidget(widget) { - this.widgets = this.widgets.filter(w => w.id != widget.id); - this.saveHome(); + this.$store.dispatch('settings/removeMobileHomeWidget', widget); }, + saveHome() { - (this as any).clientSettings.mobileHome = this.widgets; + this.$store.commit('settings/setMobileHome', this.widgets); (this as any).api('i/update_mobile_home', { home: this.widgets }); diff --git a/src/client/app/store.ts b/src/client/app/store.ts index 0bdfdef6a0..e9cd952bde 100644 --- a/src/client/app/store.ts +++ b/src/client/app/store.ts @@ -3,6 +3,7 @@ import MiOS from './mios'; const defaultSettings = { home: [], + mobileHome: [], fetchOnScroll: true, showMaps: true, showPostFormOnTopOfTl: false, @@ -58,6 +59,25 @@ export default (os: MiOS) => new Vuex.Store({ addHomeWidget(state, widget) { state.data.home.unshift(widget); + }, + + setMobileHome(state, data) { + state.data.mobileHome = data; + }, + + setMobileHomeWidget(state, x) { + const w = state.data.mobileHome.find(w => w.id == x.id); + if (w) { + w.data = x.data; + } + }, + + addMobileHomeWidget(state, widget) { + state.data.mobileHome.unshift(widget); + }, + + removeMobileHomeWidget(state, widget) { + state.data.mobileHome = state.data.mobileHome.filter(w => w.id != widget.id); } }, @@ -85,6 +105,22 @@ export default (os: MiOS) => new Vuex.Store({ os.api('i/update_home', { home: ctx.state.data.home }); + }, + + addMobileHomeWidget(ctx, widget) { + ctx.commit('addMobileHomeWidget', widget); + + os.api('i/update_mobile_home', { + home: ctx.state.data.mobileHome + }); + }, + + removeMobileHomeWidget(ctx, widget) { + ctx.commit('removeMobileHomeWidget', widget); + + os.api('i/update_mobile_home', { + home: ctx.state.data.mobileHome.filter(w => w.id != widget.id) + }); } } }