sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): use css modules

Browse Source
This commit is contained in:
syuilo
2023-05-14 10:21:56 +09:00
parent 89a3195dfd
commit 8c97c54cfa
40 changed files with 148 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/MkAbuseReportWindow.vue
View File

@@ -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>

3
packages/frontend/src/components/MkChannelList.vue
View File

@@ -26,6 +26,3 @@ const props = withDefaults(defineProps<{
extractor: (item) => item,
});
</script>
<style lang="scss" scoped>
</style>

8
packages/frontend/src/components/MkObjectView.vue
View File

@@ -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>

4
packages/frontend/src/components/MkRetentionLineChart.vue
View File

@@ -124,7 +124,3 @@ onMounted(async () => {
});
});
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/components/MkRippleEffect.vue
View File

@@ -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>

28
packages/frontend/src/components/MkSignin.vue
View File

@@ -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>

6
packages/frontend/src/components/MkUrlPreviewPopup.vue
View File

@@ -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);

6
packages/frontend/src/components/page/page.button.vue
View File

@@ -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;

6
packages/frontend/src/components/page/page.counter.vue
View File

@@ -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;

14
packages/frontend/src/components/page/page.note.vue
View File

@@ -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>

6
packages/frontend/src/components/page/page.number-input.vue
View File

@@ -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;

6
packages/frontend/src/components/page/page.text-input.vue
View File

@@ -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;