butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Updated New Room Page

Browse source
This commit is contained in:
N Pex 2025-01-14 11:14:11 +00:00
parent 5294069b20
commit a700e19990
30 changed files with 1263 additions and 763 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/components/Create.vue Normal file
View file

@ -0,0 +1,135 @@
<template>
<div class="create-root fill-height">
<div class="mt-4 d-flex flex-row align-center">
<v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack">
<v-icon>arrow_back</v-icon>
</v-btn>
<YouAre class="flex-grow-1 text-end" v-if="loggedIn" />
</div>
<div class="mt-40 text-center px-4">
<div class="create-title no-icon h3-bold">{{ $t("create.title") }}</div>
<div class="room-type" @click="createRoom" v-if="$config.roomTypes.includes('group_chat')">
<div class="room-type__icon">
<v-icon>$vuetify.icons.room_type_room</v-icon>
</div>
<div class="room-type__name">{{ $t("create.room_type_room_name") }}</div>
<div class="room-type__description">{{ $t("create.room_type_room_description") }}</div>
</div>
<div class="room-type" @click="createChannel" v-if="$config.roomTypes.includes('channel')">
<div class="room-type__icon">
<v-icon>$vuetify.icons.room_type_channel</v-icon>
</div>
<div class="room-type__name">{{ $t("create.room_type_channel_name") }}</div>
<div class="room-type__description">{{ $t("create.room_type_channel_description") }}</div>
</div>
<div class="room-type" @click="createFiledrop" v-if="$config.roomTypes.includes('file_drop')">
<div class="room-type__icon">
<v-icon>$vuetify.icons.room_type_filedrop</v-icon>
</div>
<div class="room-type__name">{{ $t("create.room_type_filedrop_name") }}</div>
<div class="room-type__description">{{ $t("create.room_type_filedrop_description") }}</div>
</div>
</div>
</div>
</template>
<script>
import YouAre from "../components/YouAre.vue";
export default {
name: "Create",
components: { YouAre },
computed: {
loggedIn() {
return this.$store.state.auth.status.loggedIn;
},
},
methods: {
goBack() {
this.$navigation.pop();
},
createRoom() {
this.$navigation.push({ name: "CreateRoom" });
},
createChannel() {
this.$navigation.push({ name: "CreateChannel" });
},
createFiledrop() {
this.$navigation.push({ name: "CreateFileDrop" });
},
},
};
</script>
<style lang="scss">
@import "@/assets/css/typography.scss";
@import "@/assets/css/create.scss";
.create-title {
margin-bottom: 24 * $chat-text-size;
}
.room-type {
padding: 15 * $chat-text-size;
margin-bottom: 12 * $chat-text-size;
box-sizing: border-box;
position: relative;
user-select: none;
&::after {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8 * $chat-text-size;
border: 1px solid #ededed;
}
&:active {
background: #efeffe;
}
&:hover::after {
border: 2px solid $very-very-purple;
}
&:active::after {
border: 1px solid $poll-hilite-color;
}
.room-type__icon svg {
color: transparent;
}
&:hover .room-type__icon svg, &:active .room-type__icon svg {
color: $very-very-purple;
}
.room-type__name {
color: black;
font-family: Inter;
font-size: 16 * $chat-text-size;
font-weight: 600;
line-height: 18.72 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin-top: 8 * $chat-text-size;
margin-bottom: 6 * $chat-text-size;
}
.room-type__description {
color: rgba(0, 0, 0, 0.65);
font-family: Inter;
font-size: 13 * $chat-text-size;
font-weight: 400;
line-height: 15.21 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
}
</style>