From 8eebc6e950f1eb49ce5eb35558b5c2fa5fec9bc1 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 15:15:13 -0400
Subject: [PATCH] Fix permissions drawer

---
 app/src/components/v-drawer/v-drawer.vue       | 18 +++++++++++++++---
 app/src/modules/activity/routes/item.vue       | 14 ++++++++++----
 .../permissions-detail/permissions-detail.vue  | 12 ++++++++++--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index 436bb7f07f..1a5cb99bfd 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -5,7 +5,15 @@
 		</template>
 
 		<article class="v-drawer">
-			<v-button class="cancel" @click="$emit('cancel')" icon rounded secondary v-tooltip.bottom="$t('cancel')">
+			<v-button
+				v-if="showCancel"
+				class="cancel"
+				@click="$emit('cancel')"
+				icon
+				rounded
+				secondary
+				v-tooltip.bottom="$t('cancel')"
+			>
 				<v-icon name="close" />
 			</v-button>
 
@@ -80,7 +88,7 @@ export default defineComponent({
 			default: 'box',
 		},
 	},
-	setup(props, { emit }) {
+	setup(props, { emit, listeners }) {
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 
@@ -98,7 +106,11 @@ export default defineComponent({
 			},
 		});
 
-		return { sidebarActive, _active, mainEl };
+		const showCancel = computed(() => {
+			return listeners.hasOwnProperty('cancel');
+		});
+
+		return { sidebarActive, _active, mainEl, showCancel };
 	},
 });
 </script>
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index c87bb44235..dbe60c6285 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -2,13 +2,13 @@
 	<v-drawer active title="Activity Item" @toggle="close" @cancel="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
-		<template v-else-if="error">
+		<div class="content" v-else-if="error">
 			<v-notice type="danger">
 				{{ error }}
 			</v-notice>
-		</template>
+		</div>
 
-		<template v-else>
+		<div class="content" v-else>
 			<!-- @TODO add final design -->
 			<p class="type-label">User:</p>
 			<user-popover v-if="item.user" :user="item.user.id">
@@ -32,7 +32,7 @@
 
 			<p class="type-label">Item:</p>
 			<p>{{ item.item }}</p>
-		</template>
+		</div>
 
 		<template #actions>
 			<v-button v-if="openItemLink" :to="openItemLink" icon rounded v-tooltip.bottom="$t('open')">
@@ -138,4 +138,10 @@ export default defineComponent({
 .type-label:not(:first-child) {
 	margin-top: 24px;
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index ed631d1c00..8f88f260c2 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
@@ -4,12 +4,12 @@
 			<tabs :current-tab.sync="currentTab" :tabs="tabs" />
 		</template>
 
-		<template v-if="!loading">
+		<div class="content" v-if="!loading">
 			<permissions v-if="currentTab[0] === 'permissions'" :permission.sync="permission" :role="role" />
 			<fields v-if="currentTab[0] === 'fields'" :permission.sync="permission" :role="role" />
 			<validation v-if="currentTab[0] === 'validation'" :permission.sync="permission" :role="role" />
 			<presets v-if="currentTab[0] === 'presets'" :permission.sync="permission" :role="role" />
-		</template>
+		</div>
 
 		<template #actions v-if="!loading">
 			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
@@ -149,3 +149,11 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
+</style>