RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor modals

cache
Varun Patil 2022-10-10 22:13:41 -07:00
parent f40eb78a18
commit d4d3017737
4 changed files with 161 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/EditDate.vue
View File

@ -1,109 +1,102 @@
<template> <template>
<NcModal <Modal
v-if="photos.length > 0" 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>
<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>
{{ longDateStr }}
<div class="fields memories__editdate__fields">
<NcTextField :value.sync="year"
class="field"
@input="newestChange()"
:label="t('memories', 'Year')" :label-visible="true"
:placeholder="t('memories', 'Year')" />
<NcTextField :value.sync="month"
class="field"
@input="newestChange()"
:label="t('memories', 'Month')" :label-visible="true"
:placeholder="t('memories', 'Month')" />
<NcTextField :value.sync="day"
class="field"
@input="newestChange()"
:label="t('memories', 'Day')" :label-visible="true"
:placeholder="t('memories', 'Day')" />
<NcTextField :value.sync="hour"
class="field"
@input="newestChange(true)"
:label="t('memories', 'Time')" :label-visible="true"
:placeholder="t('memories', 'Hour')" />
<NcTextField :value.sync="minute"
class="field"
@input="newestChange(true)"
:label="t('memories', 'Minute')"
:placeholder="t('memories', 'Minute')" />
</div> </div>
<div v-if="longDateStr"> <div v-if="photos.length > 1" class="oldest">
<span>
<span v-if="photos.length > 1"> [{{ t('memories', 'Oldest') }}]
[{{ t('memories', 'Newest') }}]
</span> </span>
{{ longDateStr }} {{ longDateStrLast }}
<div class="fields memories__editdate__fields"> <div class="fields memories__editdate__fields">
<NcTextField :value.sync="year" <NcTextField :value.sync="yearLast"
class="field" class="field"
@input="newestChange()"
:label="t('memories', 'Year')" :label-visible="true" :label="t('memories', 'Year')" :label-visible="true"
:placeholder="t('memories', 'Year')" /> :placeholder="t('memories', 'Year')" />
<NcTextField :value.sync="month" <NcTextField :value.sync="monthLast"
class="field" class="field"
@input="newestChange()"
:label="t('memories', 'Month')" :label-visible="true" :label="t('memories', 'Month')" :label-visible="true"
:placeholder="t('memories', 'Month')" /> :placeholder="t('memories', 'Month')" />
<NcTextField :value.sync="day" <NcTextField :value.sync="dayLast"
class="field" class="field"
@input="newestChange()"
:label="t('memories', 'Day')" :label-visible="true" :label="t('memories', 'Day')" :label-visible="true"
:placeholder="t('memories', 'Day')" /> :placeholder="t('memories', 'Day')" />
<NcTextField :value.sync="hour" <NcTextField :value.sync="hourLast"
class="field" class="field"
@input="newestChange(true)"
:label="t('memories', 'Time')" :label-visible="true" :label="t('memories', 'Time')" :label-visible="true"
:placeholder="t('memories', 'Hour')" /> :placeholder="t('memories', 'Hour')" />
<NcTextField :value.sync="minute" <NcTextField :value.sync="minuteLast"
class="field" class="field"
@input="newestChange(true)"
:label="t('memories', 'Minute')" :label="t('memories', 'Minute')"
:placeholder="t('memories', 'Minute')" /> :placeholder="t('memories', 'Minute')" />
</div> </div>
<div v-if="photos.length > 1" class="oldest">
<span>
[{{ t('memories', 'Oldest') }}]
</span>
{{ longDateStrLast }}
<div class="fields memories__editdate__fields">
<NcTextField :value.sync="yearLast"
class="field"
:label="t('memories', 'Year')" :label-visible="true"
:placeholder="t('memories', 'Year')" />
<NcTextField :value.sync="monthLast"
class="field"
:label="t('memories', 'Month')" :label-visible="true"
:placeholder="t('memories', 'Month')" />
<NcTextField :value.sync="dayLast"
class="field"
:label="t('memories', 'Day')" :label-visible="true"
:placeholder="t('memories', 'Day')" />
<NcTextField :value.sync="hourLast"
class="field"
:label="t('memories', 'Time')" :label-visible="true"
:placeholder="t('memories', 'Hour')" />
<NcTextField :value.sync="minuteLast"
class="field"
:label="t('memories', 'Minute')"
:placeholder="t('memories', 'Minute')" />
</div>
</div>
<div v-if="processing" class="info-pad">
{{ t('memories', 'Processing … {n}/{m}', {
n: photosDone,
m: photos.length,
}) }}
</div>
<div class="info-pad warn">
{{ 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>
<div v-else> <div v-if="processing" class="info-pad">
{{ t('memories', 'Loading data … {n}/{m}', { {{ t('memories', 'Processing … {n}/{m}', {
n: photosDone, n: photosDone,
m: photos.length, m: photos.length,
}) }} }) }}
</div> </div>
<div class="info-pad warn">
{{ 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> </div>
</NcModal>
<div v-else>
{{ t('memories', 'Loading data … {n}/{m}', {
n: photosDone,
m: photos.length,
}) }}
</div>
</Modal>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -111,9 +104,10 @@ import { Component, Mixins } from 'vue-property-decorator';
import GlobalMixin from '../mixins/GlobalMixin'; import GlobalMixin from '../mixins/GlobalMixin';
import { IPhoto } from '../types'; import { IPhoto } from '../types';
import { NcButton, NcModal, NcTextField } from '@nextcloud/vue'; import { NcButton, NcTextField } from '@nextcloud/vue';
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import Modal from './Modal.vue';
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import * as utils from '../services/Utils'; import * as utils from '../services/Utils';
import * as dav from "../services/DavRequests"; import * as dav from "../services/DavRequests";
@ -124,8 +118,8 @@ const EDIT_API_URL = '/apps/memories/api/edit/{id}';
@Component({ @Component({
components: { components: {
NcButton, NcButton,
NcModal,
NcTextField, NcTextField,
Modal,
} }
}) })
export default class EditDate extends Mixins(GlobalMixin) { export default class EditDate extends Mixins(GlobalMixin) {
@ -399,14 +393,6 @@ export default class EditDate extends Mixins(GlobalMixin) {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container {
margin: 20px;
.head {
font-weight: 500;
}
}
.fields { .fields {
.field { .field {
width: 4.1em; width: 4.1em;
@ -418,15 +404,6 @@ export default class EditDate extends Mixins(GlobalMixin) {
margin-top: 10px; margin-top: 10px;
} }
.buttons {
margin-top: 10px;
text-align: right;
button {
display: inline-block;
}
}
.info-pad { .info-pad {
margin-top: 6px; margin-top: 6px;
margin-bottom: 2px; margin-bottom: 2px;

54
src/components/FaceDeleteModal.vue
View File

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

64
src/components/FaceEditModal.vue
View File

@ -1,43 +1,38 @@
<template> <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"> <NcTextField :value.sync="name"
<span>{{ t('memories', 'Rename person') }}</span> class="field"
</div> :label="t('memories', 'Name')" :label-visible="false"
:placeholder="t('memories', 'Name')"
<div class="fields memories__editdate__fields"> @keypress.enter="save()" />
<NcTextField :value.sync="name"
class="field"
:label="t('memories', 'Name')" :label-visible="true"
:placeholder="t('memories', 'Name')"
@keypress.enter="save()" />
</div>
<div class="buttons">
<NcButton @click="save" class="button" type="primary">
{{ t('memories', 'Update') }}
</NcButton>
</div>
</div> </div>
</NcModal>
<template #buttons>
<NcButton @click="save" class="button" type="primary">
{{ t('memories', 'Update') }}
</NcButton>
</template>
</Modal>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Mixins, Watch } from 'vue-property-decorator'; 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 { showError } from '@nextcloud/dialogs'
import Modal from './Modal.vue';
import GlobalMixin from '../mixins/GlobalMixin'; import GlobalMixin from '../mixins/GlobalMixin';
import client from '../services/DavClient'; import client from '../services/DavClient';
@Component({ @Component({
components: { components: {
NcButton, NcButton,
NcModal,
NcTextField, NcTextField,
Modal,
} }
}) })
export default class FaceEditModal extends Mixins(GlobalMixin) { export default class FaceEditModal extends Mixins(GlobalMixin) {
@ -83,21 +78,8 @@ export default class FaceEditModal extends Mixins(GlobalMixin) {
} }
</script> </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> </style>

52
src/components/Modal.vue 100644
View File

@ -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>