diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2021-06-02 10:03:58 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2021-06-10 10:49:55 +0200 |
commit | 55bce1fd2f03d0abc33f208f565769ba975d4fac (patch) | |
tree | 469f99adc5b3765a623e4d69a4b49eac90f88a2b | |
parent | ae4a51cbbc50897a4c9d83edc15387cc03193dbf (diff) |
Comply to new resizeable list featurefeat/resizeable-list
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | css/contacts.scss | 12 | ||||
-rw-r--r-- | package-lock.json | 50 | ||||
-rw-r--r-- | src/components/AppContent/AppDetailsToggle.vue | 70 | ||||
-rw-r--r-- | src/components/AppContent/CircleContent.vue | 101 | ||||
-rw-r--r-- | src/components/AppContent/ContactsContent.vue | 95 | ||||
-rw-r--r-- | src/components/ContactDetails.vue | 6 | ||||
-rw-r--r-- | src/views/Contacts.vue | 23 |
7 files changed, 131 insertions, 226 deletions
diff --git a/css/contacts.scss b/css/contacts.scss index 6d411add..0b690d55 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -25,7 +25,6 @@ $grid-height-unit: 40px; $grid-input-padding: 7px; $grid-input-margin: 3px; $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2; -$list-width: 300px; // components @import 'SettingsSection'; @@ -42,19 +41,18 @@ $list-width: 300px; // global design overrides -#app-content-wrapper { - display: flex; +.app-content { + // center error messages + & > .empty-content { + margin: 40vh; + } } .app-content-details { - // Starts shrinking at the same width as the list - flex: 1 1 $list-width; - min-width: 0; padding: 0 80px 80px 80px; } .app-content-list { - flex: 1 1 $list-width; // Cancel scrolling overflow: visible; diff --git a/package-lock.json b/package-lock.json index 723123ad..62cb763a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,17 +5,16 @@ "requires": true, "dependencies": { "@babel/cli": { - "version": "7.13.14", - "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.13.14.tgz", - "integrity": "sha512-zmEFV8WBRsW+mPQumO1/4b34QNALBVReaiHJOkxhUsdo/AvYM62c+SKSuLi2aZ42t3ocK6OI0uwUXRvrIbREZw==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.14.5.tgz", + "integrity": "sha512-poegjhRvXHWO0EAsnYajwYZuqcz7gyfxwfaecUESxDujrqOivf3zrjFbub8IJkrqEaz3fvJWh001EzxBub54fg==", "requires": { - "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents", + "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.2", "chokidar": "^3.4.0", "commander": "^4.0.1", "convert-source-map": "^1.1.0", "fs-readdir-recursive": "^1.1.0", "glob": "^7.0.0", - "lodash": "^4.17.19", "make-dir": "^2.1.0", "slash": "^2.0.0", "source-map": "^0.5.0" @@ -2074,15 +2073,15 @@ "dev": true }, "@nicolo-ribaudo/chokidar-2": { - "version": "2.1.8-no-fsevents", - "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.tgz", - "integrity": "sha512-+nb9vWloHNNMFHjGofEam3wopE3m1yuambrrd/fnPc+lFOMB9ROTqQlche9ByFWNkdNqfSgR/kkQtQ8DzEWt2w==", + "version": "2.1.8-no-fsevents.2", + "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.2.tgz", + "integrity": "sha512-Fb8WxUFOBQVl+CX4MWet5o7eCc6Pj04rXIwVKZ6h1NnqTo45eOQW6aWyhG25NIODvWFwTDMwBsYxrQ3imxpetg==", "optional": true, "requires": { "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "glob-parent": "^3.1.0", + "glob-parent": "^5.1.2", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", "is-glob": "^4.0.0", @@ -2329,16 +2328,15 @@ } }, "@vue/component-compiler-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz", - "integrity": "sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.1.tgz", + "integrity": "sha512-Mci9WJYLRjyJEBkGHMPxZ1ihJ9l6gOy2Gr6hpYZUNpQoe5+nbpeb3w00aP+PSHJygCF+fxJsqp7Af1zGDITzuw==", "dev": true, "requires": { "consolidate": "^0.15.1", "hash-sum": "^1.0.2", "lru-cache": "^4.1.2", "merge-source-map": "^1.1.0", - "postcss": "^7.0.14", "postcss-selector-parser": "^6.0.2", "prettier": "^1.18.2", "source-map": "~0.6.1", @@ -5671,24 +5669,12 @@ } }, "glob-parent": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", - "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "optional": true, "requires": { - "is-glob": "^3.1.0", - "path-dirname": "^1.0.0" - }, - "dependencies": { - "is-glob": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", - "optional": true, - "requires": { - "is-extglob": "^2.1.0" - } - } + "is-glob": "^4.0.1" } }, "glob-to-regexp": { @@ -7634,12 +7620,6 @@ "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", "dev": true }, - "path-dirname": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", - "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=", - "optional": true - }, "path-exists": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", diff --git a/src/components/AppContent/AppDetailsToggle.vue b/src/components/AppContent/AppDetailsToggle.vue deleted file mode 100644 index f9c86b60..00000000 --- a/src/components/AppContent/AppDetailsToggle.vue +++ /dev/null @@ -1,70 +0,0 @@ -<!-- - - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com> - - - - @author John Molakvoæ <skjnldsv@protonmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> - -<template> - <a v-tooltip="t('contacts', 'Go back to the list')" class="app-details-toggle icon-confirm" href="#" /> -</template> - -<script> -export default { - name: 'AppDetailsToggle', - - beforeMount() { - this.toggleAppNavigationButton(true) - }, - - beforeDestroy() { - this.toggleAppNavigationButton(false) - }, - - methods: { - toggleAppNavigationButton(hide = true) { - const appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle') - if (appNavigationToggle) { - appNavigationToggle.style.display = hide ? 'none' : null - } - }, - }, -} -</script> - -<style lang="scss" scoped> -.app-details-toggle { - position: absolute; - width: 44px; - height: 44px; - padding: 14px; - cursor: pointer; - opacity: .6; - font-size: 16px; - line-height: 17px; - transform: rotate(180deg); - background-color: var(--color-main-background); - z-index: 2000; - - &:active, - &:hover, - &:focus { - opacity: 1; - } -} -</style> diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue index 5a6c72f1..a0f1de97 100644 --- a/src/components/AppContent/CircleContent.vue +++ b/src/components/AppContent/CircleContent.vue @@ -21,55 +21,56 @@ --> <template> - <AppContent> - <div v-if="!circle"> - <EmptyContent icon="icon-circles"> - {{ t('contacts', 'Please select a circle') }} - </EmptyContent> - </div> - - <div v-else-if="loading"> - <EmptyContent icon="icon-loading"> - {{ t('contacts', 'Loading circle …') }} - </EmptyContent> - </div> - - <div v-else id="app-content-wrapper"> - <AppDetailsToggle v-if="isMobile && showDetails" @click.native.stop.prevent="hideDetails" /> - - <!-- member list --> - <MemberList :list="members" :loading="loadingList" :show-details.sync="showDetails" /> - - <!-- main contacts details --> - <CircleDetails :circle="circle"> - <!-- not a member --> - <template v-if="!circle.isMember"> - <!-- Join request in progress --> - <EmptyContent v-if="loadingJoin" icon="icon-loading"> - {{ t('contacts', 'Joining circle') }} - </EmptyContent> - - <!-- Pending request validation --> - <EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading"> - {{ t('contacts', 'Your request to join this circle is pending approval') }} - </EmptyContent> - - <EmptyContent v-else icon="icon-circles"> - {{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }} - - <!-- Only show the join button if the circle is accepting requests --> - <template v-if="circle.canJoin" #desc> - <button :disabled="loadingJoin" class="primary" @click="requestJoin"> - <Login slot="icon" - :size="16" - decorative /> - {{ t('contacts', 'Request to join') }} - </button> - </template> - </EmptyContent> - </template> - </CircleDetails> - </div> + <AppContent v-if="!circle"> + <EmptyContent icon="icon-circles"> + {{ t('contacts', 'Please select a circle') }} + </EmptyContent> + </AppContent> + + <AppContent v-else-if="loading"> + <EmptyContent icon="icon-loading"> + {{ t('contacts', 'Loading circle …') }} + </EmptyContent> + </AppContent> + + <AppContent v-else :show-details.sync="showDetails"> + <!-- member list --> + <template #list> + <MemberList + :list="members" + :loading="loadingList" + :show-details.sync="showDetails" /> + </template> + + <!-- main contacts details --> + <CircleDetails :circle="circle"> + <!-- not a member --> + <template v-if="!circle.isMember"> + <!-- Join request in progress --> + <EmptyContent v-if="loadingJoin" icon="icon-loading"> + {{ t('contacts', 'Joining circle') }} + </EmptyContent> + + <!-- Pending request validation --> + <EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading"> + {{ t('contacts', 'Your request to join this circle is pending approval') }} + </EmptyContent> + + <EmptyContent v-else icon="icon-circles"> + {{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }} + + <!-- Only show the join button if the circle is accepting requests --> + <template v-if="circle.canJoin" #desc> + <button :disabled="loadingJoin" class="primary" @click="requestJoin"> + <Login slot="icon" + :size="16" + decorative /> + {{ t('contacts', 'Request to join') }} + </button> + </template> + </EmptyContent> + </template> + </CircleDetails> </AppContent> </template> <script> @@ -79,7 +80,6 @@ import isMobile from '@nextcloud/vue/dist/Mixins/isMobile' import Login from 'vue-material-design-icons/Login' -import AppDetailsToggle from '../AppContent/AppDetailsToggle' import CircleDetails from '../CircleDetails' import MemberList from '../MemberList' import RouterMixin from '../../mixins/RouterMixin' @@ -91,7 +91,6 @@ export default { components: { AppContent, - AppDetailsToggle, CircleDetails, EmptyContent, Login, diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue index 779f84cf..2f1f23a9 100644 --- a/src/components/AppContent/ContactsContent.vue +++ b/src/components/AppContent/ContactsContent.vue @@ -21,48 +21,48 @@ --> <template> - <AppContent> - <div v-if="loading"> - <EmptyContent icon="icon-loading"> - {{ t('contacts', 'Loading contacts …') }} - </EmptyContent> - </div> - - <div v-else-if="isEmptyGroup && !isRealGroup"> - <EmptyContent icon="icon-contacts-dark"> - {{ t('contacts', 'There are no contacts yet') }} - <template #desc> - <button class="primary" @click="newContact"> - {{ t('contacts', 'Create contact') }} - </button> - </template> |