Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-30 10:20:06 +09:00
parent c6ea7f754c
commit 0a2ac58b82
3 changed files with 35 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/frontend/src/components/MkChannelFollowButton.vue
View file

@ -1,20 +1,20 @@
<template> <template>
<button <button
class="hdcaacmi _button" class="_button"
:class="{ wait, active: isFollowing, full }" :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full }]"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="isFollowing"> <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>
<template v-else> <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> </template>
<template v-else> <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> </template>
</button> </button>
</template> </template>
@ -57,8 +57,8 @@ async function onClick() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.hdcaacmi { .root {
position: relative; position: relative;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
@ -103,7 +103,7 @@ async function onClick() {
} }
&.active { &.active {
color: #fff; color: var(--fgOnAccent);
background: var(--accent); background: var(--accent);
&:hover { &:hover {
@ -121,9 +121,9 @@ async function onClick() {
cursor: wait !important; cursor: wait !important;
opacity: 0.7; opacity: 0.7;
} }
}
> span { .text {
margin-right: 6px; margin-right: 6px;
} }
}
</style> </style>

24
packages/frontend/src/components/MkFollowButton.vue
View file

@ -1,30 +1,30 @@
<template> <template>
<button <button
class="kpoogebi _button" class="_button"
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }" :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked"> <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>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <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>
<template v-else-if="isFollowing"> <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>
<template v-else-if="!isFollowing && user.isLocked"> <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>
<template v-else-if="!isFollowing && !user.isLocked"> <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> </template>
<template v-else> <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> </template>
</button> </button>
</template> </template>
@ -126,8 +126,8 @@ onBeforeUnmount(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.kpoogebi { .root {
position: relative; position: relative;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
@ -196,9 +196,9 @@ onBeforeUnmount(() => {
cursor: wait !important; cursor: wait !important;
opacity: 0.7; opacity: 0.7;
} }
}
> span { .text {
margin-right: 6px; margin-right: 6px;
} }
}
</style> </style>

27
packages/frontend/src/pages/settings/drive.vue
View file

@ -4,8 +4,8 @@
<template #label>{{ i18n.ts.usageAmount }}</template> <template #label>{{ i18n.ts.usageAmount }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
<div class="uawsfosz"> <div>
<div class="meter"><div :style="meterStyle"></div></div> <div :class="$style.meter"><div :class="$style.meterValue" :style="meterStyle"></div></div>
</div> </div>
<FormSplit> <FormSplit>
<MkKeyValue> <MkKeyValue>
@ -139,22 +139,15 @@ definePageMetadata({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.meter {
@use "sass:math";
.uawsfosz {
> .meter {
$size: 12px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: math.div($size, 2); border-radius: 999px;
overflow: hidden; overflow: clip;
}
> div { .meterValue {
height: $size; height: 100%;
border-radius: math.div($size, 2); border-radius: 999px;
}
}
} }
</style> </style>