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

Dialogs and Vuetify styling changes

Browse source
This commit is contained in:
N-Pex 2025-05-08 11:52:39 +02:00
parent 2ba0d57aa8
commit a97211afdf
45 changed files with 320 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<message-incoming v-bind="{ ...$props, ...$attrs }">
<div class="bubble poll-bubble">
<div class="poll-icon">
<v-icon dark>$vuetify.icons.poll</v-icon>
<v-icon theme="dark">$vuetify.icons.poll</v-icon>
</div>
<div class="poll-question">{{ pollQuestion }}</div>

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

@ -1,24 +1,24 @@
<template>
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
<template v-for="(item,index) in getEmojis">
<v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" :key="item.data" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
<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>
<span class="recent-emoji">{{ item.data }}</span>
</v-btn>
</template>
<v-btn v-if="userCanSendReactionAndAnswerPoll" id="btn-more" icon @click.stop="more" class="ma-0 pa-0">
<v-icon small> $vuetify.icons.addReaction </v-icon>
<v-icon size="small"> $vuetify.icons.addReaction </v-icon>
</v-btn>
<v-btn v-if="userCanSendMessage" id="btn-reply" icon @click.stop="addReply" class="ma-0 pa-0">
<v-icon>reply</v-icon>
</v-btn>
<v-btn id="btn-edit" icon @click.stop="edit" class="ma-0 pa-0" v-if="isEditable">
<v-icon small>edit</v-icon>
<v-icon size="small">edit</v-icon>
</v-btn>
<v-btn id="btn-redact" icon @click.stop="redact" class="ma-0 pa-0" v-if="isRedactable">
<v-icon small>delete</v-icon>
<v-icon size="small">delete</v-icon>
</v-btn>
<v-btn id="btn-download" icon @click.stop="download" class="ma-0 pa-0" v-if="isDownloadable">
<v-icon small>get_app</v-icon>
<v-icon size="small">get_app</v-icon>
</v-btn>
</div>
</template>

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

@ -30,7 +30,7 @@
<span v-else class="text-white headline">{{ userAvatarLetter }}</span>
</v-avatar>
<QuickReactionsChannel v-if="room.displayType == ROOM_TYPE_CHANNEL" :event="eventForReactions" :timelineSet="timelineSet" v-bind="$attrs"/>
<QuickReactions v-else :event="eventForReactions" :timelineSet="timelineSet" v-bin="$attrs"/>
<QuickReactions v-else :event="eventForReactions" :timelineSet="timelineSet" v-bind="$attrs"/>
<SeenBy v-if="room.displayType != ROOM_TYPE_CHANNEL" :room="room" :event="event"/>
</div>
</template>

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

@ -2,7 +2,7 @@
<message-outgoing v-bind="{ ...$props, ...$attrs }">
<div class="bubble poll-bubble">
<div class="poll-icon">
<v-icon light>$vuetify.icons.poll</v-icon>
<v-icon theme="light">$vuetify.icons.poll</v-icon>
</div>
<div class="poll-question">{{ pollQuestion }}</div>

18
src/components/messages/QuickReactions.vue
View file

@ -10,8 +10,8 @@
<template v-slot:activator="{ on, attrs }">
<v-chip
class="pa-2 ma-1 ml-0"
outlined
small
variant="outlined"
size="small"
v-bind="attrs"
v-on="on"
@click="onClickEmoji(name)"
@ -24,8 +24,8 @@
<v-chip
v-else
class="pa-2 ma-1 ml-0"
outlined
small
variant="outlined"
size="small"
>
{{ name }} {{ value.length }}
</v-chip>
@ -34,22 +34,22 @@
v-if="totalReaction > REACTION_LIMIT"
@click="showAllReaction = !showAllReaction"
class="pa-2 ma-1 ml-0"
outlined
small
variant="outlined"
size="small"
>
{{ otherReactionText }}
</v-chip>
<v-tooltip top v-if="!!totalReaction">
<template v-slot:activator="{ on, attrs }">
<v-chip
outlined
small
variant="outlined"
size="small"
class="pa-2 ma-1 ml-0"
v-bind="attrs"
v-on="on"
@click="more"
>
<v-icon small> $vuetify.icons.addReaction </v-icon>
<v-icon size="small"> $vuetify.icons.addReaction </v-icon>
</v-chip>
</template>
<span>{{ $t("global.add_reaction") }}</span>

6
src/components/messages/SeenBy.vue
View file

@ -24,16 +24,16 @@
ref="seenByListBottomSheet"
>
<v-list>
<v-subheader class="text-uppercase"> {{ $t("message.seen_by") }}</v-subheader>
<v-list-subheader class="text-uppercase"> {{ $t("message.seen_by") }}</v-list-subheader>
<v-list-item v-for="(member, index) in seenBy" :key="index" class="text-left">
<v-list-item-icon>
<template v-slot:prepend>
<v-avatar size="40" color="grey">
<AuthedImage v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="text-white headline">{{
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</v-list-item-icon>
</template>
<v-list-item-title>{{member.roomMember.name}}</v-list-item-title>
<v-list-item-subtitle>{{ seenByTimeStamp(member.readTimestamp) }}</v-list-item-subtitle>
</v-list-item>

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

@ -2,19 +2,19 @@
<div :class="{ 'message-operations': true, 'incoming': incoming, 'outgoing': !incoming }">
<v-list dense>
<v-list-item key="edit" v-if="isEditable" @click.stop="edit">
<v-list-item-icon><v-icon>$vuetify.icons.ic_edit</v-icon></v-list-item-icon>
<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>
<v-list-item key="pin" v-if="userCanPin && !event.isPinned" @click.stop="pin">
<v-list-item-icon><v-icon>$vuetify.icons.ic_pin</v-icon></v-list-item-icon>
<template v-slot:prepend><v-icon>$vuetify.icons.ic_pin</v-icon></template>
<v-list-item-title>{{ $t("menu.pin") }}</v-list-item-title>
</v-list-item>
<v-list-item key="unpin" v-if="userCanPin && event.isPinned" @click.stop="unpin">
<v-list-item-icon><v-icon>$vuetify.icons.ic_pin</v-icon></v-list-item-icon>
<template v-slot:prepend><v-icon>$vuetify.icons.ic_pin</v-icon></template>
<v-list-item-title>{{ $t("menu.unpin") }}</v-list-item-title>
</v-list-item>
<v-list-item key="redact" v-if="isRedactable" @click.stop="redact">
<v-list-item-icon><v-icon color="#222222">delete_outline</v-icon></v-list-item-icon>
<template v-slot:prepend><v-icon color="#222222">delete_outline</v-icon></template>
<v-list-item-title>{{ $t("menu.delete") }}</v-list-item-title>
</v-list-item>
</v-list>