yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 20:51:07 +09:00
parent 09d5a7806a
commit f5cd809f62
1 changed files with 87 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
packages/frontend/src/components/MkAutocomplete.vue
View file

@ -1,34 +1,34 @@
<template> <template>
<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}"> <div ref="rootEl" :class="$style.root" class="_popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
<ol v-if="type === 'user'" ref="suggests" class="users"> <ol v-if="type === 'user'" ref="suggests" :class="$style.list">
<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown"> <li v-for="user in users" tabindex="-1" :class="$style.item" @click="complete(type, user)" @keydown="onKeydown">
<img class="avatar" :src="user.avatarUrl"/> <img :class="$style.avatar" :src="user.avatarUrl"/>
<span class="name"> <span :class="$style.userName">
<MkUserName :key="user.id" :user="user"/> <MkUserName :key="user.id" :user="user"/>
</span> </span>
<span class="username">@{{ acct(user) }}</span> <span>@{{ acct(user) }}</span>
</li> </li>
<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li> <li tabindex="-1" :class="$style.item" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
</ol> </ol>
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags"> <ol v-else-if="hashtags.length > 0" ref="suggests" :class="[$style.list, $style.hashtags]">
<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown"> <li v-for="hashtag in hashtags" tabindex="-1" :class="$style.item" @click="complete(type, hashtag)" @keydown="onKeydown">
<span class="name">{{ hashtag }}</span> <span class="name">{{ hashtag }}</span>
</li> </li>
</ol> </ol>
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis"> <ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
<li v-for="emoji in emojis" :key="emoji.emoji" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown"> <li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
<div class="emoji"> <div :class="$style.emoji">
<MkEmoji :emoji="emoji.emoji"/> <MkEmoji :emoji="emoji.emoji"/>
</div> </div>
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<span v-if="q" class="name" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span> <span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
<span v-else v-text="emoji.name"></span> <span v-else v-text="emoji.name"></span>
<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span> <span v-if="emoji.aliasOf" :class="$style.emojiAlias">({{ emoji.aliasOf }})</span>
</li> </li>
</ol> </ol>
<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags"> <ol v-else-if="mfmTags.length > 0" ref="suggests" :class="$style.list">
<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown"> <li v-for="tag in mfmTags" tabindex="-1" :class="$style.item" @click="complete(type, tag)" @keydown="onKeydown">
<span class="tag">{{ tag }}</span> <span>{{ tag }}</span>
</li> </li>
</ol> </ol>
</div> </div>
@ -379,15 +379,16 @@ onBeforeUnmount(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.swhvrteh { .root {
position: fixed; position: fixed;
max-width: 100%; max-width: 100%;
margin-top: calc(1em + 8px); margin-top: calc(1em + 8px);
overflow: clip; overflow: clip;
transition: top 0.1s ease, left 0.1s ease; transition: top 0.1s ease, left 0.1s ease;
}
> ol { .list {
display: block; display: block;
margin: 0; margin: 0;
padding: 4px 0; padding: 4px 0;
@ -395,8 +396,9 @@ onBeforeUnmount(() => {
max-width: 500px; max-width: 500px;
overflow: auto; overflow: auto;
list-style: none; list-style: none;
}
> li { .item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px 12px; padding: 4px 12px;
@ -404,15 +406,9 @@ onBeforeUnmount(() => {
overflow: clip; overflow: clip;
font-size: 0.9em; font-size: 0.9em;
cursor: default; cursor: default;
&, * {
user-select: none; user-select: none;
}
* {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
&:hover { &:hover {
background: var(--X3); background: var(--X3);
@ -420,23 +416,14 @@ onBeforeUnmount(() => {
&[data-selected='true'] { &[data-selected='true'] {
background: var(--accent); background: var(--accent);
&, * {
color: #fff !important; color: #fff !important;
} }
}
&:active { &:active {
background: var(--accentDarken); background: var(--accentDarken);
&, * {
color: #fff !important; color: #fff !important;
} }
} }
}
}
> .users > li {
.avatar { .avatar {
min-width: 28px; min-width: 28px;
@ -447,12 +434,9 @@ onBeforeUnmount(() => {
border-radius: 100%; border-radius: 100%;
} }
.name { .userName {
margin: 0 8px 0 0; margin: 0 8px 0 0;
} }
}
> .emojis > li {
.emoji { .emoji {
flex-shrink: 0; flex-shrink: 0;
@ -463,29 +447,20 @@ onBeforeUnmount(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
}
> img { .emojiImg {
height: 24px; height: 24px;
width: 24px; width: 24px;
object-fit: scale-down; object-fit: scale-down;
} }
} .emojiName {
.name {
flex-shrink: 1; flex-shrink: 1;
} }
.alias { .emojiAlias {
flex-shrink: 9999999; flex-shrink: 9999999;
margin: 0 0 0 8px; margin: 0 0 0 8px;
} }
}
> .mfmTags > li {
.name {
}
}
}
</style> </style>