More usable and accessible navigation between View/Edit/Results

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

src/Forms.vue

@@ -49,6 +49,7 @@
 					:key="form.id"
 					:form="form"
 					:read-only="true"
+					@open-sharing="openSharing"
 					@mobile-close-navigation="mobileCloseNavigation" />
 			</template>
 		</NcAppNavigation>
@@ -92,9 +93,9 @@
 			<router-view :form.sync="selectedForm"
 				:sidebar-opened.sync="sidebarOpened"
 				@open-sharing="openSharing" />
-			<router-view v-if="!selectedForm.partial"
+			<router-view v-if="!selectedForm.partial && canEdit"
 				:form="selectedForm"
-				:opened.sync="sidebarOpened"
+				:sidebar-opened.sync="sidebarOpened"
 				:active.sync="sidebarActive"
 				name="sidebar" />
 		</template>
@@ -158,6 +159,9 @@ export default {
 	},
 
 	computed: {
+		canEdit() {
+			return this.selectedForm.permissions.includes(this.PERMISSION_TYPES.PERMISSION_EDIT)
+		},
 		hasForms() {
 			return !this.noOwnedForms || !this.noSharedForms
 		},
@@ -236,7 +240,7 @@ export default {
 		 * @param {string} hash the hash of the form to load
 		 */
 		openSharing(hash) {
-			if (hash !== this.routeHash || this.$route.name !== 'edit') {
+			if (hash !== this.routeHash) {
 				this.$router.push({ name: 'edit', params: { hash } })
 			}
 			this.sidebarActive = 'forms-sharing'

src/components/TopBar.vue

@@ -25,42 +25,51 @@
   -->
 <template>
 	<div class="top-bar" role="toolbar">
-		<slot />
-		<NcButton v-if="canSubmit && $route.name !== 'submit'"
-			v-tooltip="t('forms', 'View form')"
-			:aria-label="t('forms', 'View form')"
-			type="tertiary"
-			@click="showSubmit">
-			<template #icon>
-				<IconEye :size="20" />
-			</template>
-		</NcButton>
-		<NcButton v-if="canEdit && $route.name !== 'edit'"
-			v-tooltip="t('forms', 'Edit form')"
-			:aria-label="t('forms', 'Edit form')"
-			type="tertiary"
-			@click="showEdit">
-			<template #icon>
-				<IconPencil :size="20" />
-			</template>
-		</NcButton>
-		<NcButton v-if="canSeeResults && $route.name !== 'results'"
-			v-tooltip="t('forms', 'Results')"
-			:aria-label="t('forms', 'Results')"
-			type="tertiary"
-			@click="showResults">
-			<template #icon>
-				<IconPoll :size="20" />
-			</template>
-		</NcButton>
+		<div v-if="!canOnlySubmit" class="top-bar__view-select">
+			<NcButton v-if="canSubmit"
+				:aria-label="isMobile ? t('forms', 'View form') : null"
+				:type="$route.name === 'submit' ? 'secondary' : 'tertiary'"
+				@click="showSubmit">
+				<template #icon>
+					<IconEye :size="20" />
+				</template>
+				<template v-if="!isMobile">
+					{{ t('forms', 'View') }}
+				</template>
+			</NcButton>
+			<NcButton v-if="canEdit"
+				:aria-label="isMobile ? t('forms', 'Edit form') : null"
+				:type="$route.name === 'edit' ? 'secondary' : 'tertiary'"
+				@click="showEdit">
+				<template #icon>
+					<IconPencil :size="20" />
+				</template>
+				<template v-if="!isMobile">
+					{{ t('forms', 'Edit') }}
+				</template>
+			</NcButton>
+			<NcButton v-if="canSeeResults"
+				:aria-label="isMobile ? t('forms', 'Show results') : null"
+				:type="$route.name === 'results' ? 'secondary' : 'tertiary'"
+				@click="showResults">
+				<template #icon>
+					<IconPoll :size="20" />
+				</template>
+				<template v-if="!isMobile">
+					{{ t('forms', 'Results') }}
+				</template>
+			</NcButton>
+		</div>
 		<NcButton v-if="canShare && !sidebarOpened"
-			v-tooltip="t('forms', 'Share form')"
-			:aria-label="t('forms', 'Share form')"
+			:aria-label="isMobile ? t('forms', 'Share form') : null"
 			type="tertiary"
 			@click="onShareForm">
 			<template #icon>
 				<IconShareVariant :size="20" />
 			</template>
+			<template v-if="!isMobile">
+				{{ t('forms', 'Share') }}
+			</template>
 		</NcButton>
 		<NcButton v-if="showSidebarToggle"
 			v-tooltip="t('forms', 'Toggle settings')"
@@ -77,6 +86,7 @@
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import IconEye from 'vue-material-design-icons/Eye.vue'
 import IconMenuOpen from 'vue-material-design-icons/MenuOpen.vue'
 import IconPencil from 'vue-material-design-icons/Pencil.vue'
@@ -96,7 +106,7 @@ export default {
 		NcButton,
 	},
 
-	mixins: [PermissionTypes],
+	mixins: [isMobile, PermissionTypes],
 
 	props: {
 		sidebarOpened: {
@@ -123,8 +133,11 @@ export default {
 			// This probably can get a permission of itself
 			return this.canEdit || this.canSeeResults
 		},
+		canOnlySubmit() {
+			return this.permissions.length === 1 && this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_SUBMIT)
+		},
 		showSidebarToggle() {
-			return this.sidebarOpened !== null
+			return this.canEdit && this.sidebarOpened !== null
 		},
 	},
 
@@ -137,30 +150,36 @@ export default {
 		 * Router methods
 		 */
 		showEdit() {
-			this.$router.push({
-				name: 'edit',
-				params: {
-					hash: this.$route.params.hash,
-				},
-			})
+			if (this.$route.name !== 'edit') {
+				this.$router.push({
+					name: 'edit',
+					params: {
+						hash: this.$route.params.hash,
+					},
+				})
+			}
 		},
 
 		showResults() {
-			this.$router.push({
-				name: 'results',
-				params: {
-					hash: this.$route.params.hash,
-				},
-			})
+			if (this.$route.name !== 'results') {
+				this.$router.push({
+					name: 'results',
+					params: {
+						hash: this.$route.params.hash,
+					},
+				})
+			}
 		},
 
 		showSubmit() {
-			this.$router.push({
-				name: 'submit',
-				params: {
-					hash: this.$route.params.hash,
-				},
-			})
+			if (this.$route.name !== 'submit') {
+				this.$router.push({
+					name: 'submit',
+					params: {
+						hash: this.$route.params.hash,
+					},
+				})
+			}
 		},
 
 		onShareForm() {
@@ -180,6 +199,17 @@ export default {
 	align-self: flex-end;
 	justify-content: flex-end;
 	padding: calc(var(--default-grid-baseline, 4px) * 2);
+
+	&__view-select {
+		display: flex;
+		height: 44px;
+		align-items: center;
+		align-self: flex-end;
+		justify-content: flex-end;
+		background: var(--color-main-background);
+		border: 2px solid var(--color-border);
+		border-radius: var(--border-radius-pill);
+	}
 }
 
 .icon--flipped {

src/mixins/ViewsMixin.js

@@ -46,6 +46,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		sidebarOpened: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
 	data() {
@@ -63,6 +67,10 @@ export default {
 			this.$emit('open-sharing', this.form.hash)
 		},
 
+		onSidebarChange(newState) {
+			this.$emit('update:sidebarOpened', newState)
+		},
+
 		/**
 		 * Focus title after form load
 		 */

src/router.js

@@ -63,15 +63,21 @@ export default new Router({
 		},
 		{
 			path: '/:hash/results',
-			component: Results,
+			components: {
+				default: Results,
+				sidebar: Sidebar,
+			},
 			name: 'results',
-			props: true,
+			props: { default: true },
 		},
 		{
 			path: '/:hash/submit',
-			component: Submit,
+			components: {
+				default: Submit,
+				sidebar: Sidebar,
+			},
 			name: 'submit',
-			props: true,
+			props: { default: true },
 		},
 	],
 })

src/views/Create.vue

@@ -161,13 +161,6 @@ export default {
 
 	mixins: [ViewsMixin],
 
-	props: {
-		sidebarOpened: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
 	data() {
 		return {
 			maxStringLengths: loadState('forms', 'maxStringLengths'),
@@ -259,9 +252,6 @@ export default {
 			this.autoSizeDescription()
 			this.saveDescription()
 		},
-		onSidebarChange(newState) {
-			this.$emit('update:sidebarOpened', newState)
-		},
 
 		/**
 		 * Title & description save methods

src/views/Results.vue

@@ -32,7 +32,10 @@
 	</NcAppContent>
 
 	<NcAppContent v-else>
-		<TopBar :permissions="form?.permissions" @share-form="onShareForm" />
+		<TopBar :permissions="form?.permissions"
+			:sidebar-opened="sidebarOpened"
+			@update:sidebarOpened="onSidebarChange"
+			@share-form="onShareForm" />
 		<header v-if="!noSubmissions">
 			<h2>{{ formTitle }}</h2>
 			<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>

src/views/Sidebar.vue

@@ -21,7 +21,7 @@
  -->
 
 <template>
-	<NcAppSidebar v-show="opened"
+	<NcAppSidebar v-show="sidebarOpened"
 		:active="active"
 		:title="t('forms', 'Form settings')"
 		@close="onClose"
@@ -71,6 +71,7 @@ export default {
 		SharingSidebarTab,
 		SettingsSidebarTab,
 	},
+
 	mixins: [ViewsMixin],
 
 	props: {
@@ -78,10 +79,6 @@ export default {
 			type: String,
 			default: 'forms-sharing',
 		},
-		opened: {
-			type: Boolean,
-			required: true,
-		},
 	},
 
 	methods: {
@@ -89,10 +86,10 @@ export default {
 		 * Sidebar state methods
 		 */
 		onClose() {
-			this.$emit('update:opened', false)
+			this.$emit('update:sidebarOpened', false)
 		},
 		onToggle() {
-			this.$emit('update:opened', !this.opened)
+			this.$emit('update:sidebarOpened', !this.sidebarOpened)
 		},
 		onUpdateActive(active) {
 			this.$emit('update:active', active)

src/views/Submit.vue

@@ -32,6 +32,8 @@
 	<NcAppContent v-else :class="{'app-content--public': publicView}">
 		<TopBar v-if="!publicView"
 			:permissions="form?.permissions"
+			:sidebar-opened="sidebarOpened"
+			@update:sidebarOpened="onSidebarChange"
 			@share-form="onShareForm" />
 
 		<!-- Forms title & description-->