From 2b1395b5fcb2d95d6a53d0dd28becd6b69f65c2c Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:46:52 -0400
Subject: [PATCH] Update drawer actions

---
 app/src/modules/activity/routes/item.vue      | 11 +++++-----
 .../components/file-info-sidebar-detail.vue   |  4 ++--
 .../field-detail/components/actions.vue       | 20 ++++++++++-------
 .../data-model/field-detail/field-detail.vue  |  2 +-
 .../routes/data-model/new-collection.vue      | 22 ++++++++++++-------
 .../permissions-detail/components/actions.vue |  4 +++-
 .../permissions-detail/permissions-detail.vue |  2 +-
 .../drawer-collection/drawer-collection.vue   |  7 +++---
 .../components/drawer-item/drawer-item.vue    |  7 +++---
 .../revisions-drawer.vue                      | 10 +++++----
 10 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index 68ac108d18..c87bb44235 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -34,13 +34,14 @@
 			<p>{{ item.item }}</p>
 		</template>
 
-		<template #footer>
-			<v-button v-if="openItemLink" :to="openItemLink">
-				<v-icon name="launch" left />
-				{{ $t('open') }}
+		<template #actions>
+			<v-button v-if="openItemLink" :to="openItemLink" icon rounded v-tooltip.bottom="$t('open')">
+				<v-icon name="launch" />
 			</v-button>
 
-			<v-button to="/activity">{{ $t('done') }}</v-button>
+			<v-button to="/activity" icon rounded v-tooltip.bottom="$t('done')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
diff --git a/app/src/modules/files/components/file-info-sidebar-detail.vue b/app/src/modules/files/components/file-info-sidebar-detail.vue
index 347c6255d8..36bbc48655 100644
--- a/app/src/modules/files/components/file-info-sidebar-detail.vue
+++ b/app/src/modules/files/components/file-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('file_details')" close>
+	<sidebar-detail icon="info_outline" :title="$t('file_details')" close>
 		<dl v-if="file">
 			<div v-if="file.type">
 				<dt>{{ $t('type') }}</dt>
@@ -104,7 +104,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_files_item'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue b/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
index 70638f2dff..d532e745ac 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
@@ -1,14 +1,18 @@
 <template>
 	<div class="actions">
-		<v-button secondary @click="$emit('cancel')">
-			{{ $t('cancel') }}
+		<v-button
+			v-if="!isExisting && currentTabIndex < tabs.length - 1"
+			@click="nextTab"
+			:disabled="nextDisabled"
+			icon
+			rounded
+			v-tooltip.bottom="$t('next')"
+		>
+			<v-icon name="arrow_forward" />
 		</v-button>
-		<div class="spacer" />
-		<v-button v-if="!isExisting && currentTabIndex < tabs.length - 1" @click="nextTab" :disabled="nextDisabled">
-			{{ $t('next') }}
-		</v-button>
-		<v-button v-else @click="$emit('save')" :loading="saving">
-			{{ $t('save') }}
+
+		<v-button v-else @click="$emit('save')" :loading="saving" icon rounded v-tooltip.bottom="$t('save')">
+			<v-icon name="check" />
 		</v-button>
 	</div>
 </template>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index e4f85d2e4e..86dff8c5b9 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -87,7 +87,7 @@
 			:type="localType"
 		/>
 
-		<template #footer>
+		<template #actions>
 			<setup-actions
 				:saving="saving"
 				:collection="collection"
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index dc99bac6e5..c8e05c5fc4 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -106,20 +106,26 @@
 			</v-tab-item>
 		</v-tabs-items>
 
-		<template #footer>
-			<v-button secondary to="/settings/data-model">
-				{{ $t('cancel') }}
-			</v-button>
-			<div class="spacer" />
+		<template #actions>
 			<v-button
 				:disabled="!collectionName || collectionName.length === 0"
 				v-if="currentTab[0] === 'collection'"
 				@click="currentTab = ['system']"
+				v-tooltip.bottom="$t('next')"
+				icon
+				rounded
 			>
-				{{ $t('next') }}
+				<v-icon name="arrow_forward" />
 			</v-button>
-			<v-button v-if="currentTab[0] === 'system'" @click="save" :loading="saving">
-				{{ $t('finish_setup') }}
+			<v-button
+				v-if="currentTab[0] === 'system'"
+				@click="save"
+				:loading="saving"
+				v-tooltip.bottom="$t('finish_setup')"
+				icon
+				rounded
+			>
+				<v-icon name="check" />
 			</v-button>
 		</template>
 	</v-drawer>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
index 0dd5aa45cc..e19b68bfde 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
@@ -1,6 +1,8 @@
 <template>
 	<div class="actions">
-		<v-button @click="save" :loading="loading">{{ $t('save') }}</v-button>
+		<v-button @click="save" :loading="loading" icon rounded v-tooltip.bottom="$t('save')">
+			<v-icon name="check" />
+		</v-button>
 	</div>
 </template>
 
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 d5de6f2c70..ed631d1c00 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
@@ -11,7 +11,7 @@
 			<presets v-if="currentTab[0] === 'presets'" :permission.sync="permission" :role="role" />
 		</template>
 
-		<template #footer v-if="!loading">
+		<template #actions v-if="!loading">
 			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
 		</template>
 	</v-drawer>
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
index aa6baa8fd9..32873a63c0 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -20,9 +20,10 @@
 			</template>
 		</component>
 
-		<template #footer>
-			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save">{{ $t('save') }}</v-button>
+		<template #actions>
+			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 9404e1616f..54177655a6 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -21,9 +21,10 @@
 			v-model="_edits"
 		/>
 
-		<template #footer>
-			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save">{{ $t('save') }}</v-button>
+		<template #actions>
+			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index dc20fb034f..71ffd81360 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -22,11 +22,13 @@
 				/>
 			</div>
 
-			<template #footer="{ close }">
-				<v-button @click="confirmRevert = true" class="revert">
-					{{ $t('revert') }}
+			<template #actions>
+				<v-button @click="confirmRevert = true" class="revert" icon rounded v-tooltip.bottom="$t('revert')">
+					<v-icon name="restore" />
+				</v-button>
+				<v-button @click="_active = false" icon rounded v-tooltip.bottom="$t('done')">
+					<v-icon name="check" />
 				</v-button>
-				<v-button @click="close">{{ $t('done') }}</v-button>
 			</template>
 		</v-drawer>