heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

199
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,113 +379,88 @@ 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;
max-height: 190px; max-height: 190px;
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;
white-space: nowrap; white-space: nowrap;
overflow: clip; overflow: clip;
font-size: 0.9em; font-size: 0.9em;
cursor: default; cursor: default;
user-select: none;
overflow: hidden;
text-overflow: ellipsis;
&, * { &:hover {
user-select: none; background: var(--X3);
}
* {
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
background: var(--X3);
}
&[data-selected='true'] {
background: var(--accent);
&, * {
color: #fff !important;
}
}
&:active {
background: var(--accentDarken);
&, * {
color: #fff !important;
}
}
}
} }
> .users > li { &[data-selected='true'] {
background: var(--accent);
.avatar { color: #fff !important;
min-width: 28px;
min-height: 28px;
max-width: 28px;
max-height: 28px;
margin: 0 8px 0 0;
border-radius: 100%;
}
.name {
margin: 0 8px 0 0;
}
} }
> .emojis > li { &:active {
background: var(--accentDarken);
.emoji { color: #fff !important;
flex-shrink: 0;
display: flex;
margin: 0 4px 0 0;
height: 24px;
width: 24px;
justify-content: center;
align-items: center;
font-size: 20px;
> img {
height: 24px;
width: 24px;
object-fit: scale-down;
}
}
.name {
flex-shrink: 1;
}
.alias {
flex-shrink: 9999999;
margin: 0 0 0 8px;
}
}
> .mfmTags > li {
.name {
}
} }
} }
.avatar {
min-width: 28px;
min-height: 28px;
max-width: 28px;
max-height: 28px;
margin: 0 8px 0 0;
border-radius: 100%;
}
.userName {
margin: 0 8px 0 0;
}
.emoji {
flex-shrink: 0;
display: flex;
margin: 0 4px 0 0;
height: 24px;
width: 24px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.emojiImg {
height: 24px;
width: 24px;
object-fit: scale-down;
}
.emojiName {
flex-shrink: 1;
}
.emojiAlias {
flex-shrink: 9999999;
margin: 0 0 0 8px;
}
</style> </style>