Fix styling of the share tab

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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>