From a13e4b664d1a55392f193450e17dbd10c763297e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 12 Aug 2019 11:43:51 +0200
Subject: [PATCH] Fix styling of the share tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/SharingTabSidebard.vue | 36 ++++++++++++++-------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/board/SharingTabSidebard.vue b/src/components/board/SharingTabSidebard.vue
index b9c56683a..a56601074 100644
--- a/src/components/board/SharingTabSidebard.vue
+++ b/src/components/board/SharingTabSidebard.vue
@@ -23,16 +23,14 @@
 					{{ acl.participant.displayname }}
 				</span>
 
-				<input :checked="acl.permissionEdit" type="checkbox" @click="clickEditAcl(acl)">
-				<label for="checkbox">{{ t('deck', 'Edit') }}</label>
-
-				<input :checked="acl.permissionShare" type="checkbox" @click="clickShareAcl(acl)">
-				<label for="checkbox">{{ t('deck', 'Share') }}</label>
-
-				<input :checked="acl.permissionManage" type="checkbox" @click="clickManageAcl(acl)">
-				<label for="checkbox">{{ t('deck', 'Manage') }}</label>
-
-				<button v-tooltip="t('deck', 'Delete')" class="icon-delete" @click="clickDeleteAcl(acl)" />
+				<Actions>
+					<ActionCheckbox :checked="acl.permissionEdit" @change="clickEditAcl(acl)">{{ t('deck', 'Can edit') }}</ActionCheckbox>
+				</Actions>
+				<Actions>
+					<ActionCheckbox :checked="acl.permissionShare" @change="clickShareAcl(acl)">{{ t('deck', 'Can share') }}</ActionCheckbox>
+					<ActionCheckbox :checked="acl.permissionManage" @change="clickManageAcl(acl)">{{ t('deck', 'Can manage') }}</ActionCheckbox>
+					<ActionButton icon="icon-delete" @click="clickDeleteAcl(acl)">{{ t('deck', 'Delete') }}</ActionButton>
+				</Actions>
 			</li>
 		</ul>
 
@@ -42,7 +40,7 @@
 </template>
 
 <script>
-import { Avatar, Multiselect } from 'nextcloud-vue'
+import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from 'nextcloud-vue'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters } from 'vuex'
 
@@ -50,6 +48,9 @@ export default {
 	name: 'SharingTabSidebard',
 	components: {
 		Avatar,
+		Actions,
+		ActionButton,
+		ActionCheckbox,
 		Multiselect,
 		CollectionList
 	},
@@ -116,3 +117,16 @@ export default {
 	}
 }
 </script>
+<style scoped>
+	#shareWithList {
+		margin-bottom: 20px;
+	}
+	#shareWithList li {
+		display: flex;
+		align-items: center;
+	}
+	.username {
+		padding: 12px 9px;
+		flex-grow: 1;
+	}
+</style>