From f3c5ca6cf40fb5460c5109e1096f714309018540 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Mon, 16 Jan 2023 05:26:29 +0900 Subject: [PATCH] refactor(client): use css modules --- .../src/components/MkUserSelectDialog.vue | 168 +++++++++--------- 1 file changed, 83 insertions(+), 85 deletions(-) diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue index e420c0ffa..4c79979cb 100644 --- a/packages/frontend/src/components/MkUserSelectDialog.vue +++ b/packages/frontend/src/components/MkUserSelectDialog.vue @@ -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>