Skip to content
Snippets Groups Projects
Commit f5cd809f authored by syuilo's avatar syuilo
Browse files

refactor(client): use css modules

parent 09d5a780
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/frontend/src/components/MkAutocomplete.vue
+ 83
− 108
View file @ f5cd809f
<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(() => { ...@@ -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 {
display: flex;
align-items: center;
padding: 4px 12px;
white-space: nowrap;
overflow: clip;
font-size: 0.9em;
cursor: default;
&, * {
user-select: none;
}
* {
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
background: var(--X3);
}
&[data-selected='true'] {
background: var(--accent);
&, * {
color: #fff !important;
}
}
&:active {
background: var(--accentDarken);
&, * { .item {
color: #fff !important; display: flex;
} align-items: center;
} padding: 4px 12px;
} white-space: nowrap;
overflow: clip;
font-size: 0.9em;
cursor: default;
user-select: none;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background: var(--X3);
} }
> .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 { &:active {
margin: 0 8px 0 0; background: var(--accentDarken);
} color: #fff !important;
} }
}
> .emojis > li { .avatar {
min-width: 28px;
.emoji { min-height: 28px;
flex-shrink: 0; max-width: 28px;
display: flex; max-height: 28px;
margin: 0 4px 0 0; margin: 0 8px 0 0;
height: 24px; border-radius: 100%;
width: 24px; }
justify-content: center;
align-items: center;
font-size: 20px;
> img {
height: 24px;
width: 24px;
object-fit: scale-down;
}
} .userName {
margin: 0 8px 0 0;
}
.name { .emoji {
flex-shrink: 1; flex-shrink: 0;
} display: flex;
margin: 0 4px 0 0;
height: 24px;
width: 24px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.alias { .emojiImg {
flex-shrink: 9999999; height: 24px;
margin: 0 0 0 8px; width: 24px;
} object-fit: scale-down;
} }
> .mfmTags > li { .emojiName {
flex-shrink: 1;
}
.name { .emojiAlias {
} flex-shrink: 9999999;
} margin: 0 0 0 8px;
} }
</style> </style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment