mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 07:35:57 +09:00
Code

refactor(client): use css modules

Browse Source
This commit is contained in:
syuilo 2023-01-14 11:46:22 +09:00
parent 5e02f0d325
commit 1e5d4db0a1
4 changed files with 69 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/frontend/src/components/MkAnalogClock.vue
View File

@ -1,5 +1,5 @@
<template>
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<svg :class="$style.root" viewBox="0 0 10 10" preserveAspectRatio="none">
<template v-if="props.graduations === 'dots'">
<circle
v-for="(angle, i) in graduationsMajor"
@ -39,8 +39,7 @@
-->
<line
class="s"
:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
:class="[$style.s, { [$style.animate]: !disableSAnimate && sAnimation !== 'none', [$style.elastic]: sAnimation === 'elastic', [$style.easeOut]: sAnimation === 'easeOut' }]"
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
@ -205,21 +204,21 @@ onBeforeUnmount(() => {
});
</script>
<style lang="scss" scoped>
.mbcofsoe {
<style lang="scss" module>
.root {
display: block;
}
> .s {
will-change: transform;
transform-origin: 50% 50%;
.s {
will-change: transform;
transform-origin: 50% 50%;
&.animate.elastic {
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
}
&.animate.elastic {
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
}
&.animate.easeOut {
transition: transform .7s cubic-bezier(0,.7,.3,1);
}
&.animate.easeOut {
transition: transform .7s cubic-bezier(0,.7,.3,1);
}
}
</style>

24
packages/frontend/src/components/MkCwButton.vue
View File

@ -1,7 +1,7 @@
<template>
<button class="nrvgflfu _button" @click="toggle">
<button class="_button" :class="$style.root" @click="toggle">
<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
<span v-if="!modelValue">{{ label }}</span>
<span v-if="!modelValue" :class="$style.label">{{ label }}</span>
</button>
</template>
@ -34,8 +34,8 @@ const toggle = () => {
};
</script>
<style lang="scss" scoped>
.nrvgflfu {
<style lang="scss" module>
.root {
display: inline-block;
padding: 4px 8px;
font-size: 0.7em;
@ -46,17 +46,17 @@ const toggle = () => {
&:hover {
background: var(--cwHoverBg);
}
}
> span {
margin-left: 4px;
.label {
margin-left: 4px;
&:before {
content: '(';
}
&:before {
content: '(';
}
&:after {
content: ')';
}
&:after {
content: ')';
}
}
</style>

30
packages/frontend/src/components/MkUpdated.vue
View File

@ -1,10 +1,10 @@
<template>
<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
<div class="ewlycnyt">
<div class="title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
<div class="version">✨{{ version }}🚀</div>
<div :class="$style.root">
<div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
<div :class="$style.version">✨{{ version }}🚀</div>
<MkButton full @click="whatIsNew">{{ i18n.ts.whatIsNew }}</MkButton>
<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
<MkButton :class="$style.gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
</div>
</MkModal>
</template>
@ -32,8 +32,8 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.ewlycnyt {
<style lang="scss" module>
.root {
position: relative;
padding: 32px;
min-width: 320px;
@ -42,17 +42,17 @@ onMounted(() => {
text-align: center;
background: var(--panel);
border-radius: var(--radius);
}
> .title {
font-weight: bold;
}
.title {
font-weight: bold;
}
> .version {
margin: 1em 0;
}
.version {
margin: 1em 0;
}
> .gotIt {
margin: 8px 0 0 0;
}
.gotIt {
margin: 8px 0 0 0;
}
</style>

50
packages/frontend/src/components/MkUsersTooltip.vue
View File

@ -1,11 +1,11 @@
<template>
<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
<div class="beaffaef">
<div v-for="u in users" :key="u.id" class="user">
<MkAvatar class="avatar" :user="u"/>
<MkUserName class="name" :user="u" :nowrap="true"/>
<div :class="$style.root">
<div v-for="u in users" :key="u.id" :class="$style.user">
<MkAvatar :class="$style.avatar" :user="u"/>
<MkUserName :class="$style.name" :user="u" :nowrap="true"/>
</div>
<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
<div v-if="users.length < count" :class="$style.omitted">+{{ count - users.length }}</div>
</div>
</MkTooltip>
</template>
@ -26,26 +26,34 @@ const emit = defineEmits<{
}>();
</script>
<style lang="scss" scoped>
.beaffaef {
<style lang="scss" module>
.root {
font-size: 0.9em;
text-align: left;
}
> .user {
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.user {
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:not(:last-child) {
margin-bottom: 3px;
}
> .avatar {
width: 24px;
height: 24px;
margin-right: 3px;
}
&:not(:last-child) {
margin-bottom: 3px;
}
}
.name {
}
.omitted {
}
.avatar {
width: 24px;
height: 24px;
margin-right: 3px;
}
</style>