mirror of
https://github.com/nextcloud/spreed.git
synced 2025-07-21 10:37:10 +00:00
fix: Use outline icons in LeftSidebar
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling
committed by
Maksim Sukharev
Maksim Sukharev
parent
96a177f84e
commit
143e7369f2
@ -74,8 +74,8 @@
|
||||
|
||||
<NcActionButton key="toggle-read" close-after-click @click="toggleReadConversation">
|
||||
<template #icon>
|
||||
<IconEye v-if="item.unreadMessages" :size="16" />
|
||||
<IconEyeOff v-else :size="16" />
|
||||
<IconEyeOutline v-if="item.unreadMessages" :size="16" />
|
||||
<IconEyeOffOutline v-else :size="16" />
|
||||
</template>
|
||||
{{ labelRead }}
|
||||
</NcActionButton>
|
||||
@ -84,14 +84,14 @@
|
||||
is-menu
|
||||
@click="submenu = 'notifications'">
|
||||
<template #icon>
|
||||
<IconBell :size="16" />
|
||||
<IconBellOutline :size="16" />
|
||||
</template>
|
||||
{{ t('spreed', 'Notifications') }}
|
||||
</NcActionButton>
|
||||
|
||||
<NcActionButton key="show-settings" close-after-click @click="showConversationSettings">
|
||||
<template #icon>
|
||||
<IconCog :size="16" />
|
||||
<IconCogOutline :size="16" />
|
||||
</template>
|
||||
{{ t('spreed', 'Conversation settings') }}
|
||||
</NcActionButton>
|
||||
@ -101,8 +101,8 @@
|
||||
close-after-click
|
||||
@click="toggleArchiveConversation">
|
||||
<template #icon>
|
||||
<IconArchive v-if="!item.isArchived" :size="16" />
|
||||
<IconArchiveOff v-else :size="16" />
|
||||
<IconArchiveOutline v-if="!item.isArchived" :size="16" />
|
||||
<IconArchiveOffOutline v-else :size="16" />
|
||||
</template>
|
||||
{{ labelArchive }}
|
||||
</NcActionButton>
|
||||
@ -123,7 +123,7 @@
|
||||
class="critical"
|
||||
@click="isDeleteDialogOpen = true">
|
||||
<template #icon>
|
||||
<IconDelete :size="16" />
|
||||
<IconDeleteOutline :size="16" />
|
||||
</template>
|
||||
{{ t('spreed', 'Delete conversation') }}
|
||||
</NcActionButton>
|
||||
@ -162,7 +162,7 @@
|
||||
:model-value="notificationCalls"
|
||||
@click="setNotificationCalls(!notificationCalls)">
|
||||
<template #icon>
|
||||
<IconPhoneRing :size="16" />
|
||||
<IconPhoneRingOutline :size="16" />
|
||||
</template>
|
||||
{{ t('spreed', 'Notify about calls') }}
|
||||
</NcActionButton>
|
||||
@ -179,7 +179,7 @@
|
||||
:model-value="item.isImportant"
|
||||
@click="toggleImportant(!item.isImportant)">
|
||||
<template #icon>
|
||||
<IconMessageAlert :size="16" />
|
||||
<IconMessageAlertOutline :size="16" />
|
||||
</template>
|
||||
{{ t('spreed', 'Important conversation') }}
|
||||
</NcActionButton>
|
||||
@ -191,7 +191,7 @@
|
||||
:model-value="item.isSensitive"
|
||||
@click="toggleSensitive(!item.isSensitive)">
|
||||
<template #icon>
|
||||
<IconShieldLock :size="16" />
|
||||
<IconShieldLockOutline :size="16" />
|
||||
</template>
|
||||
{{ t('spreed', 'Sensitive conversation') }}
|
||||
</NcActionButton>
|
||||
@ -267,21 +267,21 @@ import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
|
||||
import NcButton from '@nextcloud/vue/components/NcButton'
|
||||
import NcDialog from '@nextcloud/vue/components/NcDialog'
|
||||
import NcListItem from '@nextcloud/vue/components/NcListItem'
|
||||
import IconAccount from 'vue-material-design-icons/Account.vue'
|
||||
import IconArchive from 'vue-material-design-icons/Archive.vue'
|
||||
import IconArchiveOff from 'vue-material-design-icons/ArchiveOff.vue'
|
||||
import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
|
||||
import IconArchiveOffOutline from 'vue-material-design-icons/ArchiveOffOutline.vue'
|
||||
import IconArchiveOutline from 'vue-material-design-icons/ArchiveOutline.vue'
|
||||
import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
|
||||
import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
|
||||
import IconBell from 'vue-material-design-icons/Bell.vue'
|
||||
import IconCog from 'vue-material-design-icons/Cog.vue'
|
||||
import IconBellOutline from 'vue-material-design-icons/BellOutline.vue'
|
||||
import IconCogOutline from 'vue-material-design-icons/CogOutline.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 IconEye from 'vue-material-design-icons/Eye.vue'
|
||||
import IconEyeOff from 'vue-material-design-icons/EyeOff.vue'
|
||||
import IconMessageAlert from 'vue-material-design-icons/MessageAlert.vue'
|
||||
import IconPhoneRing from 'vue-material-design-icons/PhoneRing.vue'
|
||||
import IconShieldLock from 'vue-material-design-icons/ShieldLock.vue'
|
||||
import IconEyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
|
||||
import IconEyeOutline from 'vue-material-design-icons/EyeOutline.vue'
|
||||
import IconMessageAlertOutline from 'vue-material-design-icons/MessageAlertOutline.vue'
|
||||
import IconPhoneRingOutline from 'vue-material-design-icons/PhoneRingOutline.vue'
|
||||
import IconShieldLockOutline from 'vue-material-design-icons/ShieldLockOutline.vue'
|
||||
import IconStar from 'vue-material-design-icons/Star.vue'
|
||||
import IconVideo from 'vue-material-design-icons/Video.vue'
|
||||
import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
|
||||
@ -307,21 +307,21 @@ export default {
|
||||
|
||||
components: {
|
||||
ConversationIcon,
|
||||
IconAccount,
|
||||
IconArchive,
|
||||
IconArchiveOff,
|
||||
IconAccountOutline,
|
||||
IconArchiveOutline,
|
||||
IconArchiveOffOutline,
|
||||
IconArrowLeft,
|
||||
IconArrowRight,
|
||||
IconBell,
|
||||
IconCog,
|
||||
IconBellOutline,
|
||||
IconCogOutline,
|
||||
IconContentCopy,
|
||||
IconDelete,
|
||||
IconDeleteOutline,
|
||||
IconExitToApp,
|
||||
IconEye,
|
||||
IconEyeOff,
|
||||
IconMessageAlert,
|
||||
IconPhoneRing,
|
||||
IconShieldLock,
|
||||
IconEyeOutline,
|
||||
IconEyeOffOutline,
|
||||
IconMessageAlertOutline,
|
||||
IconPhoneRingOutline,
|
||||
IconShieldLockOutline,
|
||||
IconStar,
|
||||
IconVolumeHigh,
|
||||
IconVolumeOff,
|
||||
@ -455,13 +455,13 @@ export default {
|
||||
iconType() {
|
||||
if (this.item.hasCall) {
|
||||
return {
|
||||
component: 'IconVideo',
|
||||
component: IconVideo,
|
||||
color: '#E9322D',
|
||||
text: t('spreed', 'Call in progress'),
|
||||
}
|
||||
} else if (this.item.isFavorite) {
|
||||
return {
|
||||
component: 'IconStar',
|
||||
component: IconStar,
|
||||
color: '#FFCC00',
|
||||
text: t('spreed', 'Favorite'),
|
||||
}
|
||||
@ -540,7 +540,7 @@ export default {
|
||||
case PARTICIPANT.NOTIFY.ALWAYS:
|
||||
return IconVolumeHigh
|
||||
case PARTICIPANT.NOTIFY.MENTION:
|
||||
return IconAccount
|
||||
return IconAccountOutline
|
||||
case PARTICIPANT.NOTIFY.NEVER:
|
||||
default:
|
||||
return IconVolumeOff
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
:aria-label="dashboardButtonLabel"
|
||||
@click="refreshTalkDashboard">
|
||||
<template #icon>
|
||||
<IconHome :size="20" />
|
||||
<IconHomeOutline :size="20" />
|
||||
</template>
|
||||
</NcButton>
|
||||
</TransitionWrapper>
|
||||
@ -37,7 +37,7 @@
|
||||
class="filters"
|
||||
:class="{ 'hidden-visually': isSearching }">
|
||||
<template #icon>
|
||||
<FilterIcon :size="15" />
|
||||
<IconFilterOutline :size="15" />
|
||||
</template>
|
||||
<NcActionCaption :name="t('spreed', 'Filter conversations by')" />
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
:model-value="filters.includes('mentions')"
|
||||
@click="handleFilter('mentions')">
|
||||
<template #icon>
|
||||
<AtIcon :size="20" />
|
||||
<IconAt :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Unread mentions') }}
|
||||
</NcActionButton>
|
||||
@ -56,7 +56,7 @@
|
||||
:model-value="filters.includes('unread')"
|
||||
@click="handleFilter('unread')">
|
||||
<template #icon>
|
||||
<MessageBadge :size="20" />
|
||||
<IconMessageBadgeOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Unread messages') }}
|
||||
</NcActionButton>
|
||||
@ -66,7 +66,7 @@
|
||||
:model-value="filters.includes('events')"
|
||||
@click="handleFilter('events')">
|
||||
<template #icon>
|
||||
<IconCalendar :size="20" />
|
||||
<IconCalendarBlankOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Meeting conversations') }}
|
||||
</NcActionButton>
|
||||
@ -76,7 +76,7 @@
|
||||
class="filter-actions__clearbutton"
|
||||
@click="handleFilter(null)">
|
||||
<template #icon>
|
||||
<FilterRemoveIcon :size="20" />
|
||||
<IconFilterRemoveOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Clear filters') }}
|
||||
</NcActionButton>
|
||||
@ -89,13 +89,13 @@
|
||||
class="actions"
|
||||
:class="{ 'hidden-visually': isSearching }">
|
||||
<template #icon>
|
||||
<ChatPlus :size="20" />
|
||||
<IconChatPlusOutline :size="20" />
|
||||
</template>
|
||||
<NcActionButton v-if="canStartConversations"
|
||||
close-after-click
|
||||
@click="showModalNewConversation">
|
||||
<template #icon>
|
||||
<Plus :size="20" />
|
||||
<IconPlus :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Create a new conversation') }}
|
||||
</NcActionButton>
|
||||
@ -104,7 +104,7 @@
|
||||
close-after-click
|
||||
@click="restoreNoteToSelfConversation">
|
||||
<template #icon>
|
||||
<Note :size="20" />
|
||||
<IconNoteEditOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'New personal note') }}
|
||||
</NcActionButton>
|
||||
@ -112,7 +112,7 @@
|
||||
<NcActionButton close-after-click
|
||||
@click="showModalListConversations">
|
||||
<template #icon>
|
||||
<List :size="20" />
|
||||
<IconFormatListBulleted :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Join open conversations') }}
|
||||
</NcActionButton>
|
||||
@ -121,7 +121,7 @@
|
||||
close-after-click
|
||||
@click="showModalCallPhoneDialog">
|
||||
<template #icon>
|
||||
<Phone :size="20" />
|
||||
<IconPhoneOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Call a phone number') }}
|
||||
</NcActionButton>
|
||||
@ -154,7 +154,7 @@
|
||||
:name="t('spreed', 'Pending invitations')"
|
||||
@click="showInvitationHandler">
|
||||
<template #icon>
|
||||
<AccountMultiplePlus :size="20" />
|
||||
<IconAccountMultiplePlusOutline :size="20" />
|
||||
</template>
|
||||
<template #counter>
|
||||
<NcCounterBubble type="highlighted" :count="pendingInvitationsCount" />
|
||||
@ -169,15 +169,15 @@
|
||||
:name="emptyContentLabel"
|
||||
:description="emptyContentDescription">
|
||||
<template #icon>
|
||||
<AtIcon v-if="filters.length === 1 && filters[0] === 'mentions'" :size="64" />
|
||||
<MessageBadge v-else-if="filters.length === 1 && filters[0] === 'unread'" :size="64" />
|
||||
<IconArchive v-else-if="showArchived" :size="64" />
|
||||
<MessageOutline v-else :size="64" />
|
||||
<IconAt v-if="filters.length === 1 && filters[0] === 'mentions'" :size="64" />
|
||||
<IconMessageBadgeOutline v-else-if="filters.length === 1 && filters[0] === 'unread'" :size="64" />
|
||||
<IconArchiveOutline v-else-if="showArchived" :size="64" />
|
||||
<IconMessageOutline v-else :size="64" />
|
||||
</template>
|
||||
<template #action>
|
||||
<NcButton v-if="isFiltered" @click="handleFilter(null)">
|
||||
<template #icon>
|
||||
<FilterRemoveIcon :size="20" />
|
||||
<IconFilterRemoveOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Clear filter') }}
|
||||
</NcButton>
|
||||
@ -229,7 +229,7 @@
|
||||
wide
|
||||
@click="showArchived = true">
|
||||
<template #icon>
|
||||
<IconArchive :size="20" />
|
||||
<IconArchiveOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Archived conversations') }}
|
||||
<span v-if="showArchivedConversationsBubble" class="left-sidebar__settings-button-bubble">
|
||||
@ -240,7 +240,7 @@
|
||||
|
||||
<NcButton variant="tertiary" wide @click="showSettings">
|
||||
<template #icon>
|
||||
<Cog :size="20" />
|
||||
<IconCogOutline :size="20" />
|
||||
</template>
|
||||
{{ t('spreed', 'Talk settings') }}
|
||||
</NcButton>
|
||||
@ -267,22 +267,22 @@ import NcButton from '@nextcloud/vue/components/NcButton'
|
||||
import NcChip from '@nextcloud/vue/components/NcChip'
|
||||
import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
|
||||
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
|
||||
import AccountMultiplePlus from 'vue-material-design-icons/AccountMultiplePlus.vue'
|
||||
import IconArchive from 'vue-material-design-icons/Archive.vue'
|
||||
import IconAccountMultiplePlusOutline from 'vue-material-design-icons/AccountMultiplePlusOutline.vue'
|
||||
import IconArchiveOutline from 'vue-material-design-icons/ArchiveOutline.vue'
|
||||
import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
|
||||
import AtIcon from 'vue-material-design-icons/At.vue'
|
||||
import IconCalendar from 'vue-material-design-icons/CalendarBlank.vue'
|
||||
import ChatPlus from 'vue-material-design-icons/ChatPlus.vue'
|
||||
import Cog from 'vue-material-design-icons/Cog.vue'
|
||||
import FilterIcon from 'vue-material-design-icons/Filter.vue'
|
||||
import FilterRemoveIcon from 'vue-material-design-icons/FilterRemove.vue'
|
||||
import List from 'vue-material-design-icons/FormatListBulleted.vue'
|
||||
import IconHome from 'vue-material-design-icons/Home.vue'
|
||||
import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
|
||||
import MessageOutline from 'vue-material-design-icons/MessageOutline.vue'
|
||||
import Note from 'vue-material-design-icons/NoteEditOutline.vue'
|
||||
import Phone from 'vue-material-design-icons/Phone.vue'
|
||||
import Plus from 'vue-material-design-icons/Plus.vue'
|
||||
import IconAt from 'vue-material-design-icons/At.vue'
|
||||
import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
|
||||
import IconChatPlusOutline from 'vue-material-design-icons/ChatPlusOutline.vue'
|
||||
import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
|
||||
import IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'
|
||||
import IconFilterRemoveOutline from 'vue-material-design-icons/FilterRemoveOutline.vue'
|
||||
import IconFormatListBulleted from 'vue-material-design-icons/FormatListBulleted.vue'
|
||||
import IconHomeOutline from 'vue-material-design-icons/HomeOutline.vue'
|
||||
import IconMessageBadgeOutline from 'vue-material-design-icons/MessageBadgeOutline.vue'
|
||||
import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
|
||||
import IconNoteEditOutline from 'vue-material-design-icons/NoteEditOutline.vue'
|
||||
import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
|
||||
import IconPlus from 'vue-material-design-icons/Plus.vue'
|
||||
import NewConversationDialog from '../NewConversationDialog/NewConversationDialog.vue'
|
||||
import SearchBox from '../UIShared/SearchBox.vue'
|
||||
import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
|
||||
@ -350,22 +350,22 @@ export default {
|
||||
ConversationsListVirtual,
|
||||
SearchConversationsResults,
|
||||
// Icons
|
||||
AccountMultiplePlus,
|
||||
AtIcon,
|
||||
MessageBadge,
|
||||
MessageOutline,
|
||||
FilterIcon,
|
||||
FilterRemoveIcon,
|
||||
IconArchive,
|
||||
IconAccountMultiplePlusOutline,
|
||||
IconAt,
|
||||
IconMessageBadgeOutline,
|
||||
IconMessageOutline,
|
||||
IconFilterOutline,
|
||||
IconFilterRemoveOutline,
|
||||
IconArchiveOutline,
|
||||
IconArrowLeft,
|
||||
IconCalendar,
|
||||
IconHome,
|
||||
Phone,
|
||||
Plus,
|
||||
ChatPlus,
|
||||
Cog,
|
||||
List,
|
||||
Note,
|
||||
IconCalendarBlankOutline,
|
||||
IconHomeOutline,
|
||||
IconPhoneOutline,
|
||||
IconPlus,
|
||||
IconChatPlusOutline,
|
||||
IconCogOutline,
|
||||
IconFormatListBulleted,
|
||||
IconNoteEditOutline,
|
||||
NcEmptyContent,
|
||||
},
|
||||
|
||||
|
||||
@ -8,11 +8,11 @@ import type { ParticipantSearchResult, Conversation as TypeConversation } from '
|
||||
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { t } from '@nextcloud/l10n'
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { RecycleScroller } from 'vue-virtual-scroller'
|
||||
import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
|
||||
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 ConversationIcon from '../../ConversationIcon.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"
|
||||
@click="emit('create-new-conversation', searchText)">
|
||||
<template #icon>
|
||||
<IconChatPlus :size="iconSize" />
|
||||
<IconChatPlusOutline :size="iconSize" />
|
||||
</template>
|
||||
<template v-if="!isCompact" #subname>
|
||||
{{ t('spreed', 'New group conversation') }}
|
||||
|
||||
Reference in New Issue
Block a user