fix: make icons outlined

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

View File

@ -66,7 +66,7 @@ SPDX-FileCopyrightText = "Nextcloud GmbH <https://nextcloud.com/trademarks/>"
SPDX-License-Identifier = "LicenseRef-NextcloudTrademarks"
[[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"
SPDX-FileCopyrightText = "2018-2025 Google LLC"
SPDX-License-Identifier = "Apache-2.0"

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>

After

Width:  |  Height:  |  Size: 362 B

View File

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

View File

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

View File

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

View File

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