Skip to content

fix(Conversation): adjust design of icons #12915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ShGKme merged 4 commits into from
Aug 7, 2024
Merged

fix(Conversation): adjust design of icons #12915

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
29941d7
refactor(Conversation): rename imported icons to Icon*
ShGKme Aug 7, 2024
e65d781
fix(Conversation): make "Mark as read" icons filled
ShGKme Aug 7, 2024
4e6e357
fix(Conversation): use content-copy icon for copy
ShGKme Aug 7, 2024
38e8fb8
fix(Conversation): make all icons in menu 16px
ShGKme Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 32 additions & 24 deletions src/components/LeftSidebar/ConversationsList/Conversation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,26 +28,29 @@
close-after-click
@click="toggleFavoriteConversation">
<template #icon>
<Star :size="20" :fill-color="!item.isFavorite ? '#FFCC00' : undefined" />
<IconStar :size="16" :fill-color="!item.isFavorite ? '#FFCC00' : undefined" />
</template>
{{ labelFavorite }}
</NcActionButton>

<NcActionButton key="copy-link" icon="icon-clippy" @click.stop="handleCopyLink">
<NcActionButton key="copy-link" @click.stop="handleCopyLink">
<template #icon>
<IconContentCopy :size="16" />
</template>
{{ t('spreed', 'Copy link') }}
</NcActionButton>

<NcActionButton key="toggle-read" close-after-click @click="toggleReadConversation">
<template #icon>
<EyeOutline v-if="item.unreadMessages" :size="16" />
<EyeOffOutline v-else :size="16" />
<IconEye v-if="item.unreadMessages" :size="16" />
<IconEyeOff v-else :size="16" />
</template>
{{ labelRead }}
</NcActionButton>

<NcActionButton key="show-settings" close-after-click @click="showConversationSettings">
<template #icon>
<Cog :size="20" />
<IconCog :size="16" />
</template>
{{ t('spreed', 'Conversation settings') }}
</NcActionButton>
Expand All @@ -57,7 +60,7 @@
close-after-click
@click="leaveConversation">
<template #icon>
<ExitToApp :size="16" />
<IconExitToApp :size="16" />
</template>
{{ t('spreed', 'Leave conversation') }}
</NcActionButton>
Expand All @@ -68,7 +71,7 @@
class="critical"
@click="isDialogOpen = true">
<template #icon>
<Delete :size="16" />
<IconDelete :size="16" />
</template>
{{ t('spreed', 'Delete conversation') }}
</NcActionButton>
Expand All @@ -77,12 +80,15 @@
<template v-else-if="item.token" #actions>
<NcActionButton key="join-conversation" close-after-click @click="onActionClick">
<template #icon>
<ArrowRight :size="16" />
<IconArrowRight :size="16" />
</template>
{{ t('spreed', 'Join conversation') }}
</NcActionButton>

<NcActionButton key="copy-link" icon="icon-clippy" @click.stop="handleCopyLink">
<NcActionButton key="copy-link" @click.stop="handleCopyLink">
<template #icon>
<IconContentCopy :size="16" />
</template>
{{ t('spreed', 'Copy link') }}
</NcActionButton>
</template>
Expand Down Expand Up @@ -111,13 +117,14 @@
import { toRefs } from 'vue'
import { isNavigationFailure, NavigationFailureType } from 'vue-router'

import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
import Cog from 'vue-material-design-icons/Cog.vue'
import Delete from 'vue-material-design-icons/Delete.vue'
import ExitToApp from 'vue-material-design-icons/ExitToApp.vue'
import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
import Star from 'vue-material-design-icons/Star.vue'
import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
import IconCog from 'vue-material-design-icons/Cog.vue'
import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
import IconDelete from 'vue-material-design-icons/Delete.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 IconStar from 'vue-material-design-icons/Star.vue'

import { showError } from '@nextcloud/dialogs'
import { emit } from '@nextcloud/event-bus'
Expand All @@ -143,14 +150,15 @@ export default {
NcActionButton,
NcDialog,
NcListItem,
// Icons
ArrowRight,
Cog,
Delete,
ExitToApp,
EyeOffOutline,
EyeOutline,
Star,
IconArrowRight,
IconCog,
IconContentCopy,
IconDelete,
IconExitToApp,
IconEyeOff,
IconEye,
IconStar,

},

props: {
Expand Down