Merge branch '224-set-fields-to-use-meaningful-id-names-for-automated-test' into 'dev'

Resolve "set fields to use meaningful ID names for automated test"

See merge request keanuapp/keanuapp-weblite!34
This commit is contained in:
N Pex 2022-01-27 14:56:48 +00:00
commit b4ab483285
23 changed files with 70 additions and 25 deletions

View file

@ -122,6 +122,7 @@
<v-container v-if="room" fluid class="input-area-outer"> <v-container v-if="room" fluid class="input-area-outer">
<!-- "Scroll to end"-button --> <!-- "Scroll to end"-button -->
<v-btn <v-btn
id="btn-scroll-to-end"
class="scroll-to-end" class="scroll-to-end"
v-show="showScrollToEnd" v-show="showScrollToEnd"
fab fab
@ -150,6 +151,7 @@
<v-row class="input-area-inner align-center"> <v-row class="input-area-inner align-center">
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0"> <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
<v-textarea <v-textarea
id="message-input"
height="undefined" height="undefined"
ref="messageInput" ref="messageInput"
full-width full-width
@ -174,6 +176,7 @@
v-if="editedEvent || replyToEvent" v-if="editedEvent || replyToEvent"
> >
<v-btn <v-btn
id="btn-cancel-reply"
fab fab
small small
elevation="0" elevation="0"
@ -189,6 +192,7 @@
v-if="!currentInput || currentInput.length == 0 || showRecorder" v-if="!currentInput || currentInput.length == 0 || showRecorder"
> >
<v-btn <v-btn
id="btn-microphone"
v-if="canRecordAudio" v-if="canRecordAudio"
class="mic-button" class="mic-button"
ref="mic_button" ref="mic_button"
@ -203,6 +207,7 @@
</v-btn> </v-btn>
<v-btn <v-btn
v-else v-else
id="btn-microphone"
class="mic-button" class="mic-button"
ref="mic_button" ref="mic_button"
fab fab
@ -221,6 +226,7 @@
v-else v-else
> >
<v-btn <v-btn
id="btn-send"
fab fab
small small
elevation="0" elevation="0"
@ -239,6 +245,7 @@
class="input-area-button text-center flex-grow-0 flex-shrink-1" class="input-area-button text-center flex-grow-0 flex-shrink-1"
> >
<v-btn <v-btn
id="btn-stickers"
v-if="!showRecorder" v-if="!showRecorder"
icon icon
large large
@ -254,6 +261,7 @@
<label icon flat ref="attachmentLabel"> <label icon flat ref="attachmentLabel">
<v-btn <v-btn
v-if="!showRecorder" v-if="!showRecorder"
id="btn-attach"
icon icon
large large
color="black" color="black"
@ -263,6 +271,7 @@
<v-icon x-large>add_circle_outline</v-icon> <v-icon x-large>add_circle_outline</v-icon>
</v-btn> </v-btn>
<input <input
id="attachment-picker"
ref="attachment" ref="attachment"
type="file" type="file"
name="attachment" name="attachment"
@ -339,10 +348,11 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="primary" text @click="cancelSendAttachment">{{ <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">{{
$t("menu.cancel") $t("menu.cancel")
}}</v-btn> }}</v-btn>
<v-btn <v-btn
id="btn-attachment-send"
color="primary" color="primary"
text text
@click="sendAttachment" @click="sendAttachment"
@ -419,6 +429,7 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn <v-btn
id="btn-ok"
color="primary" color="primary"
text text
@click="showNoRecordingAvailableDialog = false" @click="showNoRecordingAvailableDialog = false"

View file

@ -24,7 +24,7 @@
<div class="num-members">{{ $tc("room.members", memberCount) }}</div> <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
</v-col> </v-col>
<v-col cols="auto" class="text-end ma-0 pa-0"> <v-col cols="auto" class="text-end ma-0 pa-0">
<v-btn text class="leave-button" @click.stop="leaveRoom">{{ <v-btn id="btn-leave-room" text class="leave-button" @click.stop="leaveRoom">{{
$t("room.leave") $t("room.leave")
}}</v-btn> }}</v-btn>
</v-col> </v-col>

View file

@ -4,6 +4,7 @@
<v-container fluid> <v-container fluid>
<div class="room-name no-upper">{{ $t("new_room.new_room") }}</div> <div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>
<v-btn <v-btn
id="btn-back"
text text
class="header-button-left" class="header-button-left"
v-show="$navigation && $navigation.canPop()" v-show="$navigation && $navigation.canPop()"
@ -67,6 +68,7 @@
</template> </template>
</v-select> </v-select>
<v-checkbox <v-checkbox
id="chk-remember-me"
class="mt-0" class="mt-0"
v-model="rememberMe" v-model="rememberMe"
:label="$t('join.remember_me')" :label="$t('join.remember_me')"
@ -104,6 +106,7 @@
:disabled="step > steps.INITIAL" :disabled="step > steps.INITIAL"
></v-text-field> ></v-text-field>
<v-btn <v-btn
id="btn-room-create"
color="black" color="black"
depressed depressed
class="filled-button" class="filled-button"
@ -201,6 +204,7 @@
<!-- </div> --> <!-- </div> -->
</v-fade-transition> </v-fade-transition>
<input <input
id="room-avatar-picker"
ref="avatar" ref="avatar"
type="file" type="file"
name="avatar" name="avatar"

View file

@ -19,7 +19,7 @@
{{ roomHistoryDescription }} {{ roomHistoryDescription }}
</div> </div>
<div class="text-right"> <div class="text-right">
<v-btn text @click.stop="$emit('close')" style="text-transform: none">{{ <v-btn id="btn-got-it" text @click.stop="$emit('close')" style="text-transform: none">{{
$t("room_welcome.got_it") $t("room_welcome.got_it")
}}</v-btn> }}</v-btn>
</div> </div>

View file

@ -3,6 +3,7 @@
<div class="flex-grow-0 flex-shrink-0"> <div class="flex-grow-0 flex-shrink-0">
<div class="room-name">{{$t('invite.title')}}</div> <div class="room-name">{{$t('invite.title')}}</div>
<v-btn <v-btn
id="btn-invite-done"
:loading="loading" :loading="loading"
text text
class="header-button-right" class="header-button-right"

View file

@ -27,7 +27,7 @@
@click.native.stop="{}" @click.native.stop="{}"
v-model="selectedProfile.name" v-model="selectedProfile.name"
></v-text-field> ></v-text-field>
<v-checkbox 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')" />
</v-col> </v-col>
<v-col cols="2" sm="5"> <v-col cols="2" sm="5">
<v-avatar @click="showAvatarPickerList"> <v-avatar @click="showAvatarPickerList">
@ -51,6 +51,7 @@
</v-row> </v-row>
<v-btn <v-btn
id="btn-join"
class="btn-dark" class="btn-dark"
large large
@click.stop="handleJoin" @click.stop="handleJoin"
@ -59,6 +60,7 @@
>{{ $t("join.enter_room") }}</v-btn >{{ $t("join.enter_room") }}</v-btn
> >
<v-btn <v-btn
id="btn-join"
class="btn-dark" class="btn-dark"
large large
block block
@ -80,6 +82,7 @@
</v-col> </v-col>
<v-col> <v-col>
<v-btn <v-btn
id="btn-select-language"
class="language-more" class="language-more"
@click="showSelectLanguageDialog = true" @click="showSelectLanguageDialog = true"
> >

View file

@ -43,6 +43,7 @@
<v-row cols="12"> <v-row cols="12">
<v-col cols="6"> <v-col cols="6">
<v-btn <v-btn
id="btn-back"
depressed depressed
text text
block block
@ -53,6 +54,7 @@
</v-col> </v-col>
<v-col cols="6" align="center"> <v-col cols="6" align="center">
<v-btn <v-btn
id="btn-leave"
color="red" color="red"
depressed depressed
block block

View file

@ -15,7 +15,7 @@
<div class="room-name no-upper">{{ $t("login.title") }}</div> <div class="room-name no-upper">{{ $t("login.title") }}</div>
</v-col> </v-col>
<v-col class="text-right"> <v-col class="text-right">
<v-btn text v-if="showCloseButton" @click.stop="$navigation.pop"> <v-btn id="btn-close" text v-if="showCloseButton" @click.stop="$navigation.pop">
<v-icon>close</v-icon> <v-icon>close</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
@ -63,11 +63,13 @@
></v-text-field> ></v-text-field>
<div class="error--text" v-if="hasError">{{ this.message }}</div> <div class="error--text" v-if="hasError">{{ this.message }}</div>
<v-checkbox <v-checkbox
id="chk-remember-me"
class="mt-0" class="mt-0"
v-model="rememberMe" v-model="rememberMe"
:label="$t('join.remember_me')" :label="$t('join.remember_me')"
/> />
<v-btn <v-btn
id="btn-login"
:disabled="!isValid || loading" :disabled="!isValid || loading"
color="black" color="black"
depressed depressed
@ -79,6 +81,7 @@
> >
<div class="mt-2 overline">{{ $t("login.or") }}</div> <div class="mt-2 overline">{{ $t("login.or") }}</div>
<v-btn <v-btn
id="btn-create-room"
color="primary" color="primary"
depressed depressed
block block

View file

@ -4,6 +4,7 @@
<v-container fluid> <v-container fluid>
<div class="room-name no-upper">{{ $t("profile.title") }}</div> <div class="room-name no-upper">{{ $t("profile.title") }}</div>
<v-btn <v-btn
id="btn-close"
text text
class="header-button-right" class="header-button-right"
v-show="$navigation && $navigation.canPop()" v-show="$navigation && $navigation.canPop()"
@ -26,6 +27,7 @@
<img v-if="userAvatar" :src="userAvatar" /> <img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span> <span v-else class="white--text">{{ userAvatarLetter }}</span>
<input <input
id="avatar-picker"
ref="avatar" ref="avatar"
type="file" type="file"
name="avatar" name="avatar"
@ -41,7 +43,7 @@
<!-- <div v-if="$matrix.currentUser.is_guest"> <!-- <div v-if="$matrix.currentUser.is_guest">
{{ $t("profile.temporary_identity") }} {{ $t("profile.temporary_identity") }}
</div> --> </div> -->
<v-btn depressed block class="outlined-button" @click.stop="logout">{{ <v-btn id="btn-logout" depressed block class="outlined-button" @click.stop="logout">{{
$t("menu.logout") $t("menu.logout")
}}</v-btn> }}</v-btn>
</v-col> </v-col>
@ -101,10 +103,11 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn text @click="closeEditPasswordDialog">{{ <v-btn id="btn-password-cancel" text @click="closeEditPasswordDialog">{{
$t("menu.cancel") $t("menu.cancel")
}}</v-btn> }}</v-btn>
<v-btn <v-btn
id="btn-password-set"
:disabled="!passwordsMatch" :disabled="!passwordsMatch"
color="primary" color="primary"
text text
@ -136,10 +139,11 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn text @click="showEditDisplaynameDialog = false">{{ <v-btn id="btn-displayname-cancel" text @click="showEditDisplaynameDialog = false">{{
$t("menu.cancel") $t("menu.cancel")
}}</v-btn> }}</v-btn>
<v-btn <v-btn
id="btn-displayname-set"
color="primary" color="primary"
text text
@click=" @click="

View file

@ -67,7 +67,7 @@
style="position: relative; width: 100%; height: 40px" style="position: relative; width: 100%; height: 40px"
class="text-end" class="text-end"
> >
<v-btn class="new_room" text @click="createRoom">{{ <v-btn id="btn-new-room" class="new_room" text @click="createRoom">{{
$t("profile_info_popup.new_room") $t("profile_info_popup.new_room")
}}</v-btn> }}</v-btn>
</div> </div>

View file

@ -19,6 +19,7 @@
<v-row cols="12"> <v-row cols="12">
<v-col cols="6"> <v-col cols="6">
<v-btn <v-btn
id="btn-purge-room-cancel"
depressed depressed
text text
block block
@ -30,6 +31,7 @@
</v-col> </v-col>
<v-col cols="6" align="center"> <v-col cols="6" align="center">
<v-btn <v-btn
id="btn-purge-room"
color="red" color="red"
depressed depressed
block block
@ -64,6 +66,7 @@
<v-row cols="12"> <v-row cols="12">
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn
id="btn-purge-room-undo"
depressed depressed
text text
block block

View file

@ -28,6 +28,7 @@
<v-btn <v-btn
v-if="joinedToAnyRoom" v-if="joinedToAnyRoom"
id="btn-goodbye-view-other"
color="white" color="white"
text text
class="close" class="close"
@ -36,6 +37,7 @@
> >
<v-btn <v-btn
v-else v-else
id="btn-goodbye-close"
color="white" color="white"
text text
class="close" class="close"

View file

@ -4,6 +4,7 @@
<v-container fluid> <v-container fluid>
<div class="room-name no-upper">{{ $t("room_info.title") }}</div> <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
<v-btn <v-btn
id="btn-back"
text text
class="header-button-left" class="header-button-left"
v-show="$navigation && $navigation.canPop()" v-show="$navigation && $navigation.canPop()"
@ -13,6 +14,7 @@
<span>{{ $t("menu.back") }}</span> <span>{{ $t("menu.back") }}</span>
</v-btn> </v-btn>
<v-btn <v-btn
id="btn-leave-room"
color="black" color="black"
depressed depressed
class="header-button-right filled-button me-3" class="header-button-right filled-button me-3"
@ -55,6 +57,7 @@
<v-col align="center" class="mt-0 pt-0"> <v-col align="center" class="mt-0 pt-0">
<v-btn <v-btn
v-if="publicRoomLinkCopied" v-if="publicRoomLinkCopied"
id="btn-copy-room-link"
color="#DEE6FF" color="#DEE6FF"
depressed depressed
class="filled-button link-copied-in-place" class="filled-button link-copied-in-place"
@ -63,6 +66,7 @@
> >
<v-btn <v-btn
v-else v-else
id="btn-copy-room-link"
color="black" color="black"
depressed depressed
class="filled-button" class="filled-button"
@ -166,6 +170,7 @@
<!-- PURGE ROOM --> <!-- PURGE ROOM -->
<div class="members ma-3 pa-3 text-center"> <div class="members ma-3 pa-3 text-center">
<v-btn <v-btn
id="btn-purge-room"
v-if="userCanPurgeRoom" v-if="userCanPurgeRoom"
color="red" color="red"
depressed depressed

View file

@ -14,6 +14,7 @@
<div class="h4">{{$t('room_info_sheet.this_room')}}</div> <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
<div class="h2">{{ roomName }}</div> <div class="h2">{{ roomName }}</div>
<v-btn <v-btn
id="btn-room-details"
height="20px" height="20px"
color="black" color="black"
class="filled-button" class="filled-button"

View file

@ -26,6 +26,7 @@
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-btn <v-btn
id="btn-accept"
class="filled-button" class="filled-button"
depressed depressed
color="black" color="black"
@ -33,6 +34,7 @@
>{{ $t("menu.join") }}</v-btn >{{ $t("menu.join") }}</v-btn
> >
<v-btn <v-btn
id="btn-reject"
class="filled-button" class="filled-button"
color="black" color="black"
@click.stop="rejectInvitation(room)" @click.stop="rejectInvitation(room)"

View file

@ -28,6 +28,7 @@
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn <v-btn
id="btn-done"
color="black" color="black"
depressed depressed
block block

View file

@ -16,6 +16,7 @@
<v-col cols="4" align="center"> <v-col cols="4" align="center">
<v-btn <v-btn
v-if="state == states.RECORDING" v-if="state == states.RECORDING"
id="btn-pause"
style="background-color: white; padding: 30px" style="background-color: white; padding: 30px"
icon icon
@click.stop="pauseRecording" @click.stop="pauseRecording"
@ -24,6 +25,7 @@
</v-btn> </v-btn>
<v-btn <v-btn
v-else-if="state == states.RECORDED" v-else-if="state == states.RECORDED"
id="btn-send"
style="background-color: #3ae17d; padding: 30px" style="background-color: #3ae17d; padding: 30px"
icon icon
:disabled="!recordedFile" :disabled="!recordedFile"
@ -33,6 +35,7 @@
</v-btn> </v-btn>
<v-btn <v-btn
v-else v-else
id="btn-record"
style="background-color: red; padding: 30px" style="background-color: red; padding: 30px"
icon icon
@click.stop="startRecording" @click.stop="startRecording"
@ -41,7 +44,7 @@
</v-btn> </v-btn>
</v-col> </v-col>
<v-col cols="4" align="center"> <v-col cols="4" align="center">
<v-btn icon @click.stop="cancelRecording"> <v-btn id="btn-record-cancel" icon @click.stop="cancelRecording">
<v-icon color="white">close</v-icon> <v-icon color="white">close</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
@ -97,12 +100,12 @@
</div> </div>
</v-col> </v-col>
<v-col cols="3"> <v-col cols="3">
<v-btn @click.stop="cancelRecording" text class="swipe-info">{{ <v-btn id="btn-record-cancel" @click.stop="cancelRecording" text class="swipe-info">{{
$t("menu.cancel") $t("menu.cancel")
}}</v-btn> }}</v-btn>
</v-col> </v-col>
<v-col cols="3"> <v-col cols="3">
<v-btn @click.stop="stopRecording" icon class="swipe-info" <v-btn id="btn-record-stop" @click.stop="stopRecording" icon class="swipe-info"
><v-icon color="white">stop</v-icon></v-btn ><v-icon color="white">stop</v-icon></v-btn
> >
</v-col> </v-col>
@ -124,7 +127,7 @@
</div> </div>
</v-col> </v-col>
<v-col align="right"> <v-col align="right">
<v-btn icon @click.stop="cancelRecording"> <v-btn id="btn-record-cancel" icon @click.stop="cancelRecording">
<v-icon color="white">close</v-icon> <v-icon color="white">close</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>

View file

@ -3,10 +3,10 @@
<audio ref="player" :src="src" @durationchange="updateDuration"> <audio ref="player" :src="src" @durationchange="updateDuration">
<slot></slot> <slot></slot>
</audio> </audio>
<v-btn v-if="playing" @click.stop="pause" icon <v-btn v-if="playing" id="btn-pause" @click.stop="pause" icon
><v-icon size="20">pause</v-icon></v-btn ><v-icon size="20">pause</v-icon></v-btn
> >
<v-btn v-else @click.stop="play" icon <v-btn v-else id="btn-play" @click.stop="play" icon
><v-icon size="20">play_arrow</v-icon></v-btn ><v-icon size="20">play_arrow</v-icon></v-btn
> >
<div class="play-time" style="flex: 1 0 80px"> <div class="play-time" style="flex: 1 0 80px">

View file

@ -6,7 +6,7 @@
outgoing: !incoming, outgoing: !incoming,
}" }"
> >
<v-btn v-if="incoming" text @click.stop="startPrivateChat" class="ma-0 pa-0" <v-btn id="btn-private-chat" v-if="incoming" text @click.stop="startPrivateChat" class="ma-0 pa-0"
>{{ $t("menu.start_private_chat") }}</v-btn >{{ $t("menu.start_private_chat") }}</v-btn
> >
</div> </div>

View file

@ -16,7 +16,7 @@
<!-- SLOT FOR CONTENT --> <!-- SLOT FOR CONTENT -->
<slot></slot> <slot></slot>
<div class="op-button" ref="opbutton"> <div class="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)" <v-btn id="btn-more" icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn ><v-icon>more_vert</v-icon></v-btn
> >
</div> </div>

View file

@ -1,14 +1,14 @@
<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 emojis"> <template v-for="(item,index) in emojis">
<v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense> <v-btn v-if="index < maxRecents" :key="item.data" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
<span class="recent-emoji">{{ item.data }}</span> <span class="recent-emoji">{{ item.data }}</span>
</v-btn> </v-btn>
</template> </template>
<v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0" large> <v-btn v-if="incoming" id="btn-reply" icon @click.stop="addReply" class="ma-0 pa-0" large>
<v-icon>reply</v-icon> <v-icon>reply</v-icon>
</v-btn> </v-btn>
<v-btn icon @click.stop="more" class="ma-0 pa-0" large> <v-btn id="btn-more" icon @click.stop="more" class="ma-0 pa-0" large>
<v-icon>more_horiz</v-icon> <v-icon>more_horiz</v-icon>
</v-btn> </div> </v-btn> </div>
</template> </template>

View file

@ -9,25 +9,25 @@
<v-container fluid> <v-container fluid>
<v-row> <v-row>
<v-col v-if="incoming"> <v-col v-if="incoming">
<v-btn icon @click.stop="addReply" class="ma-0 pa-0"> <v-btn id="btn-add-reply" icon @click.stop="addReply" class="ma-0 pa-0">
<v-icon>reply</v-icon> <v-icon>reply</v-icon>
</v-btn> </v-btn>
<div>{{$t('menu.reply')}}</div> <div>{{$t('menu.reply')}}</div>
</v-col> </v-col>
<v-col v-if="isEditable"> <v-col v-if="isEditable">
<v-btn icon @click.stop="edit" class="ma-0 pa-0"> <v-btn id="btn-edit" icon @click.stop="edit" class="ma-0 pa-0">
<v-icon>edit</v-icon> <v-icon>edit</v-icon>
</v-btn> </v-btn>
<div>{{$t('menu.edit')}}</div> <div>{{$t('menu.edit')}}</div>
</v-col> </v-col>
<v-col v-if="isRedactable"> <v-col v-if="isRedactable">
<v-btn icon @click.stop="redact" class="ma-0 pa-0"> <v-btn id="btn-redact" icon @click.stop="redact" class="ma-0 pa-0">
<v-icon>delete</v-icon> <v-icon>delete</v-icon>
</v-btn> </v-btn>
<div>{{$t('menu.delete')}}</div> <div>{{$t('menu.delete')}}</div>
</v-col> </v-col>
<v-col v-if="isDownloadable"> <v-col v-if="isDownloadable">
<v-btn icon @click.stop="download" class="ma-0 pa-0"> <v-btn id="btn-download" icon @click.stop="download" class="ma-0 pa-0">
<v-icon>get_app</v-icon> <v-icon>get_app</v-icon>
</v-btn> </v-btn>
<div>{{$t('menu.download')}}</div> <div>{{$t('menu.download')}}</div>

View file

@ -10,7 +10,7 @@
<QuickReactions :event="event" :reactions="reactions" /> <QuickReactions :event="event" :reactions="reactions" />
<div class="op-button" ref="opbutton"> <div class="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)" <v-btn id="btn-show-menu" icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn ><v-icon>more_vert</v-icon></v-btn
> >
</div> </div>