diff options
Diffstat (limited to 'apps/files/src/components/TemplateFiller.vue')
| -rw-r--r-- | apps/files/src/components/TemplateFiller.vue | 63 |
1 files changed, 53 insertions, 10 deletions
diff --git a/apps/files/src/components/TemplateFiller.vue b/apps/files/src/components/TemplateFiller.vue index 6f0988d0dc9..80902a4afff 100644 --- a/apps/files/src/components/TemplateFiller.vue +++ b/apps/files/src/components/TemplateFiller.vue @@ -4,33 +4,76 @@ --> <template> - <NcDialog name="Fill Template"> - {{ fields }} - </NcDialog> + <NcModal> + <div class="template-field-modal__content"> + <form @submit.prevent.stop="onSubmit"> + <h3>{{ t('files', 'Fill template fields') }}</h3> + + <!-- break these out into template field components --> + </form> + </div> + + <div class="template-field-modal__buttons"> + <NcButton aria-label="Submit button" + type="primary"> + {{ t('files', 'Submit') }} + </NcButton> + </div> + </NcModal> </template> <script lang="ts"> import { defineComponent } from 'vue' -import { NcDialog } from '@nextcloud/vue' +import { NcModal, NcButton } from '@nextcloud/vue' +import { translate as t } from '@nextcloud/l10n' export default defineComponent({ name: 'TemplateFiller', components: { - NcDialog, + NcModal, + NcButton, }, props: { fields: { type: Array, - default: [], + default: () => [], }, }, - methods: {}, + data() { + return { + someText: '', + } + }, + + methods: { + t, + onSubmit() {}, + }, }) </script> -<style scoped> - -</style>
\ No newline at end of file +<style lang="scss" scoped> +$modal-margin: calc(var(--default-grid-baseline) * 6); + +.template-field-modal__content { + padding: $modal-margin; + + & h3 { + text-align: center; + } +} + +.template-field-modal__field { + margin: calc(var(--default-grid-baseline) * 4) 0; +} + +.template-field-modal__buttons { + display: flex; + justify-content: flex-end; + margin: $modal-margin; + margin-top: 0; +} +</style> |