From 0a2ac58b82b4671a16bd004ab19d172aa99477a0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 30 May 2023 10:20:06 +0900
Subject: [PATCH] refactor
---
.../src/components/MkChannelFollowButton.vue | 22 +++++++-------
.../src/components/MkFollowButton.vue | 26 ++++++++---------
.../frontend/src/pages/settings/drive.vue | 29 +++++++------------
3 files changed, 35 insertions(+), 42 deletions(-)
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
index 9e275d6172..7b7bef4787 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -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>
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index 7d066fd033..c4e13441e0 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -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>
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index 6ff98bc977..6fa3871205 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -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>
-
-@use "sass:math";
-
-.uawsfosz {
-
- > .meter {
- $size: 12px;
- background: rgba(0, 0, 0, 0.1);
- border-radius: math.div($size, 2);
- overflow: hidden;
+<style lang="scss" module>
+.meter {
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 999px;
+ overflow: clip;
+}
- > div {
- height: $size;
- border-radius: math.div($size, 2);
- }
- }
+.meterValue {
+ height: 100%;
+ border-radius: 999px;
}
</style>
--
GitLab