diff options
| -rw-r--r-- | css/icons.scss | 10 | ||||
| -rw-r--r-- | src/components/ConversationIcon.vue | 28 | ||||
| -rw-r--r-- | src/components/LeftSidebar/ConversationsList/Conversation.vue | 14 |
3 files changed, 27 insertions, 25 deletions
diff --git a/css/icons.scss b/css/icons.scss index 0b6f932d1..a396d348c 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -55,16 +55,6 @@ background-image: url(icon-color-path('toggle-pictures', 'actions', 'fff', 1, true)); } } - - .icon-favorite { - /* Show favorite icon in yellow instead of default black. */ - @include icon-color('star-dark', 'actions', 'FC0', 1, true); - } - - .icon-active-call { - /* Show red camera icon for ongoing calls. */ - @include icon-color('video', 'actions', 'E9322D', 1, true); - } } // The atwho panel is a direct child of the body, so it is not affected by diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue index c7fe753cf..32d6ae993 100644 --- a/src/components/ConversationIcon.vue +++ b/src/components/ConversationIcon.vue @@ -37,12 +37,18 @@ class="conversation-icon__avatar" /> <div v-if="showCall" class="overlap-icon"> - <span class="icon icon-active-call" /> + <Video decorative + :size="20" + :fill-color="'#E9322D'" + title="" /> <span class="hidden-visually">{{ t('spreed', 'Call in progress') }}</span> </div> <div v-else-if="showFavorite" class="overlap-icon"> - <span class="icon icon-favorite" /> + <Star decorative + :size="20" + :fill-color="'#FFCC00'" + title="" /> <span class="hidden-visually">{{ t('spreed', 'Favorite') }}</span> </div> </div> @@ -50,12 +56,16 @@ <script> import Avatar from '@nextcloud/vue/dist/Components/Avatar' +import Star from 'vue-material-design-icons/Star' +import Video from 'vue-material-design-icons/Video' import { CONVERSATION } from '../constants.js' export default { name: 'ConversationIcon', components: { Avatar, + Star, + Video, }, props: { /** @@ -175,18 +185,8 @@ $icon-size: 44px; top: 0; left: calc(#{$icon-size} - 12px); line-height: 100%; - - .icon-favorite { - display: inline-block; - vertical-align: middle; - background-image: var(--icon-star-dark-FC0); - } - - .icon-active-call { - display: inline-block; - vertical-align: middle; - background-image: var(--icon-video-E9322D); - } + display: inline-block; + vertical-align: middle; } } diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue index f4eded55e..58207b16f 100644 --- a/src/components/LeftSidebar/ConversationsList/Conversation.vue +++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue @@ -45,8 +45,18 @@ </template> <template v-if="!isSearchResult" slot="actions"> <ActionButton v-if="canFavorite" - :icon="iconFavorite" @click.prevent.exact="toggleFavoriteConversation"> + <Star v-if="item.isFavorite" + slot="icon" + decorative + :size="20" + title="" /> + <Star v-else + slot="icon" + decorative + :size="20" + :fill-color="'#FFCC00'" + title="" /> {{ labelFavorite }} </ActionButton> <ActionButton icon="icon-clippy" @@ -93,6 +103,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import Delete from 'vue-material-design-icons/Delete' import EyeOutline from 'vue-material-design-icons/EyeOutline' +import Star from 'vue-material-design-icons/Star' import ConversationIcon from './../../ConversationIcon.vue' import { generateUrl } from '@nextcloud/router' import { emit } from '@nextcloud/event-bus' @@ -107,6 +118,7 @@ export default { ConversationIcon, Delete, EyeOutline, + Star, }, props: { isSearchResult: { |