✌️
This commit is contained in:
syuilo
parent
488f36d491
commit
874411990b
5 changed files with 93 additions and 72 deletions
|
|
@ -759,6 +759,11 @@ desktop/views/pages/user/user.profile.vue:
|
|||
muted: "ミュートしています"
|
||||
unmute: "ミュート解除"
|
||||
|
||||
desktop/views/pages/user/user.header.vue:
|
||||
posts: "投稿"
|
||||
following: "フォロー"
|
||||
followers: "フォロワー"
|
||||
|
||||
desktop/views/pages/user/user.timeline.vue:
|
||||
default: "投稿"
|
||||
with-replies: "投稿と返信"
|
||||
|
|
|
|||
|
|
@ -5,19 +5,32 @@
|
|||
<div class="fade"></div>
|
||||
<div class="title">
|
||||
<p class="name">{{ user | userName }}</p>
|
||||
<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>
|
||||
<div>
|
||||
<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>
|
||||
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import MkFollowingWindow from '../../components/following-window.vue';
|
||||
import MkFollowersWindow from '../../components/followers-window.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
|
|
@ -64,7 +77,19 @@ 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>
|
||||
|
|
@ -118,7 +143,6 @@ root(isDark)
|
|||
width 100%
|
||||
padding 0 0 8px 154px
|
||||
color #5e6367
|
||||
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
|
||||
|
||||
> .name
|
||||
display block
|
||||
|
|
@ -127,15 +151,15 @@ root(isDark)
|
|||
font-weight bold
|
||||
font-size 1.8em
|
||||
|
||||
> .username
|
||||
> .location
|
||||
display inline-block
|
||||
margin 0 16px 0 0
|
||||
line-height 20px
|
||||
opacity 0.8
|
||||
> div
|
||||
> *
|
||||
display inline-block
|
||||
margin 0 16px 0 0
|
||||
line-height 20px
|
||||
opacity 0.8
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
|
|
@ -151,6 +175,32 @@ root(isDark)
|
|||
padding 16px 16px 16px 154px
|
||||
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]
|
||||
root(true)
|
||||
|
||||
|
|
|
|||
|
|
@ -15,25 +15,12 @@
|
|||
</button>
|
||||
<button class="mute ui" @click="list">%fa:list% リストに追加</button>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
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';
|
||||
|
||||
export default Vue.extend({
|
||||
|
|
@ -44,17 +31,6 @@ export default Vue.extend({
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
showFollowing() {
|
||||
(this as any).os.new(MkFollowingWindow, {
|
||||
user: this.user
|
||||
});
|
||||
},
|
||||
|
||||
showFollowers() {
|
||||
(this as any).os.new(MkFollowersWindow, {
|
||||
user: this.user
|
||||
});
|
||||
},
|
||||
|
||||
stalk() {
|
||||
(this as any).api('following/stalk', {
|
||||
|
|
@ -152,40 +128,6 @@ root(isDark)
|
|||
&:not(:last-child)
|
||||
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]
|
||||
root(true)
|
||||
|
||||
|
|
|
|||
21
src/client/app/desktop/views/pages/user/user.twitter.vue
Normal file
21
src/client/app/desktop/views/pages/user/user.twitter.vue
Normal 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>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
</div>
|
||||
<div class="side">
|
||||
<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-activity :user="user"/>
|
||||
<x-photos :user="user"/>
|
||||
|
|
@ -35,6 +36,7 @@ import XProfile from './user.profile.vue';
|
|||
import XPhotos from './user.photos.vue';
|
||||
import XFollowersYouKnow from './user.followers-you-know.vue';
|
||||
import XFriends from './user.friends.vue';
|
||||
import XTwitter from './user.twitter.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
|
|
@ -43,7 +45,8 @@ export default Vue.extend({
|
|||
XProfile,
|
||||
XPhotos,
|
||||
XFollowersYouKnow,
|
||||
XFriends
|
||||
XFriends,
|
||||
XTwitter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue