amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(client): use css modules

Browse Source
This commit is contained in:
syuilo 2023-01-16 05:26:29 +09:00
parent 0022267072
commit f3c5ca6cf4
1 changed files with 83 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
packages/frontend/src/components/MkUserSelectDialog.vue
View File

@ -9,8 +9,8 @@
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts.selectUser }}</template>
<div class="tbhwbxda">
<div class="form">
<div :class="$style.root">
<div :class="$style.form">
<FormSplit :min-width="170">
<MkInput v-model="username" :autofocus="true" @update:model-value="search">
<template #label>{{ i18n.ts.username }}</template>
@ -22,27 +22,27 @@
</MkInput>
</FormSplit>
</div>
<div v-if="username != '' || host != ''" class="result" :class="{ hit: users.length > 0 }">
<div v-if="users.length > 0" class="users">
<div v-for="user in users" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/>
<div v-if="username != '' || host != ''" :class="[$style.result, { [$style.hit]: users.length > 0 }]">
<div v-if="users.length > 0" :class="$style.users">
<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/>
<div :class="$style.userBody">
<MkUserName :user="user" :class="$style.userName"/>
<MkAcct :user="user" :class="$style.userAcct"/>
</div>
</div>
</div>
<div v-else class="empty">
<div v-else :class="$style.empty">
<span>{{ i18n.ts.noUsers }}</span>
</div>
</div>
<div v-if="username == '' && host == ''" class="recent">
<div class="users">
<div v-for="user in recentUsers" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/>
<div v-if="username == '' && host == ''" :class="$style.recent">
<div :class="$style.users">
<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/>
<div :class="$style.userBody">
<MkUserName :user="user" :class="$style.userName"/>
<MkAcct :user="user" :class="$style.userAcct"/>
</div>
</div>
</div>
@ -115,76 +115,74 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.tbhwbxda {
> .form {
padding: 0 var(--root-margin);
<style lang="scss" module>
.root {
}
.form {
padding: 0 var(--root-margin);
}
.result,
.recent {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
&.result.hit {
padding: 0;
}
> .result, > .recent {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
&.result.hit {
padding: 0;
}
&.recent {
padding: 0;
}
> .users {
flex: 1;
overflow: auto;
padding: 8px 0;
> .user {
display: flex;
align-items: center;
padding: 8px var(--root-margin);
font-size: 14px;
&:hover {
background: var(--X7);
}
&.selected {
background: var(--accent);
color: #fff;
}
> * {
pointer-events: none;
user-select: none;
}
> .avatar {
width: 45px;
height: 45px;
}
> .body {
padding: 0 8px;
min-width: 0;
> .name {
display: block;
font-weight: bold;
}
> .acct {
opacity: 0.5;
}
}
}
}
> .empty {
opacity: 0.7;
text-align: center;
}
&.recent {
padding: 0;
}
}
.users {
flex: 1;
overflow: auto;
padding: 8px 0;
}
.user {
display: flex;
align-items: center;
padding: 8px var(--root-margin);
font-size: 14px;
&:hover {
background: var(--X7);
}
&.selected {
background: var(--accent);
color: #fff;
}
}
.userBody {
padding: 0 8px;
min-width: 0;
}
.avatar {
width: 45px;
height: 45px;
}
.userName {
display: block;
font-weight: bold;
}
.userAcct {
opacity: 0.5;
}
.empty {
opacity: 0.7;
text-align: center;
padding: 16px;
}
</style>