diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index 32685f3c2..09d830bec 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 2e9805e0d..1405139be 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 5c65d5223..ec42dbc99 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 @@
%fa:gamepad%ゲーム%fa:circle%%fa:angle-right%
+ - %fa:quidditch%%i18n:@widgets%%fa:angle-right%
- %fa:cloud%%i18n:@drive%%fa:angle-right%
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 a5ca6cb4a..338a5288b 100644
--- a/src/client/app/mobile/views/pages/dashboard.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -40,7 +40,7 @@
-
+
@@ -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 0bdfdef6a..e9cd952bd 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)
+ });
}
}
}