diff options
Diffstat (limited to 'src/client')
14 files changed, 338 insertions, 101 deletions
diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts index 50bbb56896..f07d0289f6 100644 --- a/src/client/app/common/scripts/streaming/home.ts +++ b/src/client/app/common/scripts/streaming/home.ts @@ -20,7 +20,7 @@ export class HomeStream extends Stream { }, 1000 * 60); // 自分の情報が更新されたとき - this.on('i_updated', i => { + this.on('meUpdated', i => { if (os.debug) { console.log('I updated:', i); } diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue index dae7604957..c7549c374e 100644 --- a/src/client/app/desktop/views/components/follow-button.vue +++ b/src/client/app/desktop/views/components/follow-button.vue @@ -1,19 +1,16 @@ <template> <button class="mk-follow-button" - :class="{ wait, follow: !user.isFollowing, unfollow: user.isFollowing, big: size == 'big' }" + :class="{ wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou, big: size == 'big' }" @click="onClick" :disabled="wait" - :title="user.isFollowing ? '%i18n:@unfollow%' : '%i18n:@follow%'" > - <template v-if="!wait && user.isFollowing"> - <template v-if="size == 'compact'">%fa:minus%</template> - <template v-if="size == 'big'">%fa:minus%%i18n:@unfollow%</template> + <template v-if="!wait"> + <template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template> + <template v-else-if="u.isFollowing">%fa:minus%<template v-if="size == 'big'"> %i18n:@unfollow%</template></template> + <template v-else-if="!u.isFollowing && u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow-request%</template></template> + <template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow%</template></template> </template> - <template v-if="!wait && !user.isFollowing"> - <template v-if="size == 'compact'">%fa:plus%</template> - <template v-if="size == 'big'">%fa:plus%%i18n:@follow%</template> - </template> - <template v-if="wait">%fa:spinner .pulse .fw%</template> + <template v-else>%fa:spinner .pulse .fw%</template> </button> </template> @@ -34,6 +31,7 @@ export default Vue.extend({ data() { return { + u: this.user, wait: false, connection: null, connectionId: null @@ -56,39 +54,44 @@ export default Vue.extend({ methods: { onFollow(user) { - if (user.id == this.user.id) { + if (user.id == this.u.id) { this.user.isFollowing = user.isFollowing; } }, onUnfollow(user) { - if (user.id == this.user.id) { + if (user.id == this.u.id) { this.user.isFollowing = user.isFollowing; } }, - onClick() { + async onClick() { this.wait = true; - if (this.user.isFollowing) { - (this as any).api('following/delete', { - userId: this.user.id - }).then(() => { - this.user.isFollowing = false; - }).catch(err => { - console.error(err); - }).then(() => { - this.wait = false; - }); - } else { - (this as any).api('following/create', { - userId: this.user.id - }).then(() => { - this.user.isFollowing = true; - }).catch(err => { - console.error(err); - }).then(() => { - this.wait = false; - }); + + try { + if (this.u.isFollowing) { + this.u = await (this as any).api('following/delete', { + userId: this.u.id + }); + } else { + if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) { + this.u = await (this as any).api('following/requests/cancel', { + userId: this.u.id + }); + } else if (this.u.isLocked) { + this.u = await (this as any).api('following/create', { + userId: this.u.id + }); + } else { + this.u = await (this as any).api('following/create', { + userId: this.user.id + }); + } + } + } catch (e) { + console.error(e); + } finally { + this.wait = false; } } } @@ -124,7 +127,7 @@ root(isDark) border 2px solid rgba($theme-color, 0.3) border-radius 8px - &.follow + &:not(.active) color isDark ? #fff : #888 background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%) border solid 1px isDark ? #1c2023 : #e2e2e2 @@ -137,7 +140,7 @@ root(isDark) background isDark ? #22262f : #ececec border-color isDark ? #151a1d : #dcdcdc - &.unfollow + &.active color $theme-color-foreground background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) border solid 1px lighten($theme-color, 15%) @@ -162,9 +165,6 @@ root(isDark) height 38px line-height 38px - i - margin-right 8px - .mk-follow-button[data-darkmode] root(true) diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue index 5564dad623..f2247a782c 100644 --- a/src/client/app/desktop/views/components/notifications.vue +++ b/src/client/app/desktop/views/components/notifications.vue @@ -5,6 +5,7 @@ <template v-for="(notification, i) in _notifications"> <div class="notification" :class="notification.type" :key="notification.id"> <mk-time :time="notification.createdAt"/> + <template v-if="notification.type == 'reaction'"> <mk-avatar class="avatar" :user="notification.user"/> <div class="text"> @@ -17,6 +18,7 @@ </router-link> </div> </template> + <template v-if="notification.type == 'renote'"> <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> @@ -28,6 +30,7 @@ </router-link> </div> </template> + <template v-if="notification.type == 'quote'"> <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> @@ -37,6 +40,7 @@ <router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link> </div> </template> + <template v-if="notification.type == 'follow'"> <mk-avatar class="avatar" :user="notification.user"/> <div class="text"> @@ -45,6 +49,16 @@ </p> </div> </template> + + <template v-if="notification.type == 'receiveFollowRequest'"> + <mk-avatar class="avatar" :user="notification.user"/> + <div class="text"> + <p>%fa:user-clock% + <router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link> + </p> + </div> + </template> + <template v-if="notification.type == 'reply'"> <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> @@ -54,6 +68,7 @@ <router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link> </div> </template> + <template v-if="notification.type == 'mention'"> <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> @@ -63,6 +78,7 @@ <a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a> </div> </template> + <template v-if="notification.type == 'poll_vote'"> <mk-avatar class="avatar" :user="notification.user"/> <div class="text"> @@ -73,6 +89,7 @@ </div> </template> </div> + <p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'"> <span>%fa:angle-up%{{ notification._datetext }}</span> <span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span> @@ -251,6 +268,10 @@ root(isDark) .text p i color #53c7ce + &.receiveFollowRequest + .text p i + color #888 + &.reply, &.mention .text p i color #555 diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue new file mode 100644 index 0000000000..fd37c0a6aa --- /dev/null +++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue @@ -0,0 +1,72 @@ +<template> +<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy"> + <span slot="header">%fa:envelope R% %i18n:@title%</span> + + <div data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4" :data-darkmode="$store.state.device.darkmode"> + <div v-for="req in requests"> + <router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link> + <span> + <a @click="accept(req.follower)">%i18n:@accept%</a>|<a @click="reject(req.follower)">%i18n:@reject%</a> + </span> + </div> + </div> +</mk-window> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + data() { + return { + fetching: true, + requests: [] + }; + }, + mounted() { + (this as any).api('following/requests/list').then(requests => { + this.fetching = false; + this.requests = requests; + }); + }, + methods: { + accept(user) { + (this as any).api('following/requests/accept', { userId: user.id }).then(() => { + this.requests = this.requests.filter(r => r.follower.id != user.id); + }); + }, + reject(user) { + (this as any).api('following/requests/reject', { userId: user.id }).then(() => { + this.requests = this.requests.filter(r => r.follower.id != user.id); + }); + }, + close() { + (this as any).$refs.window.close(); + } + } +}); +</script> + +<style lang="stylus" scoped> + +root(isDark) + padding 16px + + > button + margin-bottom 16px + + > div + display flex + padding 16px + border solid 1px isDark ? #1c2023 : #eee + border-radius 4px + + > span + margin 0 0 0 auto + +[data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4"][data-darkmode] + root(true) + +[data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4"]:not([data-darkmode]) + root(false) + +</style> diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue index 9932cbf7db..0b3a25f389 100644 --- a/src/client/app/desktop/views/components/settings.profile.vue +++ b/src/client/app/desktop/views/components/settings.profile.vue @@ -23,7 +23,11 @@ </label> <button class="ui primary" @click="save">%i18n:@save%</button> <section> - <h2>その他</h2> + <h2>%i18n:@locked-account%</h2> + <mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/> + </section> + <section> + <h2>%i18n:@other%</h2> <mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/> <mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/> </section> @@ -62,6 +66,11 @@ export default Vue.extend({ (this as any).apis.notify('プロフィールを更新しました'); }); }, + onChangeIsLocked() { + (this as any).api('i/update', { + isLocked: this.$store.state.i.isLocked + }); + }, onChangeIsBot() { (this as any).api('i/update', { isBot: this.$store.state.i.isBot diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue index 8d26691f84..4e0fc1cf1a 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -19,6 +19,9 @@ <li @click="list"> <p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p> </li> + <li @click="followRequests" v-if="$store.state.i.isLocked"> + <p>%fa:envelope R%<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>%fa:angle-right%</p> + </li> </ul> <ul> <li> @@ -46,6 +49,7 @@ <script lang="ts"> import Vue from 'vue'; import MkUserListsWindow from './user-lists-window.vue'; +import MkFollowRequestsWindow from './received-follow-requests-window.vue'; import MkSettingsWindow from './settings-window.vue'; import MkDriveWindow from './drive-window.vue'; import contains from '../../../common/scripts/contains'; @@ -91,6 +95,10 @@ export default Vue.extend({ this.$router.push(`i/lists/${ list.id }`); }); }, + followRequests() { + this.close(); + (this as any).os.new(MkFollowRequestsWindow); + }, settings() { this.close(); (this as any).os.new(MkSettingsWindow); @@ -225,6 +233,16 @@ root(isDark) > span:first-child padding-left 22px + > span:nth-child(2) + > i + margin-left 4px + padding 2px 8px + font-size 90% + font-style normal + background $theme-color + color $theme-color-foreground + border-radius 8px + > [data-fa]:first-child margin-right 6px width 16px diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue index 454c725d20..109d1695d8 100644 --- a/src/client/app/desktop/views/components/user-lists-window.vue +++ b/src/client/app/desktop/views/components/user-lists-window.vue @@ -1,6 +1,6 @@ <template> <mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy"> - <span slot="header">%fa:list% リスト</span> + <span slot="header">%fa:list% %i18n:@title%</span> <div data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82" :data-darkmode="$store.state.device.darkmode"> <button class="ui" @click="add">%i18n:@create-list%</button> diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 607ff63711..300615ec58 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -32,6 +32,7 @@ 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 MkReceivedFollowRequests from './views/pages/received-follow-requests.vue'; import MkNote from './views/pages/note.vue'; import MkSearch from './views/pages/search.vue'; import MkFollowers from './views/pages/followers.vue'; @@ -78,6 +79,7 @@ init((launch) => { { 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/received-follow-requests', name: 'received-follow-requests', component: MkReceivedFollowRequests }, { 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/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue index a6b5cf0556..d8441a20b9 100644 --- a/src/client/app/mobile/views/components/follow-button.vue +++ b/src/client/app/mobile/views/components/follow-button.vue @@ -1,13 +1,16 @@ <template> <button class="mk-follow-button" - :class="{ wait: wait, follow: !user.isFollowing, unfollow: user.isFollowing }" + :class="{ wait: wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou }" @click="onClick" :disabled="wait" > - <template v-if="!wait && user.isFollowing">%fa:minus%</template> - <template v-if="!wait && !user.isFollowing">%fa:plus%</template> - <template v-if="wait">%fa:spinner .pulse .fw%</template> - {{ user.isFollowing ? '%i18n:@unfollow%' : '%i18n:@follow%' }} + <template v-if="!wait"> + <template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template> + <template v-else-if="u.isFollowing">%fa:minus% %i18n:@unfollow%</template> + <template v-else-if="!u.isFollowing && u.isLocked">%fa:plus% %i18n:@follow-request%</template> + <template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus% %i18n:@follow%</template> + </template> + <template v-else>%fa:spinner .pulse .fw%</template> </button> </template> @@ -22,6 +25,7 @@ export default Vue.extend({ }, data() { return { + u: this.user, wait: false, connection: null, connectionId: null @@ -42,39 +46,44 @@ export default Vue.extend({ methods: { onFollow(user) { - if (user.id == this.user.id) { - this.user.isFollowing = user.isFollowing; + if (user.id == this.u.id) { + this.u.isFollowing = user.isFollowing; } }, onUnfollow(user) { - if (user.id == this.user.id) { - this.user.isFollowing = user.isFollowing; + if (user.id == this.u.id) { + this.u.isFollowing = user.isFollowing; } }, - onClick() { + async onClick() { this.wait = true; - if (this.user.isFollowing) { - (this as any).api('following/delete', { - userId: this.user.id - }).then(() => { - this.user.isFollowing = false; - }).catch(err => { - console.error(err); - }).then(() => { - this.wait = false; - }); - } else { - (this as any).api('following/create', { - userId: this.user.id - }).then(() => { - this.user.isFollowing = true; - }).catch(err => { - console.error(err); - }).then(() => { - this.wait = false; - }); + + try { + if (this.u.isFollowing) { + this.u = await (this as any).api('following/delete', { + userId: this.u.id + }); + } else { + if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) { + this.u = await (this as any).api('following/requests/cancel', { + userId: this.u.id + }); + } else if (this.u.isLocked) { + this.u = await (this as any).api('following/create', { + userId: this.u.id + }); + } else { + this.u = await (this as any).api('following/create', { + userId: this.user.id + }); + } + } + } catch (e) { + console.error(e); + } finally { + this.wait = false; } } } @@ -90,34 +99,38 @@ export default Vue.extend({ cursor pointer padding 0 16px margin 0 - height inherit - font-size 16px + min-width 150px + line-height 36px + font-size 14px + color $theme-color + background transparent outline none border solid 1px $theme-color - border-radius 4px + border-radius 36px - * - pointer-events none + &:hover + background rgba($theme-color, 0.1) - &.follow - color $theme-color - background transparent + &:active + background rgba($theme-color, 0.2) + + &.active + color $theme-color-foreground + background $theme-color &:hover - background rgba($theme-color, 0.1) + background lighten($theme-color, 10%) + border-color lighten($theme-color, 10%) &:active - background rgba($theme-color, 0.2) - - &.unfollow - color $theme-color-foreground - background $theme-color + background darken($theme-color, 10%) + border-color darken($theme-color, 10%) &.wait cursor wait !important opacity 0.7 - > [data-fa] - margin-right 4px + * + pointer-events none </style> diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue index d39b2fbf9f..5e2306932b 100644 --- a/src/client/app/mobile/views/components/notification-preview.vue +++ b/src/client/app/mobile/views/components/notification-preview.vue @@ -1,7 +1,7 @@ <template> <div class="mk-notification-preview" :class="notification.type"> <template v-if="notification.type == 'reaction'"> - <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + <mk-avatar class="avatar" :user="notification.user"/> <div class="text"> <p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user | userName }}</p> <p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p> @@ -9,7 +9,7 @@ </template> <template v-if="notification.type == 'renote'"> - <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> <p>%fa:retweet%{{ notification.note.user | userName }}</p> <p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p> @@ -17,7 +17,7 @@ </template> <template v-if="notification.type == 'quote'"> - <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> <p>%fa:quote-left%{{ notification.note.user | userName }}</p> <p class="note-preview">{{ getNoteSummary(notification.note) }}</p> @@ -25,14 +25,21 @@ </template> <template v-if="notification.type == 'follow'"> - <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + <mk-avatar class="avatar" :user="notification.user"/> <div class="text"> <p>%fa:user-plus%{{ notification.user | userName }}</p> </div> </template> + <template v-if="notification.type == 'receiveFollowRequest'"> + <mk-avatar class="avatar" :user="notification.user"/> + <div class="text"> + <p>%fa:user-clock%{{ notification.user | userName }}</p> + </div> + </template> + <template v-if="notification.type == 'reply'"> - <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> <p>%fa:reply%{{ notification.note.user | userName }}</p> <p class="note-preview">{{ getNoteSummary(notification.note) }}</p> @@ -40,7 +47,7 @@ </template> <template v-if="notification.type == 'mention'"> - <img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + <mk-avatar class="avatar" :user="notification.note.user"/> <div class="text"> <p>%fa:at%{{ notification.note.user | userName }}</p> <p class="note-preview">{{ getNoteSummary(notification.note) }}</p> @@ -48,7 +55,7 @@ </template> <template v-if="notification.type == 'poll_vote'"> - <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + <mk-avatar class="avatar" :user="notification.user"/> <div class="text"> <p>%fa:chart-pie%{{ notification.user | userName }}</p> <p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p> @@ -83,16 +90,14 @@ export default Vue.extend({ display block clear both - img + > .avatar display block float left - min-width 36px - min-height 36px - max-width 36px - max-height 36px + width 36px + height 36px border-radius 6px - .text + > .text float right width calc(100% - 36px) padding-left 8px @@ -120,6 +125,10 @@ export default Vue.extend({ .text p i color #53c7ce + &.receiveFollowRequest + .text p i + color #888 + &.reply, &.mention .text p i color #fff diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue index c1b37563ce..9228950209 100644 --- a/src/client/app/mobile/views/components/notification.vue +++ b/src/client/app/mobile/views/components/notification.vue @@ -40,6 +40,17 @@ </div> </div> + <div class="notification followRequest" v-if="notification.type == 'receiveFollowRequest'"> + <mk-avatar class="avatar" :user="notification.user"/> + <div> + <header> + %fa:user-clock% + <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> + <mk-time :time="notification.createdAt"/> + </header> + </div> + </div> + <div class="notification poll_vote" v-if="notification.type == 'poll_vote'"> <mk-avatar class="avatar" :user="notification.user"/> <div> @@ -156,6 +167,10 @@ root(isDark) > div > header i color #53c7ce + &.receiveFollowRequest + > div > header i + color #888 + .mk-notification[data-darkmode] root(true) diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue index 11a8f7ab97..80f60e4232 100644 --- a/src/client/app/mobile/views/components/ui.nav.vue +++ b/src/client/app/mobile/views/components/ui.nav.vue @@ -18,6 +18,7 @@ <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 v-if="$store.getters.isSignedIn && $store.state.i.isLocked"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'">%fa:R envelope%%i18n:@follow-requests%<template v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount">%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> diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue new file mode 100644 index 0000000000..bf26a84ff9 --- /dev/null +++ b/src/client/app/mobile/views/pages/received-follow-requests.vue @@ -0,0 +1,78 @@ +<template> +<mk-ui> + <span slot="header">%fa:envelope R%%i18n:@title%</span> + + <main> + <div v-for="req in requests"> + <router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link> + <span> + <a @click="accept(req.follower)">%i18n:@accept%</a>|<a @click="reject(req.follower)">%i18n:@reject%</a> + </span> + </div> + </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, + requests: [] + }; + }, + mounted() { + document.title = 'Misskey | %i18n:@title%'; + + Progress.start(); + + (this as any).api('following/requests/list').then(requests => { + this.fetching = false; + this.requests = requests; + + Progress.done(); + }); + }, + methods: { + accept(user) { + (this as any).api('following/requests/accept', { userId: user.id }).then(() => { + this.requests = this.requests.filter(r => r.follower.id != user.id); + }); + }, + reject(user) { + (this as any).api('following/requests/reject', { userId: user.id }).then(() => { + this.requests = this.requests.filter(r => r.follower.id != user.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 + + > div + display flex + padding 16px + border solid 1px isDark ? #1c2023 : #eee + border-radius 4px + + > span + margin 0 0 0 auto + +</style> diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index b3b820650c..3d37015906 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -184,7 +184,6 @@ root(isDark) > .mk-follow-button float right - height 40px > .title margin 8px 0 |