From 1eaf287b9ce6bc8ff85399edd88b320a4dce1a5c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 14 May 2023 09:44:57 +0900
Subject: [PATCH 1/4] :art:
---
packages/frontend/src/components/MkAnimBg.vue | 3 +--
.../frontend/src/components/MkUserSetupDialog.Profile.vue | 4 ++--
packages/frontend/src/components/MkUserSetupDialog.vue | 8 ++++++--
3 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/packages/frontend/src/components/MkAnimBg.vue b/packages/frontend/src/components/MkAnimBg.vue
index df0765d494..a4cc04dde5 100644
--- a/packages/frontend/src/components/MkAnimBg.vue
+++ b/packages/frontend/src/components/MkAnimBg.vue
@@ -1,5 +1,5 @@
<template>
-<canvas ref="canvasEl" style="width: 100%; height: 100%;"></canvas>
+<canvas ref="canvasEl" style="width: 100%; height: 100%; pointer-events: none;"></canvas>
</template>
<script lang="ts" setup>
@@ -191,7 +191,6 @@ onMounted(() => {
const u_focus = gl.getUniformLocation(shaderProgram, 'u_focus');
const u_itensity = gl.getUniformLocation(shaderProgram, 'u_itensity');
gl.uniform2fv(u_resolution, [canvas.width, canvas.height]);
- gl.uniform1f(u_time, 1.0);
gl.uniform1f(u_spread, 1.0);
gl.uniform1f(u_speed, 1.0);
gl.uniform1f(u_warp, 1.0);
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
index f26ea11214..109d26dfaa 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
@@ -37,8 +37,8 @@ import { chooseFileFromPc } from '@/scripts/select-file';
import * as os from '@/os';
import { $i } from '@/account';
-const name = ref('');
-const description = ref('');
+const name = ref($i.name ?? '');
+const description = ref($i.description ?? '');
watch(name, () => {
os.apiWithDialog('i/update', {
diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue
index 3d7497526c..07bc561218 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@@ -42,7 +42,9 @@
<div style="height: 100cqh; overflow: auto;">
<MkSpacer :margin-min="20" :margin-max="28">
<XProfile/>
- <MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+ <div class="_buttonsCenter" style="margin-top: 16px;">
+ <MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+ </div>
</MkSpacer>
</div>
</template>
@@ -50,7 +52,9 @@
<div style="height: 100cqh; overflow: auto;">
<MkSpacer :margin-min="20" :margin-max="28">
<XPrivacy/>
- <MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+ <div class="_buttonsCenter" style="margin-top: 16px;">
+ <MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+ </div>
</MkSpacer>
</div>
</template>
From 89a3195dfd7be1801730e84011f04e50ffb0791f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 14 May 2023 09:54:35 +0900
Subject: [PATCH 2/4] :art:
---
packages/frontend/src/components/MkFolder.vue | 2 +-
.../frontend/src/components/MkUserSetupDialog.Privacy.vue | 4 ++++
packages/frontend/src/components/MkUserSetupDialog.vue | 8 ++++----
3 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 10eee6aab1..8800f31400 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -6,7 +6,7 @@
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
<div :class="$style.headerText">
<div :class="$style.headerTextMain">
- <slot name="label"></slot>
+ <MkCondensedLine :min-scale="2 / 3"><slot name="label"></slot></MkCondensedLine>
</div>
<div :class="$style.headerTextSub">
<slot name="caption"></slot>
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
index e9f4f68df8..5cea67ccf5 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
@@ -4,6 +4,7 @@
<MkFolder>
<template #label>{{ i18n.ts.makeFollowManuallyApprove }}</template>
+ <template #icon><i class="ti ti-lock"></i></template>
<template #suffix>{{ isLocked ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="isLocked">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></MkSwitch>
@@ -11,6 +12,7 @@
<MkFolder>
<template #label>{{ i18n.ts.hideOnlineStatus }}</template>
+ <template #icon><i class="ti ti-eye-off"></i></template>
<template #suffix>{{ hideOnlineStatus ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="hideOnlineStatus">{{ i18n.ts.hideOnlineStatus }}<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template></MkSwitch>
@@ -18,6 +20,7 @@
<MkFolder>
<template #label>{{ i18n.ts.noCrawle }}</template>
+ <template #icon><i class="ti ti-world-x"></i></template>
<template #suffix>{{ noCrawle ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="noCrawle">{{ i18n.ts.noCrawle }}<template #caption>{{ i18n.ts.noCrawleDescription }}</template></MkSwitch>
@@ -25,6 +28,7 @@
<MkFolder>
<template #label>{{ i18n.ts.preventAiLearning }}</template>
+ <template #icon><i class="ti ti-photo-shield"></i></template>
<template #suffix>{{ preventAiLearning ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="preventAiLearning">{{ i18n.ts.preventAiLearning }}<template #caption>{{ i18n.ts.preventAiLearningDescription }}</template></MkSwitch>
diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue
index 07bc561218..066556a05b 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@@ -7,10 +7,10 @@
@close="close(true)"
@closed="emit('closed')"
>
- <template v-if="page === 1" #header>{{ i18n.ts._initialAccountSetting.profileSetting }}</template>
- <template v-else-if="page === 2" #header>{{ i18n.ts._initialAccountSetting.privacySetting }}</template>
- <template v-else-if="page === 3" #header>{{ i18n.ts.follow }}</template>
- <template v-else-if="page === 4" #header>{{ i18n.ts.pushNotification }}</template>
+ <template v-if="page === 1" #header><i class="ti ti-user-edit"></i> {{ i18n.ts._initialAccountSetting.profileSetting }}</template>
+ <template v-else-if="page === 2" #header><i class="ti ti-lock"></i> {{ i18n.ts._initialAccountSetting.privacySetting }}</template>
+ <template v-else-if="page === 3" #header><i class="ti ti-user-plus"></i> {{ i18n.ts.follow }}</template>
+ <template v-else-if="page === 4" #header><i class="ti ti-bell-plus"></i> {{ i18n.ts.pushNotification }}</template>
<template v-else-if="page === 5" #header>{{ i18n.ts.done }}</template>
<template v-else #header>{{ i18n.ts.initialAccountSetting }}</template>
From 8c97c54cfacd201e480dffb73db3fd0124532edb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 14 May 2023 10:21:56 +0900
Subject: [PATCH 3/4] refactor(frontend): use css modules
---
.../src/components/MkAbuseReportWindow.vue | 6 +-
.../frontend/src/components/MkChannelList.vue | 3 -
.../frontend/src/components/MkObjectView.vue | 8 +--
.../src/components/MkRetentionLineChart.vue | 4 --
.../src/components/MkRippleEffect.vue | 16 ++---
packages/frontend/src/components/MkSignin.vue | 28 ++++-----
.../src/components/MkUrlPreviewPopup.vue | 6 +-
.../src/components/page/page.button.vue | 6 +-
.../src/components/page/page.counter.vue | 6 +-
.../src/components/page/page.note.vue | 14 ++---
.../src/components/page/page.number-input.vue | 6 +-
.../src/components/page/page.text-input.vue | 6 +-
packages/frontend/src/pages/admin/abuses.vue | 8 +--
.../src/pages/admin/announcements.vue | 8 +--
packages/frontend/src/pages/admin/files.vue | 8 +--
.../frontend/src/pages/admin/overview.pie.vue | 4 --
.../src/pages/admin/overview.queue.chart.vue | 4 --
.../frontend/src/pages/admin/overview.vue | 6 +-
.../src/pages/admin/queue.chart.chart.vue | 4 --
.../frontend/src/pages/emoji-edit-dialog.vue | 16 +++--
.../frontend/src/pages/flash/flash-edit.vue | 4 --
packages/frontend/src/pages/gallery/index.vue | 16 ++---
.../frontend/src/pages/my-antennas/create.vue | 4 --
.../frontend/src/pages/my-antennas/edit.vue | 4 --
.../frontend/src/pages/my-antennas/editor.vue | 16 +++--
.../page-editor/els/page-editor.el.image.vue | 12 +---
.../page-editor/els/page-editor.el.text.vue | 38 ++++++------
packages/frontend/src/pages/preview.vue | 8 +--
packages/frontend/src/pages/registry.keys.vue | 3 -
.../frontend/src/pages/registry.value.vue | 3 -
packages/frontend/src/pages/registry.vue | 3 -
.../frontend/src/pages/reset-password.vue | 4 --
.../frontend/src/pages/settings/plugin.vue | 4 --
.../frontend/src/pages/settings/profile.vue | 59 ++++++++++---------
.../frontend/src/pages/settings/reaction.vue | 28 ++++-----
packages/frontend/src/pages/share.vue | 4 +-
.../frontend/src/pages/signup-complete.vue | 4 --
.../src/widgets/WidgetActivity.chart.vue | 18 +++---
.../frontend/src/widgets/WidgetAichan.vue | 6 +-
.../frontend/src/widgets/WidgetButton.vue | 5 --
40 files changed, 148 insertions(+), 262 deletions(-)
diff --git a/packages/frontend/src/components/MkAbuseReportWindow.vue b/packages/frontend/src/components/MkAbuseReportWindow.vue
index 9f2bf99338..7a1b7d532e 100644
--- a/packages/frontend/src/components/MkAbuseReportWindow.vue
+++ b/packages/frontend/src/components/MkAbuseReportWindow.vue
@@ -9,7 +9,7 @@
</I18n>
</template>
<MkSpacer :margin-min="20" :margin-max="28">
- <div class="dpvffvvy _gaps_m">
+ <div class="_gaps_m" :class="$style.root">
<div class="">
<MkTextarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template>
@@ -60,8 +60,8 @@ function send() {
}
</script>
-<style lang="scss" scoped>
-.dpvffvvy {
+<style lang="scss" module>
+.root {
--root-margin: 16px;
}
</style>
diff --git a/packages/frontend/src/components/MkChannelList.vue b/packages/frontend/src/components/MkChannelList.vue
index 408eab7399..4050520eb9 100644
--- a/packages/frontend/src/components/MkChannelList.vue
+++ b/packages/frontend/src/components/MkChannelList.vue
@@ -26,6 +26,3 @@ const props = withDefaults(defineProps<{
extractor: (item) => item,
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/components/MkObjectView.vue b/packages/frontend/src/components/MkObjectView.vue
index 55578a37f6..8b1ed74142 100644
--- a/packages/frontend/src/components/MkObjectView.vue
+++ b/packages/frontend/src/components/MkObjectView.vue
@@ -1,5 +1,5 @@
<template>
-<div class="zhyxdalp">
+<div>
<XValue :value="value" :collapsed="false"/>
</div>
</template>
@@ -12,9 +12,3 @@ const props = defineProps<{
value: Record<string, unknown>;
}>();
</script>
-
-<style lang="scss" scoped>
-.zhyxdalp {
-
-}
-</style>
diff --git a/packages/frontend/src/components/MkRetentionLineChart.vue b/packages/frontend/src/components/MkRetentionLineChart.vue
index 8bd0279806..9f56189f3e 100644
--- a/packages/frontend/src/components/MkRetentionLineChart.vue
+++ b/packages/frontend/src/components/MkRetentionLineChart.vue
@@ -124,7 +124,3 @@ onMounted(async () => {
});
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/components/MkRippleEffect.vue b/packages/frontend/src/components/MkRippleEffect.vue
index 9d93211d5f..60c3a47385 100644
--- a/packages/frontend/src/components/MkRippleEffect.vue
+++ b/packages/frontend/src/components/MkRippleEffect.vue
@@ -1,7 +1,7 @@
<template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
+<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
- <circle fill="none" cx="64" cy="64">
+ <circle fill="none" cx="64" cy="64" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.5s"
@@ -22,7 +22,7 @@
/>
</circle>
<g fill="none" fill-rule="evenodd">
- <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
+ <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.8s"
@@ -100,17 +100,11 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.vswabwbm {
+<style lang="scss" module>
+.root {
pointer-events: none;
position: fixed;
width: 128px;
height: 128px;
-
- > svg {
- > circle {
- stroke: var(--accent);
- }
- }
}
</style>
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index ffc5e82b56..6eae8ecf84 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -1,7 +1,7 @@
<template>
-<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
- <div class="auth _gaps_m">
- <div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
+<form :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
+ <div class="_gaps_m">
+ <div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
<MkInfo v-if="message">
{{ message }}
</MkInfo>
@@ -236,18 +236,14 @@ function resetPassword() {
}
</script>
-<style lang="scss" scoped>
-.eppvobhk {
- > .auth {
- > .avatar {
- margin: 0 auto 0 auto;
- width: 64px;
- height: 64px;
- background: #ddd;
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- }
- }
+<style lang="scss" module>
+.avatar {
+ margin: 0 auto 0 auto;
+ width: 64px;
+ height: 64px;
+ background: #ddd;
+ background-position: center;
+ background-size: cover;
+ border-radius: 100%;
}
</style>
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue
index e244be3e96..30204b91c1 100644
--- a/packages/frontend/src/components/MkUrlPreviewPopup.vue
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue
@@ -1,5 +1,5 @@
<template>
-<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
+<div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @after-leave="emit('closed')">
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
</Transition>
@@ -36,8 +36,8 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.fgmtyycl {
+<style lang="scss" module>
+.root {
position: absolute;
width: 500px;
max-width: calc(90vw - 12px);
diff --git a/packages/frontend/src/components/page/page.button.vue b/packages/frontend/src/components/page/page.button.vue
index 83931021d8..8e89023fd7 100644
--- a/packages/frontend/src/components/page/page.button.vue
+++ b/packages/frontend/src/components/page/page.button.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
+ <MkButton :class="$style.button" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
@@ -56,8 +56,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.kudkigyw {
+<style lang="scss" module>
+.button {
display: inline-block;
min-width: 200px;
max-width: 450px;
diff --git a/packages/frontend/src/components/page/page.counter.vue b/packages/frontend/src/components/page/page.counter.vue
index 63fde6a120..3f282a2e51 100644
--- a/packages/frontend/src/components/page/page.counter.vue
+++ b/packages/frontend/src/components/page/page.counter.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
+ <MkButton :class="$style.button" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
@@ -41,8 +41,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.llumlmnx {
+<style lang="scss" module>
+.button {
display: inline-block;
min-width: 300px;
max-width: 450px;
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
index 8c65dabf08..7c620184d7 100644
--- a/packages/frontend/src/components/page/page.note.vue
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -1,5 +1,5 @@
<template>
-<div class="voxdxuby">
+<div style="margin: 1em 0;">
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
</div>
@@ -28,9 +28,9 @@ export default defineComponent({
onMounted(() => {
os.api('notes/show', { noteId: props.block.note })
- .then(result => {
- note.value = result;
- });
+ .then(result => {
+ note.value = result;
+ });
});
return {
@@ -39,9 +39,3 @@ export default defineComponent({
},
});
</script>
-
-<style lang="scss" scoped>
-.voxdxuby {
- margin: 1em 0;
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.number-input.vue b/packages/frontend/src/components/page/page.number-input.vue
index 72c1b6deb0..9cac3b4f0d 100644
--- a/packages/frontend/src/components/page/page.number-input.vue
+++ b/packages/frontend/src/components/page/page.number-input.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkInput class="kudkigyw" :model-value="value" type="number" @update:model-value="updateValue($event)">
+ <MkInput :class="$style.input" :model-value="value" type="number" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
@@ -44,8 +44,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.kudkigyw {
+<style lang="scss" module>
+.input {
display: inline-block;
min-width: 300px;
max-width: 450px;
diff --git a/packages/frontend/src/components/page/page.text-input.vue b/packages/frontend/src/components/page/page.text-input.vue
index d020a99de8..1df45fefed 100644
--- a/packages/frontend/src/components/page/page.text-input.vue
+++ b/packages/frontend/src/components/page/page.text-input.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkInput class="kudkigyw" :model-value="value" type="text" @update:model-value="updateValue($event)">
+ <MkInput :class="$style.input" :model-value="value" type="text" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
@@ -44,8 +44,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.kudkigyw {
+<style lang="scss" module>
+.input {
display: inline-block;
min-width: 300px;
max-width: 450px;
diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
index 9e8af43024..f8200570f9 100644
--- a/packages/frontend/src/pages/admin/abuses.vue
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
- <div class="lcixvhis">
+ <div>
<div class="reports">
<div class="">
<div class="inputs" style="display: flex;">
@@ -87,9 +87,3 @@ definePageMetadata({
icon: 'ti ti-exclamation-circle',
});
</script>
-
-<style lang="scss" scoped>
-.lcixvhis {
- margin: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
index b76e4b9114..638b193c11 100644
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
- <div class="ztgjmzrw _gaps_m">
+ <div class="_gaps_m">
<section v-for="announcement in announcements" class="">
<div class="_panel _gaps_m" style="padding: 24px;">
<MkInput v-model="announcement.title">
@@ -113,9 +113,3 @@ definePageMetadata({
icon: 'ti ti-speakerphone',
});
</script>
-
-<style lang="scss" scoped>
-.ztgjmzrw {
- margin: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
index c189437246..2b13a7c80c 100644
--- a/packages/frontend/src/pages/admin/files.vue
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -3,7 +3,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :content-max="900">
- <div class="xrmjdkdw">
+ <div>
<div>
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
@@ -109,9 +109,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-cloud',
})));
</script>
-
-<style lang="scss" scoped>
-.xrmjdkdw {
- margin: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue
index 08a29bf550..af7bc70551 100644
--- a/packages/frontend/src/pages/admin/overview.pie.vue
+++ b/packages/frontend/src/pages/admin/overview.pie.vue
@@ -67,7 +67,3 @@ onMounted(() => {
});
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue
index 6a11e8b768..a3c8659ce5 100644
--- a/packages/frontend/src/pages/admin/overview.queue.chart.vue
+++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue
@@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue
index 5c96c07bfb..bdfb200a88 100644
--- a/packages/frontend/src/pages/admin/overview.vue
+++ b/packages/frontend/src/pages/admin/overview.vue
@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="1000">
- <div ref="rootEl" class="edbbcaef">
+ <div ref="rootEl" :class="$style.root">
<MkFoldableSection class="item">
<template #header>Stats</template>
<XStats/>
@@ -176,8 +176,8 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.edbbcaef {
+<style lang="scss" module>
+.root {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 16px;
diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.vue b/packages/frontend/src/pages/admin/queue.chart.chart.vue
index 1a1f6a9db4..9bc0eee212 100644
--- a/packages/frontend/src/pages/admin/queue.chart.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.chart.vue
@@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index 84bc153b71..3c829d6a8e 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -10,8 +10,8 @@
<template #header>:{{ emoji.name }}:</template>
<MkSpacer :margin-min="20" :margin-max="28">
- <div class="yigymqpb _gaps_m">
- <img :src="`/emoji/${emoji.name}.webp`" class="img"/>
+ <div class="_gaps_m">
+ <img :src="`/emoji/${emoji.name}.webp`" :class="$style.img"/>
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
</MkInput>
@@ -99,12 +99,10 @@ async function del() {
}
</script>
-<style lang="scss" scoped>
-.yigymqpb {
- > .img {
- display: block;
- height: 64px;
- margin: 0 auto;
- }
+<style lang="scss" module>
+.img {
+ display: block;
+ height: 64px;
+ margin: 0 auto;
}
</style>
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index 816825e5b6..5e875d195b 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -442,7 +442,3 @@ definePageMetadata(computed(() => flash ? {
title: i18n.ts._play.new,
}));
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index fc9cc7ae9e..3855a6d9d8 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -7,7 +7,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -15,7 +15,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-comet"></i>{{ i18n.ts.popularPosts }}</template>
<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -23,7 +23,7 @@
</div>
<div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div>
</MkPagination>
@@ -31,7 +31,7 @@
<div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
<MkPagination v-slot="{items}" :pagination="myPostsPagination">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -119,15 +119,11 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.vfpdbgtk {
+<style lang="scss" module>
+.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
margin: 0 var(--margin);
-
- > .post {
-
- }
}
</style>
diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue
index c35af3e22a..14ab18a3df 100644
--- a/packages/frontend/src/pages/my-antennas/create.vue
+++ b/packages/frontend/src/pages/my-antennas/create.vue
@@ -38,7 +38,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
index 913fbde8e9..da9b2de48f 100644
--- a/packages/frontend/src/pages/my-antennas/edit.vue
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -36,7 +36,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/pages/my-antennas/editor.vue
index 26b7bcc71b..dd5f3222af 100644
--- a/packages/frontend/src/pages/my-antennas/editor.vue
+++ b/packages/frontend/src/pages/my-antennas/editor.vue
@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="700">
- <div class="shaynizk">
+ <div>
<div class="_gaps_m">
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
@@ -33,7 +33,7 @@
<MkSwitch v-model="withFile">{{ i18n.ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ i18n.ts.notifyAntenna }}</MkSwitch>
</div>
- <div class="actions">
+ <div :class="$style.actions">
<MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
@@ -128,12 +128,10 @@ function addUser() {
}
</script>
-<style lang="scss" scoped>
-.shaynizk {
- > .actions {
- margin-top: 16px;
- padding: 24px 0;
- border-top: solid 0.5px var(--divider);
- }
+<style lang="scss" module>
+.actions {
+ margin-top: 16px;
+ padding: 24px 0;
+ border-top: solid 0.5px var(--divider);
}
</style>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index 1b292e8f3c..eca3feda62 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -8,8 +8,8 @@
</button>
</template>
- <section class="oyyftmcf">
- <MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
+ <section>
+ <MkDriveFileThumbnail v-if="file" style="height: 150px;" :file="file" fit="contain" @click="choose()"/>
</section>
</XContainer>
</template>
@@ -54,11 +54,3 @@ onMounted(async () => {
}
});
</script>
-
-<style lang="scss" scoped>
-.oyyftmcf {
- > .preview {
- height: 150px;
- }
-}
-</style>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
index bf21ae3c67..3b15c17747 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
@@ -3,8 +3,8 @@
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
- <section class="vckmsadr">
- <textarea v-model="text"></textarea>
+ <section>
+ <textarea v-model="text" :class="$style.textarea"></textarea>
</section>
</XContainer>
</template>
@@ -33,23 +33,21 @@ watch($$(text), () => {
});
</script>
-<style lang="scss" scoped>
-.vckmsadr {
- > textarea {
- display: block;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- min-width: 100%;
- min-height: 150px;
- border: none;
- box-shadow: none;
- padding: 16px;
- background: transparent;
- color: var(--fg);
- font-size: 14px;
- box-sizing: border-box;
- }
+<style lang="scss" module>
+.textarea {
+ display: block;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ min-width: 100%;
+ min-height: 150px;
+ border: none;
+ box-shadow: none;
+ padding: 16px;
+ background: transparent;
+ color: var(--fg);
+ font-size: 14px;
+ box-sizing: border-box;
}
</style>
diff --git a/packages/frontend/src/pages/preview.vue b/packages/frontend/src/pages/preview.vue
index 354f686e46..952af23a53 100644
--- a/packages/frontend/src/pages/preview.vue
+++ b/packages/frontend/src/pages/preview.vue
@@ -1,5 +1,5 @@
<template>
-<div class="graojtoi">
+<div>
<MkSample/>
</div>
</template>
@@ -19,9 +19,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-eye',
})));
</script>
-
-<style lang="scss" scoped>
-.graojtoi {
- padding: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/registry.keys.vue b/packages/frontend/src/pages/registry.keys.vue
index c687b89eab..52b7c256e0 100644
--- a/packages/frontend/src/pages/registry.keys.vue
+++ b/packages/frontend/src/pages/registry.keys.vue
@@ -93,6 +93,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/registry.value.vue b/packages/frontend/src/pages/registry.value.vue
index 00e2ca5e03..6ff07e2b77 100644
--- a/packages/frontend/src/pages/registry.value.vue
+++ b/packages/frontend/src/pages/registry.value.vue
@@ -118,6 +118,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/registry.vue b/packages/frontend/src/pages/registry.vue
index 5a029cb0c7..016af22815 100644
--- a/packages/frontend/src/pages/registry.vue
+++ b/packages/frontend/src/pages/registry.vue
@@ -68,6 +68,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue
index 38c88cc650..ab7a96a8d0 100644
--- a/packages/frontend/src/pages/reset-password.vue
+++ b/packages/frontend/src/pages/reset-password.vue
@@ -53,7 +53,3 @@ definePageMetadata({
icon: 'ti ti-lock',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue
index 8b57dceefb..f90ca737e9 100644
--- a/packages/frontend/src/pages/settings/plugin.vue
+++ b/packages/frontend/src/pages/settings/plugin.vue
@@ -94,7 +94,3 @@ definePageMetadata({
icon: 'ti ti-plug',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 6ffd682610..dd552ed92b 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -1,11 +1,11 @@
<template>
<div class="_gaps_m">
- <div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
- <div class="avatar">
- <MkAvatar class="avatar" :user="$i" @click="changeAvatar"/>
- <MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+ <div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
+ <div :class="$style.avatarContainer">
+ <MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
+ <MkButton primary rounded :class="$style.avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
</div>
- <MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
+ <MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<MkInput v-model="profile.name" :max="30" manual-save>
@@ -248,36 +248,39 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.llvierxe {
+<style lang="scss" module>
+.avatarAndBanner {
position: relative;
background-size: cover;
background-position: center;
border: solid 1px var(--divider);
border-radius: 10px;
overflow: clip;
-
- > .avatar {
- display: inline-block;
- text-align: center;
- padding: 16px;
-
- > .avatar {
- display: inline-block;
- width: 72px;
- height: 72px;
- margin: 0 auto 16px auto;
- }
- }
-
- > .bannerEdit {
- position: absolute;
- top: 16px;
- right: 16px;
- }
}
-</style>
-<style lang="scss" module>
+
+.avatarContainer {
+ display: inline-block;
+ text-align: center;
+ padding: 16px;
+}
+
+.avatar {
+ display: inline-block;
+ width: 72px;
+ height: 72px;
+ margin: 0 auto 16px auto;
+}
+
+.avatarEdit {
+
+}
+
+.bannerEdit {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+}
+
.metadataRoot {
container-type: inline-size;
}
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
index ed913731d3..10169ccf18 100644
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ b/packages/frontend/src/pages/settings/reaction.vue
@@ -3,15 +3,15 @@
<FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
- <Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
+ <Sortable v-model="reactions" :class="$style.reactions" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<template #item="{element}">
- <button class="_button item" @click="remove(element, $event)">
+ <button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
- <button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
+ <button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template>
</Sortable>
</div>
@@ -135,20 +135,20 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.zoaiodol {
+<style lang="scss" module>
+.reactions {
padding: 12px;
font-size: 1.1em;
+}
- > .item {
- display: inline-block;
- padding: 8px;
- cursor: move;
- }
+.reactionsItem {
+ display: inline-block;
+ padding: 8px;
+ cursor: move;
+}
- > .add {
- display: inline-block;
- padding: 8px;
- }
+.reactionsAdd {
+ display: inline-block;
+ padding: 8px;
}
</style>
diff --git a/packages/frontend/src/pages/share.vue b/packages/frontend/src/pages/share.vue
index 78e0710162..5abb234893 100644
--- a/packages/frontend/src/pages/share.vue
+++ b/packages/frontend/src/pages/share.vue
@@ -16,7 +16,7 @@
class="_panel"
@posted="state = 'posted'"
/>
- <MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
+ <MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton>
</MkSpacer>
</MkStickyContainer>
</template>
@@ -162,7 +162,7 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
+<style lang="scss" module>
.close {
margin: 16px auto;
}
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index 5459532310..079cbb3d33 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -35,7 +35,3 @@ definePageMetadata({
icon: 'ti ti-user',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/widgets/WidgetActivity.chart.vue b/packages/frontend/src/widgets/WidgetActivity.chart.vue
index b61e419f94..cc4df65dd2 100644
--- a/packages/frontend/src/widgets/WidgetActivity.chart.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.chart.vue
@@ -1,26 +1,30 @@
<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" :class="$style.root" @mousedown.prevent="onMousedown">
<polyline
:points="pointsNote"
fill="none"
stroke-width="1"
- stroke="#41ddde"/>
+ stroke="#41ddde"
+ />
<polyline
:points="pointsReply"
fill="none"
stroke-width="1"
- stroke="#f7796c"/>
+ stroke="#f7796c"
+ />
<polyline
:points="pointsRenote"
fill="none"
stroke-width="1"
- stroke="#a1de41"/>
+ stroke="#a1de41"
+ />
<polyline
:points="pointsTotal"
fill="none"
stroke-width="1"
stroke="#555"
- stroke-dasharray="2 2"/>
+ stroke-dasharray="2 2"
+ />
</svg>
</template>
@@ -81,8 +85,8 @@ function render() {
}
</script>
-<style lang="scss" scoped>
-svg {
+<style lang="scss" module>
+.root {
display: block;
padding: 16px;
width: 100%;
diff --git a/packages/frontend/src/widgets/WidgetAichan.vue b/packages/frontend/src/widgets/WidgetAichan.vue
index 37326ee981..0c485441d2 100644
--- a/packages/frontend/src/widgets/WidgetAichan.vue
+++ b/packages/frontend/src/widgets/WidgetAichan.vue
@@ -1,6 +1,6 @@
<template>
<MkContainer :naked="widgetProps.transparent" :show-header="false" data-cy-mkw-aichan class="mkw-aichan">
- <iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
+ <iframe ref="live2d" :class="$style.root" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
</MkContainer>
</template>
@@ -64,8 +64,8 @@ defineExpose<WidgetComponentExpose>({
});
</script>
-<style lang="scss" scoped>
-.dedjhjmo {
+<style lang="scss" module>
+.root {
width: 100%;
height: 350px;
border: none;
diff --git a/packages/frontend/src/widgets/WidgetButton.vue b/packages/frontend/src/widgets/WidgetButton.vue
index 9eee9680db..98260caeef 100644
--- a/packages/frontend/src/widgets/WidgetButton.vue
+++ b/packages/frontend/src/widgets/WidgetButton.vue
@@ -101,8 +101,3 @@ defineExpose<WidgetComponentExpose>({
id: props.widget ? props.widget.id : null,
});
</script>
-
-<style lang="scss" scoped>
-.mkw-button {
-}
-</style>
From a979fb920774f19edbda0e942706ac229bde5a39 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 14 May 2023 10:31:48 +0900
Subject: [PATCH 4/4] =?UTF-8?q?change(frontend):=20=E5=8B=95=E7=9A=84?=
=?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E3=82=B3=E3=83=B3=E3=83=9D?=
=?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/page/page.block.vue | 13 +-
.../src/components/page/page.button.vue | 66 -----------
.../src/components/page/page.canvas.vue | 48 --------
.../src/components/page/page.counter.vue | 51 --------
.../frontend/src/components/page/page.if.vue | 31 -----
.../src/components/page/page.number-input.vue | 54 ---------
.../src/components/page/page.post.vue | 111 ------------------
.../src/components/page/page.radio-button.vue | 44 -------
.../src/components/page/page.switch.vue | 54 ---------
.../src/components/page/page.text-input.vue | 54 ---------
.../components/page/page.textarea-input.vue | 45 -------
.../src/components/page/page.textarea.vue | 39 ------
12 files changed, 1 insertion(+), 609 deletions(-)
delete mode 100644 packages/frontend/src/components/page/page.button.vue
delete mode 100644 packages/frontend/src/components/page/page.canvas.vue
delete mode 100644 packages/frontend/src/components/page/page.counter.vue
delete mode 100644 packages/frontend/src/components/page/page.if.vue
delete mode 100644 packages/frontend/src/components/page/page.number-input.vue
delete mode 100644 packages/frontend/src/components/page/page.post.vue
delete mode 100644 packages/frontend/src/components/page/page.radio-button.vue
delete mode 100644 packages/frontend/src/components/page/page.switch.vue
delete mode 100644 packages/frontend/src/components/page/page.text-input.vue
delete mode 100644 packages/frontend/src/components/page/page.textarea-input.vue
delete mode 100644 packages/frontend/src/components/page/page.textarea.vue
diff --git a/packages/frontend/src/components/page/page.block.vue b/packages/frontend/src/components/page/page.block.vue
index f3e7764604..3f8a5dbc59 100644
--- a/packages/frontend/src/components/page/page.block.vue
+++ b/packages/frontend/src/components/page/page.block.vue
@@ -7,24 +7,13 @@ import { defineComponent, PropType } from 'vue';
import XText from './page.text.vue';
import XSection from './page.section.vue';
import XImage from './page.image.vue';
-import XButton from './page.button.vue';
-import XNumberInput from './page.number-input.vue';
-import XTextInput from './page.text-input.vue';
-import XTextareaInput from './page.textarea-input.vue';
-import XSwitch from './page.switch.vue';
-import XIf from './page.if.vue';
-import XTextarea from './page.textarea.vue';
-import XPost from './page.post.vue';
-import XCounter from './page.counter.vue';
-import XRadioButton from './page.radio-button.vue';
-import XCanvas from './page.canvas.vue';
import XNote from './page.note.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { Block } from '@/scripts/hpml/block';
export default defineComponent({
components: {
- XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote,
+ XText, XSection, XImage, XNote,
},
props: {
block: {
diff --git a/packages/frontend/src/components/page/page.button.vue b/packages/frontend/src/components/page/page.button.vue
deleted file mode 100644
index 8e89023fd7..0000000000
--- a/packages/frontend/src/components/page/page.button.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<div>
- <MkButton :class="$style.button" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, unref } from 'vue';
-import MkButton from '../MkButton.vue';
-import * as os from '@/os';
-import { ButtonBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
- components: {
- MkButton,
- },
- props: {
- block: {
- type: Object as PropType<ButtonBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- methods: {
- click() {
- if (this.block.action === 'dialog') {
- this.hpml.eval();
- os.alert({
- text: this.hpml.interpolate(this.block.content),
- });
- } else if (this.block.action === 'resetRandom') {
- this.hpml.updateRandomSeed(Math.random());
- this.hpml.eval();
- } else if (this.block.action === 'pushEvent') {
- os.api('page-push', {
- pageId: this.hpml.page.id,
- event: this.block.event,
- ...(this.block.var ? {
- var: unref(this.hpml.vars)[this.block.var],
- } : {}),
- });
-
- os.alert({
- type: 'success',
- text: this.hpml.interpolate(this.block.message),
- });
- } else if (this.block.action === 'callAiScript') {
- this.hpml.callAiScript(this.block.fn);
- }
- },
- },
-});
-</script>
-
-<style lang="scss" module>
-.button {
- display: inline-block;
- min-width: 200px;
- max-width: 450px;
- margin: 8px 0;
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.canvas.vue b/packages/frontend/src/components/page/page.canvas.vue
deleted file mode 100644
index 82ff36ec36..0000000000
--- a/packages/frontend/src/components/page/page.canvas.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-<div class="ysrxegms">
- <canvas ref="canvas" :width="block.width" :height="block.height"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import { CanvasBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
- props: {
- block: {
- type: Object as PropType<CanvasBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- setup(props, ctx) {
- const canvas: Ref<any> = ref(null);
-
- onMounted(() => {
- props.hpml.registerCanvas(props.block.name, canvas.value);
- });
-
- return {
- canvas,
- };
- },
-});
-</script>
-
-<style lang="scss" scoped>
-.ysrxegms {
- display: inline-block;
- vertical-align: bottom;
- overflow: auto;
- max-width: 100%;
-
- > canvas {
- display: block;
- }
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.counter.vue b/packages/frontend/src/components/page/page.counter.vue
deleted file mode 100644
index 3f282a2e51..0000000000
--- a/packages/frontend/src/components/page/page.counter.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-<div>
- <MkButton :class="$style.button" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkButton from '../MkButton.vue';
-import { CounterVarBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
- components: {
- MkButton,
- },
- props: {
- block: {
- type: Object as PropType<CounterVarBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- setup(props, ctx) {
- const value = computed(() => {
- return props.hpml.vars.value[props.block.name];
- });
-
- function click() {
- props.hpml.updatePageVar(props.block.name, value.value + (props.block.inc || 1));
- props.hpml.eval();
- }
-
- return {
- click,
- };
- },
-});
-</script>
-
-<style lang="scss" module>
-.button {
- display: inline-block;
- min-width: 300px;
- max-width: 450px;
- margin: 8px 0;
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.if.vue b/packages/frontend/src/components/page/page.if.vue
deleted file mode 100644
index 372a15f0c6..0000000000
--- a/packages/frontend/src/components/page/page.if.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<div v-show="hpml.vars.value[block.var]">
- <XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
-</div>
-</template>
-
-<script lang="ts">
-import { IfBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
-
-export default defineComponent({
- components: {
- XBlock: defineAsyncComponent(() => import('./page.block.vue')),
- },
- props: {
- block: {
- type: Object as PropType<IfBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- h: {
- type: Number,
- required: true,
- },
- },
-});
-</script>
diff --git a/packages/frontend/src/components/page/page.number-input.vue b/packages/frontend/src/components/page/page.number-input.vue
deleted file mode 100644
index 9cac3b4f0d..0000000000
--- a/packages/frontend/src/components/page/page.number-input.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<div>
- <MkInput :class="$style.input" :model-value="value" type="number" @update:model-value="updateValue($event)">
- <template #label>{{ hpml.interpolate(block.text) }}</template>
- </MkInput>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../MkInput.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { NumberInputVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
- components: {
- MkInput,
- },
- props: {
- block: {
- type: Object as PropType<NumberInputVarBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- setup(props, ctx) {
- const value = computed(() => {
- return props.hpml.vars.value[props.block.name];
- });
-
- function updateValue(newValue) {
- props.hpml.updatePageVar(props.block.name, newValue);
- props.hpml.eval();
- }
-
- return {
- value,
- updateValue,
- };
- },
-});
-</script>
-
-<style lang="scss" module>
-.input {
- display: inline-block;
- min-width: 300px;
- max-width: 450px;
- margin: 8px 0;
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.post.vue b/packages/frontend/src/components/page/page.post.vue
deleted file mode 100644
index 55da610cb6..0000000000
--- a/packages/frontend/src/components/page/page.post.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-<div class="ngbfujlo">
- <MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
- <MkButton class="button" primary :disabled="posting || posted" @click="post()">
- <i v-if="posted" class="ti ti-check"></i>
- <i v-else class="ti ti-send"></i>
- </MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../MkTextarea.vue';
-import MkButton from '../MkButton.vue';
-import { apiUrl } from '@/config';
-import * as os from '@/os';
-import { PostBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defaultStore } from '@/store';
-import { $i } from '@/account';
-
-export default defineComponent({
- components: {
- MkTextarea,
- MkButton,
- },
- props: {
- block: {
- type: Object as PropType<PostBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- data() {
- return {
- text: this.hpml.interpolate(this.block.text),
- posted: false,
- posting: false,
- };
- },
- watch: {
- 'hpml.vars': {
- handler() {
- this.text = this.hpml.interpolate(this.block.text);
- },
- deep: true,
- },
- },
- methods: {
- upload() {
- const promise = new Promise((ok) => {
- const canvas = this.hpml.canvases[this.block.canvasId];
- canvas.toBlob(blob => {
- const formData = new FormData();
- formData.append('file', blob);
- formData.append('i', $i.token);
- if (defaultStore.state.uploadFolder) {
- formData.append('folderId', defaultStore.state.uploadFolder);
- }
-
- window.fetch(apiUrl + '/drive/files/create', {
- method: 'POST',
- body: formData,
- })
- .then(response => response.json())
- .then(f => {
- ok(f);
- });
- });
- });
- os.promiseDialog(promise);
- return promise;
- },
- async post() {
- this.posting = true;
- const file = this.block.attachCanvasImage ? await this.upload() : null;
- os.apiWithDialog('notes/create', {
- text: this.text === '' ? null : this.text,
- fileIds: file ? [file.id] : undefined,
- }).then(() => {
- this.posted = true;
- });
- },
- },
-});
-</script>
-
-<style lang="scss" scoped>
-.ngbfujlo {
- position: relative;
- padding: 32px;
- border-radius: 6px;
- box-shadow: 0 2px 8px var(--shadow);
- z-index: 1;
-
- > .button {
- margin-top: 32px;
- }
-
- @media (max-width: 600px) {
- padding: 16px;
-
- > .button {
- margin-top: 16px;
- }
- }
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.radio-button.vue b/packages/frontend/src/components/page/page.radio-button.vue
deleted file mode 100644
index ce8f252e44..0000000000
--- a/packages/frontend/src/components/page/page.radio-button.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<div>
- <div>{{ hpml.interpolate(block.title) }}</div>
- <MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:model-value="updateValue($event)">{{ item }}</MkRadio>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkRadio from '../MkRadio.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { RadioButtonVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
- components: {
- MkRadio,
- },
- props: {
- block: {
- type: Object as PropType<RadioButtonVarBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- setup(props, ctx) {
- const value = computed(() => {
- return props.hpml.vars.value[props.block.name];
- });
-
- function updateValue(newValue: string) {
- props.hpml.updatePageVar(props.block.name, newValue);
- props.hpml.eval();
- }
-
- return {
- value,
- updateValue,
- };
- },
-});
-</script>
diff --git a/packages/frontend/src/components/page/page.switch.vue b/packages/frontend/src/components/page/page.switch.vue
deleted file mode 100644
index b5f3464512..0000000000
--- a/packages/frontend/src/components/page/page.switch.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<div class="hkcxmtwj">
- <MkSwitch :model-value="value" @update:model-value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../MkSwitch.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { SwitchVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
- components: {
- MkSwitch,
- },
- props: {
- block: {
- type: Object as PropType<SwitchVarBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- setup(props, ctx) {
- const value = computed(() => {
- return props.hpml.vars.value[props.block.name];
- });
-
- function updateValue(newValue: boolean) {
- props.hpml.updatePageVar(props.block.name, newValue);
- props.hpml.eval();
- }
-
- return {
- value,
- updateValue,
- };
- },
-});
-</script>
-
-<style lang="scss" scoped>
-.hkcxmtwj {
- display: inline-block;
- margin: 16px auto;
-
- & + .hkcxmtwj {
- margin-left: 16px;
- }
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.text-input.vue b/packages/frontend/src/components/page/page.text-input.vue
deleted file mode 100644
index 1df45fefed..0000000000
--- a/packages/frontend/src/components/page/page.text-input.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<div>
- <MkInput :class="$style.input" :model-value="value" type="text" @update:model-value="updateValue($event)">
- <template #label>{{ hpml.interpolate(block.text) }}</template>
- </MkInput>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../MkInput.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
- components: {
- MkInput,
- },
- props: {
- block: {
- type: Object as PropType<TextInputVarBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- setup(props, ctx) {
- const value = computed(() => {
- return props.hpml.vars.value[props.block.name];
- });
-
- function updateValue(newValue) {
- props.hpml.updatePageVar(props.block.name, newValue);
- props.hpml.eval();
- }
-
- return {
- value,
- updateValue,
- };
- },
-});
-</script>
-
-<style lang="scss" module>
-.input {
- display: inline-block;
- min-width: 300px;
- max-width: 450px;
- margin: 8px 0;
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.textarea-input.vue b/packages/frontend/src/components/page/page.textarea-input.vue
deleted file mode 100644
index db3a96dd1b..0000000000
--- a/packages/frontend/src/components/page/page.textarea-input.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<div>
- <MkTextarea :model-value="value" @update:model-value="updateValue($event)">
- <template #label>{{ hpml.interpolate(block.text) }}</template>
- </MkTextarea>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkTextarea from '../MkTextarea.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
- components: {
- MkTextarea,
- },
- props: {
- block: {
- type: Object as PropType<TextInputVarBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- setup(props, ctx) {
- const value = computed(() => {
- return props.hpml.vars.value[props.block.name];
- });
-
- function updateValue(newValue) {
- props.hpml.updatePageVar(props.block.name, newValue);
- props.hpml.eval();
- }
-
- return {
- value,
- updateValue,
- };
- },
-});
-</script>
diff --git a/packages/frontend/src/components/page/page.textarea.vue b/packages/frontend/src/components/page/page.textarea.vue
deleted file mode 100644
index 9b82412e8a..0000000000
--- a/packages/frontend/src/components/page/page.textarea.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<MkTextarea :model-value="text" readonly></MkTextarea>
-</template>
-
-<script lang="ts">
-import { TextBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../MkTextarea.vue';
-
-export default defineComponent({
- components: {
- MkTextarea,
- },
- props: {
- block: {
- type: Object as PropType<TextBlock>,
- required: true,
- },
- hpml: {
- type: Object as PropType<Hpml>,
- required: true,
- },
- },
- data() {
- return {
- text: this.hpml.interpolate(this.block.text),
- };
- },
- watch: {
- 'hpml.vars': {
- handler() {
- this.text = this.hpml.interpolate(this.block.text);
- },
- deep: true,
- },
- },
-});
-</script>