diff options
| -rw-r--r-- | css/ContactsList.scss | 35 | ||||
| -rw-r--r-- | css/contacts.scss | 1 | ||||
| -rw-r--r-- | src/components/ContactsList.vue | 5 | ||||
| -rw-r--r-- | src/views/Contacts.vue | 35 |
4 files changed, 72 insertions, 4 deletions
diff --git a/css/ContactsList.scss b/css/ContactsList.scss new file mode 100644 index 00000000..676d4c64 --- /dev/null +++ b/css/ContactsList.scss @@ -0,0 +1,35 @@ +/** + * @copyright Copyright (c) 2018 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/>. + * + */ + +#app-details-toggle { + position: fixed; + display: inline-block; + left: 0; + width: 44px; + height: 44px; + z-index: 149; + background-color: var(--color-main-background-darker); + cursor: pointer; + opacity: 0.6; + transform: rotate(180deg); + margin-top: 44px; // under the show navigation button +}
\ No newline at end of file diff --git a/css/contacts.scss b/css/contacts.scss index 886787e2..0b458fd4 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -44,6 +44,7 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; @import 'Settings/SettingsAddressbookSharee'; @import 'ContactDetails'; @import 'ContactDetailsAvatar'; +@import 'ContactsList'; @import 'ContactsListItem'; @import 'Properties/Properties'; @import 'Properties/PropertyTitle'; diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index d0af8c13..e433c410 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -21,7 +21,7 @@ --> <template> - <transition-group id="contacts-list" :class="{'icon-loading': loading}" class="app-content-list" + <transition-group id="contacts-list" :class="{'icon-loading': loading, showdetails: selectedContact}" class="app-content-list" name="list" tag="div"> <!-- same uid can coexists between different addressbooks so we need to use the addressbook id as key as well --> @@ -61,6 +61,9 @@ export default { }, computed: { + selectedContact() { + return this.$route.params.selectedContact + }, selectedGroup() { return this.$route.params.selectedGroup } diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue index 0facdf61..14ea091a 100644 --- a/src/views/Contacts.vue +++ b/src/views/Contacts.vue @@ -31,6 +31,10 @@ <!-- main content --> <div id="app-content"> + <!-- go back to list when in details mode --> + <div v-if="selectedContact" id="app-details-toggle" class="icon-confirm" + tabindex="0" @click="showList" /> + <div id="app-content-wrapper"> <!-- loading --> <import-screen v-if="importState.stage !== 'default'" /> @@ -114,6 +118,11 @@ export default { 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 @@ -195,11 +204,15 @@ export default { watch: { // watch url change and group select selectedGroup: function() { - this.selectFirstContactIfNone() + if (!this.isMobile) { + this.selectFirstContactIfNone() + } }, // watch url change and contact select selectedContact: function() { - this.selectFirstContactIfNone() + if (!this.isMobile) { + this.selectFirstContactIfNone() + } } }, @@ -289,7 +302,9 @@ export default { } })).then(results => { this.loading = false - this.selectFirstContactIfNone() + if (!this.isMobile) { + this.selectFirstContactIfNone() + } }) }, @@ -321,6 +336,20 @@ export default { }, resetSearch() { this.search('') + }, + + /** + * Show the list and deselect contact + */ + showList() { + // Reset the selected contact + this.$router.push({ + name: 'contact', + params: { + selectedGroup: this.selectedGroup, + selectedContact: undefined + } + }) } } } |