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

fill-height is now a class, dense is a density and fix all v-selects

Browse source
This commit is contained in:
N-Pex 2025-05-12 12:39:48 +02:00
parent fba172d5cf
commit bde99dc242
14 changed files with 109 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/App.vue
View file

@ -6,9 +6,8 @@
<!-- Loading indicator --> <!-- Loading indicator -->
<v-container <v-container
fluid fluid
fill-height
v-if="showLoadingScreen" v-if="showLoadingScreen"
class="loading-container" class="loading-container fill-height"
> >
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col class="text-center"> <v-col class="text-center">

2
src/components/Chat.vue
View file

@ -311,7 +311,7 @@
<StickerPickerBottomSheet ref="stickerPickerSheet" v-on:selectSticker="sendSticker" /> <StickerPickerBottomSheet ref="stickerPickerSheet" v-on:selectSticker="sendSticker" />
<!-- Loading indicator --> <!-- Loading indicator -->
<v-container fluid class="loading-indicator" fill-height v-if="!initialLoadDone || loading"> <v-container fluid class="loading-indicator fill-height" v-if="!initialLoadDone || loading">
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col class="text-center"> <v-col class="text-center">
<v-progress-circular indeterminate color="primary"></v-progress-circular> <v-progress-circular indeterminate color="primary"></v-progress-circular>

47
src/components/CreateRoom.vue
View file

@ -76,18 +76,39 @@
<v-row class="align-center"> <v-row class="align-center">
<v-col class="py-0"> <v-col class="py-0">
<div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div> <div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
<v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar" <v-select ref="avatar"
:value="selectedProfile"> :items="availableAvatars"
variant="outlined"
density="compact"
@update:modelValue="selectAvatar"
:modelValue="selectedProfile"
item-props
item-value="id"
return-object
single-line
class="avatar-select-control"
>
<template v-slot:selection> <template v-slot:selection>
<v-text-field background-color="transparent" variant="solo" flat hide-details <v-text-field
background-color="transparent"
variant="solo"
flat
density="compact"
hide-details
@keydown="$event.stopPropagation()"
@keypress="$event.stopPropagation()"
@keyup="$event.stopPropagation()"
@click.stop="(event) => event.target.focus()" @focus="$event.target.select()" @click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
v-model="selectedProfile.name"></v-text-field> v-model="selectedProfile.name"></v-text-field>
</template> </template>
<template v-slot:item="data"> <template v-slot:item="{ props }">
<v-avatar size="32"> <v-list-item v-bind="props">
<v-img :src="data.item.image" /> <template v-slot:prepend>
</v-avatar> <v-avatar size="32">
<div class="ms-2">{{ data.item.name }}</div> <v-img :src="props.image" />
</v-avatar>
</template>
</v-list-item>
</template> </template>
</v-select> </v-select>
</v-col> </v-col>
@ -106,7 +127,7 @@
<v-row class="mt-0"> <v-row class="mt-0">
<v-col class="py-0"> <v-col class="py-0">
<v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA"> <v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
<template slot="label"> <template v-slot:label>
<i18n-t keypath="join.accept_ua" tag="span"> <i18n-t keypath="join.accept_ua" tag="span">
<template v-slot:agreement> <template v-slot:agreement>
<a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a> <a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
@ -151,7 +172,8 @@ export default {
selectedProfile: { selectedProfile: {
id: "", id: "",
image: "", image: "",
name: "" name: "",
title: "",
}, },
enterRoomDialog: false, enterRoomDialog: false,
selectRetentionDialog: false, selectRetentionDialog: false,
@ -335,6 +357,7 @@ export default {
}, },
selectAvatar(value) { selectAvatar(value) {
console.log("SELECT AVATAR", value);
this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data
}, },
@ -372,4 +395,8 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/assets/css/create.scss"; @import "@/assets/css/create.scss";
.avatar-select-control .v-select__selection {
flex-basis: 100%;
}
</style> </style>

2
src/components/DeviceList.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-list dense @click.stop="nullEvent" color="primary"> <v-list density="compact" @click.stop="nullEvent" color="primary">
<v-list-item <v-list-item
v-for="device in devices" v-for="device in devices"
:key="device.deviceId" :key="device.deviceId"

3
src/components/Home.vue
View file

@ -26,9 +26,8 @@
<!-- Loading indicator --> <!-- Loading indicator -->
<v-container <v-container
fluid fluid
fill-height
v-if="loading" v-if="loading"
class="loading-indicator" class="loading-indicator transparent fill-height"
> >
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col class="text-center"> <v-col class="text-center">

58
src/components/Join.vue
View file

@ -22,20 +22,41 @@
<v-row v-if="canEditProfile"> <v-row v-if="canEditProfile">
<v-col cols="10" sm="7" class="py-0"> <v-col cols="10" sm="7" class="py-0">
<v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar" <v-select ref="avatar"
:value="selectedProfile" single-line autofocus> :items="availableAvatars"
<template v-slot:selection> variant="outlined"
<v-text-field background-color="transparent" variant="solo" flat hide-details density="compact"
@click.stop="(event) => event.target.focus()" @focus="$event.target.select()" @update:modelValue="selectAvatar"
v-model="selectedProfile.name"></v-text-field> :modelValue="selectedProfile"
</template> item-props
<template v-slot:item="data"> item-value="id"
<v-avatar size="32"> return-object
<v-img :src="data.item.image" /> single-line
</v-avatar> class="avatar-select-control"
<div class="ms-2">{{ data.item.name }}</div> >
</template> <template v-slot:selection>
</v-select> <v-text-field
background-color="transparent"
variant="solo"
flat
density="compact"
hide-details
@keydown="$event.stopPropagation()"
@keypress="$event.stopPropagation()"
@keyup="$event.stopPropagation()"
@click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
v-model="selectedProfile.name"></v-text-field>
</template>
<template v-slot:item="{ props }">
<v-list-item v-bind="props">
<template v-slot:prepend>
<v-avatar size="32">
<v-img :src="props.image" />
</v-avatar>
</template>
</v-list-item>
</template>
</v-select>
<v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')"
@change="onRememberMe" /> @change="onRememberMe" />
</v-col> </v-col>
@ -59,7 +80,7 @@
</v-row> </v-row>
<v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA"> <v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
<template slot="label"> <template v-slot:label>
<i18n-t keypath="join.accept_ua" tag="span"> <i18n-t keypath="join.accept_ua" tag="span">
<template v-slot:agreement> <template v-slot:agreement>
<a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a> <a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
@ -117,7 +138,7 @@
</div> </div>
<!-- Loading indicator --> <!-- Loading indicator -->
<v-container v-else fluid fill-height class="loading-indicator transparent"> <v-container v-else fluid class="loading-indicator transparent fill-height">
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col class="text-center"> <v-col class="text-center">
<interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" /> <interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" />
@ -454,4 +475,9 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/assets/css/join.scss"; @import "@/assets/css/join.scss";
.avatar-select-control .v-select__selection {
flex-basis: 100%;
}
</style> </style>

2
src/components/RoomExport.vue
View file

@ -38,7 +38,7 @@
</div> </div>
<!-- Loading indicator --> <!-- Loading indicator -->
<v-container fluid fill-height class="exporting-indicator"> <v-container fluid class="exporting-indicator fill-height">
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col class="text-center"> <v-col class="text-center">
<v-progress-circular indeterminate color="primary"></v-progress-circular> <v-progress-circular indeterminate color="primary"></v-progress-circular>

14
src/components/RoomInfo.vue
View file

@ -101,20 +101,22 @@
:items="joinRules" :items="joinRules"
class="mt-4" class="mt-4"
v-model="roomJoinRule" v-model="roomJoinRule"
item-title="text"
item-value="id" item-value="id"
item-props
return-object
> >
<template v-slot:selection="{ item }"> <template v-slot:selection="{ item }">
<v-icon color="black" class="me-2">{{ item.icon }}</v-icon> <v-icon color="black" class="me-2">{{ item.props.icon }}</v-icon>
{{ item.text }} {{ item.props.text }}
</template> </template>
<template v-slot:item="{ item, attrs, on }"> <template v-slot:item="{ props }">
<v-list-item v-on="on" v-bind="attrs"> <v-list-item v-bind="props">
<template v-slot:prepend> <template v-slot:prepend>
<v-avatar color="grey"> <v-avatar color="grey">
<v-icon color="black">{{ item.icon }}</v-icon> <v-icon color="black">{{ props.icon }}</v-icon>
</v-avatar> </v-avatar>
</template> </template>
<v-list-item-title>{{ item.text }}</v-list-item-title>
<template v-slot:append="{ isActive }"> <template v-slot:append="{ isActive }">
<v-list-item-action> <v-list-item-action>
<v-btn icon v-if="isActive"> <v-btn icon v-if="isActive">

39
src/components/RoomTypeSelector.vue
View file

@ -1,39 +0,0 @@
<template>
<v-select variant="outlined" dense :items="availableRoomTypes"
:value="modelValue"
@change="$emit('update:modelValue', $event)"
:reduce="(obj) => obj.value">
<template v-slot:selection="{ item }">{{ item.title }}</template>
<template v-slot:item="{ item, attrs, on }">
<v-list-item v-on="on" v-bind="attrs" #default="{}">
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
</v-list-item>
</template>
</v-select>
</template>
<script>
import roomTypeMixin from "./roomTypeMixin";
export default {
name: "RoomTypeSelector",
mixins: [roomTypeMixin],
model: {
prop: "modelValue",
event: "update:modelValue",
},
props: {
modelValue: {
type: String,
default: function () {
return null;
},
},
}
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

4
src/components/SelectLanguageDialog.vue
View file

@ -15,11 +15,11 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-select <v-select
:model-value="$i18n.locale" :modelValue="$i18n.locale"
:items="languages" :items="languages"
:menu-props="{ auto: true }" :menu-props="{ auto: true }"
:label="$t('profile.select_language')" :label="$t('profile.select_language')"
@update:model-value="(lang) => updateLanguage(lang)" @update:modelValue="updateLanguage"
hide-details hide-details
prepend-icon="language" prepend-icon="language"
single-line single-line

10
src/components/VoiceRecorder.vue
View file

@ -5,7 +5,7 @@
:class="{ 'voice-recorder': true, ptt: usePTT, row: !usePTT }" :class="{ 'voice-recorder': true, ptt: usePTT, row: !usePTT }"
ref="vrroot" ref="vrroot"
> >
<v-container v-if="!usePTT" fluid fill-height> <v-container v-if="!usePTT" fluid class="fill-height">
<v-row align="center" class="mt-3"> <v-row align="center" class="mt-3">
<v-col cols="4" align="center"> <v-col cols="4" align="center">
<v-btn v-show="state == states.RECORDED" icon @click.stop="redo"> <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
@ -70,7 +70,7 @@
</v-row> </v-row>
</v-container> </v-container>
<v-container fluid fill-height> <v-container fluid class="fill-height">
<v-row align="center"> <v-row align="center">
<v-col cols="3"> <v-col cols="3">
<div class="recording-time"> <div class="recording-time">
@ -89,7 +89,7 @@
v-if="willCancel" v-if="willCancel"
class="will-cancel" class="will-cancel"
> >
<v-container fluid fill-height> <v-container fluid class="fill-height">
<v-row align="center"> <v-row align="center">
<v-col cols="3"> <v-col cols="3">
<v-icon color="white">delete_outline</v-icon> <v-icon color="white">delete_outline</v-icon>
@ -109,7 +109,7 @@
v-if="recordingLocked" v-if="recordingLocked"
class="locked" class="locked"
> >
<v-container fluid fill-height> <v-container fluid class="fill-height">
<v-row align="center"> <v-row align="center">
<v-col cols="3"> <v-col cols="3">
<div class="recording-time"> <div class="recording-time">
@ -135,7 +135,7 @@
v-if="state == states.ERROR" v-if="state == states.ERROR"
class="error" class="error"
> >
<v-container fluid fill-height> <v-container fluid class="fill-height">
<v-row align="center"> <v-row align="center">
<v-col> <v-col>
<div class="swipe-info"> <div class="swipe-info">

2
src/components/messages/MessageOperations.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}"> <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
<template v-for="(item,index) in getEmojis" :key="item.data"> <template v-for="(item,index) in getEmojis" :key="item.data">
<v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense> <v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" density="compact">
<span class="recent-emoji">{{ item.data }}</span> <span class="recent-emoji">{{ item.data }}</span>
</v-btn> </v-btn>
</template> </template>

2
src/components/messages/channel/MessageOperationsChannel.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div :class="{ 'message-operations': true, 'incoming': incoming, 'outgoing': !incoming }"> <div :class="{ 'message-operations': true, 'incoming': incoming, 'outgoing': !incoming }">
<v-list dense> <v-list density="compact">
<v-list-item key="edit" v-if="isEditable" @click.stop="edit"> <v-list-item key="edit" v-if="isEditable" @click.stop="edit">
<template v-slot:prepend><v-icon>$vuetify.icons.ic_edit</v-icon></template> <template v-slot:prepend><v-icon>$vuetify.icons.ic_edit</v-icon></template>
<v-list-item-title>{{ $t("menu.edit") }}</v-list-item-title> <v-list-item-title>{{ $t("menu.edit") }}</v-list-item-title>

11
src/plugins/utils.js
View file

@ -782,14 +782,19 @@ class Util {
getDefaultAvatars() { getDefaultAvatars() {
var images = []; var images = [];
const modules = import.meta.glob("../assets/avatars/*.(jpeg|jpg|png)", { eager: true }); const modules = import.meta.glob("@/assets/avatars/*.{jpeg,jpg,png}", {
query: '?url',
import: 'default',
eager: true
});
Object.keys(modules).map((path) => { Object.keys(modules).map((path) => {
var name = path.split("_")[1]; var name = path.split("_")[1];
name = name.slice(0, name.indexOf(".")); name = name.slice(0, name.indexOf("."));
name = name.charAt(0).toUpperCase() + name.slice(1); name = name.charAt(0).toUpperCase() + name.slice(1);
const image = modules[path].default; const image = modules[path];
const randomNumber = parseInt(this.randomString(4, "0123456789")).toFixed(); const randomNumber = parseInt(this.randomString(4, "0123456789")).toFixed();
images.push({ id: path, image: image, name: "Guest " + name + " " + randomNumber }); const title = "Guest " + name + " " + randomNumber;
images.push({ id: path, image: image, name: title, title: title });
}); });
return images; return images;
} }