typos, css

Signed-off-by: Jakob <jakob.roehrl@web.de>

src/components/board/BoardSidebar.vue

@@ -27,11 +27,11 @@
 		@close="closeSidebar">
 
 		<AppSidebarTab :order="0" name="Sharing" icon="icon-shared">
-			<SharingTabSidebard :board="board" />
+			<SharingTabSidebar :board="board" />
 		</AppSidebarTab>
 
 		<AppSidebarTab :order="1" name="Tags" icon="icon-tag">
-			<TagsTabSidebard :board="board" />
+			<TagsTabSidebar :board="board" />
 		</AppSidebarTab>
 
 		<AppSidebarTab :order="2" name="Deleted items" icon="icon-delete">
@@ -39,7 +39,7 @@
 		</AppSidebarTab>
 
 		<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
-			<TimelineTabSidebard :board="board" />
+			<TimelineTabSidebar :board="board" />
 		</AppSidebarTab>
 
 	</app-sidebar>
@@ -47,10 +47,10 @@
 
 <script>
 import { mapState } from 'vuex'
-import SharingTabSidebard from './SharingTabSidebard'
+import SharingTabSidebar from './SharingTabSidebar'
-import TagsTabSidebard from './TagsTabSidebard'
+import TagsTabSidebar from './TagsTabSidebar'
 import DeletedTabSidebar from './DeletedTabSidebar'
-import TimelineTabSidebard from './TimelineTabSidebard'
+import TimelineTabSidebar from './TimelineTabSidebar'
 import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
 
 export default {
@@ -58,10 +58,10 @@ export default {
 	components: {
 		AppSidebar,
 		AppSidebarTab,
-		SharingTabSidebard,
+		SharingTabSidebar,
-		TagsTabSidebard,
+		TagsTabSidebar,
 		DeletedTabSidebar,
-		TimelineTabSidebard
+		TimelineTabSidebar
 	},
 	props: {
 		id: {

src/components/board/SharingTabSidebar.vue

@@ -21,10 +21,12 @@
 			</li>
 			<li v-for="acl in board.acl" :key="acl.participant.uid">
 				<avatar v-if="acl.type===0" :user="acl.participant.uid" />
-				<div v-if="acl.type===1" class="icon icon-group" />
+				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
-				<div v-if="acl.type===7" class="icon icon-circles" />
+				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
 				<span class="has-tooltip username">
 					{{ acl.participant.displayname }}
+					<span v-if="acl.type===1">{{ t('deck', '(Group)') }}</span>
+					<span v-if="acl.type===7">{{ t('deck', '(Circle)') }}</span>
 				</span>
 
 				<Actions>
@@ -49,7 +51,7 @@ import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters } from 'vuex'
 
 export default {
-	name: 'SharingTabSidebard',
+	name: 'SharingTabSidebar',
 	components: {
 		Avatar,
 		Actions,
@@ -162,4 +164,10 @@ export default {
 	.avatarLabel {
 		padding: 6px
 	}
+	.avatardiv {
+		background-color: #f5f5f5;
+		border-radius: 16px;
+		width: 32px;
+		height: 32px;
+	}
 </style>

src/components/board/TagsTabSidebar.vue

@@ -49,7 +49,7 @@ import { Compact } from 'vue-color'
 import ColorPicker from '../ColorPicker'
 
 export default {
-	name: 'TagsTabSidebard',
+	name: 'TagsTabSidebar',
 	components: {
 		ColorPicker,
 		'compact-picker': Compact

src/components/board/TimelineTabSidebar.vue

@@ -13,7 +13,7 @@ import { mapState } from 'vuex'
 import ActivityEntry from '../ActivityEntry'
 
 export default {
-	name: 'TimelineTabSidebard',
+	name: 'TimelineTabSidebar',
 	components: {
 		ActivityEntry
 	},