From 9069a99a15ec7c5481079aeea728a3ad18eddd36 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Wed, 30 May 2018 04:45:27 +0900 Subject: [PATCH] wip --- locales/ja.yml | 7 +- src/client/app/mobile/script.ts | 4 ++ .../app/mobile/views/components/ui.nav.vue | 12 ++-- .../app/mobile/views/pages/user-list.vue | 63 +++++++++++++++++ .../app/mobile/views/pages/user-lists.vue | 68 +++++++++++++++++++ 5 files changed, 149 insertions(+), 5 deletions(-) create mode 100644 src/client/app/mobile/views/pages/user-list.vue create mode 100644 src/client/app/mobile/views/pages/user-lists.vue diff --git a/locales/ja.yml b/locales/ja.yml index 78353fb99..f72058e12 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -838,12 +838,13 @@ mobile/views/components/timeline.vue: load-more: "もっと" mobile/views/components/ui.nav.vue: - home: "ホーム" + timeline: "タイムライン" notifications: "通知" messaging: "メッセージ" search: "検索" drive: "ドライブ" favorites: "お気に入り" + user-lists: "リスト" widgets: "ウィジェット" game: "ゲーム" darkmode: "ダークモード" @@ -863,6 +864,10 @@ mobile/views/components/users-list.vue: mobile/views/pages/favorites.vue: title: "お気に入り" +mobile/views/pages/user-lists.vue: + title: "リスト" + enter-list-name: "リスト名を入力してください" + mobile/views/pages/drive.vue: drive: "ドライブ" more: "もっと見る" diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 4c3d8fc3b..607ff6371 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -37,6 +37,8 @@ import MkSearch from './views/pages/search.vue'; import MkFollowers from './views/pages/followers.vue'; import MkFollowing from './views/pages/following.vue'; import MkFavorites from './views/pages/favorites.vue'; +import MkUserLists from './views/pages/user-lists.vue'; +import MkUserList from './views/pages/user-list.vue'; import MkSettings from './views/pages/settings.vue'; import MkOthello from './views/pages/othello.vue'; @@ -74,6 +76,8 @@ init((launch) => { { path: '/i/settings', name: 'settings', component: MkSettings }, { path: '/i/notifications', name: 'notifications', component: MkNotifications }, { path: '/i/favorites', name: 'favorites', component: MkFavorites }, + { path: '/i/lists', name: 'user-lists', component: MkUserLists }, + { path: '/i/lists/:list', name: 'user-list', component: MkUserList }, { path: '/i/widgets', name: 'widgets', component: MkWidgets }, { path: '/i/messaging', name: 'messaging', component: MkMessaging }, { path: '/i/messaging/:user', component: MkMessagingRoom }, diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue index 7e22ac4f8..11a8f7ab9 100644 --- a/src/client/app/mobile/views/components/ui.nav.vue +++ b/src/client/app/mobile/views/components/ui.nav.vue @@ -15,14 +15,15 @@ </router-link> <div class="links"> <ul> - <li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li> + <li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@timeline%%fa:angle-right%</router-link></li> <li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotification">%fa:circle%</template>%fa:angle-right%</router-link></li> <li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>%fa:angle-right%</router-link></li> <li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%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/widgets" :data-active="$route.name == 'widgets'">%fa:R calendar-alt%%i18n:@widgets%%fa:angle-right%</router-link></li> <li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'">%fa:star%%i18n:@favorites%%fa:angle-right%</router-link></li> + <li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'">%fa:list%%i18n:@user-lists%%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> @@ -157,7 +158,10 @@ root(isDark) &:first-child margin-top 0 - li + &:last-child + margin-bottom 0 + + > li display block font-size 1em line-height 1em @@ -199,7 +203,7 @@ root(isDark) opacity 0.5 .about - margin 0 + margin 0 0 8px 0 padding 1em 0 text-align center font-size 0.8em diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue new file mode 100644 index 000000000..7440dbcb6 --- /dev/null +++ b/src/client/app/mobile/views/pages/user-list.vue @@ -0,0 +1,63 @@ +<template> +<mk-ui> + <span slot="header" v-if="!fetching">%fa:list%{{ list.title }}</span> + + <main v-if="!fetching"> + <ul> + <li v-for="user in list.users" :key="user.id"><router-link :to="user | userPage">{{ user | userName }}</router-link></li> + </ul> + </main> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import Progress from '../../../common/scripts/loading'; + +export default Vue.extend({ + data() { + return { + fetching: true, + list: null + }; + }, + watch: { + $route: 'fetch' + }, + created() { + this.fetch(); + }, + methods: { + fetch() { + Progress.start(); + this.fetching = true; + + (this as any).api('users/lists/show', { + listId: this.$route.params.list + }).then(list => { + this.list = list; + this.fetching = false; + + Progress.done(); + }); + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +main + width 100% + max-width 680px + margin 0 auto + padding 8px + + @media (min-width 500px) + padding 16px + + @media (min-width 600px) + padding 32px + +</style> diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue new file mode 100644 index 000000000..288295677 --- /dev/null +++ b/src/client/app/mobile/views/pages/user-lists.vue @@ -0,0 +1,68 @@ +<template> +<mk-ui> + <span slot="header">%fa:list%%i18n:@title%</span> + <template slot="func"><button @click="fn">%fa:plus%</button></template> + + <main> + <ul> + <li v-for="list in lists" :key="list.id"><router-link :to="`/i/lists/${list.id}`">{{ list.title }}</router-link></li> + </ul> + </main> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import Progress from '../../../common/scripts/loading'; + +export default Vue.extend({ + data() { + return { + fetching: true, + lists: [] + }; + }, + mounted() { + document.title = 'Misskey | %i18n:@title%'; + + Progress.start(); + + (this as any).api('users/lists/list').then(lists => { + this.fetching = false; + this.lists = lists; + + Progress.done(); + }); + }, + methods: { + fn() { + (this as any).apis.input({ + title: '%i18n:@enter-list-name%', + }).then(async title => { + const list = await (this as any).api('users/lists/create', { + title + }); + + this.$router.push('/i/lists/' + list.id); + }); + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +main + width 100% + max-width 680px + margin 0 auto + padding 8px + + @media (min-width 500px) + padding 16px + + @media (min-width 600px) + padding 32px + +</style>