Also show avatar in sharee list

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

css/src/Calendars/CalendarShares.scss

@@ -23,40 +23,49 @@
  */
 
 .calendar-shares {
-	width: calc(100% - 6px);
-	margin: 6px;
-	&__list {
-		margin-top: 8px;
-		margin-bottom: 12px;
-		display: flex;
-		flex-direction: column;
-	}
-
 	&__shareematch--bold {
 		font-weight: bold;
 	}
-
-	.icon-loading::after {
-		top: 70%;
-		left: 95%;
-		height: 14px;
-		width: 14px;
-	}
 
-	.multiselect {
-		width: inherit;
-		margin: 0;
-		.multiselect__tags:focus-within, 
-		.multiselect__tags:hover {
-			border-color: var(--color-primary-element);
+	.app-navigation-entry {
+		padding-left: 0 !important;
+
+		.avatar {
+			width: 32px;
+			height: 32px;
+			background-color: var(--color-border-dark);
+			background-size: 16px;
 		}
 
-		&:not(.showContent) .multiselect__content-wrapper {
-			display: none;
+		&__utils {
+			.action-checkbox__label {
+				padding-right: 0 !important;
+			}
+
+			.action-checkbox__label::before {
+				margin: 4px 4px 0 !important;
+			}
 		}
+
+		&__multiselect {
+			padding-left: 6px !important;
+
+			.multiselect {
+				width: calc(100% - 14px);
+				margin: 0;
+				.multiselect__tags:focus-within, 
+				.multiselect__tags:hover {
+					border-color: var(--color-primary-element);
+				}
+
+				&:not(.showContent) .multiselect__content-wrapper {
+					display: none;
+				}
 
-		.multiselect__content-wrapper {
-			z-index: 101 !important;
+				.multiselect__content-wrapper {
+					z-index: 101 !important;
+				}
+			}
 		}
 	}
 }

css/tasks.scss

@@ -27,4 +27,3 @@
 
 @import './src/Calendars/Calendar.scss';
 @import './src/Calendars/CalendarShares.scss';
-@import './src/Calendars/CalendarSharee.scss';

src/components/AppNavigation/CalendarShare.vue

@@ -23,23 +23,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="calendar-shares">
-		<Multiselect
-			id="users-groups-search"
-			:options="usersOrGroups"
-			:searchable="true"
-			:internal-search="false"
-			:max-height="600"
-			:show-no-results="true"
-			:placeholder="placeholder"
-			:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
-			:user-select="true"
-			open-direction="bottom"
-			track-by="user"
-			label="user"
-			@search-change="findSharee"
-			@input="shareCalendar" />
-		<!-- list of user or groups calendar is shared with -->
-		<ul v-if="calendar.shares.length > 0" class="calendar-shares__list">
+		<ul>
+			<li class="app-navigation-entry__multiselect">
+				<Multiselect
+					id="users-groups-search"
+					:options="usersOrGroups"
+					:searchable="true"
+					:internal-search="false"
+					:max-height="600"
+					:show-no-results="true"
+					:placeholder="placeholder"
+					:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
+					:user-select="true"
+					open-direction="bottom"
+					track-by="user"
+					label="user"
+					@search-change="findSharee"
+					@input="shareCalendar" />
+			</li>
+			<!-- list of user or groups calendar is shared with -->
 			<CalendarSharee v-for="sharee in calendar.shares"
 				:key="sharee.uri"
 				:sharee="sharee"

src/components/AppNavigation/CalendarSharee.vue

@@ -4,6 +4,9 @@
 @author Team Popcorn <teampopcornberlin@gmail.com>
 @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
 
+@copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>
+@author Georg Ehrke <oc.list@georgehrke.com>
+
 @license GNU AGPL version 3 or any later version
 
 This program is free software: you can redistribute it and/or modify
@@ -22,40 +25,48 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<li class="calendar-sharee">
-		<span :class="{
-				'icon-loading-small': loading,
-				'icon-group': sharee.isGroup && !loading,
-				'icon-user': !sharee.isGroup && !loading
-			}"
-			class="icon" />
-		<span class="calendar-sharee__identifier">
-			{{ sharee.displayName }}
-		</span>
-		<span class="calendar-sharee__utils">
-			<input
-				:id="uid"
-				:checked="writeable"
+	<AppNavigationItem
+		:title="sharee.displayName">
+		<template slot="icon">
+			<div v-if="sharee.isGroup" class="avatar icon-group" />
+			<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
+			<Avatar v-else :user="sharee.id" :display-name="sharee.displayName" :disableMenu="true" />
+		</template>
+
+		<template slot="counter">
+			<ActionCheckbox
 				:disabled="loading"
-				class="checkbox"
-				name="editable"
-				type="checkbox"
-				@change="editSharee">
-			<label :for="uid">
+				:checked="writeable"
+				@update:checked="editSharee">
 				{{ $t('tasks', 'can edit') }}
-			</label>
-			<a :class="{'calendar-sharee__utils--disabled': loading}"
-				href="#"
-				title="Delete"
-				class="icon-delete"
-				@click="deleteSharee" />
-		</span>
-	</li>
+			</ActionCheckbox>
+		</template>
+
+		<template slot="actions">
+			<ActionButton
+				icon="icon-delete"
+				:disabled="loading"
+				@click.prevent.stop="deleteSharee">
+				{{ $t('tasks', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
+			</ActionButton>
+		</template>
+	</AppNavigationItem>
 </template>
 
 <script>
+import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
+import { ActionCheckbox } from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import { AppNavigationItem } from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
+
 export default {
 	name: 'CalendarSharee',
+	components: {
+		ActionButton,
+		ActionCheckbox,
+		AppNavigationItem,
+		Avatar,
+	},
 	props: {
 		calendar: {
 			type: Object,