モバイル版のウィジェット復活

This commit is contained in:
syuilo 2018-05-17 16:24:01 +09:00
parent 5c38084af5
commit a1692ebc7c
5 changed files with 71 additions and 36 deletions

View file

@ -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が利用できないので強制的にサインアウトさせる // このままではMisskeyが利用できないので強制的にサインアウトさせる
this.on('my_token_regenerated', () => { this.on('my_token_regenerated', () => {

View file

@ -23,6 +23,7 @@ import MkUser from './views/pages/user.vue';
import MkSelectDrive from './views/pages/selectdrive.vue'; import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue'; import MkDrive from './views/pages/drive.vue';
import MkNotifications from './views/pages/notifications.vue'; import MkNotifications from './views/pages/notifications.vue';
import MkWidgets from './views/pages/widgets.vue';
import MkMessaging from './views/pages/messaging.vue'; import MkMessaging from './views/pages/messaging.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkNote from './views/pages/note.vue'; import MkNote from './views/pages/note.vue';
@ -56,6 +57,7 @@ init((launch) => {
{ path: '/i/settings', component: MkSettings }, { path: '/i/settings', component: MkSettings },
{ path: '/i/settings/profile', component: MkProfileSetting }, { path: '/i/settings/profile', component: MkProfileSetting },
{ path: '/i/notifications', name: 'notifications', component: MkNotifications }, { path: '/i/notifications', name: 'notifications', component: MkNotifications },
{ path: '/i/widgets', name: 'widgets', component: MkWidgets },
{ path: '/i/messaging', name: 'messaging', component: MkMessaging }, { path: '/i/messaging', name: 'messaging', component: MkMessaging },
{ path: '/i/messaging/:user', component: MkMessagingRoom }, { path: '/i/messaging/:user', component: MkMessagingRoom },
{ path: '/i/drive', name: 'drive', component: MkDrive }, { path: '/i/drive', name: 'drive', component: MkDrive },

View file

@ -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> <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>
<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> <li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
</ul> </ul>
<ul> <ul>

View file

@ -40,7 +40,7 @@
</x-draggable> </x-draggable>
</template> </template>
<template v-else> <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> </template>
</main> </main>
</mk-ui> </mk-ui>
@ -55,17 +55,24 @@ export default Vue.extend({
components: { components: {
XDraggable XDraggable
}, },
data() { data() {
return { return {
showNav: false, showNav: false,
widgets: [],
customizing: false, customizing: false,
widgetAdderSelected: null widgetAdderSelected: null
}; };
}, },
computed: {
widgets(): any[] {
return this.$store.state.settings.data.mobileHome;
}
},
created() { created() {
if ((this as any).clientSettings.mobileHome == null) { if (this.widgets.length == 0) {
Vue.set((this as any).clientSettings, 'mobileHome', [{ this.widgets = [{
name: 'calendar', name: 'calendar',
id: 'a', data: {} id: 'a', data: {}
}, { }, {
@ -86,18 +93,9 @@ export default Vue.extend({
}, { }, {
name: 'version', name: 'version',
id: 'g', data: {} id: 'g', data: {}
}]); }];
this.widgets = (this as any).clientSettings.mobileHome;
this.saveHome(); this.saveHome();
} else {
this.widgets = (this as any).clientSettings.mobileHome;
} }
this.$watch('clientSettings', i => {
this.widgets = (this as any).clientSettings.mobileHome;
}, {
deep: true
});
}, },
mounted() { mounted() {
@ -105,46 +103,33 @@ export default Vue.extend({
}, },
methods: { 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() { hint() {
alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。'); alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
}, },
widgetFunc(id) { widgetFunc(id) {
const w = this.$refs[id][0]; const w = this.$refs[id][0];
if (w.func) w.func(); if (w.func) w.func();
}, },
onWidgetSort() { onWidgetSort() {
this.saveHome(); this.saveHome();
}, },
addWidget() { addWidget() {
const widget = { this.$store.dispatch('settings/addMobileHomeWidget', {
name: this.widgetAdderSelected, name: this.widgetAdderSelected,
id: uuid(), id: uuid(),
data: {} data: {}
}; });
},
this.widgets.unshift(widget);
this.saveHome();
},
removeWidget(widget) { removeWidget(widget) {
this.widgets = this.widgets.filter(w => w.id != widget.id); this.$store.dispatch('settings/removeMobileHomeWidget', widget);
this.saveHome();
}, },
saveHome() { saveHome() {
(this as any).clientSettings.mobileHome = this.widgets; this.$store.commit('settings/setMobileHome', this.widgets);
(this as any).api('i/update_mobile_home', { (this as any).api('i/update_mobile_home', {
home: this.widgets home: this.widgets
}); });

View file

@ -3,6 +3,7 @@ import MiOS from './mios';
const defaultSettings = { const defaultSettings = {
home: [], home: [],
mobileHome: [],
fetchOnScroll: true, fetchOnScroll: true,
showMaps: true, showMaps: true,
showPostFormOnTopOfTl: false, showPostFormOnTopOfTl: false,
@ -58,6 +59,25 @@ export default (os: MiOS) => new Vuex.Store({
addHomeWidget(state, widget) { addHomeWidget(state, widget) {
state.data.home.unshift(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', { os.api('i/update_home', {
home: ctx.state.data.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)
});
} }
} }
} }