OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-29 09:58:36 +01:00
Code Issues Projects Releases Packages Wiki Activity

CSS Module化

Browse source
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>
<style lang="scss">
.hidden {
background-color: yellow;
}
</style>
<style module lang="scss">
$borderSetting: solid 0.5px var(--divider);
$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"
type="search"
autocapitalize="off"
class="col1 row1"
:class="[$style.col1, $style.row1]"
@enter="onSearchRequest"
>
<template #label>name</template>
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryCategory"
type="search"
autocapitalize="off"
class="col2 row1"
:class="[$style.col2, $style.row1]"
@enter="onSearchRequest"
>
<template #label>category</template>
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryAliases"
type="search"
autocapitalize="off"
class="col3 row1"
:class="[$style.col3, $style.row1]"
@enter="onSearchRequest"
>
<template #label>aliases</template>
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryType"
type="search"
autocapitalize="off"
class="col1 row2"
:class="[$style.col1, $style.row2]"
@enter="onSearchRequest"
>
<template #label>type</template>
@ -55,14 +55,14 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryLicense"
type="search"
autocapitalize="off"
class="col2 row2"
:class="[$style.col2, $style.row2]"
@enter="onSearchRequest"
>
<template #label>license</template>
</MkInput>
<MkSelect
v-model="querySensitive"
class="col3 row2"
:class="[$style.col3, $style.row2]"
>
<template #label>sensitive</template>
<option :value="null">-</option>
@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSelect
v-model="queryLocalOnly"
class="col1 row3"
:class="[$style.col1, $style.row3]"
>
<template #label>localOnly</template>
<option :value="null">-</option>
@ -83,7 +83,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryUpdatedAtFrom"
type="date"
autocapitalize="off"
class="col2 row3"
:class="[$style.col2, $style.row3]"
@enter="onSearchRequest"
>
<template #label>updatedAt(from)</template>
@ -92,7 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryUpdatedAtTo"
type="date"
autocapitalize="off"
class="col3 row3"
:class="[$style.col3, $style.row3]"
@enter="onSearchRequest"
>
<template #label>updatedAt(to)</template>
@ -103,7 +103,7 @@ SPDX-License-Identifier: AGPL-3.0-only
type="text"
readonly
autocapitalize="off"
class="col1 row4"
:class="[$style.col1, $style.row4]"
@click="onQueryRolesEditClicked"
>
<template #label>role</template>
@ -152,7 +152,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<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 os from '@/os.js';
import {
@ -199,6 +199,8 @@ type GridItem = {
}
function setupGrid(): GridSetting {
const $style = useCssModule();
const required = validators.required();
const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
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]),
applyStyle: { className: 'changedRow' },
applyStyle: { className: $style.changedRow },
},
{
// バリデーションに引っかかっていたら背景色を変更
condition: ({ cells }) => cells.some(it => !it.violation.valid),
applyStyle: { className: 'violationRow' },
applyStyle: { className: $style.violationRow },
},
],
// 行のコンテキストメニュー設定
@ -610,7 +612,7 @@ onMounted(async () => {
</script>
<style lang="scss">
<style module lang="scss">
.violationRow {
background-color: var(--infoWarnBg);
}
@ -618,9 +620,7 @@ onMounted(async () => {
.changedRow {
background-color: var(--infoBg);
}
</style>
<style lang="scss">
.editedRow {
background-color: var(--infoBg);
}
@ -652,9 +652,7 @@ onMounted(async () => {
.col3 {
grid-column: 3 / 4;
}
</style>
<style module lang="scss">
.searchArea {
display: grid;
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">
/* eslint-disable @typescript-eslint/no-non-null-assertion */
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 {
emptyStrToEmptyArray,
@ -118,6 +118,8 @@ type GridItem = {
}
function setupGrid(): GridSetting {
const $style = useCssModule();
const required = validators.required();
const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
const unique = validators.unique();
@ -136,7 +138,7 @@ function setupGrid(): GridSetting {
{
// 1つでもバリデーションエラーがあれば行全体をエラー表示する
condition: ({ cells }) => cells.some(it => !it.violation.valid),
applyStyle: { className: 'violationRow' },
applyStyle: { className: $style.violationRow },
},
],
// 行のコンテキストメニュー設定
@ -427,13 +429,11 @@ onMounted(async () => {
});
</script>
<style lang="scss">
<style module lang="scss">
.violationRow {
background-color: var(--infoWarnBg);
}
</style>
<style module lang="scss">
.uploadBox {
display: flex;
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"
type="search"
autocapitalize="off"
class="col1 row1"
:class="[$style.col1, $style.row1]"
@enter="onSearchRequest"
>
<template #label>name</template>
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryHost"
type="search"
autocapitalize="off"
class="col2 row1"
:class="[$style.col2, $style.row1]"
@enter="onSearchRequest"
>
<template #label>host</template>
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryUri"
type="search"
autocapitalize="off"
class="col1 row2"
:class="[$style.col1, $style.row2]"
@enter="onSearchRequest"
>
<template #label>uri</template>
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="queryPublicUrl"
type="search"
autocapitalize="off"
class="col2 row2"
:class="[$style.col2, $style.row2]"
@enter="onSearchRequest"
>
<template #label>publicUrl</template>
@ -293,7 +293,7 @@ onMounted(async () => {
});
</script>
<style lang="scss">
<style module lang="scss">
.row1 {
grid-row: 1 / 2;
}
@ -310,10 +310,6 @@ onMounted(async () => {
grid-column: 2 / 3;
}
</style>
<style module lang="scss">
.root {
--stickyTop: 0px;