diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-26 09:22:57 +0100 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-26 09:52:55 +0100 |
commit | cb3c7a848f0573b448702f74276bdb0a292dd6f4 (patch) | |
tree | 65101ac7e0b6c91d1fefa26e3add46f8fa94ada4 | |
parent | 96b16c29158135158313c0a4575c1a6e29125e7b (diff) |
Do not close on import done and use modal for import
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | css/ImportScreen.scss | 7 | ||||
-rw-r--r-- | package-lock.json | 16 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/App.vue | 2 | ||||
-rw-r--r-- | src/components/ImportScreen.vue | 8 | ||||
-rw-r--r-- | src/main.js | 1 | ||||
-rw-r--r-- | src/store/addressbooks.js | 2 | ||||
-rw-r--r-- | src/store/importState.js | 4 | ||||
-rw-r--r-- | src/views/Contacts.vue | 53 |
9 files changed, 71 insertions, 24 deletions
diff --git a/css/ImportScreen.scss b/css/ImportScreen.scss index eeb3b11d..0ed09580 100644 --- a/css/ImportScreen.scss +++ b/css/ImportScreen.scss @@ -21,18 +21,21 @@ */ .import-screen { + margin: 50px; + width: auto; + min-width: 30vw; &__header { padding-top: 20px; } &__progress { - width: 50%; + width: 80%; min-width: 300px; margin: auto; } &__tracker { display: flex; justify-content: space-between; - width: 50%; + width: 80%; min-width: 300px; margin: auto; padding-top: 10px; diff --git a/package-lock.json b/package-lock.json index 28086c90..f7047e95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2258,7 +2258,7 @@ }, "cdav-library": { "version": "github:nextcloud/cdav-library#d77d03e55eeffd7c7b184d18685726bb74aad8e2", - "from": "github:nextcloud/cdav-library#d77d03e55eeffd7c7b184d18685726bb74aad8e2", + "from": "github:nextcloud/cdav-library", "requires": { "@babel/polyfill": "^7.4.0" } @@ -6026,9 +6026,9 @@ "dev": true }, "js-yaml": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", - "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.0.tgz", + "integrity": "sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -6946,9 +6946,9 @@ } }, "nextcloud-vue": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.9.3.tgz", - "integrity": "sha512-Z5i1oaDsyGz6JR50Q3uwftP12INMokIIcdx8PqjZgc6HpzX05CaJ6z8SqJsahscYZKRGpy4DCZT3ejrvZcxyWg==", + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.9.4.tgz", + "integrity": "sha512-sXqHs02kWHfoY5H1Hm7fZUWqFSvTSIebWp+Wvc8U0RImDsabcKfybqZ3/JUne/Sv2WzQrM99sPyoGpF80Z7ujQ==", "requires": { "hammerjs": "^2.0.8", "md5": "^2.2.1", @@ -9355,7 +9355,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, diff --git a/package.json b/package.json index 15ec9b25..085d7f55 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "ical.js": "^1.3.0", "moment": "^2.24.0", "nextcloud-server": "^0.15.9", - "nextcloud-vue": "^0.9.3", + "nextcloud-vue": "^0.9.4", "p-limit": "^2.2.0", "p-queue": "^4.0.0", "uuid": "^3.3.2", diff --git a/src/App.vue b/src/App.vue index a5d94527..06ab1b3e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,6 +26,6 @@ <script> export default { - name: 'App' + name: 'ContactsRoot' } </script> diff --git a/src/components/ImportScreen.vue b/src/components/ImportScreen.vue index 711e6836..6da8a09a 100644 --- a/src/components/ImportScreen.vue +++ b/src/components/ImportScreen.vue @@ -23,7 +23,10 @@ <template> <div class="emptycontent import-screen"> <p class="icon-upload" /> - <h3 class="import-screen__header"> + <h3 v-if="stage === 'done'" class="import-screen__header"> + {{ t('contacts', 'Done importing {total} contacts into', { total }) }} {{ addressbook }} + </h3> + <h3 v-else class="import-screen__header"> {{ t('contacts', 'Importing {total} contacts into', { total }) }} {{ addressbook }} </h3> <progress :max="total" :value="progress" class="import-screen__progress" /> @@ -54,6 +57,9 @@ export default { addressbook() { return this.importState.addressbook }, + stage() { + return this.importState.stage + }, total() { return this.importState.total }, diff --git a/src/main.js b/src/main.js index 53e1e9a9..bc6e37a3 100644 --- a/src/main.js +++ b/src/main.js @@ -72,6 +72,7 @@ if (window.location.pathname.split('/')[1] === 'index.php' export default new Vue({ el: '#content', + name: 'ContactsApp', router, store, render: h => h(App) diff --git a/src/store/addressbooks.js b/src/store/addressbooks.js index 8521c30c..264735f3 100644 --- a/src/store/addressbooks.js +++ b/src/store/addressbooks.js @@ -433,7 +433,7 @@ const actions = { }) Promise.all(requests).then(() => { - context.commit('changeStage', 'default') + context.commit('changeStage', 'done') }) }, diff --git a/src/store/importState.js b/src/store/importState.js index 98bb39a8..f969725e 100644 --- a/src/store/importState.js +++ b/src/store/importState.js @@ -73,7 +73,7 @@ const mutations = { * Change stage to the indicated one * * @param {Object} state the store data - * @param {string} stage the name of the stage ('default', 'importing', 'parsing') + * @param {string} stage the name of the stage ('default', 'importing', 'parsing', 'done') */ changeStage(state, stage) { state.importState.stage = stage @@ -139,7 +139,7 @@ const actions = { * and reset if the parsing starts * * @param {Object} context the store mutations - * @param {string} stage the name of the stage ('default', 'importing', 'parsing') + * @param {string} stage the name of the stage ('default', 'importing', 'parsing', 'done') */ changeStage(context, stage) { context.commit('changeStage', stage) diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue index 6e5b4a09..ce4ba79e 100644 --- a/src/views/Contacts.vue +++ b/src/views/Contacts.vue @@ -58,6 +58,10 @@ </template> </div> </template> + <modal v-if="isImporting" :clear-view-delay="-1" :can-close="isImportDone" + @close="closeImport"> + <import-screen /> + </modal> </app-content> </template> @@ -67,7 +71,8 @@ import { AppNavigation, AppNavigationItem, AppNavigationNew, - AppNavigationSettings + AppNavigationSettings, + Modal } from 'nextcloud-vue' import moment from 'moment' import download from 'downloadjs' @@ -98,7 +103,8 @@ export default { SettingsSection, ContactsList, ContactDetails, - ImportScreen + ImportScreen, + Modal }, // passed by the router @@ -117,7 +123,9 @@ export default { data() { return { loading: true, - searchQuery: '' + searchQuery: '', + // are we in mobile mode + isMobile: window.outerWidth <= 768 } }, @@ -142,16 +150,19 @@ export default { return this.$store.getters.getImportState }, + // importing states + isImporting() { + return this.importState.stage !== 'default' + }, + isImportDone() { + return this.importState.stage === 'done' + }, + // first enabled addressbook of the list defaultAddressbook() { return this.addressbooks.find(addressbook => !addressbook.readOnly && addressbook.enabled) }, - // are we in mobile mode - isMobile() { - return document.querySelector('body').offsetWidth < 768 - }, - /** * Contacts list based on the selected group. * Those filters are pretty fast, so let's only @@ -293,6 +304,12 @@ export default { this.$store.commit('setOrder', localStorage.getItem('orderKey')) } }) + + window.addEventListener('resize', this.onResize) + }, + + beforeDestroy() { + window.removeEventListener('resize', this.onResize) }, methods: { @@ -457,6 +474,26 @@ export default { selectedContact: undefined } }) + }, + + /** + * Done importing, the user closed the import status screen + */ + closeImport() { + // TODO: remove after https://github.com/nextcloud/nextcloud-vue/pull/323 + if (this.isImportDone) { + this.$store.dispatch('changeStage', 'default') + } + }, + + /** + * Trigerred when window is resized + * + * @param {Object} event the event + */ + onResize(event) { + // Update mobile mode + this.isMobile = window.outerWidth <= 768 } } } |