wip: フォロー/フォロワーページ (#3157)

フォロー/フォロワーページ
This commit is contained in:
syuilo 2018-11-08 15:16:39 +09:00 committed by GitHub
parent f0686ad5df
commit 900409cdc8
16 changed files with 155 additions and 306 deletions

View File

@ -810,6 +810,10 @@ desktop/views/components/renote-form.vue:
desktop/views/components/renote-form-window.vue:
title: "この投稿をRenoteしますか"
desktop/views/pages/user-following-or-followers.vue:
following: "{user}のフォロー"
followers: "{user}のフォロワー"
desktop/views/components/settings-window.vue:
settings: "設定"

View File

@ -215,6 +215,7 @@
"vue-color": "2.7.0",
"vue-content-loading": "1.5.3",
"vue-cropperjs": "2.2.2",
"vue-i18n": "8.3.0",
"vue-js-modal": "1.3.26",
"vue-loader": "15.4.2",
"vue-router": "3.0.1",

View File

@ -53,7 +53,7 @@ export default Vue.extend({
display block
width 100%
margin 0
padding 8px
padding 8px 10px
text-align center
font-weight normal
font-size 16px

View File

@ -1,5 +1,6 @@
declare const _LANG_: string;
declare const _LANGS_: string;
declare const _LOCALE_: { [key: string]: any };
declare const _THEME_COLOR_: string;
declare const _COPYRIGHT_: string;
declare const _VERSION_: string;
@ -16,6 +17,7 @@ export const apiUrl = url + '/api';
export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
export const lang = _LANG_;
export const langs = _LANGS_;
export const locale = _LOCALE_;
export const themeColor = _THEME_COLOR_;
export const copyright = _COPYRIGHT_;
export const version = _VERSION_;

View File

@ -24,6 +24,7 @@ import MkIndex from './views/pages/index.vue';
import MkHome from './views/pages/home.vue';
import MkDeck from './views/pages/deck/deck.vue';
import MkUser from './views/pages/user/user.vue';
import MkUserFollowingOrFollowers from './views/pages/user-following-or-followers.vue';
import MkFavorites from './views/pages/favorites.vue';
import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue';
@ -66,6 +67,8 @@ init(async (launch) => {
{ path: '/share', component: MkShare },
{ path: '/reversi/:game?', component: MkReversi },
{ path: '/@:user', name: 'user', component: MkUser },
{ path: '/@:user/following', name: 'userFollowing', component: MkUserFollowingOrFollowers },
{ path: '/@:user/followers', name: 'userFollowers', component: MkUserFollowingOrFollowers },
{ path: '/notes/:note', name: 'note', component: MkNote },
{ path: '/authorize-follow', component: MkFollow }
]

View File

@ -1,32 +0,0 @@
<template>
<mk-window width="400px" height="550px" @closed="destroyDom">
<span slot="header" :class="$style.header">
<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@followers%'.replace('{}', name) }}
</span>
<mk-followers :user="user"/>
</mk-window>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
computed: {
name(): string {
return Vue.filter('userName')(this.user);
}
}
});
</script>
<style lang="stylus" module>
.header
> img
display inline-block
vertical-align bottom
height calc(100% - 10px)
margin 5px
border-radius 4px
</style>

View File

@ -1,26 +0,0 @@
<template>
<mk-users-list
:fetch="fetch"
:count="user.followersCount"
:you-know-count="user.followersYouKnowCount"
>
%i18n:@empty%
</mk-users-list>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
methods: {
fetch(iknow, limit, cursor, cb) {
(this as any).api('users/followers', {
userId: this.user.id,
iknow: iknow,
limit: limit,
cursor: cursor ? cursor : undefined
}).then(cb);
}
}
});
</script>

View File

@ -1,32 +0,0 @@
<template>
<mk-window width="400px" height="550px" @closed="destroyDom">
<span slot="header" :class="$style.header">
<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@following%'.replace('{}', name) }}
</span>
<mk-following :user="user"/>
</mk-window>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
computed: {
name(): string {
return Vue.filter('userName')(this.user);
}
}
});
</script>
<style lang="stylus" module>
.header
> img
display inline-block
vertical-align bottom
height calc(100% - 10px)
margin 5px
border-radius 4px
</style>

View File

@ -1,26 +0,0 @@
<template>
<mk-users-list
:fetch="fetch"
:count="user.followingCount"
:you-know-count="user.followingYouKnowCount"
>
%i18n:@empty%
</mk-users-list>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
methods: {
fetch(iknow, limit, cursor, cb) {
(this as any).api('users/following', {
userId: this.user.id,
iknow: iknow,
limit: limit,
cursor: cursor ? cursor : undefined
}).then(cb);
}
}
});
</script>

View File

@ -22,9 +22,7 @@ import settings from './settings.vue';
import calendar from './calendar.vue';
import activity from './activity.vue';
import friendsMaker from './friends-maker.vue';
import followers from './followers.vue';
import following from './following.vue';
import usersList from './users-list.vue';
import userCard from './user-card.vue';
import userListTimeline from './user-list-timeline.vue';
import widgetContainer from './widget-container.vue';
@ -50,8 +48,6 @@ Vue.component('mk-settings', settings);
Vue.component('mk-calendar', calendar);
Vue.component('mk-activity', activity);
Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-followers', followers);
Vue.component('mk-following', following);
Vue.component('mk-users-list', usersList);
Vue.component('mk-user-card', userCard);
Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('mk-widget-container', widgetContainer);

View File

@ -9,7 +9,6 @@
<div class="description">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div>
<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
</div>
</div>
</template>
@ -34,17 +33,18 @@ export default Vue.extend({
<style lang="stylus" scoped>
.zvdbznxvfixtmujpsigoccczftvpiwqh
$bg = #fff
$bg = var(--face)
margin 16px auto
max-width calc(100% - 32px)
font-size 16px
height 280px
overflow hidden
font-size 14px
text-align center
background $bg
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
color var(--faceText)
> .banner
height 100px
height 90px
background-color #f9f4f4
background-position center
background-size cover
@ -63,13 +63,10 @@ export default Vue.extend({
right 16px
> .body
padding 4px 32px 32px 32px
@media (max-width 400px)
padding 4px 16px 16px 16px
padding 0px 24px
> .name
font-size 20px
font-size 120%
font-weight bold
> .username
@ -77,15 +74,6 @@ export default Vue.extend({
opacity 0.7
> .description
margin 16px 0
> .followed
margin 0
padding 0
line-height 24px
font-size 0.8em
color #71afc7
background #eefaff
border-radius 4px
margin 8px 0 16px 0
</style>

View File

@ -1,145 +0,0 @@
<template>
<div class="mk-users-list">
<nav>
<div>
<span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
<span v-if="$store.getters.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@iknow%<span>{{ youKnowCount }}</span></span>
</div>
</nav>
<div class="users" v-if="!fetching && users.length != 0">
<div v-for="u in users" :key="u.id">
<x-item :user="u"/>
</div>
</div>
<button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
<span v-if="!moreFetching">%i18n:@load-more%</span>
<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
<p class="no" v-if="!fetching && users.length == 0">
<slot></slot>
</p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@fetching%<mk-ellipsis/></p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XItem from './users-list.item.vue';
export default Vue.extend({
components: {
XItem
},
props: ['fetch', 'count', 'youKnowCount'],
data() {
return {
limit: 20,
mode: 'all',
fetching: true,
moreFetching: false,
users: [],
next: null
};
},
mounted() {
this._fetch(() => {
this.$emit('loaded');
});
},
methods: {
_fetch(cb) {
this.fetching = true;
this.fetch(this.mode == 'iknow', this.limit, null, obj => {
this.users = obj.users;
this.next = obj.next;
this.fetching = false;
if (cb) cb();
});
},
more() {
this.moreFetching = true;
this.fetch(this.mode == 'iknow', this.limit, this.next, obj => {
this.moreFetching = false;
this.users = this.users.concat(obj.users);
this.next = obj.next;
});
}
}
});
</script>
<style lang="stylus" scoped>
.mk-users-list
height 100%
overflow auto
background #eee
> nav
z-index 10
position sticky
top 0
background #fff
box-shadow 0 1px 0 rgba(#000, 0.1)
> div
display flex
justify-content center
margin 0 auto
max-width 600px
> span
display block
flex 1 1
text-align center
line-height 52px
font-size 14px
color #657786
border-bottom solid 2px transparent
cursor pointer
*
pointer-events none
&[data-active]
font-weight bold
color var(--primary)
border-color var(--primary)
cursor default
> span
display inline-block
margin-left 4px
padding 2px 5px
font-size 12px
line-height 1
color #888
background #eee
border-radius 20px
> button
display block
width calc(100% - 32px)
margin 16px
padding 16px
&:hover
background rgba(#000, 0.1)
> .no
margin 0
padding 16px
text-align center
color #aaa
> .fetching
margin 0
padding 16px
text-align center
color #aaa
> [data-icon]
margin-right 4px
</style>

View File

@ -0,0 +1,126 @@
<template>
<mk-ui>
<div class="yyyocnobkvdlnyapyauyopbskldsnipz" v-if="!fetching">
<header>
<mk-avatar class="avatar" :user="user"/>
<i18n :path="isFollowing ? 'following' : 'followers'" tag="p">
<router-link :to="user | userPage" place="user">{{ user | userName }}</router-link>
</i18n>
</header>
<div class="users">
<mk-user-card v-for="user in users" :user="user" :key="user.id"/>
</div>
<div class="more" v-if="next">
<ui-button inline @click="fetchMore">%i18n:@load-more%</ui-button>
</div>
</div>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import parseAcct from '../../../../../misc/acct/parse';
import Progress from '../../../common/scripts/loading';
import { lang, locale } from '../../../config';
const limit = 16;
const i18n = new VueI18n({
locale: lang,
messages: {
[lang]: locale['desktop/views/pages/user-following-or-followers.vue']
}
});
export default Vue.extend({
i18n,
data() {
return {
fetching: true,
user: null,
users: [],
next: undefined
};
},
computed: {
isFollowing(): boolean {
return this.$route.name == 'userFollowing';
},
endpoint(): string {
return this.isFollowing ? 'users/following' : 'users/followers';
}
},
watch: {
$route: 'fetch'
},
created() {
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
Progress.start();
(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
this.user = user;
(this as any).api(this.endpoint, {
userId: this.user.id,
iknow: false,
limit: limit
}).then(x => {
this.users = x.users;
this.next = x.next;
this.fetching = false;
Progress.done();
});
});
},
fetchMore() {
(this as any).api(this.endpoint, {
userId: this.user.id,
iknow: false,
limit: limit,
cursor: this.next
}).then(x => {
this.users = this.users.concat(x.users);
this.next = x.next;
});
}
}
});
</script>
<style lang="stylus" scoped>
.yyyocnobkvdlnyapyauyopbskldsnipz
width 100%
max-width 1280px
padding 16px
margin 0 auto
> header
display flex
align-items center
margin 0 0 16px 0
color var(--text)
> .avatar
width 64px
height 64px
> p
margin 0 16px
font-size 24px
font-weight bold
> .users
display grid
grid-template-columns 1fr 1fr 1fr 1fr
gap 16px
> .more
margin 32px 16px 16px 16px
text-align center
</style>

View File

@ -22,8 +22,8 @@
</div>
<div class="status">
<span class="notes-count"><b>{{ user.notesCount | number }}</b>%i18n:@posts%</span>
<span class="following clickable" @click="showFollowing"><b>{{ user.followingCount | number }}</b>%i18n:@following%</span>
<span class="followers clickable" @click="showFollowers"><b>{{ user.followersCount | number }}</b>%i18n:@followers%</span>
<router-link :to="user | userPage('following')" class="following clickable" @click="showFollowing"><b>{{ user.followingCount | number }}</b>%i18n:@following%</router-link>
<router-link :to="user | userPage('followers')" class="followers clickable" @click="showFollowers"><b>{{ user.followersCount | number }}</b>%i18n:@followers%</router-link>
</div>
</div>
</div>
@ -31,8 +31,6 @@
<script lang="ts">
import Vue from 'vue';
import MkFollowingWindow from '../../components/following-window.vue';
import MkFollowersWindow from '../../components/followers-window.vue';
import * as age from 's-age';
export default Vue.extend({
@ -84,19 +82,7 @@ export default Vue.extend({
(this as any).apis.updateBanner().then(i => {
this.user.bannerUrl = i.bannerUrl;
});
},
showFollowing() {
(this as any).os.new(MkFollowingWindow, {
user: this.user
});
},
showFollowers() {
(this as any).os.new(MkFollowersWindow, {
user: this.user
});
},
}
}
});
</script>

View File

@ -8,6 +8,7 @@ import VueRouter from 'vue-router';
import VAnimateCss from 'v-animate-css';
import VModal from 'vue-js-modal';
import VueSweetalert2 from 'vue-sweetalert2';
import VueI18n from 'vue-i18n';
import VueHotkey from './common/hotkey';
import App from './app.vue';
@ -121,6 +122,7 @@ Vue.use(VAnimateCss);
Vue.use(VModal);
Vue.use(VueHotkey);
Vue.use(VueSweetalert2);
Vue.use(VueI18n);
Vue.component('fa', FontAwesomeIcon);

View File

@ -66,6 +66,7 @@ const consts = {
_CODENAME_: codename,
_LANG_: '%lang%',
_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
_LOCALE_: '%locale%',
_ENV_: process.env.NODE_ENV
};
@ -100,6 +101,7 @@ const plugins = [
src = src.replace(i18nReplacer.pattern, i18nReplacer.replacement);
src = src.replace('%lang%', lang);
src = src.replace('"%locale%"', JSON.stringify(locales[lang]));
fs.writeFileSync(`${__dirname}/built/client/assets/${file}.${version}.${lang}.js`, src, 'utf-8');
});