worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests 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

90
packages/frontend/src/components/MkUserSelectDialog.vue
View file

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