Open sharing sidebar

Signed-off-by: Jonas Rittershofer <[email protected]>

css/icons.scss

@@ -37,8 +37,8 @@
 	@include icon-color('checkmark', 'actions', $color-success, 1, true);
 }
 
-.icon-clippy-primary {
-	@include icon-color('clippy', 'actions', $color-primary-text, 1, true);
+.icon-share-primary {
+	@include icon-color('share', 'actions', $color-primary-text, 1, true);
 }
 
 .icon-comment-yes {

src/Forms.vue

@@ -32,6 +32,7 @@
 					:key="form.id"
 					:form="form"
 					:read-only="false"
+					@open-sharing="openSharing"
 					@mobile-close-navigation="mobileCloseNavigation"
 					@clone="onCloneForm"
 					@delete="onDeleteForm" />
@@ -73,10 +74,12 @@
 		<!-- No errors show router content -->
 		<template v-else>
 			<router-view :form.sync="selectedForm"
-				:sidebar-opened.sync="sidebarOpened" />
+				:sidebar-opened.sync="sidebarOpened"
+				@open-sharing="openSharing" />
 			<router-view v-if="!selectedForm.partial"
 				:form="selectedForm"
 				:opened.sync="sidebarOpened"
+				:active.sync="sidebarActive"
 				name="sidebar" />
 		</template>
 	</Content>
@@ -119,6 +122,7 @@ export default {
 		return {
 			loading: true,
 			sidebarOpened: true,
+			sidebarActive: 'forms-sharing',
 			forms: [],
 			sharedForms: [],
 		}
@@ -189,6 +193,19 @@ export default {
 			}
 		},
 
+		/**
+		 * Open a form and its sidebar for sharing
+		 *
+		 * @param {string} hash the hash of the form to load
+		 */
+		openSharing(hash) {
+			if (hash !== this.routeHash || this.$route.name !== 'edit') {
+				this.$router.push({ name: 'edit', params: { hash } })
+			}
+			this.sidebarActive = 'forms-sharing'
+			this.sidebarOpened = true
+		},
+
 		/**
 		 * Initial forms load
 		 */

src/components/AppNavigationForm.vue

@@ -30,12 +30,9 @@
 		}"
 		@click="mobileCloseNavigation">
 		<template v-if="!loading && !readOnly" #actions>
-			<ActionLink :href="formLink"
-				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-				target="_blank"
-				@click.stop.prevent="copyLink">
-				{{ clipboardTooltip }}
-			</ActionLink>
+			<ActionButton :close-after-click="true" icon="icon-share" @click="onShareForm">
+				{{ t('forms', 'Share form') }}
+			</ActionButton>
 			<ActionRouter :close-after-click="true"
 				:exact="true"
 				icon="icon-comment"
@@ -55,27 +52,21 @@
 </template>
 
 <script>
-import { generateUrl, generateOcsUrl } from '@nextcloud/router'
+import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionRouter from '@nextcloud/vue/dist/Components/ActionRouter'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import axios from '@nextcloud/axios'
-import Clipboard from 'v-clipboard'
 import moment from '@nextcloud/moment'
-import Vue from 'vue'
-
-Vue.use(Clipboard)
 
 export default {
 	name: 'AppNavigationForm',
 
 	components: {
 		AppNavigationItem,
 		ActionButton,
-		ActionLink,
 		ActionRouter,
 		ActionSeparator,
 	},
@@ -93,8 +84,6 @@ export default {
 
 	data() {
 		return {
-			copySuccess: true,
-			copied: false,
 			loading: false,
 		}
 	},
@@ -126,31 +115,6 @@ export default {
 			return t('forms', 'New form')
 		},
 
-		/**
-		 * Return the form share link
-		 *
-		 * @return {string}
-		 */
-		formLink() {
-			return window.location.protocol + '//' + window.location.host + generateUrl(`/apps/forms/${this.form.hash}`)
-		},
-
-		/**
-		 * Clipboard v-tooltip message
-		 *
-		 * @return {string}
-		 */
-		clipboardTooltip() {
-			if (this.copied) {
-				return this.copySuccess
-					? t('forms', 'Form link copied')
-					: t('forms', 'Cannot copy, please copy the link manually')
-			}
-
-			// TRANSLATORS Button copies the Share Link to clipboard.
-			return t('forms', 'Share link')
-		},
-
 		/**
 		 * Route to use, depending on readOnly
 		 *
@@ -173,6 +137,9 @@ export default {
 			this.$emit('mobile-close-navigation')
 		},
 
+		onShareForm() {
+			this.$emit('open-sharing', this.form.hash)
+		},
 		onCloneForm() {
 			this.$emit('clone', this.form.id)
 		},
@@ -194,25 +161,6 @@ export default {
 				this.loading = false
 			}
 		},
-
-		async copyLink(event) {
-			if (this.$clipboard(this.formLink)) {
-				this.copySuccess = true
-				this.copied = true
-			} else {
-				this.copySuccess = false
-				this.copied = true
-				console.debug('Not possible to copy share link')
-			}
-			// Set back focus as clipboard removes focus
-			event.target.focus()
-
-			setTimeout(() => {
-				this.copySuccess = false
-				this.copied = false
-			}, 4000)
-		},
-
 	},
 
 }

src/views/Create.vue

@@ -38,9 +38,9 @@
 					<!-- TRANSLATORS Button to switch to the Result-View -->
 					{{ t('forms', 'Results') }}
 				</button>
-				<button v-if="!sidebarOpened" @click="copyInternalShareLink($event, form.hash)">
-					<span class="icon-clippy" role="img" />
-					{{ t('forms', 'Share link') }}
+				<button v-if="!sidebarOpened" @click="onShareForm">
+					<span class="icon-share" role="img" />
+					{{ t('forms', 'Share form') }}
 				</button>
 			</template>
 			<template #small>
@@ -258,6 +258,10 @@ export default {
 			this.saveFormProperty('description')
 		}, 200),
 
+		onShareForm() {
+			this.$emit('open-sharing', this.form.hash)
+		},
+
 		/**
 		 * Add a new question to the current form
 		 *

src/views/Results.vue

@@ -35,9 +35,9 @@
 				<span class="icon-forms" role="img" />
 				{{ t('forms', 'Back to questions') }}
 			</button>
-			<button v-if="!noSubmissions" @click="copyInternalShareLink($event, form.hash)">
-				<span class="icon-clippy" role="img" />
-				{{ t('forms', 'Share link') }}
+			<button v-if="!noSubmissions" @click="onShareForm">
+				<span class="icon-share" role="img" />
+				{{ t('forms', 'Share form') }}
 			</button>
 		</TopBar>
 
@@ -95,9 +95,9 @@
 					{{ t('forms', 'Results of submitted forms will show up here') }}
 				</template>
 				<template #action>
-					<button class="primary" @click="copyInternalShareLink($event, form.hash)">
-						<span class="icon-clippy-primary" role="img" />
-						{{ t('forms', 'Share link') }}
+					<button class="primary" @click="onShareForm">
+						<span class="icon-share-primary" role="img" />
+						{{ t('forms', 'Share form') }}
 					</button>
 				</template>
 			</EmptyContent>
@@ -219,6 +219,10 @@ export default {
 			})
 		},
 
+		onShareForm() {
+			this.$emit('open-sharing', this.form.hash)
+		},
+
 		async loadFormResults() {
 			this.loadingResults = true
 			console.debug('Loading results for form', this.form.hash)

src/views/Sidebar.vue

@@ -22,8 +22,10 @@
 
 <template>
 	<AppSidebar v-show="opened"
+		:active="active"
 		:title="t('forms', 'Form settings')"
-		@close="onClose">
+		@close="onClose"
+		@update:active="onUpdateActive">
 		<AppSidebarTab id="forms-sharing"
 			:order="0"
 			:name="t('forms', 'Sharing')"
@@ -64,6 +66,10 @@ export default {
 	mixins: [ViewsMixin],
 
 	props: {
+		active: {
+			type: String,
+			default: 'forms-sharing',
+		},
 		opened: {
 			type: Boolean,
 			required: true,
@@ -80,6 +86,9 @@ export default {
 		onToggle() {
 			this.$emit('update:opened', !this.opened)
 		},
+		onUpdateActive(active) {
+			this.$emit('update:active', active)
+		},
 
 		/**
 		 * Save Form-Properties