Skip to content

Commit

Permalink
chore: fix element focus handling - part2
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoeppner-dataport
hoeppner-dataport committed Jan 14, 2025
1 parent 3640fd4 commit cd6ba9b
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 145 deletions.
281 changes: 137 additions & 144 deletions ...dules/feature/board-video-conference-element/components/VideoConferenceContentElement.vue
View file
Original file line number Diff line number Diff line change
@@ -1,156 +1,149 @@
<template>
<div>
<VCard
class="mb-4"
data-testid="video-conference-element"
:class="{ 'd-none': isHidden }"
:variant="outlined"
ref="videoConferenceElement"
:ripple="false"
target="_blank"
:aria-label="ariaLabel"
@keydown.stop.up.down="onKeydownArrow"
<VCard
class="mb-4"
data-testid="video-conference-element"
:class="{ 'd-none': isHidden }"
:variant="outlined"
ref="videoConferenceElement"
role="button"
:ripple="false"
target="_blank"
:aria-label="ariaLabel"
@keydown.stop.up.down="onKeydownArrow"
>
<VideoConferenceContentElementDisplay
v-if="computedElement.content.title"
:title="computedElement.content.title"
:has-participation-permission="hasParticipationPermission"
:can-start="canStart"
:is-running="isRunning"
:is-edit-mode="isEditMode"
@click="onContentClick"
@refresh="onRefresh"
>
<VideoConferenceContentElementDisplay
v-if="computedElement.content.title"
:title="computedElement.content.title"
:has-participation-permission="hasParticipationPermission"
:can-start="canStart"
:is-running="isRunning"
:is-edit-mode="isEditMode"
@click="onContentClick"
@refresh="onRefresh"
<BoardMenu
:scope="BoardMenuScope.VIDEO_CONFERENCE_ELEMENT"
has-background
:data-testid="`element-menu-button-${columnIndex}-${rowIndex}-${elementIndex}`"
>
<BoardMenu
<KebabMenuActionMoveUp v-if="isNotFirstElement" @click="onMoveUp" />
<KebabMenuActionMoveDown v-if="isNotLastElement" @click="onMoveDown" />
<KebabMenuActionDelete
:scope="BoardMenuScope.VIDEO_CONFERENCE_ELEMENT"
has-background
:data-testid="`element-menu-button-${columnIndex}-${rowIndex}-${elementIndex}`"
>
<KebabMenuActionMoveUp v-if="isNotFirstElement" @click="onMoveUp" />
<KebabMenuActionMoveDown
v-if="isNotLastElement"
@click="onMoveDown"
/>
<KebabMenuActionDelete
:scope="BoardMenuScope.VIDEO_CONFERENCE_ELEMENT"
@click="onDelete"
/>
</BoardMenu>
</VideoConferenceContentElementDisplay>
<VideoConferenceContentElementCreate
v-if="isCreating"
@create:title="onCreateTitle"
@click="onDelete"
/>
</BoardMenu>
</VideoConferenceContentElementDisplay>
<VideoConferenceContentElementCreate
v-if="isCreating"
@create:title="onCreateTitle"
>
<BoardMenu
:scope="BoardMenuScope.VIDEO_CONFERENCE_ELEMENT"
has-background
>
<BoardMenu
<KebabMenuActionMoveUp v-if="isNotFirstElement" @click="onMoveUp" />
<KebabMenuActionMoveDown v-if="isNotLastElement" @click="onMoveDown" />
<KebabMenuActionDelete
:scope="BoardMenuScope.VIDEO_CONFERENCE_ELEMENT"
has-background
>
<KebabMenuActionMoveUp v-if="isNotFirstElement" @click="onMoveUp" />
<KebabMenuActionMoveDown
v-if="isNotLastElement"
@click="onMoveDown"
/>
<KebabMenuActionDelete
:scope="BoardMenuScope.VIDEO_CONFERENCE_ELEMENT"
@click="onDelete"
/>
</BoardMenu>
</VideoConferenceContentElementCreate>
<VDialog
ref="vDialog"
v-model="isErrorDialogOpen"
:max-width="480"
data-testid="error-dialog"
@click:outside="onCloseErrorDialog"
@keydown.esc="onCloseErrorDialog"
>
<VCard :ripple="false">
<VCardTitle data-testid="dialog-title" class="dialog-title px-6 pt-4">
<h2 class="text-h4 my-2 text-break-word">
{{ t("error.generic") }}
</h2>
</VCardTitle>
<VCardActions class="action-buttons px-6">
<div class="button-section button-right">
<VBtn
data-testid="dialog-close"
variant="outlined"
@click="onCloseErrorDialog"
>
{{ t("common.labels.close") }}
</VBtn>
</div>
</VCardActions>
</VCard>
</VDialog>

<VDialog
v-model="isConfigurationDialogOpen"
max-width="480"
data-testid="videoconference-config-dialog"
>
<VCard :ripple="false">
<VCardTitle>
<h2
class="text-h4 my-2"
data-testid="videoconference-config-dialog-title"
>
{{ t("pages.common.tools.configureVideoconferenceDialog.title") }}
</h2>
</VCardTitle>
<VCardText>
<VCheckbox
v-model="videoConferenceOptions.everyAttendeeJoinsMuted"
data-testid="every-attendee-joins-muted"
:label="
t('pages.common.tools.configureVideoconferenceDialog.text.mute')
"
:hide-details="true"
/>
<VCheckbox
v-model="videoConferenceOptions.moderatorMustApproveJoinRequests"
data-testid="moderator-must-approve-join-requests"
:label="
t(
'pages.common.tools.configureVideoconferenceDialog.text.waitingRoom'
)
"
:hide-details="true"
/>
<VCheckbox
v-model="videoConferenceOptions.everybodyJoinsAsModerator"
data-testid="everybody-joins-as-moderator"
:label="
t(
'pages.common.tools.configureVideoconferenceDialog.text.allModeratorPermission'
)
"
:hide-details="true"
/>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
data-testid="dialog-cancel"
variant="text"
@click="onCloseConfigurationDialog"
>
{{ t("common.actions.cancel") }}
</VBtn>
@click="onDelete"
/>
</BoardMenu>
</VideoConferenceContentElementCreate>
<VDialog
ref="vDialog"
v-model="isErrorDialogOpen"
:max-width="480"
data-testid="error-dialog"
@click:outside="onCloseErrorDialog"
@keydown.esc="onCloseErrorDialog"
>
<VCard :ripple="false">
<VCardTitle data-testid="dialog-title" class="dialog-title px-6 pt-4">
<h2 class="text-h4 my-2 text-break-word">
{{ t("error.generic") }}
</h2>
</VCardTitle>
<VCardActions class="action-buttons px-6">
<div class="button-section button-right">
<VBtn
data-testid="dialog-create"
class="px-6"
color="primary"
variant="flat"
@click="startVideoConference"
data-testid="dialog-close"
variant="outlined"
@click="onCloseErrorDialog"
>
{{ t("common.actions.create") }}
{{ t("common.labels.close") }}
</VBtn>
</VCardActions>
</VCard>
</VDialog>
</VCard>
</div>
</div>
</VCardActions>
</VCard>
</VDialog>

<VDialog
v-model="isConfigurationDialogOpen"
max-width="480"
data-testid="videoconference-config-dialog"
>
<VCard :ripple="false">
<VCardTitle>
<h2
class="text-h4 my-2"
data-testid="videoconference-config-dialog-title"
>
{{ t("pages.common.tools.configureVideoconferenceDialog.title") }}
</h2>
</VCardTitle>
<VCardText>
<VCheckbox
v-model="videoConferenceOptions.everyAttendeeJoinsMuted"
data-testid="every-attendee-joins-muted"
:label="
t('pages.common.tools.configureVideoconferenceDialog.text.mute')
"
:hide-details="true"
/>
<VCheckbox
v-model="videoConferenceOptions.moderatorMustApproveJoinRequests"
data-testid="moderator-must-approve-join-requests"
:label="
t(
'pages.common.tools.configureVideoconferenceDialog.text.waitingRoom'
)
"
:hide-details="true"
/>
<VCheckbox
v-model="videoConferenceOptions.everybodyJoinsAsModerator"
data-testid="everybody-joins-as-moderator"
:label="
t(
'pages.common.tools.configureVideoconferenceDialog.text.allModeratorPermission'
)
"
:hide-details="true"
/>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
data-testid="dialog-cancel"
variant="text"
@click="onCloseConfigurationDialog"
>
{{ t("common.actions.cancel") }}
</VBtn>
<VBtn
data-testid="dialog-create"
class="px-6"
color="primary"
variant="flat"
@click="startVideoConference"
>
{{ t("common.actions.create") }}
</VBtn>
</VCardActions>
</VCard>
</VDialog>
</VCard>
</template>

<script setup lang="ts">
Expand Down
3 changes: 2 additions & 1 deletion src/modules/feature/board/card/ContentElementList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,8 @@ const elementTypesWithTabindexZero = [
ContentElementType.Drawing,
ContentElementType.ExternalTool,
ContentElementType.File,
// ContentElementType.Link,
ContentElementType.Link,
ContentElementType.VideoConference,
];
const tabindex = (element: AnyContentElement) =>
Expand Down

0 comments on commit cd6ba9b

Please sign in to comment.