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-18 12:50:20 +0200 |
commit | 6539c328c29f9e865c4873d774a765490e8bad4f (patch) | |
tree | eb594b1c50943ee1c417ea3250181fc09d84d20f /src/components/AppContent | |
parent | 33c4413ddf98cfe4e436e8c64dbc698b440d9069 (diff) |
Comply to new resizeable list feature
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src/components/AppContent')
-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 |
3 files changed, 108 insertions, 158 deletions
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> - </EmptyContent> - </div> - - <div v-else-if="isEmptyGroup && isRealGroup"> - <EmptyContent icon="icon-contacts-dark"> - {{ t('contacts', 'There are no contacts in this group') }} - <template #desc> - <button v-if="contacts.length === 0" class="primary" @click="addContactsToGroup(selectedGroup)"> - {{ t('contacts', 'Create contacts') }} - </button> - <button v-else class="primary" @click="addContactsToGroup(selectedGroup)"> - {{ t('contacts', 'Add contacts') }} - </button> - </template> - </EmptyContent> - </div> - - <div v-else id="app-content-wrapper"> - <!-- contacts list --> + <AppContent v-if="loading"> + <EmptyContent icon="icon-loading"> + {{ t('contacts', 'Loading contacts …') }} + </EmptyContent> + </AppContent> + + <AppContent 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> + </EmptyContent> + </AppContent> + + <AppContent v-else-if="isEmptyGroup && isRealGroup"> + <EmptyContent icon="icon-contacts-dark"> + {{ t('contacts', 'There are no contacts in this group') }} + <template #desc> + <button v-if="contacts.length === 0" class="primary" @click="addContactsToGroup(selectedGroup)"> + {{ t('contacts', 'Create contacts') }} + </button> + <button v-else class="primary" @click="addContactsToGroup(selectedGroup)"> + {{ t('contacts', 'Add contacts') }} + </button> + </template> + </EmptyContent> + </AppContent> + + <AppContent v-else :show-details="showDetails" @update:showDetails="hideDetails"> + <!-- contacts list --> + <template #list> <ContactsList :list="contactsList" :contacts="contacts" :search-query="searchQuery" /> + </template> - <!-- main contacts details --> - <ContactDetails :contact-key="selectedContact" /> - </div> + <!-- main contacts details --> + <ContactDetails :contact-key="selectedContact" /> </AppContent> </template> <script> @@ -116,6 +116,10 @@ export default { return this.$store.getters.getSortedContacts }, + selectedContact() { + return this.$route.params.selectedContact + }, + /** * Is this a real group ? * Aka not a dynamically generated one like `All contacts` @@ -131,6 +135,10 @@ export default { isEmptyGroup() { return this.contactsList.length === 0 }, + + showDetails() { + return !!this.selectedContact + }, }, methods: { @@ -148,6 +156,19 @@ export default { newContact() { this.$emit('newContact') }, + + /** + * Show the list and deselect contact + */ + hideDetails() { + // Reset the selected contact + this.$router.push({ + name: 'group', + params: { + selectedGroup: this.selectedGroup + }, + }) + }, }, } </script> |