Topbar & sidebar toggle

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

package.json

@@ -72,6 +72,7 @@
 		"@nextcloud/auth": "^1.2.3",
 		"@nextcloud/axios": "^1.3.2",
 		"@nextcloud/dialogs": "^1.2.2",
+		"@nextcloud/event-bus": "^1.1.3",
 		"@nextcloud/l10n": "^1.2.3",
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^1.0.2",

src/components/TopBar.vue

@@ -0,0 +1,69 @@
+<!--
+  - @copyright Copyright (c) 2020 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/>.
+  -
+  -
+  - UPDATE: Adds Quiz option and takes the input:
+  - is yet to store input of quizzes and cannot represtent them
+  - requires quizFormItem.vue (should be added to svn)
+  -->
+<template>
+	<div class="top-bar" role="toolbar">
+		<slot />
+	</div>
+</template>
+<script>
+export default {
+	name: 'TopBar',
+}
+</script>
+
+<style lang="scss" scoped>
+.top-bar {
+	position: absolute;
+	z-index: 10;
+	top: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	height: 60px;
+	padding: 0 6px;
+
+	button {
+		cursor: pointer;
+		&:not(.primary) {
+			width: 44px;
+			height: 44px;
+			background-color: transparent;
+			border: none;
+			&:hover, a:active, a:focus {
+				background-color: var(--color-background-darker);
+			}
+		}
+
+		> span {
+			cursor: pointer;
+			opacity: 1;
+			background-size: 16px;
+		}
+	}
+}
+
+</style>

src/views/Create.vue

@@ -27,6 +27,18 @@
 
 <template>
 	<AppContent>
+		<!-- Show results & sidebar button -->
+		<TopBar>
+			<button class="primary" @click="showResults">
+				<span class="icon-forms-white" role="img" />
+				{{ t('forms', 'Show results') }}
+			</button>
+			<button v-tooltip="t('forms', 'Toggle settings')" @click="toggleSidebar">
+				<span class="icon-settings" role="img" />
+			</button>
+		</TopBar>
+
+		<!-- Forms title & description-->
 		<header>
 			<label class="hidden-visually" for="form-title">{{ t('forms', 'Title') }}</label>
 			<input
@@ -90,12 +102,14 @@
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
+import { emit } from '@nextcloud/event-bus'
 import debounce from 'debounce'
 
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import QuizFormItem from '../components/quizFormItem'
+import TopBar from '../components/TopBar'
 
 import ViewsMixin from '../mixins/ViewsMixin'
 
@@ -104,6 +118,7 @@ export default {
 	components: {
 		AppContent,
 		QuizFormItem,
+		TopBar,
 	},
 
 	mixins: [ViewsMixin],
@@ -313,6 +328,21 @@ export default {
 					})
 			}
 		},
+
+		/**
+		 * Topbar methods
+		 */
+		showResults() {
+			this.$router.push({
+				name: 'results',
+				params: {
+					hash: this.form.event.hash,
+				},
+			})
+		},
+		toggleSidebar() {
+			emit('toggleSidebar')
+		},
 	},
 }
 </script>

src/views/Sidebar.vue

@@ -21,7 +21,7 @@
  -->
 
 <template>
-	<AppSidebar :title="form.form.title">
+	<AppSidebar v-show="opened" :title="form.form.title" @close="onClose">
 		<div class="configBox ">
 			<label class="title icon-settings">
 				{{ t('forms', 'Form configurations') }}
@@ -109,6 +109,7 @@
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
 import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
 import moment from '@nextcloud/moment'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import ShareDiv from '../components/shareDiv'
 import ViewsMixin from '../mixins/ViewsMixin'
@@ -125,6 +126,7 @@ export default {
 
 	data() {
 		return {
+			opened: true,
 			lang: '',
 			locale: '',
 			longDateFormat: '',
@@ -182,6 +184,13 @@ export default {
 		moment.locale(this.locale)
 		this.longDateFormat = moment.localeData().longDateFormat('L')
 		this.dateTimeFormat = moment.localeData().longDateFormat('L') + ' ' + moment.localeData().longDateFormat('LT')
+
+		// Watch for Sidebar toggle
+		subscribe('toggleSidebar', this.onToggle)
+	},
+
+	beforeDestroy() {
+		unsubscribe('toggleSidebar')
 	},
 
 	methods: {
@@ -196,6 +205,16 @@ export default {
 		removeShare(item) {
 			this.form.shares.splice(this.form.shares.indexOf(item), 1)
 		},
+
+		/**
+		 * Sidebar state methods
+		 */
+		onClose() {
+			this.opened = false
+		},
+		onToggle() {
+			this.opened = !this.opened
+		},
 	},
 }
 </script>