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: Use outline icons in LeftSidebar

Browse Source 
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling
2025-07-04 15:16:24 +02:00
committed by Maksim Sukharev
parent 96a177f84e
commit 143e7369f2
3 changed files with 87 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/LeftSidebar/ConversationsList/Conversation.vue
View File

@ -74,8 +74,8 @@
<NcActionButton key="toggle-read" close-after-click @click="toggleReadConversation"> <NcActionButton key="toggle-read" close-after-click @click="toggleReadConversation">
<template #icon> <template #icon>
<IconEye v-if="item.unreadMessages" :size="16" /> <IconEyeOutline v-if="item.unreadMessages" :size="16" />
<IconEyeOff v-else :size="16" /> <IconEyeOffOutline v-else :size="16" />
</template> </template>
{{ labelRead }} {{ labelRead }}
</NcActionButton> </NcActionButton>
@ -84,14 +84,14 @@
is-menu is-menu
@click="submenu = 'notifications'"> @click="submenu = 'notifications'">
<template #icon> <template #icon>
<IconBell :size="16" /> <IconBellOutline :size="16" />
</template> </template>
{{ t('spreed', 'Notifications') }} {{ t('spreed', 'Notifications') }}
</NcActionButton> </NcActionButton>
<NcActionButton key="show-settings" close-after-click @click="showConversationSettings"> <NcActionButton key="show-settings" close-after-click @click="showConversationSettings">
<template #icon> <template #icon>
<IconCog :size="16" /> <IconCogOutline :size="16" />
</template> </template>
{{ t('spreed', 'Conversation settings') }} {{ t('spreed', 'Conversation settings') }}
</NcActionButton> </NcActionButton>
@ -101,8 +101,8 @@
close-after-click close-after-click
@click="toggleArchiveConversation"> @click="toggleArchiveConversation">
<template #icon> <template #icon>
<IconArchive v-if="!item.isArchived" :size="16" /> <IconArchiveOutline v-if="!item.isArchived" :size="16" />
<IconArchiveOff v-else :size="16" /> <IconArchiveOffOutline v-else :size="16" />
</template> </template>
{{ labelArchive }} {{ labelArchive }}
</NcActionButton> </NcActionButton>
@ -123,7 +123,7 @@
class="critical" class="critical"
@click="isDeleteDialogOpen = true"> @click="isDeleteDialogOpen = true">
<template #icon> <template #icon>
<IconDelete :size="16" /> <IconDeleteOutline :size="16" />
</template> </template>
{{ t('spreed', 'Delete conversation') }} {{ t('spreed', 'Delete conversation') }}
</NcActionButton> </NcActionButton>
@ -162,7 +162,7 @@
:model-value="notificationCalls" :model-value="notificationCalls"
@click="setNotificationCalls(!notificationCalls)"> @click="setNotificationCalls(!notificationCalls)">
<template #icon> <template #icon>
<IconPhoneRing :size="16" /> <IconPhoneRingOutline :size="16" />
</template> </template>
{{ t('spreed', 'Notify about calls') }} {{ t('spreed', 'Notify about calls') }}
</NcActionButton> </NcActionButton>
@ -179,7 +179,7 @@
:model-value="item.isImportant" :model-value="item.isImportant"
@click="toggleImportant(!item.isImportant)"> @click="toggleImportant(!item.isImportant)">
<template #icon> <template #icon>
<IconMessageAlert :size="16" /> <IconMessageAlertOutline :size="16" />
</template> </template>
{{ t('spreed', 'Important conversation') }} {{ t('spreed', 'Important conversation') }}
</NcActionButton> </NcActionButton>
@ -191,7 +191,7 @@
:model-value="item.isSensitive" :model-value="item.isSensitive"
@click="toggleSensitive(!item.isSensitive)"> @click="toggleSensitive(!item.isSensitive)">
<template #icon> <template #icon>
<IconShieldLock :size="16" /> <IconShieldLockOutline :size="16" />
</template> </template>
{{ t('spreed', 'Sensitive conversation') }} {{ t('spreed', 'Sensitive conversation') }}
</NcActionButton> </NcActionButton>
@ -267,21 +267,21 @@ import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
import NcButton from '@nextcloud/vue/components/NcButton' import NcButton from '@nextcloud/vue/components/NcButton'
import NcDialog from '@nextcloud/vue/components/NcDialog' import NcDialog from '@nextcloud/vue/components/NcDialog'
import NcListItem from '@nextcloud/vue/components/NcListItem' import NcListItem from '@nextcloud/vue/components/NcListItem'
import IconAccount from 'vue-material-design-icons/Account.vue' import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
import IconArchive from 'vue-material-design-icons/Archive.vue' import IconArchiveOffOutline from 'vue-material-design-icons/ArchiveOffOutline.vue'
import IconArchiveOff from 'vue-material-design-icons/ArchiveOff.vue' import IconArchiveOutline from 'vue-material-design-icons/ArchiveOutline.vue'
import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue' import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue' import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
import IconBell from 'vue-material-design-icons/Bell.vue' import IconBellOutline from 'vue-material-design-icons/BellOutline.vue'
import IconCog from 'vue-material-design-icons/Cog.vue' import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue' import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
import IconDelete from 'vue-material-design-icons/Delete.vue' import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
import IconExitToApp from 'vue-material-design-icons/ExitToApp.vue' import IconExitToApp from 'vue-material-design-icons/ExitToApp.vue'
import IconEye from 'vue-material-design-icons/Eye.vue' import IconEyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
import IconEyeOff from 'vue-material-design-icons/EyeOff.vue' import IconEyeOutline from 'vue-material-design-icons/EyeOutline.vue'
import IconMessageAlert from 'vue-material-design-icons/MessageAlert.vue' import IconMessageAlertOutline from 'vue-material-design-icons/MessageAlertOutline.vue'
import IconPhoneRing from 'vue-material-design-icons/PhoneRing.vue' import IconPhoneRingOutline from 'vue-material-design-icons/PhoneRingOutline.vue'
import IconShieldLock from 'vue-material-design-icons/ShieldLock.vue' import IconShieldLockOutline from 'vue-material-design-icons/ShieldLockOutline.vue'
import IconStar from 'vue-material-design-icons/Star.vue' import IconStar from 'vue-material-design-icons/Star.vue'
import IconVideo from 'vue-material-design-icons/Video.vue' import IconVideo from 'vue-material-design-icons/Video.vue'
import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue' import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
@ -307,21 +307,21 @@ export default {
components: { components: {
ConversationIcon, ConversationIcon,
IconAccount, IconAccountOutline,
IconArchive, IconArchiveOutline,
IconArchiveOff, IconArchiveOffOutline,
IconArrowLeft, IconArrowLeft,
IconArrowRight, IconArrowRight,
IconBell, IconBellOutline,
IconCog, IconCogOutline,
IconContentCopy, IconContentCopy,
IconDelete, IconDeleteOutline,
IconExitToApp, IconExitToApp,
IconEye, IconEyeOutline,
IconEyeOff, IconEyeOffOutline,
IconMessageAlert, IconMessageAlertOutline,
IconPhoneRing, IconPhoneRingOutline,
IconShieldLock, IconShieldLockOutline,
IconStar, IconStar,
IconVolumeHigh, IconVolumeHigh,
IconVolumeOff, IconVolumeOff,
@ -455,13 +455,13 @@ export default {
iconType() { iconType() {
if (this.item.hasCall) { if (this.item.hasCall) {
return { return {
component: 'IconVideo', component: IconVideo,
color: '#E9322D', color: '#E9322D',
text: t('spreed', 'Call in progress'), text: t('spreed', 'Call in progress'),
} }
} else if (this.item.isFavorite) { } else if (this.item.isFavorite) {
return { return {
component: 'IconStar', component: IconStar,
color: '#FFCC00', color: '#FFCC00',
text: t('spreed', 'Favorite'), text: t('spreed', 'Favorite'),
} }
@ -540,7 +540,7 @@ export default {
case PARTICIPANT.NOTIFY.ALWAYS: case PARTICIPANT.NOTIFY.ALWAYS:
return IconVolumeHigh return IconVolumeHigh
case PARTICIPANT.NOTIFY.MENTION: case PARTICIPANT.NOTIFY.MENTION:
return IconAccount return IconAccountOutline
case PARTICIPANT.NOTIFY.NEVER: case PARTICIPANT.NOTIFY.NEVER:
default: default:
return IconVolumeOff return IconVolumeOff

98
src/components/LeftSidebar/LeftSidebar.vue
View File

@ -16,7 +16,7 @@
:aria-label="dashboardButtonLabel" :aria-label="dashboardButtonLabel"
@click="refreshTalkDashboard"> @click="refreshTalkDashboard">
<template #icon> <template #icon>
<IconHome :size="20" /> <IconHomeOutline :size="20" />
</template> </template>
</NcButton> </NcButton>
</TransitionWrapper> </TransitionWrapper>
@ -37,7 +37,7 @@
class="filters" class="filters"
:class="{ 'hidden-visually': isSearching }"> :class="{ 'hidden-visually': isSearching }">
<template #icon> <template #icon>
<FilterIcon :size="15" /> <IconFilterOutline :size="15" />
</template> </template>
<NcActionCaption :name="t('spreed', 'Filter conversations by')" /> <NcActionCaption :name="t('spreed', 'Filter conversations by')" />
@ -46,7 +46,7 @@
:model-value="filters.includes('mentions')" :model-value="filters.includes('mentions')"
@click="handleFilter('mentions')"> @click="handleFilter('mentions')">
<template #icon> <template #icon>
<AtIcon :size="20" /> <IconAt :size="20" />
</template> </template>
{{ t('spreed', 'Unread mentions') }} {{ t('spreed', 'Unread mentions') }}
</NcActionButton> </NcActionButton>
@ -56,7 +56,7 @@
:model-value="filters.includes('unread')" :model-value="filters.includes('unread')"
@click="handleFilter('unread')"> @click="handleFilter('unread')">
<template #icon> <template #icon>
<MessageBadge :size="20" /> <IconMessageBadgeOutline :size="20" />
</template> </template>
{{ t('spreed', 'Unread messages') }} {{ t('spreed', 'Unread messages') }}
</NcActionButton> </NcActionButton>
@ -66,7 +66,7 @@
:model-value="filters.includes('events')" :model-value="filters.includes('events')"
@click="handleFilter('events')"> @click="handleFilter('events')">
<template #icon> <template #icon>
<IconCalendar :size="20" /> <IconCalendarBlankOutline :size="20" />
</template> </template>
{{ t('spreed', 'Meeting conversations') }} {{ t('spreed', 'Meeting conversations') }}
</NcActionButton> </NcActionButton>
@ -76,7 +76,7 @@
class="filter-actions__clearbutton" class="filter-actions__clearbutton"
@click="handleFilter(null)"> @click="handleFilter(null)">
<template #icon> <template #icon>
<FilterRemoveIcon :size="20" /> <IconFilterRemoveOutline :size="20" />
</template> </template>
{{ t('spreed', 'Clear filters') }} {{ t('spreed', 'Clear filters') }}
</NcActionButton> </NcActionButton>
@ -89,13 +89,13 @@
class="actions" class="actions"
:class="{ 'hidden-visually': isSearching }"> :class="{ 'hidden-visually': isSearching }">
<template #icon> <template #icon>
<ChatPlus :size="20" /> <IconChatPlusOutline :size="20" />
</template> </template>
<NcActionButton v-if="canStartConversations" <NcActionButton v-if="canStartConversations"
close-after-click close-after-click
@click="showModalNewConversation"> @click="showModalNewConversation">
<template #icon> <template #icon>
<Plus :size="20" /> <IconPlus :size="20" />
</template> </template>
{{ t('spreed', 'Create a new conversation') }} {{ t('spreed', 'Create a new conversation') }}
</NcActionButton> </NcActionButton>
@ -104,7 +104,7 @@
close-after-click close-after-click
@click="restoreNoteToSelfConversation"> @click="restoreNoteToSelfConversation">
<template #icon> <template #icon>
<Note :size="20" /> <IconNoteEditOutline :size="20" />
</template> </template>
{{ t('spreed', 'New personal note') }} {{ t('spreed', 'New personal note') }}
</NcActionButton> </NcActionButton>
@ -112,7 +112,7 @@
<NcActionButton close-after-click <NcActionButton close-after-click
@click="showModalListConversations"> @click="showModalListConversations">
<template #icon> <template #icon>
<List :size="20" /> <IconFormatListBulleted :size="20" />
</template> </template>
{{ t('spreed', 'Join open conversations') }} {{ t('spreed', 'Join open conversations') }}
</NcActionButton> </NcActionButton>
@ -121,7 +121,7 @@
close-after-click close-after-click
@click="showModalCallPhoneDialog"> @click="showModalCallPhoneDialog">
<template #icon> <template #icon>
<Phone :size="20" /> <IconPhoneOutline :size="20" />
</template> </template>
{{ t('spreed', 'Call a phone number') }} {{ t('spreed', 'Call a phone number') }}
</NcActionButton> </NcActionButton>
@ -154,7 +154,7 @@
:name="t('spreed', 'Pending invitations')" :name="t('spreed', 'Pending invitations')"
@click="showInvitationHandler"> @click="showInvitationHandler">
<template #icon> <template #icon>
<AccountMultiplePlus :size="20" /> <IconAccountMultiplePlusOutline :size="20" />
</template> </template>
<template #counter> <template #counter>
<NcCounterBubble type="highlighted" :count="pendingInvitationsCount" /> <NcCounterBubble type="highlighted" :count="pendingInvitationsCount" />
@ -169,15 +169,15 @@
:name="emptyContentLabel" :name="emptyContentLabel"
:description="emptyContentDescription"> :description="emptyContentDescription">
<template #icon> <template #icon>
<AtIcon v-if="filters.length === 1 && filters[0] === 'mentions'" :size="64" /> <IconAt v-if="filters.length === 1 && filters[0] === 'mentions'" :size="64" />
<MessageBadge v-else-if="filters.length === 1 && filters[0] === 'unread'" :size="64" /> <IconMessageBadgeOutline v-else-if="filters.length === 1 && filters[0] === 'unread'" :size="64" />
<IconArchive v-else-if="showArchived" :size="64" /> <IconArchiveOutline v-else-if="showArchived" :size="64" />
<MessageOutline v-else :size="64" /> <IconMessageOutline v-else :size="64" />
</template> </template>
<template #action> <template #action>
<NcButton v-if="isFiltered" @click="handleFilter(null)"> <NcButton v-if="isFiltered" @click="handleFilter(null)">
<template #icon> <template #icon>
<FilterRemoveIcon :size="20" /> <IconFilterRemoveOutline :size="20" />
</template> </template>
{{ t('spreed', 'Clear filter') }} {{ t('spreed', 'Clear filter') }}
</NcButton> </NcButton>
@ -229,7 +229,7 @@
wide wide
@click="showArchived = true"> @click="showArchived = true">
<template #icon> <template #icon>
<IconArchive :size="20" /> <IconArchiveOutline :size="20" />
</template> </template>
{{ t('spreed', 'Archived conversations') }} {{ t('spreed', 'Archived conversations') }}
<span v-if="showArchivedConversationsBubble" class="left-sidebar__settings-button-bubble"> <span v-if="showArchivedConversationsBubble" class="left-sidebar__settings-button-bubble">
@ -240,7 +240,7 @@
<NcButton variant="tertiary" wide @click="showSettings"> <NcButton variant="tertiary" wide @click="showSettings">
<template #icon> <template #icon>
<Cog :size="20" /> <IconCogOutline :size="20" />
</template> </template>
{{ t('spreed', 'Talk settings') }} {{ t('spreed', 'Talk settings') }}
</NcButton> </NcButton>
@ -267,22 +267,22 @@ import NcButton from '@nextcloud/vue/components/NcButton'
import NcChip from '@nextcloud/vue/components/NcChip' import NcChip from '@nextcloud/vue/components/NcChip'
import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble' import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
import AccountMultiplePlus from 'vue-material-design-icons/AccountMultiplePlus.vue' import IconAccountMultiplePlusOutline from 'vue-material-design-icons/AccountMultiplePlusOutline.vue'
import IconArchive from 'vue-material-design-icons/Archive.vue' import IconArchiveOutline from 'vue-material-design-icons/ArchiveOutline.vue'
import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue' import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
import AtIcon from 'vue-material-design-icons/At.vue' import IconAt from 'vue-material-design-icons/At.vue'
import IconCalendar from 'vue-material-design-icons/CalendarBlank.vue' import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
import ChatPlus from 'vue-material-design-icons/ChatPlus.vue' import IconChatPlusOutline from 'vue-material-design-icons/ChatPlusOutline.vue'
import Cog from 'vue-material-design-icons/Cog.vue' import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
import FilterIcon from 'vue-material-design-icons/Filter.vue' import IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'
import FilterRemoveIcon from 'vue-material-design-icons/FilterRemove.vue' import IconFilterRemoveOutline from 'vue-material-design-icons/FilterRemoveOutline.vue'
import List from 'vue-material-design-icons/FormatListBulleted.vue' import IconFormatListBulleted from 'vue-material-design-icons/FormatListBulleted.vue'
import IconHome from 'vue-material-design-icons/Home.vue' import IconHomeOutline from 'vue-material-design-icons/HomeOutline.vue'
import MessageBadge from 'vue-material-design-icons/MessageBadge.vue' import IconMessageBadgeOutline from 'vue-material-design-icons/MessageBadgeOutline.vue'
import MessageOutline from 'vue-material-design-icons/MessageOutline.vue' import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
import Note from 'vue-material-design-icons/NoteEditOutline.vue' import IconNoteEditOutline from 'vue-material-design-icons/NoteEditOutline.vue'
import Phone from 'vue-material-design-icons/Phone.vue' import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
import Plus from 'vue-material-design-icons/Plus.vue' import IconPlus from 'vue-material-design-icons/Plus.vue'
import NewConversationDialog from '../NewConversationDialog/NewConversationDialog.vue' import NewConversationDialog from '../NewConversationDialog/NewConversationDialog.vue'
import SearchBox from '../UIShared/SearchBox.vue' import SearchBox from '../UIShared/SearchBox.vue'
import TransitionWrapper from '../UIShared/TransitionWrapper.vue' import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@ -350,22 +350,22 @@ export default {
ConversationsListVirtual, ConversationsListVirtual,
SearchConversationsResults, SearchConversationsResults,
// Icons // Icons
AccountMultiplePlus, IconAccountMultiplePlusOutline,
AtIcon, IconAt,
MessageBadge, IconMessageBadgeOutline,
MessageOutline, IconMessageOutline,
FilterIcon, IconFilterOutline,
FilterRemoveIcon, IconFilterRemoveOutline,
IconArchive, IconArchiveOutline,
IconArrowLeft, IconArrowLeft,
IconCalendar, IconCalendarBlankOutline,
IconHome, IconHomeOutline,
Phone, IconPhoneOutline,
Plus, IconPlus,
ChatPlus, IconChatPlusOutline,
Cog, IconCogOutline,
List, IconFormatListBulleted,
Note, IconNoteEditOutline,
NcEmptyContent, NcEmptyContent,
}, },

6
src/components/LeftSidebar/SearchConversationsResults/SearchConversationsResults.vue
View File

@ -8,11 +8,11 @@ import type { ParticipantSearchResult, Conversation as TypeConversation } from '
import { loadState } from '@nextcloud/initial-state' import { loadState } from '@nextcloud/initial-state'
import { t } from '@nextcloud/l10n' import { t } from '@nextcloud/l10n'
import { computed, ref } from 'vue' import { computed } from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller' import { RecycleScroller } from 'vue-virtual-scroller'
import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption' import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
import NcListItem from '@nextcloud/vue/components/NcListItem' import NcListItem from '@nextcloud/vue/components/NcListItem'
import IconChatPlus from 'vue-material-design-icons/ChatPlus.vue' import IconChatPlusOutline from 'vue-material-design-icons/ChatPlusOutline.vue'
import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue' import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
import ConversationIcon from '../../ConversationIcon.vue' import ConversationIcon from '../../ConversationIcon.vue'
import Hint from '../../UIShared/Hint.vue' import Hint from '../../UIShared/Hint.vue'
@ -225,7 +225,7 @@ const iconSize = computed(() => isCompact.value ? AVATAR.SIZE.COMPACT : AVATAR.S
data-nav-id="conversation_create_new" data-nav-id="conversation_create_new"
@click="emit('create-new-conversation', searchText)"> @click="emit('create-new-conversation', searchText)">
<template #icon> <template #icon>
<IconChatPlus :size="iconSize" /> <IconChatPlusOutline :size="iconSize" />
</template> </template>
<template v-if="!isCompact" #subname> <template v-if="!isCompact" #subname>
{{ t('spreed', 'New group conversation') }} {{ t('spreed', 'New group conversation') }}