VladPolskiy/nextcloud-spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-07-31 02:21:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make icons outlined

Browse Source 
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
This commit is contained in:
Dorra Jaouad
2025-07-09 17:08:05 +02:00
parent 0f4f2c7ebd
commit 4e0d19fc03
6 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
REUSE.toml
View File

@ -66,7 +66,7 @@ SPDX-FileCopyrightText = "Nextcloud GmbH <https://nextcloud.com/trademarks/>"
SPDX-License-Identifier = "LicenseRef-NextcloudTrademarks" SPDX-License-Identifier = "LicenseRef-NextcloudTrademarks"
[[annotations]] [[annotations]]
path = ["img/bridge-bot.png", "img/bridge-services/irc.svg", "img/bridge-services/msteams.svg", "img/bridge-services/slack.svg", "img/bridge-services/steam.svg", "img/bridge-services/xmpp.svg", "img/icon-contacts-white.svg", "img/icon-conversation-event-bright.svg", "img/icon-conversation-event-dark.svg", "img/icon-conversation-federation-bright.svg", "img/icon-conversation-federation-dark.svg", "img/icon-conversation-group-bright.svg", "img/icon-conversation-group-dark.svg", "img/icon-conversation-mail-bright.svg", "img/icon-conversation-mail-dark.svg", "img/icon-conversation-password-bright.svg", "img/icon-conversation-password-dark.svg", "img/icon-conversation-phone-bright.svg", "img/icon-conversation-phone-dark.svg", "img/icon-conversation-public-bright.svg", "img/icon-conversation-public-dark.svg", "img/icon-conversation-text-bright.svg", "img/icon-conversation-text-dark.svg", "img/icon-conversation-user-bright.svg", "img/icon-conversation-user-dark.svg", "img/icon-event-white.svg", "img/icon-mail-white.svg", "img/icon-password-white.svg", "img/icon-phone-white.svg", "img/icon-public-white.svg", "img/icon-team-white.svg", "img/icon-text-white.svg", "img/icon-user-white.svg", "img/phone.png"] path = ["img/bridge-bot.png", "img/bridge-services/irc.svg", "img/bridge-services/msteams.svg", "img/bridge-services/slack.svg", "img/bridge-services/steam.svg", "img/bridge-services/xmpp.svg", "img/icon-contacts-white.svg", "img/icon-conversation-event-bright.svg", "img/icon-conversation-event-dark.svg", "img/icon-conversation-federation-bright.svg", "img/icon-conversation-federation-dark.svg", "img/icon-conversation-group-bright.svg", "img/icon-conversation-group-dark.svg", "img/icon-conversation-mail-bright.svg", "img/icon-conversation-mail-dark.svg", "img/icon-conversation-password-bright.svg", "img/icon-conversation-password-dark.svg", "img/icon-conversation-phone-bright.svg", "img/icon-conversation-phone-dark.svg", "img/icon-conversation-public-bright.svg", "img/icon-conversation-public-dark.svg", "img/icon-conversation-text-bright.svg", "img/icon-conversation-text-dark.svg", "img/icon-conversation-user-bright.svg", "img/icon-conversation-user-dark.svg", "img/icon-event-white.svg", "img/icon-mail-white.svg", "img/icon-password-white.svg", "img/icon-phone-white.svg", "img/icon-public-white.svg", "img/icon-replace-background.svg", "img/icon-team-white.svg", "img/icon-text-white.svg", "img/icon-volume-high-outline.svg", "img/icon-user-white.svg", "img/phone.png"]
precedence = "aggregate" precedence = "aggregate"
SPDX-FileCopyrightText = "2018-2025 Google LLC" SPDX-FileCopyrightText = "2018-2025 Google LLC"
SPDX-License-Identifier = "Apache-2.0" SPDX-License-Identifier = "Apache-2.0"

3
img/icon-volume-high-outline.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="#fff">
<path d="M3 9v6h4l5 5V4L7 9H3zm7-.17v6.34L7.83 13H5v-2h2.83L10 8.83zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 362 B

23
src/components/MediaSettings/MediaDevicesSelector.vue
View File

@ -7,11 +7,12 @@
import type { ComponentPublicInstance } from 'vue' import type { ComponentPublicInstance } from 'vue'
import { t } from '@nextcloud/l10n' import { t } from '@nextcloud/l10n'
import { computed } from 'vue' import { computed, h } from 'vue'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
import NcSelect from '@nextcloud/vue/components/NcSelect' import NcSelect from '@nextcloud/vue/components/NcSelect'
import IconMicrophone from 'vue-material-design-icons/Microphone.vue' import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
import IconVideo from 'vue-material-design-icons/Video.vue' import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue' import IconVolumeOutline from '../../../img/icon-volume-high-outline.svg?raw'
type NcSelectOption = { id: string | null, label: string } type NcSelectOption = { id: string | null, label: string }
type MediaDeviceInfoWithFallbackLabel = MediaDeviceInfo & { fallbackLabel: string } type MediaDeviceInfoWithFallbackLabel = MediaDeviceInfo & { fallbackLabel: string }
@ -46,9 +47,12 @@ const deviceOptionsAvailable = computed(() => deviceOptions.value.length > 1)
const deviceIcon = computed<ComponentPublicInstance | null>(() => { const deviceIcon = computed<ComponentPublicInstance | null>(() => {
switch (props.kind) { switch (props.kind) {
case 'audioinput': return IconMicrophone case 'audioinput': return IconMicrophoneOutline
case 'audiooutput': return IconVolumeHigh case 'audiooutput': return h(NcIconSvgWrapper, {
case 'videoinput': return IconVideo svg: IconVolumeOutline,
size: 20,
})
case 'videoinput': return IconVideoOutline
default: return null default: return null
} }
}) })
@ -138,5 +142,10 @@ function updateDeviceId(deviceId: NcSelectOption['id']) {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
:deep(.icon-vue) {
min-width: auto;
width: 20px;
}
} }
</style> </style>

4
src/components/MediaSettings/MediaSettings.vue
View File

@ -220,7 +220,7 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
import NcModal from '@nextcloud/vue/components/NcModal' import NcModal from '@nextcloud/vue/components/NcModal'
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import NcPopover from '@nextcloud/vue/components/NcPopover' import NcPopover from '@nextcloud/vue/components/NcPopover'
import IconCog from 'vue-material-design-icons/Cog.vue' import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
import IconCreation from 'vue-material-design-icons/Creation.vue' import IconCreation from 'vue-material-design-icons/Creation.vue'
import IconMicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue' import IconMicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
import IconReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue' import IconReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue'
@ -324,7 +324,7 @@ export default {
const devicesTab = { const devicesTab = {
id: 'devices', id: 'devices',
label: t('spreed', 'Devices'), label: t('spreed', 'Devices'),
icon: markRaw(IconCog), icon: markRaw(IconCogOutline),
} }
const backgroundsTab = { const backgroundsTab = {
id: 'backgrounds', id: 'backgrounds',

4
src/components/SetGuestUsername.vue
View File

@ -12,7 +12,7 @@
@click="toggleEdit"> @click="toggleEdit">
{{ t('spreed', 'Edit display name') }} {{ t('spreed', 'Edit display name') }}
<template #icon> <template #icon>
<Pencil :size="20" /> <IconPencilOutline :size="20" />
</template> </template>
</NcButton> </NcButton>
@ -56,7 +56,7 @@ import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from
import NcButton from '@nextcloud/vue/components/NcButton' import NcButton from '@nextcloud/vue/components/NcButton'
import NcTextField from '@nextcloud/vue/components/NcTextField' import NcTextField from '@nextcloud/vue/components/NcTextField'
import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue' import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
import Pencil from 'vue-material-design-icons/Pencil.vue' import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
import { useGetToken } from '../composables/useGetToken.ts' import { useGetToken } from '../composables/useGetToken.ts'
import { EventBus } from '../services/EventBus.ts' import { EventBus } from '../services/EventBus.ts'
import { useActorStore } from '../stores/actor.ts' import { useActorStore } from '../stores/actor.ts'

6
src/components/SettingsDialog/SettingsDialog.vue
View File

@ -23,7 +23,7 @@
<NcButton variant="secondary" <NcButton variant="secondary"
@click="openMediaSettings"> @click="openMediaSettings">
<template #icon> <template #icon>
<IconMicrophone :size="20" /> <IconMicrophoneOutline :size="20" />
</template> </template>
{{ t('spreed', 'Check devices') }} {{ t('spreed', 'Check devices') }}
</NcButton> </NcButton>
@ -237,7 +237,7 @@ import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection' import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
import NcButton from '@nextcloud/vue/components/NcButton' import NcButton from '@nextcloud/vue/components/NcButton'
import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
import IconMicrophone from 'vue-material-design-icons/Microphone.vue' import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
import { CONVERSATION, PRIVACY } from '../../constants.ts' import { CONVERSATION, PRIVACY } from '../../constants.ts'
import BrowserStorage from '../../services/BrowserStorage.js' import BrowserStorage from '../../services/BrowserStorage.js'
import { getTalkConfig } from '../../services/CapabilitiesManager.ts' import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
@ -264,7 +264,7 @@ export default {
name: 'SettingsDialog', name: 'SettingsDialog',
components: { components: {
IconMicrophone, IconMicrophoneOutline,
NcAppSettingsDialog, NcAppSettingsDialog,
NcAppSettingsSection, NcAppSettingsSection,
NcButton, NcButton,