85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from "vue-router";
|
|
import { defineProps, PropType } from "vue";
|
|
import BaseAvatar from "../../avatars/BaseAvatar.vue";
|
|
import Badge from "@/components/Badge.vue";
|
|
import ThreadList from "./threads/ThreadList.vue";
|
|
import store from "@/store/store";
|
|
import { Room } from "@/store/models/model";
|
|
|
|
const props = defineProps({
|
|
room: Object as PropType<Room>,
|
|
});
|
|
// console.log(props.room?.threadIds);
|
|
|
|
const router = useRouter();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div
|
|
class="room"
|
|
@click="router.push(`/${props.room?.id}`)"
|
|
v-bind:class="store.state.activeRoom == props.room?.id ? 'selected' : ''"
|
|
>
|
|
<BaseAvatar url="vue.png" />
|
|
<div class="content">
|
|
<div class="sender">{{ props.room?.user }}</div>
|
|
<div class="object">{{ props.room?.roomName }}</div>
|
|
</div>
|
|
<Badge class="badge" v-if="props.room?.notSeen ?? 0 > 0" :value="props.room?.notSeen" type="badge-number" />
|
|
</div>
|
|
<ThreadList :threadIds="props.room?.threadIds" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.badge {
|
|
margin: auto 7px auto 1px;
|
|
}
|
|
.room {
|
|
box-sizing: border-box;
|
|
contain: content;
|
|
display: flex;
|
|
margin: 4px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.room:hover,
|
|
.selected {
|
|
background-color: var(--selected);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
height: 32px;
|
|
justify-content: center;
|
|
margin-left: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sender {
|
|
font-size: 1.4rem;
|
|
line-height: 1.8rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
.object {
|
|
color: var(--secondary-text);
|
|
line-height: 1.8rem;
|
|
font-size: 1.3rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
</style>
|