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

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が利用できないので強制的にサインアウトさせる
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 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 },

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>
</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>

View file

@ -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
});

View file

@ -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)
});
}
}
}