monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

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

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

@ -1,7 +1,7 @@
<template> <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> <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> </button>
</template> </template>
@ -34,8 +34,8 @@ const toggle = () => {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.nrvgflfu { .root {
display: inline-block; display: inline-block;
padding: 4px 8px; padding: 4px 8px;
font-size: 0.7em; font-size: 0.7em;
@ -46,17 +46,17 @@ const toggle = () => {
&:hover { &:hover {
background: var(--cwHoverBg); background: var(--cwHoverBg);
} }
}
> span { .label {
margin-left: 4px; margin-left: 4px;
&:before { &:before {
content: '('; content: '(';
} }
&:after { &:after {
content: ')'; content: ')';
}
} }
} }
</style> </style>

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

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

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

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