Close navigation on mobile on new form
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
This commit is contained in:
parent
6a52d83675
commit
749466923c
|
@ -28,6 +28,7 @@
|
||||||
<AppNavigationForm v-for="form in forms"
|
<AppNavigationForm v-for="form in forms"
|
||||||
:key="form.id"
|
:key="form.id"
|
||||||
:form="form"
|
:form="form"
|
||||||
|
@mobile-close-navigation="mobileCloseNavigation"
|
||||||
@delete="onDeleteForm" />
|
@delete="onDeleteForm" />
|
||||||
</AppNavigation>
|
</AppNavigation>
|
||||||
|
|
||||||
|
@ -66,6 +67,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { emit } from '@nextcloud/event-bus'
|
||||||
import { showError } from '@nextcloud/dialogs'
|
import { showError } from '@nextcloud/dialogs'
|
||||||
import { generateUrl } from '@nextcloud/router'
|
import { generateUrl } from '@nextcloud/router'
|
||||||
import axios from '@nextcloud/axios'
|
import axios from '@nextcloud/axios'
|
||||||
|
@ -74,6 +76,7 @@ import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
||||||
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
|
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
|
||||||
import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
|
import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
|
||||||
import Content from '@nextcloud/vue/dist/Components/Content'
|
import Content from '@nextcloud/vue/dist/Components/Content'
|
||||||
|
import isMobile from '@nextcloud/vue/src/mixins/isMobile'
|
||||||
|
|
||||||
import AppNavigationForm from './components/AppNavigationForm'
|
import AppNavigationForm from './components/AppNavigationForm'
|
||||||
import EmptyContent from './components/EmptyContent'
|
import EmptyContent from './components/EmptyContent'
|
||||||
|
@ -90,6 +93,8 @@ export default {
|
||||||
EmptyContent,
|
EmptyContent,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mixins: [isMobile],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: true,
|
loading: true,
|
||||||
|
@ -124,6 +129,15 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
/**
|
||||||
|
* Closes the App-Navigation on mobile-devices
|
||||||
|
*/
|
||||||
|
mobileCloseNavigation() {
|
||||||
|
if (this.isMobile) {
|
||||||
|
emit('toggle-navigation', { open: false })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initial forms load
|
* Initial forms load
|
||||||
*/
|
*/
|
||||||
|
@ -150,6 +164,7 @@ export default {
|
||||||
const newForm = response.data
|
const newForm = response.data
|
||||||
this.forms.push(newForm)
|
this.forms.push(newForm)
|
||||||
this.$router.push({ name: 'edit', params: { hash: newForm.hash } })
|
this.$router.push({ name: 'edit', params: { hash: newForm.hash } })
|
||||||
|
this.mobileCloseNavigation()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showError(t('forms', 'Unable to create a new form'))
|
showError(t('forms', 'Unable to create a new form'))
|
||||||
console.error(error)
|
console.error(error)
|
||||||
|
|
|
@ -26,7 +26,8 @@
|
||||||
:exact="true"
|
:exact="true"
|
||||||
:icon="icon"
|
:icon="icon"
|
||||||
:title="formTitle"
|
:title="formTitle"
|
||||||
:to="{ name: 'edit', params: { hash: form.hash } }">
|
:to="{ name: 'edit', params: { hash: form.hash } }"
|
||||||
|
@click="mobileCloseNavigation">
|
||||||
<template v-if="!loading" #actions>
|
<template v-if="!loading" #actions>
|
||||||
<ActionLink
|
<ActionLink
|
||||||
:href="formLink"
|
:href="formLink"
|
||||||
|
@ -38,7 +39,8 @@
|
||||||
<ActionRouter :close-after-click="true"
|
<ActionRouter :close-after-click="true"
|
||||||
:exact="true"
|
:exact="true"
|
||||||
icon="icon-comment"
|
icon="icon-comment"
|
||||||
:to="{ name: 'results', params: { hash: form.hash } }">
|
:to="{ name: 'results', params: { hash: form.hash } }"
|
||||||
|
@click="mobileCloseNavigation">
|
||||||
{{ t('forms', 'Responses') }}
|
{{ t('forms', 'Responses') }}
|
||||||
</ActionRouter>
|
</ActionRouter>
|
||||||
<!-- <ActionRouter :close-after-click="true"
|
<!-- <ActionRouter :close-after-click="true"
|
||||||
|
@ -158,6 +160,13 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
/**
|
||||||
|
* Closes the App-Navigation on mobile-devices
|
||||||
|
*/
|
||||||
|
mobileCloseNavigation() {
|
||||||
|
this.$emit('mobile-close-navigation')
|
||||||
|
},
|
||||||
|
|
||||||
async onDeleteForm() {
|
async onDeleteForm() {
|
||||||
if (!confirm(t('forms', 'Are you sure you want to delete {title}?', { title: this.formTitle }))) {
|
if (!confirm(t('forms', 'Are you sure you want to delete {title}?', { title: this.formTitle }))) {
|
||||||
return
|
return
|
||||||
|
|
|
@ -54,6 +54,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
|
|
Loading…
Reference in a new issue