This commit is contained in:
syuilo 2019-02-20 01:00:59 +09:00
parent 1b8467d5e5
commit 7921f8cd43
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 49 additions and 39 deletions

View File

@ -1,6 +1,6 @@
<template>
<button class="wfliddvnhxvyusikowhxozkyxyenqxqr"
:class="{ wait, block, inline, mini, active: isFollowing || hasPendingFollowRequestFromYou }"
:class="{ wait, block, inline, mini, transparent, active: isFollowing || hasPendingFollowRequestFromYou }"
@click="onClick"
:disabled="wait"
:inline="inline"
@ -38,7 +38,12 @@ export default Vue.extend({
type: Boolean,
required: false,
default: false
}
},
transparent: {
type: Boolean,
required: false,
default: true
},
},
data() {
@ -134,6 +139,9 @@ export default Vue.extend({
border solid 1px var(--primary)
border-radius 36px
&:not(.transparent)
background #fff
&.inline
display inline-block

View File

@ -1,5 +1,5 @@
<template>
<div class="header" :data-is-dark-background="user.bannerUrl != null">
<div class="header">
<div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
<div class="fade"></div>
@ -12,16 +12,14 @@
<span v-if="user.isBot" :title="$t('is-bot')"><fa icon="robot"/></span>
</div>
</div>
<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('follows-you') }}</span>
<div class="actions" v-if="$store.getters.isSignedIn">
<button @click="menu" class="menu" ref="menu"><fa icon="ellipsis-h"/></button>
<mk-follow-button v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" class="follow"/>
</div>
</div>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<div class="body">
<div class="actions" v-if="$store.getters.isSignedIn">
<template v-if="$store.state.i.id != user.id">
<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
<mk-follow-button :user="user" :inline="true" class="follow"/>
</template>
<ui-button @click="menu" ref="menu" :inline="true"><fa icon="ellipsis-h"/></ui-button>
</div>
<div class="description">
<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
</div>
@ -111,7 +109,7 @@ export default Vue.extend({
menu() {
this.$root.new(XUserMenu, {
source: this.$refs.menu.$el,
source: this.$refs.menu,
user: this.user
});
}
@ -126,20 +124,6 @@ export default Vue.extend({
border-radius var(--round)
overflow hidden
&[data-is-dark-background]
> .banner-container
> .banner
background-color #383838
> .fade
background linear-gradient(transparent, rgba(#000, 0.7))
> .title
color #fff
> .name
text-shadow 0 0 8px #000
> .banner-container
height 250px
overflow hidden
@ -148,9 +132,10 @@ export default Vue.extend({
> .banner
height 100%
background-color #bfccd0
background-color #383838
background-size cover
background-position center
box-shadow 0 0 128px rgba(0, 0, 0, 0.5) inset
> .fade
position absolute
@ -158,6 +143,31 @@ export default Vue.extend({
left 0
width 100%
height 78px
background linear-gradient(transparent, rgba(#000, 0.7))
> .followed
position absolute
top 12px
left 12px
padding 4px 6px
color #fff
background rgba(0, 0, 0, 0.7)
font-size 12px
> .actions
position absolute
top 12px
right 12px
> .menu
height 100%
display block
position absolute
left -42px
padding 0 14px
color #fff
text-shadow 0 0 8px #000
font-size 16px
> .title
position absolute
@ -165,7 +175,7 @@ export default Vue.extend({
left 0
width 100%
padding 0 0 8px 154px
color #5e6367
color #fff
> .name
display block
@ -173,6 +183,7 @@ export default Vue.extend({
line-height 32px
font-weight bold
font-size 1.8em
text-shadow 0 0 8px #000
> div
> *
@ -202,18 +213,6 @@ export default Vue.extend({
padding 16px 16px 16px 154px
color var(--text)
> .actions
text-align right
padding-bottom 16px
margin-bottom 16px
border-bottom solid 1px var(--faceDivider)
> *
margin-left 8px
> .follow
width 180px
> .fields
margin-top 16px
@ -247,6 +246,9 @@ export default Vue.extend({
padding-top 16px
border-top solid 1px var(--faceDivider)
&:empty
display none
> *
margin-right 16px