diff options
Diffstat (limited to 'src/components/AppContent')
-rw-r--r-- | src/components/AppContent/AppDetailsToggle.vue | 70 | ||||
-rw-r--r-- | src/components/AppContent/CircleContent.vue | 15 |
2 files changed, 83 insertions, 2 deletions
diff --git a/src/components/AppContent/AppDetailsToggle.vue b/src/components/AppContent/AppDetailsToggle.vue new file mode 100644 index 00000000..f9c86b60 --- /dev/null +++ b/src/components/AppContent/AppDetailsToggle.vue @@ -0,0 +1,70 @@ +<!-- + - @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 f49f76cf..d5e22f15 100644 --- a/src/components/AppContent/CircleContent.vue +++ b/src/components/AppContent/CircleContent.vue @@ -35,8 +35,10 @@ </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" /> + <MemberList :list="members" :loading="loadingList" :show-details.sync="showDetails" /> <!-- main contacts details --> <CircleDetails :circle="circle"> @@ -73,9 +75,11 @@ <script> import AppContent from '@nextcloud/vue/dist/Components/AppContent' import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent' +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' @@ -87,13 +91,14 @@ export default { components: { AppContent, + AppDetailsToggle, CircleDetails, EmptyContent, Login, MemberList, }, - mixins: [RouterMixin], + mixins: [isMobile, RouterMixin], props: { loading: { @@ -106,6 +111,7 @@ export default { return { loadingJoin: false, loadingList: false, + showDetails: false, } }, @@ -168,6 +174,11 @@ export default { } }, + + // Hide the circle details + hideDetails() { + this.showDetails = false + }, }, } </script> |