Improve follow button
This commit is contained in:
syuilo
parent
73e7c1bf67
commit
a5cf189caa
4 changed files with 46 additions and 14 deletions
|
|
@ -86,7 +86,11 @@ deleteList: "リストを削除"
|
|||
privacy: "プライバシー"
|
||||
makeFollowManuallyApprove: "フォローを承認制にする"
|
||||
defaultNoteVisibility: "デフォルトの公開範囲"
|
||||
follow: "フォロー"
|
||||
followRequest: "フォロー申請"
|
||||
followRequests: "フォロー申請"
|
||||
unfollow: "フォロー解除"
|
||||
followRequestPending: "フォロー許可待ち"
|
||||
enterEmoji: "絵文字を入力"
|
||||
renote: "Renote"
|
||||
quote: "引用"
|
||||
|
|
|
|||
|
|
@ -1,17 +1,29 @@
|
|||
<template>
|
||||
<button class="wfliddvnhxvyusikowhxozkyxyenqxqr _button"
|
||||
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou }"
|
||||
<button class="kpoogebi _button"
|
||||
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full }"
|
||||
@click="onClick"
|
||||
:disabled="wait"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<fa v-if="hasPendingFollowRequestFromYou && user.isLocked" :icon="faHourglassHalf"/>
|
||||
<fa v-else-if="hasPendingFollowRequestFromYou && !user.isLocked" :icon="faSpinner" pulse/>
|
||||
<fa v-else-if="isFollowing" :icon="faMinus"/>
|
||||
<fa v-else-if="!isFollowing && user.isLocked" :icon="faPlus"/>
|
||||
<fa v-else-if="!isFollowing && !user.isLocked" :icon="faPlus"/>
|
||||
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
|
||||
<span v-if="full">{{ $t('followRequestPending') }}</span><fa :icon="faHourglassHalf"/>
|
||||
</template>
|
||||
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse/>
|
||||
</template>
|
||||
<template v-else-if="isFollowing">
|
||||
<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<span v-if="full">{{ $t('followRequest') }}</span><fa :icon="faPlus"/>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
|
||||
</template>
|
||||
<template v-else><fa :icon="faSpinner" pulse fixed-width/></template>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
@ -28,6 +40,11 @@ export default Vue.extend({
|
|||
type: Object,
|
||||
required: true
|
||||
},
|
||||
full: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -103,7 +120,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wfliddvnhxvyusikowhxozkyxyenqxqr {
|
||||
.kpoogebi {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
|
@ -111,12 +128,19 @@ export default Vue.extend({
|
|||
background: transparent;
|
||||
border: solid 1px var(--accent);
|
||||
padding: 0;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
font-size: 16px;
|
||||
border-radius: 100%;
|
||||
border-radius: 32px;
|
||||
background: #fff;
|
||||
|
||||
&.full {
|
||||
padding: 0 8px 0 12px;
|
||||
}
|
||||
|
||||
&:not(.full) {
|
||||
width: 31px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:after {
|
||||
content: "";
|
||||
|
|
@ -127,7 +151,7 @@ export default Vue.extend({
|
|||
bottom: -5px;
|
||||
left: -5px;
|
||||
border: 2px solid var(--focus);
|
||||
border-radius: 100%;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -158,5 +182,9 @@ export default Vue.extend({
|
|||
cursor: wait !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<router-link v-if="notification.type === 'quote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
|
||||
<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
|
||||
</router-link>
|
||||
<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user"/></div></span>
|
||||
<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user" :full="true"/></div></span>
|
||||
<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
|
||||
<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('followsYou') }}</span>
|
||||
<div class="actions" v-if="$store.getters.isSignedIn">
|
||||
<button @click="menu" class="menu _button" ref="menu"><fa :icon="faEllipsisH"/></button>
|
||||
<mk-follow-button v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" class="koudoku"/>
|
||||
<mk-follow-button v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
|
||||
</div>
|
||||
</div>
|
||||
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue