From 878a767c96af8a8f2d3963f8ac79d661fd36ef18 Mon Sep 17 00:00:00 2001 From: DorraJaouad <dorra.jaoued7@gmail.com> Date: Fri, 16 Feb 2024 20:42:50 +0100 Subject: [PATCH 1/2] fix(TopBar): split screenshare button Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com> --- src/components/TopBar/TopBarMediaControls.vue | 41 +++++++++---------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue index 20af35667de..fadcd84239e 100644 --- a/src/components/TopBar/TopBarMediaControls.vue +++ b/src/components/TopBar/TopBarMediaControls.vue @@ -82,9 +82,10 @@ </template> </NcButton> - <NcActions v-if="!screenSharingButtonHidden" + <NcActions v-if="!screenSharingButtonHidden && model.attributes.localScreen" id="screensharing-button" v-tooltip="screenSharingButtonTooltip" + type="tertiary-no-background" :aria-label="screenSharingButtonAriaLabel" :class="screenSharingButtonClass" class="app-navigation-entry-utils-menu-button" @@ -93,33 +94,31 @@ :open.sync="screenSharingMenuOpen"> <!-- Actions button icon --> <template #icon> - <CancelPresentation v-if="model.attributes.localScreen" :size="20" fill-color="#ffffff" /> - <PresentToAll v-else :size="20" fill-color="#ffffff" /> + <CancelPresentation :size="20" fill-color="#ffffff" /> </template> <!-- /Actions button icon --> <!-- Actions --> - <NcActionButton v-if="!screenSharingMenuOpen" - @click.stop="toggleScreenSharingMenu"> + <NcActionButton close-after-click @click="showScreen"> <template #icon> - <PresentToAll :size="20" fill-color="#ffffff" /> + <Monitor :size="20" /> </template> - {{ screenSharingButtonTooltip }} + {{ t('spreed', 'Show your screen') }} + </NcActionButton> + <NcActionButton close-after-click @click="stopScreen"> + <template #icon> + <CancelPresentation :size="20" /> + </template> + {{ t('spreed', 'Stop screensharing') }} </NcActionButton> - <template v-if="model.attributes.localScreen"> - <NcActionButton close-after-click @click="showScreen"> - <template #icon> - <Monitor :size="20" /> - </template> - {{ t('spreed', 'Show your screen') }} - </NcActionButton> - <NcActionButton close-after-click @click="stopScreen"> - <template #icon> - <CancelPresentation :size="20" /> - </template> - {{ t('spreed', 'Stop screensharing') }} - </NcActionButton> - </template> </NcActions> + <NcButton v-else-if="!screenSharingButtonHidden" + v-tooltip="screenSharingButtonTooltip" + type="tertiary-no-background" + @click.stop="toggleScreenSharingMenu"> + <template #icon> + <PresentToAll :size="20" fill-color="#ffffff" /> + </template> + </NcButton> </div> </template> From 2abb696c32eae5302e2bb6f8311334f542c6a78b Mon Sep 17 00:00:00 2001 From: Maksim Sukharev <antreesy.web@gmail.com> Date: Tue, 5 Mar 2024 09:12:24 +0100 Subject: [PATCH 2/2] refactor(TopBar): get rid of duplicated properties Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com> --- src/components/TopBar/TopBar.vue | 3 +-- src/components/TopBar/TopBarMediaControls.vue | 25 +++++-------------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 7e5b0293697..8fb2d8b2489 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -87,8 +87,7 @@ class="local-media-controls dark-hover" :token="token" :model="localMediaModel" - :show-actions="!isSidebar" - :screen-sharing-button-hidden="isSidebar" + :is-sidebar="isSidebar" :local-call-participant-model="localCallParticipantModel" /> <!-- TopBar menu --> diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue index fadcd84239e..f18d29533e6 100644 --- a/src/components/TopBar/TopBarMediaControls.vue +++ b/src/components/TopBar/TopBarMediaControls.vue @@ -70,7 +70,7 @@ :model="model" color="#ffffff" /> - <NcButton v-if="isVirtualBackgroundAvailable && !showActions" + <NcButton v-if="isVirtualBackgroundAvailable && isSidebar" v-tooltip="toggleVirtualBackgroundButtonLabel" type="tertiary-no-background" :aria-label="toggleVirtualBackgroundButtonLabel" @@ -82,7 +82,7 @@ </template> </NcButton> - <NcActions v-if="!screenSharingButtonHidden && model.attributes.localScreen" + <NcActions v-if="!isSidebar && model.attributes.localScreen" id="screensharing-button" v-tooltip="screenSharingButtonTooltip" type="tertiary-no-background" @@ -92,11 +92,9 @@ :boundaries-element="boundaryElement" :container="container" :open.sync="screenSharingMenuOpen"> - <!-- Actions button icon --> <template #icon> <CancelPresentation :size="20" fill-color="#ffffff" /> </template> - <!-- /Actions button icon --> <!-- Actions --> <NcActionButton close-after-click @click="showScreen"> <template #icon> @@ -111,7 +109,7 @@ {{ t('spreed', 'Stop screensharing') }} </NcActionButton> </NcActions> - <NcButton v-else-if="!screenSharingButtonHidden" + <NcButton v-else-if="!isSidebar" v-tooltip="screenSharingButtonTooltip" type="tertiary-no-background" @click.stop="toggleScreenSharingMenu"> @@ -185,18 +183,6 @@ export default { type: Object, required: true, }, - screenSharingButtonHidden: { - type: Boolean, - default: false, - }, - showActions: { - type: Boolean, - default: true, - }, - - /** - * In the sidebar the conversation settings are hidden - */ isSidebar: { type: Boolean, default: false, @@ -204,8 +190,9 @@ export default { }, setup() { - const isInCall = useIsInCall() - return { isInCall } + return { + isInCall: useIsInCall(), + } }, data() {