butter/keanu-weblite
3
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 -->
<v-container
fluid
fill-height
v-if="showLoadingScreen"
class="loading-container"
class="loading-container fill-height"
>
<v-row align="center" justify="center">
<v-col class="text-center">

2
src/components/Chat.vue
View file

@ -311,7 +311,7 @@
<StickerPickerBottomSheet ref="stickerPickerSheet" v-on:selectSticker="sendSticker" />
<!-- 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-col class="text-center">
<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-col class="py-0">
<div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
<v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar"
:value="selectedProfile">
<v-select ref="avatar"
: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>
<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()"
v-model="selectedProfile.name"></v-text-field>
</template>
<template v-slot:item="data">
<v-avatar size="32">
<v-img :src="data.item.image" />
</v-avatar>
<div class="ms-2">{{ data.item.name }}</div>
<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-col>
@ -106,7 +127,7 @@
<v-row class="mt-0">
<v-col class="py-0">
<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">
<template v-slot:agreement>
<a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
@ -151,7 +172,8 @@ export default {
selectedProfile: {
id: "",
image: "",
name: ""
name: "",
title: "",
},
enterRoomDialog: false,
selectRetentionDialog: false,
@ -335,6 +357,7 @@ export default {
},
selectAvatar(value) {
console.log("SELECT AVATAR", value);
this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data
},
@ -372,4 +395,8 @@ export default {
<style lang="scss">
@import "@/assets/css/create.scss";
.avatar-select-control .v-select__selection {
flex-basis: 100%;
}
</style>

2
src/components/DeviceList.vue
View file

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

3
src/components/Home.vue
View file

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

58
src/components/Join.vue
View file

@ -22,20 +22,41 @@
<v-row v-if="canEditProfile">
<v-col cols="10" sm="7" class="py-0">
<v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar"
:value="selectedProfile" single-line autofocus>
<template v-slot:selection>
<v-text-field background-color="transparent" variant="solo" flat hide-details
@click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
v-model="selectedProfile.name"></v-text-field>
</template>
<template v-slot:item="data">
<v-avatar size="32">
<v-img :src="data.item.image" />
</v-avatar>
<div class="ms-2">{{ data.item.name }}</div>
</template>
</v-select>
<v-select ref="avatar"
: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>
<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')"
@change="onRememberMe" />
</v-col>
@ -59,7 +80,7 @@
</v-row>
<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">
<template v-slot:agreement>
<a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
@ -117,7 +138,7 @@
</div>
<!-- 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-col class="text-center">
<interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" />
@ -454,4 +475,9 @@ export default {
<style lang="scss">
@import "@/assets/css/join.scss";
.avatar-select-control .v-select__selection {
flex-basis: 100%;
}
</style>

2
src/components/RoomExport.vue
View file

@ -38,7 +38,7 @@
</div>
<!-- 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-col class="text-center">
<v-progress-circular indeterminate color="primary"></v-progress-circular>

14
src/components/RoomInfo.vue
View file

@ -101,20 +101,22 @@
:items="joinRules"
class="mt-4"
v-model="roomJoinRule"
item-title="text"
item-value="id"
item-props
return-object
>
<template v-slot:selection="{ item }">
<v-icon color="black" class="me-2">{{ item.icon }}</v-icon>
{{ item.text }}
<v-icon color="black" class="me-2">{{ item.props.icon }}</v-icon>
{{ item.props.text }}
</template>
<template v-slot:item="{ item, attrs, on }">
<v-list-item v-on="on" v-bind="attrs">
<template v-slot:item="{ props }">
<v-list-item v-bind="props">
<template v-slot:prepend>
<v-avatar color="grey">
<v-icon color="black">{{ item.icon }}</v-icon>
<v-icon color="black">{{ props.icon }}</v-icon>
</v-avatar>
</template>
<v-list-item-title>{{ item.text }}</v-list-item-title>
<template v-slot:append="{ isActive }">
<v-list-item-action>
<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-text>
<v-select
:model-value="$i18n.locale"
:modelValue="$i18n.locale"
:items="languages"
:menu-props="{ auto: true }"
:label="$t('profile.select_language')"
@update:model-value="(lang) => updateLanguage(lang)"
@update:modelValue="updateLanguage"
hide-details
prepend-icon="language"
single-line

10
src/components/VoiceRecorder.vue
View file

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

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

@ -1,7 +1,7 @@
<template>
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
<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>
</v-btn>
</template>

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

@ -1,6 +1,6 @@
<template>
<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">
<template v-slot:prepend><v-icon>$vuetify.icons.ic_edit</v-icon></template>
<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() {
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) => {
var name = path.split("_")[1];
name = name.slice(0, name.indexOf("."));
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();
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;
}