refactor
This commit is contained in:
parent
c6ea7f754c
commit
0a2ac58b82
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<button
|
||||
class="hdcaacmi _button"
|
||||
:class="{ wait, active: isFollowing, full }"
|
||||
class="_button"
|
||||
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full }]"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="isFollowing">
|
||||
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
|
@ -57,8 +57,8 @@ async function onClick() {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hdcaacmi {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
@ -103,7 +103,7 @@ async function onClick() {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
|
||||
&:hover {
|
||||
|
@ -121,9 +121,9 @@ async function onClick() {
|
|||
cursor: wait !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.text {
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,30 +1,30 @@
|
|||
<template>
|
||||
<button
|
||||
class="kpoogebi _button"
|
||||
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
|
||||
class="_button"
|
||||
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
|
||||
</template>
|
||||
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
|
||||
<!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
|
||||
</template>
|
||||
<template v-else-if="isFollowing">
|
||||
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
|
@ -126,8 +126,8 @@ onBeforeUnmount(() => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.kpoogebi {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
@ -196,9 +196,9 @@ onBeforeUnmount(() => {
|
|||
cursor: wait !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.text {
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
<template #label>{{ i18n.ts.usageAmount }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<div class="uawsfosz">
|
||||
<div class="meter"><div :style="meterStyle"></div></div>
|
||||
<div>
|
||||
<div :class="$style.meter"><div :class="$style.meterValue" :style="meterStyle"></div></div>
|
||||
</div>
|
||||
<FormSplit>
|
||||
<MkKeyValue>
|
||||
|
@ -139,22 +139,15 @@ definePageMetadata({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss" module>
|
||||
.meter {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 999px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
.uawsfosz {
|
||||
|
||||
> .meter {
|
||||
$size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: math.div($size, 2);
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
height: $size;
|
||||
border-radius: math.div($size, 2);
|
||||
}
|
||||
}
|
||||
.meterValue {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue