diff options
-rw-r--r-- | src/components/ProcessingScreen.vue | 57 | ||||
-rw-r--r-- | src/views/Processing/AddToGroupView.vue | 33 | ||||
-rw-r--r-- | src/views/Processing/ImportView.vue | 33 |
3 files changed, 61 insertions, 62 deletions
diff --git a/src/components/ProcessingScreen.vue b/src/components/ProcessingScreen.vue index fbb635ad..1581d5ee 100644 --- a/src/components/ProcessingScreen.vue +++ b/src/components/ProcessingScreen.vue @@ -1,18 +1,16 @@ <template> - <EmptyContent class="processing-screen__wrapper"> - <template #icon> - <IconContact :size="20" /> - </template> - <slot /> - <template #desc> - <div class="processing-screen__progress"> - <progress :max="total" :value="progress" /> - </div> - <div class="processing-screen__desc"> - <slot name="desc" /> - </div> - </template> - </EmptyContent> + <div> + <EmptyContent :description="desc" + :title="title" + class="processing-screen__wrapper"> + <template #icon> + <IconContact :size="20" /> + </template> + </EmptyContent> + <div class="processing-screen__progress"> + <progress :max="total" :value="progress" /> + </div> + </div> </template> <script> @@ -35,6 +33,14 @@ export default { type: Number, required: true, }, + desc: { + type: String, + required: true, + }, + title: { + type: String, + required: true, + }, }, } </script> @@ -58,28 +64,7 @@ export default { } &__progress { - display: flex; - width: 100%; - } - - &__desc { - display: inline-flex; - align-items: center; - width: 100%; - margin-top: 22px; - color: var(--color-text-maxcontrast); - - &::v-deep button { - min-width: 100px; - height: 44px; - padding: 10px 20px; - - // Put buttons at the end - &:first-of-type { - margin-left: auto; - } - } + padding: 0 12px; } } - </style> diff --git a/src/views/Processing/AddToGroupView.vue b/src/views/Processing/AddToGroupView.vue index a1965fc7..409bb706 100644 --- a/src/views/Processing/AddToGroupView.vue +++ b/src/views/Processing/AddToGroupView.vue @@ -21,29 +21,30 @@ --> <template> - <ProcessingScreen :progress="progress" :total="total"> - {{ total === progress - ? finishedHeader - : progressHeader }} - <template #desc> - <span v-if="failed > 0"> - {{ messageFailed }} - </span> - <button v-if="total === progress" class="primary" @click="onClose"> + <div> + <ProcessingScreen :progress="progress" + :total="total" + :desc="failed > 0 ? messageFailed : ''" + :title="total === progress + ? finishedHeader + : progressHeader" /> + <div class="close__button"> + <Button v-if="total === progress" class="primary" @click="onClose"> {{ t('contacts', 'Close') }} - </button> - </template> - </ProcessingScreen> + </Button> + </div> + </div> </template> <script> import ProcessingScreen from '../../components/ProcessingScreen' - +import Button from '@nextcloud/vue/dist/Components/NcButton' export default { name: 'AddToGroupView', components: { ProcessingScreen, + Button, }, props: { @@ -105,3 +106,9 @@ export default { }, } </script> +<style lang="scss" scoped> +.close__button { + padding: 12px; + float: right; +} +</style> diff --git a/src/views/Processing/ImportView.vue b/src/views/Processing/ImportView.vue index 1b412ebf..4b62bafc 100644 --- a/src/views/Processing/ImportView.vue +++ b/src/views/Processing/ImportView.vue @@ -21,29 +21,30 @@ --> <template> - <ProcessingScreen :progress="progress" :total="total"> - {{ total === progress - ? importedHeader - : importingHeader }} - <template #desc> - <span v-if="failed > 0"> - {{ importFailed }} - </span> - <button v-if="total === progress" class="primary" @click="onClose"> + <div> + <ProcessingScreen :progress="progress" + :total="total" + :desc="failed > 0 ? importFailed : ''" + :title="total === progress + ? importedHeader + : importingHeader" /> + <div class="close__button"> + <Button v-if="total === progress" class="primary" @click="onClose"> {{ t('contacts', 'Close') }} - </button> - </template> - </ProcessingScreen> + </Button> + </div> + </div> </template> <script> import ProcessingScreen from '../../components/ProcessingScreen' - +import Button from '@nextcloud/vue/dist/Components/NcButton' export default { name: 'ImportView', components: { ProcessingScreen, + Button, }, computed: { @@ -105,3 +106,9 @@ export default { }, } </script> +<style lang="scss" scoped> +.close__button { + padding: 12px; + float: right; +} +</style> |