Add v-modal-heading component to enable standardized heaidngs

app/src/components/register.ts

@@ -30,6 +30,7 @@ import VList, {
 } from './v-list/';
 import VMenu from './v-menu/';
 import VModal from './v-modal/';
+import VModalHeading from './v-modal/v-modal-heading.vue';
 import VNotice from './v-notice/';
 import VOverlay from './v-overlay/';
 import VPagination from './v-pagination/';
@@ -80,6 +81,7 @@ Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
 Vue.component('v-modal', VModal);
+Vue.component('v-modal-heading', VModalHeading);
 Vue.component('v-notice', VNotice);
 Vue.component('v-overlay', VOverlay);
 Vue.component('v-pagination', VPagination);

app/src/components/v-modal/v-modal-heading.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="v-modal-heading">
+		<div class="type-title">{{ heading }}</div>
+		<div v-if="subheading" class="subheading">{{ subheading }}</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		heading: {
+			type: String,
+			required: true,
+		},
+		subheading: {
+			type: String,
+			default: null,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-modal-heading {
+	margin-bottom: 48px;
+
+	.subheading {
+		margin-top: 4px;
+		color: var(--foreground-subdued);
+	}
+}
+</style>

app/src/components/v-modal/v-modal.vue

@@ -25,10 +25,6 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
-					<div v-if="heading" class="heading">
-						<div class="type-title">{{ heading }}</div>
-						<div class="subheading">{{ subheading }}</div>
-					</div>
 					<slot />
 				</main>
 			</div>
@@ -74,14 +70,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		heading: {
-			type: String,
-			default: null,
-		},
-		subheading: {
-			type: String,
-			default: null,
-		},
 	},
 	setup(props, { emit }) {
 		const sidebarActive = ref(false);
@@ -201,15 +189,6 @@ body {
 			padding: 8px 16px;
 			overflow: auto;
 
-			.heading {
-				margin-bottom: 48px;
-
-				.subheading {
-					margin-top: 4px;
-					color: var(--foreground-subdued);
-				}
-			}
-
 			@include breakpoint(medium) {
 				padding: 32px;
 			}

app/src/lang/en-US/index.json

@@ -18,6 +18,10 @@
 
 	"nested_files_folders_will_be_moved": "Nested files and folders will be moved one level up.",
 
+	"revision_post_update": "Here is what this item looked like after the update...",
+	"changes_made": "These are the specific changes that were made...",
+	"no_relational_data": "Keep in mind that this does not include relational data.",
+
 	"uploaded_by": "Uploaded By",
 	"hide_field_on_detail": "Hide Field on Detail",
 	"show_field_on_detail": "Show Field on Detail",

app/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue

@@ -1,5 +1,13 @@
 <template>
-	<v-form disabled :collection="revision.collection" :primary-key="revision.item" :initial-values="revision.data" />
+	<div>
+		<v-modal-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
+		<v-form
+			disabled
+			:collection="revision.collection"
+			:primary-key="revision.item"
+			:initial-values="revision.data"
+		/>
+	</div>
 </template>
 
 <script lang="ts">

app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue

@@ -1,5 +1,7 @@
 <template>
 	<div class="updates">
+		<v-modal-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
+
 		<div class="change" v-for="change in changes" :key="change.name">
 			<div class="type-label">{{ change.name }}</div>
 			<revisions-modal-updates-change deleted :changes="change.changes" />

app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue

@@ -1,14 +1,10 @@
 <template>
 	<div>
-		<v-modal
-			v-model="_active"
-			:title="$t('item_revision')"
-			heading="Dynamic Based on Pane"
-			subheading="Dynamic Based on Pane"
-		>
+		<v-modal v-model="_active" :title="$t('item_revision')">
 			<template #subtitle>
 				<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
 			</template>
+
 			<template #sidebar>
 				<v-tabs vertical v-model="currentTab">
 					<v-tab v-for="tab in tabs" :key="tab.value" :value="tab.value">
@@ -33,6 +29,7 @@
 				<v-button @click="close">{{ $t('done') }}</v-button>
 			</template>
 		</v-modal>
+
 		<v-dialog v-model="confirmRevert" :persistent="reverting">
 			<v-card>
 				<v-card-title>{{ $t('confirm_revert') }}</v-card-title>