Merge pull request #2291 from nextcloud/feature/vuejs/conversations-icon

Fix the conversations icons

css/icons.scss

@@ -7,3 +7,24 @@
 @include icon-black-white('bell-outline', 'spreed', 1);
 @include icon-black-white('emoji-smile', 'spreed', 1);
 
+// We always want to use the white icons, this is why we don't use var(--color-white) here.
+.avatar.icon {
+  &.icon-public {
+    background-image: url(icon-color-path('public', 'actions', 'fff', 1, true));
+  }
+  &.icon-contacts {
+    background-image: url(icon-color-path('contacts', 'places', 'fff', 1, true));
+  }
+  &.icon-password {
+    background-image: url(icon-color-path('password', 'actions', 'fff', 1, true));
+  }
+  &.icon-file {
+    background-image: url(icon-color-path('text', 'filetypes', 'fff', 1, true));
+  }
+  &.icon-mail {
+    background-image: url(icon-color-path('mail', 'actions', 'fff', 1, true));
+  }
+  &.icon-changelog {
+    background-image: url('../img/changelog.svg');
+  }
+}

src/components/ConversationIcon.vue

@@ -0,0 +1,93 @@
+<!--
+  - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
+  -
+  - @author Joas Schilling <coding@schilljs.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div v-if="itemClass"
+		class="avatar icon" :class="itemClass" />
+	<Avatar v-else
+		:size="44"
+		:user="item.displayName"
+		:display-name="item.displayName" />
+</template>
+
+<script>
+import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+
+export default {
+	name: 'ConversationIcon',
+	components: {
+		Avatar
+	},
+	props: {
+		item: {
+			type: Object,
+			default: function() {
+				return {
+					objectType: '',
+					type: 0,
+					displayName: ''
+				}
+			}
+		}
+	},
+	computed: {
+		itemClass() {
+			if (this.item.objectType === 'file') {
+				return 'icon-file'
+			} else if (this.item.objectType === 'share:password') {
+				return 'icon-password'
+			} else if (this.item.type === 4) {
+				return 'icon-changelog'
+			} else if (this.item.type === 2) {
+				return 'icon-contacts'
+			} else if (this.item.type === 3) {
+				return 'icon-public'
+			}
+
+			return ''
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+.icon {
+	width: 44px;
+	height: 44px;
+	line-height: 44px;
+	font-size: 24px;
+	background-color: var(--color-background-darker);
+
+	&.icon-changelog {
+		background-size: 44px;
+	}
+	&.icon-public,
+	&.icon-contacts,
+	&.icon-password,
+	&.icon-file,
+	&.icon-mail {
+		background-size: 20px;
+	}
+
+}
+
+</style>

src/components/Navigation/ConversationsList/ConversationsList.vue

@@ -27,11 +27,9 @@
 			:to="{ name: 'conversation', params: { token: item.token }}"
 			:title="item.displayName"
 			@click.prevent.exact="joinConversation(item.token)">
-			<Avatar
+			<ConversationIcon
 				slot="icon"
-				:size="44"
-				:user="item.displayName"
-				:display-name="item.displayName" />
+				:item="item" />
 			<template slot="subtitle">
 				{{ item.lastMessage.message }}
 			</template>
@@ -58,7 +56,7 @@
 
 <script>
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import ConversationIcon from '../../ConversationIcon'
 import AppNavigationCounter from 'nextcloud-vue/dist/Components/AppNavigationCounter'
 import AppContentListItem from './AppContentListItem/AppContentListItem'
 import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
@@ -68,7 +66,7 @@ import { joinConversation, removeCurrentUserFromConversation } from '../../../se
 export default {
 	name: 'ConversationsList',
 	components: {
-		Avatar,
+		ConversationIcon,
 		AppNavigationCounter,
 		ActionButton,
 		AppContentListItem