usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CSS Module化

This commit is contained in:
samunohito 2024-03-28 21:23:16 +09:00
parent cd06807d53
commit cf95082450
4 changed files with 26 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/grid/MkGrid.vue
View File

@ -1269,12 +1269,6 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss">
.hidden {
background-color: yellow;
}
</style>
<style module lang="scss"> <style module lang="scss">
$borderSetting: solid 0.5px var(--divider); $borderSetting: solid 0.5px var(--divider);
$borderRadius: var(--radius); $borderRadius: var(--radius);

34
packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
View File

@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryName" v-model="queryName"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col1 row1" :class="[$style.col1, $style.row1]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>name</template> <template #label>name</template>
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryCategory" v-model="queryCategory"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col2 row1" :class="[$style.col2, $style.row1]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>category</template> <template #label>category</template>
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryAliases" v-model="queryAliases"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col3 row1" :class="[$style.col3, $style.row1]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>aliases</template> <template #label>aliases</template>
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryType" v-model="queryType"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col1 row2" :class="[$style.col1, $style.row2]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>type</template> <template #label>type</template>
@ -55,14 +55,14 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryLicense" v-model="queryLicense"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col2 row2" :class="[$style.col2, $style.row2]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>license</template> <template #label>license</template>
</MkInput> </MkInput>
<MkSelect <MkSelect
v-model="querySensitive" v-model="querySensitive"
class="col3 row2" :class="[$style.col3, $style.row2]"
> >
<template #label>sensitive</template> <template #label>sensitive</template>
<option :value="null">-</option> <option :value="null">-</option>
@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSelect <MkSelect
v-model="queryLocalOnly" v-model="queryLocalOnly"
class="col1 row3" :class="[$style.col1, $style.row3]"
> >
<template #label>localOnly</template> <template #label>localOnly</template>
<option :value="null">-</option> <option :value="null">-</option>
@ -83,7 +83,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryUpdatedAtFrom" v-model="queryUpdatedAtFrom"
type="date" type="date"
autocapitalize="off" autocapitalize="off"
class="col2 row3" :class="[$style.col2, $style.row3]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>updatedAt(from)</template> <template #label>updatedAt(from)</template>
@ -92,7 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryUpdatedAtTo" v-model="queryUpdatedAtTo"
type="date" type="date"
autocapitalize="off" autocapitalize="off"
class="col3 row3" :class="[$style.col3, $style.row3]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>updatedAt(to)</template> <template #label>updatedAt(to)</template>
@ -103,7 +103,7 @@ SPDX-License-Identifier: AGPL-3.0-only
type="text" type="text"
readonly readonly
autocapitalize="off" autocapitalize="off"
class="col1 row4" :class="[$style.col1, $style.row4]"
@click="onQueryRolesEditClicked" @click="onQueryRolesEditClicked"
> >
<template #label>role</template> <template #label>role</template>
@ -152,7 +152,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref, useCssModule } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { import {
@ -199,6 +199,8 @@ type GridItem = {
} }
function setupGrid(): GridSetting { function setupGrid(): GridSetting {
const $style = useCssModule();
const required = validators.required(); const required = validators.required();
const regex = validators.regex(/^[a-zA-Z0-9_]+$/); const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
const unique = validators.unique(); const unique = validators.unique();
@ -212,12 +214,12 @@ function setupGrid(): GridSetting {
{ {
// 初期値から変わっていたら背景色を変更 // 初期値から変わっていたら背景色を変更
condition: ({ row }) => JSON.stringify(gridItems.value[row.index]) !== JSON.stringify(originGridItems.value[row.index]), condition: ({ row }) => JSON.stringify(gridItems.value[row.index]) !== JSON.stringify(originGridItems.value[row.index]),
applyStyle: { className: 'changedRow' }, applyStyle: { className: $style.changedRow },
}, },
{ {
// バリデーションに引っかかっていたら背景色を変更 // バリデーションに引っかかっていたら背景色を変更
condition: ({ cells }) => cells.some(it => !it.violation.valid), condition: ({ cells }) => cells.some(it => !it.violation.valid),
applyStyle: { className: 'violationRow' }, applyStyle: { className: $style.violationRow },
}, },
], ],
// 行のコンテキストメニュー設定 // 行のコンテキストメニュー設定
@ -610,7 +612,7 @@ onMounted(async () => {
</script> </script>
<style lang="scss"> <style module lang="scss">
.violationRow { .violationRow {
background-color: var(--infoWarnBg); background-color: var(--infoWarnBg);
} }
@ -618,9 +620,7 @@ onMounted(async () => {
.changedRow { .changedRow {
background-color: var(--infoBg); background-color: var(--infoBg);
} }
</style>
<style lang="scss">
.editedRow { .editedRow {
background-color: var(--infoBg); background-color: var(--infoBg);
} }
@ -652,9 +652,7 @@ onMounted(async () => {
.col3 { .col3 {
grid-column: 3 / 4; grid-column: 3 / 4;
} }
</style>
<style module lang="scss">
.searchArea { .searchArea {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;

10
packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
View File

@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script setup lang="ts"> <script setup lang="ts">
/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable @typescript-eslint/no-non-null-assertion */
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { onMounted, ref } from 'vue'; import { onMounted, ref, useCssModule } from 'vue';
import { misskeyApi } from '@/scripts/misskey-api.js'; import { misskeyApi } from '@/scripts/misskey-api.js';
import { import {
emptyStrToEmptyArray, emptyStrToEmptyArray,
@ -118,6 +118,8 @@ type GridItem = {
} }
function setupGrid(): GridSetting { function setupGrid(): GridSetting {
const $style = useCssModule();
const required = validators.required(); const required = validators.required();
const regex = validators.regex(/^[a-zA-Z0-9_]+$/); const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
const unique = validators.unique(); const unique = validators.unique();
@ -136,7 +138,7 @@ function setupGrid(): GridSetting {
{ {
// 1つでもバリデーションエラーがあれば行全体をエラー表示する // 1つでもバリデーションエラーがあれば行全体をエラー表示する
condition: ({ cells }) => cells.some(it => !it.violation.valid), condition: ({ cells }) => cells.some(it => !it.violation.valid),
applyStyle: { className: 'violationRow' }, applyStyle: { className: $style.violationRow },
}, },
], ],
// 行のコンテキストメニュー設定 // 行のコンテキストメニュー設定
@ -427,13 +429,11 @@ onMounted(async () => {
}); });
</script> </script>
<style lang="scss"> <style module lang="scss">
.violationRow { .violationRow {
background-color: var(--infoWarnBg); background-color: var(--infoWarnBg);
} }
</style>
<style module lang="scss">
.uploadBox { .uploadBox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

14
packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
View File

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryName" v-model="queryName"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col1 row1" :class="[$style.col1, $style.row1]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>name</template> <template #label>name</template>
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryHost" v-model="queryHost"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col2 row1" :class="[$style.col2, $style.row1]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>host</template> <template #label>host</template>
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryUri" v-model="queryUri"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col1 row2" :class="[$style.col1, $style.row2]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>uri</template> <template #label>uri</template>
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryPublicUrl" v-model="queryPublicUrl"
type="search" type="search"
autocapitalize="off" autocapitalize="off"
class="col2 row2" :class="[$style.col2, $style.row2]"
@enter="onSearchRequest" @enter="onSearchRequest"
> >
<template #label>publicUrl</template> <template #label>publicUrl</template>
@ -293,7 +293,7 @@ onMounted(async () => {
}); });
</script> </script>
<style lang="scss"> <style module lang="scss">
.row1 { .row1 {
grid-row: 1 / 2; grid-row: 1 / 2;
} }
@ -310,10 +310,6 @@ onMounted(async () => {
grid-column: 2 / 3; grid-column: 2 / 3;
} }
</style>
<style module lang="scss">
.root { .root {
--stickyTop: 0px; --stickyTop: 0px;