This commit is contained in:
syuilo 2018-06-23 22:55:32 +09:00
parent 488f36d491
commit 874411990b
5 changed files with 93 additions and 72 deletions

View File

@ -759,6 +759,11 @@ desktop/views/pages/user/user.profile.vue:
muted: "ミュートしています" muted: "ミュートしています"
unmute: "ミュート解除" unmute: "ミュート解除"
desktop/views/pages/user/user.header.vue:
posts: "投稿"
following: "フォロー"
followers: "フォロワー"
desktop/views/pages/user/user.timeline.vue: desktop/views/pages/user/user.timeline.vue:
default: "投稿" default: "投稿"
with-replies: "投稿と返信" with-replies: "投稿と返信"

View File

@ -5,19 +5,32 @@
<div class="fade"></div> <div class="fade"></div>
<div class="title"> <div class="title">
<p class="name">{{ user | userName }}</p> <p class="name">{{ user | userName }}</p>
<p class="username"><mk-acct :user="user"/></p> <div>
<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p> <template v-if="user.isBot">%fa:robot%</template>
<p class="username"><mk-acct :user="user"/></p>
<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
<p class="birthday" v-if="user.host === null && user.profile.birthday">%fa:birthday-cake%{{ user.profile.birthday.replace('-', '').replace('-', '') + '' }} ({{ age }})</p>
</div>
</div> </div>
</div> </div>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/> <mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<div class="body"> <div class="body">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/> <div class="description">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</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>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkFollowingWindow from '../../components/following-window.vue';
import MkFollowersWindow from '../../components/followers-window.vue';
export default Vue.extend({ export default Vue.extend({
props: ['user'], props: ['user'],
@ -64,7 +77,19 @@ export default Vue.extend({
(this as any).apis.updateBanner().then(i => { (this as any).apis.updateBanner().then(i => {
this.user.bannerUrl = i.bannerUrl; 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> </script>
@ -118,7 +143,6 @@ root(isDark)
width 100% width 100%
padding 0 0 8px 154px padding 0 0 8px 154px
color #5e6367 color #5e6367
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
> .name > .name
display block display block
@ -127,15 +151,15 @@ root(isDark)
font-weight bold font-weight bold
font-size 1.8em font-size 1.8em
> .username > div
> .location > *
display inline-block display inline-block
margin 0 16px 0 0 margin 0 16px 0 0
line-height 20px line-height 20px
opacity 0.8 opacity 0.8
> i > i
margin-right 4px margin-right 4px
> .avatar > .avatar
display block display block
@ -151,6 +175,32 @@ root(isDark)
padding 16px 16px 16px 154px padding 16px 16px 16px 154px
color isDark ? #c5ced6 : #555 color isDark ? #c5ced6 : #555
> .status
margin-top 16px
padding-top 16px
border-top solid 1px rgba(#000, isDark ? 0.2 : 0.1)
font-size 80%
> *
display inline-block
padding-right 16px
margin-right 16px
&:not(:last-child)
border-right solid 1px rgba(#000, isDark ? 0.2 : 0.1)
&.clickable
cursor pointer
&:hover
color isDark ? #fff : #000
> b
margin-right 4px
font-size 1rem
font-weight bold
color $theme-color
.header[data-darkmode] .header[data-darkmode]
root(true) root(true)

View File

@ -15,25 +15,12 @@
</button> </button>
<button class="mute ui" @click="list">%fa:list% リストに追加</button> <button class="mute ui" @click="list">%fa:list% リストに追加</button>
</div> </div>
<div class="birthday" v-if="user.host === null && user.profile.birthday">
<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }})</p>
</div>
<div class="twitter" v-if="user.host === null && user.twitter">
<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></p>
</div>
<div class="status">
<p class="notes-count">%fa:angle-right%<a>{{ user.notesCount }}</a><b>投稿</b></p>
<p class="following">%fa:angle-right%<a @click="showFollowing">{{ user.followingCount }}</a>人を<b>フォロー</b></p>
<p class="followers">%fa:angle-right%<a @click="showFollowers">{{ user.followersCount }}</a>人の<b>フォロワー</b></p>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as age from 's-age'; import * as age from 's-age';
import MkFollowingWindow from '../../components/following-window.vue';
import MkFollowersWindow from '../../components/followers-window.vue';
import MkUserListsWindow from '../../components/user-lists-window.vue'; import MkUserListsWindow from '../../components/user-lists-window.vue';
export default Vue.extend({ export default Vue.extend({
@ -44,17 +31,6 @@ export default Vue.extend({
} }
}, },
methods: { methods: {
showFollowing() {
(this as any).os.new(MkFollowingWindow, {
user: this.user
});
},
showFollowers() {
(this as any).os.new(MkFollowersWindow, {
user: this.user
});
},
stalk() { stalk() {
(this as any).api('following/stalk', { (this as any).api('following/stalk', {
@ -152,40 +128,6 @@ root(isDark)
&:not(:last-child) &:not(:last-child)
margin-bottom 12px margin-bottom 12px
> .birthday
padding 16px
color isDark ? #e3e7ea : #555
border-bottom solid 1px isDark ? #21242f : #eee
> p
margin 0
> i
margin-right 8px
> .twitter
padding 16px
color isDark ? #e3e7ea : #555
border-bottom solid 1px isDark ? #21242f : #eee
> p
margin 0
> i
margin-right 8px
> .status
padding 16px
color isDark ? #e3e7ea : #555
border-bottom solid 1px isDark ? #21242f : #eee
> p
margin 8px 0
> i
margin-left 8px
margin-right 8px
.profile[data-darkmode] .profile[data-darkmode]
root(true) root(true)

View File

@ -0,0 +1,21 @@
<template>
<div class="adsvaidqfznoartcbplullnejvxjphcn">
<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user']
});
</script>
<style lang="stylus" scoped>
.adsvaidqfznoartcbplullnejvxjphcn
padding 32px
background #1a94f2
color #fff
</style>

View File

@ -11,6 +11,7 @@
</div> </div>
<div class="side"> <div class="side">
<x-profile :user="user"/> <x-profile :user="user"/>
<a-twitter :user="user" v-if="user.host === null && user.twitter"/>
<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/> <mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
<mk-activity :user="user"/> <mk-activity :user="user"/>
<x-photos :user="user"/> <x-photos :user="user"/>
@ -35,6 +36,7 @@ import XProfile from './user.profile.vue';
import XPhotos from './user.photos.vue'; import XPhotos from './user.photos.vue';
import XFollowersYouKnow from './user.followers-you-know.vue'; import XFollowersYouKnow from './user.followers-you-know.vue';
import XFriends from './user.friends.vue'; import XFriends from './user.friends.vue';
import XTwitter from './user.twitter.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
@ -43,7 +45,8 @@ export default Vue.extend({
XProfile, XProfile,
XPhotos, XPhotos,
XFollowersYouKnow, XFollowersYouKnow,
XFriends XFriends,
XTwitter
}, },
data() { data() {
return { return {