plugins-nextcloud-mirror/spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-12-17 13:08:58 +01:00
Code Projects Releases Activity

fix: update recording icon

Browse source 
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
This commit is contained in:
Maksim Sukharev 2025-08-29 10:51:54 +02:00
parent dd1c69c109
commit f1e2d7943e
3 changed files with 36 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
img/material-icons/screen-record-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M158-242q-37-50-57.5-110.5T80-480q0-67 20-127t57-110l58 57q-26 38-40.5 83.5T160-480q0 51 14.5 97t40.5 84l-57 57ZM480-80q-67 0-127-20t-110-57l57-58q38 26 83.5 40.5T480-160q51 0 96.5-14.5T660-215l57 58q-50 37-110 57T480-80Zm322-162-57-57q26-38 40.5-84t14.5-97q0-51-14.5-96.5T745-660l58-57q37 50 57 110t20 127q0 67-20.5 127.5T802-242ZM299-745l-57-57q50-37 110.5-57.5T480-880q68 0 128 20.5T718-802l-57 57q-38-26-84-40.5T480-800q-51 0-97 14.5T299-745Zm181 465q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 677 B

35
src/components/TopBar/CallTime.vue
View file

@ -16,9 +16,11 @@
variant="tertiary"
@click="showPopover = !showPopover">
<template v-if="isRecording || isStartingRecording" #icon>
<IconRecordCircleOutline
:size="20"
:fill-color="isRecording ? 'var(--color-border-error)' : 'var(--color-loading-light)'" />
<NcIconSvgWrapper
class="call-time__recording-icon"
:class="{ 'call-time__recording-icon--start': isStartingRecording }"
:svg="IconScreenRecordOutline"
:size="20" />
</template>
<span class="call-time__text">
<span class="call-time__placeholder">{{ placeholderCallTime }}</span>
@ -60,10 +62,11 @@
<script>
import { t } from '@nextcloud/l10n'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import NcPopover from '@nextcloud/vue/components/NcPopover'
import IconRecordCircleOutline from 'vue-material-design-icons/RecordCircleOutline.vue'
import IconStop from 'vue-material-design-icons/Stop.vue'
import IconScreenRecordOutline from '../../../img/material-icons/screen-record-outline.svg?raw'
import { useDocumentVisibility } from '../../composables/useDocumentVisibility.ts'
import { useGetToken } from '../../composables/useGetToken.ts'
import { CALL } from '../../constants.ts'
@ -76,9 +79,9 @@ export default {
components: {
NcButton,
NcIconSvgWrapper,
NcLoadingIcon,
NcPopover,
IconRecordCircleOutline,
IconStop,
},
@ -94,6 +97,7 @@ export default {
setup() {
return {
IconScreenRecordOutline,
isDocumentVisible: useDocumentVisibility(),
token: useGetToken(),
}
@ -241,6 +245,15 @@ export default {
height: 0;
overflow: hidden;
}
&__recording-icon {
animation: pulse 2s infinite;
color: var(--color-element-error, var(--color-error));
&--start {
color: var(--color-loading-light);
}
}
}
:deep(.button-vue) {
@ -253,4 +266,16 @@ export default {
}
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
</style>

8
src/components/TopBar/TopBarMenu.vue
View file

@ -33,7 +33,9 @@
close-after-click
@click="startRecording">
<template #icon>
<IconRecordCircleOutline :size="20" />
<NcIconSvgWrapper
:svg="IconScreenRecordOutline"
:size="20" />
</template>
{{ t('spreed', 'Start recording') }}
</NcActionButton>
@ -149,11 +151,11 @@ import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
import IconFileOutline from 'vue-material-design-icons/FileOutline.vue'
import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
import IconRecordCircleOutline from 'vue-material-design-icons/RecordCircleOutline.vue'
import IconStop from 'vue-material-design-icons/Stop.vue'
import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
import IconFileDownload from '../../../img/material-icons/file-download.svg?raw'
import IconMicrophoneOffOutline from '../../../img/material-icons/microphone-off-outline.svg?raw'
import IconScreenRecordOutline from '../../../img/material-icons/screen-record-outline.svg?raw'
import {
toggleFullscreen,
useDocumentFullscreen,
@ -182,7 +184,6 @@ export default {
IconFileOutline,
IconFullscreen,
IconFullscreenExit,
IconRecordCircleOutline,
IconStop,
IconVideoOutline,
},
@ -216,6 +217,7 @@ export default {
return {
IconFileDownload,
IconMicrophoneOffOutline,
IconScreenRecordOutline,
isFullscreen: !props.isSidebar ? useDocumentFullscreen() : undefined,
isInCall: useIsInCall(),
toggleFullscreen,