Refactor modals

src/components/EditDate.vue

@@ -1,19 +1,19 @@
 <template>
-    <NcModal
+    <Modal
         v-if="photos.length > 0"
-        size="small"
+        @close="close">
-        @close="close"
-        :outTransition="true"
-        :hasNext="false"
-        :hasPrevious="false">
 
-        <div class="container">
+        <template #title>
-            <div class="head">
+            {{ t('memories', 'Edit Date/Time') }}
-                <span>{{ t('memories', 'Edit Date/Time') }}</span>
+        </template>
-            </div>
+
+        <template #buttons>
+            <NcButton @click="save" class="button" type="error" v-if="longDateStr">
+                {{ t('memories', 'Update Exif') }}
+            </NcButton>
+        </template>
 
         <div v-if="longDateStr">
-
             <span v-if="photos.length > 1">
                 [{{ t('memories', 'Newest') }}]
             </span>
@@ -88,12 +88,6 @@
                 {{ t('memories', 'This feature modifies files in your storage to update Exif data.') }}
                 {{ t('memories', 'Exercise caution and make sure you have backups.') }}
             </div>
-
-                <div class="buttons">
-                    <NcButton @click="save" class="button" type="error">
-                        {{ t('memories', 'Update Exif') }}
-                    </NcButton>
-                </div>
         </div>
 
         <div v-else>
@@ -102,8 +96,7 @@
                 m: photos.length,
             }) }}
         </div>
-        </div>
+    </Modal>
-    </NcModal>
 </template>
 
 <script lang="ts">
@@ -111,9 +104,10 @@ import { Component, Mixins } from 'vue-property-decorator';
 import GlobalMixin from '../mixins/GlobalMixin';
 import { IPhoto } from '../types';
 
-import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
+import Modal from './Modal.vue';
 import axios from '@nextcloud/axios'
 import * as utils from '../services/Utils';
 import * as dav from "../services/DavRequests";
@@ -124,8 +118,8 @@ const EDIT_API_URL = '/apps/memories/api/edit/{id}';
 @Component({
     components: {
         NcButton,
-        NcModal,
         NcTextField,
+        Modal,
     }
 })
 export default class EditDate extends Mixins(GlobalMixin) {
@@ -399,14 +393,6 @@ export default class EditDate extends Mixins(GlobalMixin) {
 </script>
 
 <style scoped lang="scss">
-.container {
-	margin: 20px;
-
-    .head {
-        font-weight: 500;
-    }
-}
-
 .fields {
     .field {
         width: 4.1em;
@@ -418,15 +404,6 @@ export default class EditDate extends Mixins(GlobalMixin) {
     margin-top: 10px;
 }
 
-.buttons {
-    margin-top: 10px;
-    text-align: right;
-
-    button {
-        display: inline-block;
-    }
-}
-
 .info-pad {
     margin-top: 6px;
     margin-bottom: 2px;

src/components/FaceDeleteModal.vue

@@ -1,37 +1,32 @@
 <template>
-    <NcModal
+    <Modal @close="close">
-        size="small"
+        <template #title>
-        @close="close"
+            {{ t('memories', 'Remove person') }}
-        :outTransition="true">
+        </template>
-
-        <div class="container">
-            <div class="head">
-                <span>{{ t('memories', 'Remove person') }}</span>
-            </div>
 
         <span>{{ t('memories', 'Are you sure you want to remove {name}', { name }) }}</span>
 
-            <div class="buttons">
+        <template #buttons>
             <NcButton @click="save" class="button" type="error">
                 {{ t('memories', 'Delete') }}
             </NcButton>
-            </div>
+        </template>
-        </div>
+    </Modal>
-    </NcModal>
 </template>
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
+import Modal from './Modal.vue';
 import GlobalMixin from '../mixins/GlobalMixin';
 import client from '../services/DavClient';
 
 @Component({
     components: {
         NcButton,
-        NcModal,
         NcTextField,
+        Modal,
     }
 })
 export default class FaceDeleteModal extends Mixins(GlobalMixin) {
@@ -70,22 +65,3 @@ export default class FaceDeleteModal extends Mixins(GlobalMixin) {
     }
 }
 </script>
-
-<style scoped lang="scss">
-.container {
-	margin: 20px;
-
-    .head {
-        font-weight: 500;
-    }
-}
-
-.buttons {
-    margin-top: 10px;
-    text-align: right;
-
-    button {
-        display: inline-block;
-    }
-}
-</style>

src/components/FaceEditModal.vue

@@ -1,43 +1,38 @@
 <template>
-    <NcModal
+    <Modal @close="close">
-        size="small"
+        <template #title>
-        @close="close"
+            {{ t('memories', 'Rename person') }}
-        :outTransition="true">
+        </template>
 
-        <div class="container">
+        <div class="fields">
-            <div class="head">
-                <span>{{ t('memories', 'Rename person') }}</span>
-            </div>
-
-            <div class="fields memories__editdate__fields">
             <NcTextField :value.sync="name"
                 class="field"
-                    :label="t('memories', 'Name')" :label-visible="true"
+                :label="t('memories', 'Name')" :label-visible="false"
                 :placeholder="t('memories', 'Name')"
                 @keypress.enter="save()" />
         </div>
 
-            <div class="buttons">
+        <template #buttons>
             <NcButton @click="save" class="button" type="primary">
                 {{ t('memories', 'Update') }}
             </NcButton>
-            </div>
+        </template>
-        </div>
+    </Modal>
-    </NcModal>
 </template>
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
+import Modal from './Modal.vue';
 import GlobalMixin from '../mixins/GlobalMixin';
 import client from '../services/DavClient';
 
 @Component({
     components: {
         NcButton,
-        NcModal,
         NcTextField,
+        Modal,
     }
 })
 export default class FaceEditModal extends Mixins(GlobalMixin) {
@@ -83,21 +78,8 @@ export default class FaceEditModal extends Mixins(GlobalMixin) {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-.container {
+.fields {
-	margin: 20px;
+    margin-top: 8px;
-
-    .head {
-        font-weight: 500;
-    }
-}
-
-.buttons {
-    margin-top: 10px;
-    text-align: right;
-
-    button {
-        display: inline-block;
-    }
 }
 </style>

src/components/Modal.vue

@@ -0,0 +1,52 @@
+<template>
+    <NcModal
+        size="small"
+        @close="$emit('close')"
+        :outTransition="true">
+        <div class="container">
+            <div class="head">
+                <span> <slot name="title"></slot> </span>
+            </div>
+
+            <slot></slot>
+
+            <div class="memories__modal__buttons">
+                <slot name="buttons"></slot>
+            </div>
+        </div>
+    </NcModal>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { NcModal } from '@nextcloud/vue';
+
+@Component({
+    components: {
+        NcModal,
+    }
+})
+export default class Modal extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	margin: 20px;
+
+    .head {
+        font-weight: 500;
+    }
+}
+</style>
+
+<style lang="scss">
+.memories__modal__buttons {
+    margin-top: 10px;
+    text-align: right;
+
+    > button {
+        display: inline-block !important;
+    }
+}
+</style>