From aee20b9c10520c15b5612ab8c66bc65a4cc45c1a Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 25 Aug 2025 16:39:45 +0200 Subject: [PATCH] fix: improve indication of mic/camera/raised hand in call - revert some outline icons Signed-off-by: Maksim Sukharev --- src/components/CallView/BottomBar.vue | 4 +++- .../shared/LocalVideoControlButton.vue | 6 +++--- .../CallView/shared/VideoBottomBar.vue | 18 +++++++++--------- src/components/MediaSettings/MediaSettings.vue | 6 +++--- .../RightSidebar/Participants/Participant.vue | 6 +++--- src/components/UIShared/VolumeIndicator.vue | 8 ++++---- 6 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/CallView/BottomBar.vue b/src/components/CallView/BottomBar.vue index 76bb23c025..cef471dd4d 100644 --- a/src/components/CallView/BottomBar.vue +++ b/src/components/CallView/BottomBar.vue @@ -11,6 +11,7 @@ import { useStore } from 'vuex' import NcButton from '@nextcloud/vue/components/NcButton' import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue' import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue' +import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue' import IconViewGalleryOutline from 'vue-material-design-icons/ViewGalleryOutline.vue' import IconViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue' @@ -204,7 +205,8 @@ useHotKey('r', toggleHandRaised) diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue index 5096604d3c..136edbc101 100644 --- a/src/components/CallView/shared/LocalVideoControlButton.vue +++ b/src/components/CallView/shared/LocalVideoControlButton.vue @@ -15,7 +15,7 @@ :disabled="!isVideoAllowed" @click.stop="toggleVideo"> @@ -50,8 +50,8 @@ import NcActionCaption from '@nextcloud/vue/components/NcActionCaption' import NcActions from '@nextcloud/vue/components/NcActions' import NcButton from '@nextcloud/vue/components/NcButton' import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue' +import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue' -import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue' import { useDevices } from '../../../composables/useDevices.js' import { PARTICIPANT } from '../../../constants.ts' import BrowserStorage from '../../../services/BrowserStorage.js' @@ -65,7 +65,7 @@ export default { NcActionCaption, NcButton, IconChevronUp, - IconVideoOutline, + IconVideo, IconVideoOffOutline, }, diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue index 065b7fe57d..ccd75fe7ef 100644 --- a/src/components/CallView/shared/VideoBottomBar.vue +++ b/src/components/CallView/shared/VideoBottomBar.vue @@ -10,7 +10,7 @@ @mouseleave.stop="mouseover = false">
- +
@@ -39,7 +39,7 @@ :disabled="isAudioButtonDisabled" @click.stop="forceMute"> @@ -51,7 +51,7 @@ variant="tertiary-no-background" @click.stop="toggleVideo"> @@ -90,11 +90,11 @@ import { t } from '@nextcloud/l10n' import NcButton from '@nextcloud/vue/components/NcButton' import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue' -import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue' -import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue' +import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication +import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled for better indication import IconMonitor from 'vue-material-design-icons/Monitor.vue' +import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue' -import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue' import TransitionWrapper from '../../UIShared/TransitionWrapper.vue' import IconMicrophoneOffOutline from '../../../../img/material-icons/microphone-off-outline.svg?raw' import { PARTICIPANT } from '../../../constants.ts' @@ -107,10 +107,10 @@ export default { components: { IconAlertCircleOutline, - IconHandBackLeftOutline, - IconMicrophoneOutline, + IconHandBackLeft, + IconMicrophone, IconMonitor, - IconVideoOutline, + IconVideo, IconVideoOffOutline, NcButton, NcIconSvgWrapper, diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue index 8fa5dbc769..50a8f18da4 100644 --- a/src/components/MediaSettings/MediaSettings.vue +++ b/src/components/MediaSettings/MediaSettings.vue @@ -112,7 +112,7 @@ :disabled="!videoPreviewAvailable" @click="toggleVideo"> @@ -224,8 +224,8 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' import NcPopover from '@nextcloud/vue/components/NcPopover' import IconCogOutline from 'vue-material-design-icons/CogOutline.vue' import IconReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue' +import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue' -import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue' import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue' import VideoBackground from '../CallView/shared/VideoBackground.vue' import SetGuestUsername from '../SetGuestUsername.vue' @@ -275,7 +275,7 @@ export default { SetGuestUsername, // Icons IconReflectHorizontal, - IconVideoOutline, + IconVideo, IconVideoOffOutline, }, diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue index a07a3481e7..39a482df20 100644 --- a/src/components/RightSidebar/Participants/Participant.vue +++ b/src/components/RightSidebar/Participants/Participant.vue @@ -328,7 +328,7 @@ import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue' import IconCrownOutline from 'vue-material-design-icons/CrownOutline.vue' import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue' import IconEmailOutline from 'vue-material-design-icons/EmailOutline.vue' -import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue' +import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication import IconLockOpenVariantOutline from 'vue-material-design-icons/LockOpenVariantOutline.vue' import IconLockOutline from 'vue-material-design-icons/LockOutline.vue' import IconLockReset from 'vue-material-design-icons/LockReset.vue' @@ -387,7 +387,7 @@ export default { IconCrownOutline, IconDeleteOutline, IconEmailOutline, - IconHandBackLeftOutline, + IconHandBackLeft, IconLockOutline, IconLockOpenVariantOutline, IconLockReset, @@ -577,7 +577,7 @@ export default { if (this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) { return null } else if (this.isHandRaised) { - return { icon: IconHandBackLeftOutline, size: 18, title: t('spreed', 'Raised their hand') } + return { icon: IconHandBackLeft, size: 18, title: t('spreed', 'Raised their hand') } } if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO) { return { icon: IconVideoOutline, size: 20, title: t('spreed', 'Joined with video') } } else if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE) { diff --git a/src/components/UIShared/VolumeIndicator.vue b/src/components/UIShared/VolumeIndicator.vue index a3c93e877c..7d10e7d157 100644 --- a/src/components/UIShared/VolumeIndicator.vue +++ b/src/components/UIShared/VolumeIndicator.vue @@ -9,7 +9,7 @@ :class="{ overload: hasOverload }"> - + - + import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' -import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue' +import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled for better indication import IconMicrophoneOffOutline from '../../../img/material-icons/microphone-off-outline.svg?raw' export default { name: 'VolumeIndicator', components: { - IconMicrophoneOutline, + IconMicrophone, NcIconSvgWrapper, },