Add sidebar button on the Navigation (#11)

Add sidebar button on the Navigation

lib/Controller/PageController.php

@@ -73,6 +73,10 @@ class PageController extends Controller {
 		$this->initialStateService->provideInitialState($this->appName, 'mimes', Application::MIMES);
 		$this->initialStateService->provideInitialState($this->appName, 'maps', $this->config->getAppValue('maps', 'enabled', 'no') === 'yes');
 
+
+		// used by the sidebar to parse files requests
+		// TODO: move to a standalone dav fileinfo parser
+		Util::addScript('files', 'files/client');
 		Util::addScript($this->appName, 'photos');
 		Util::addStyle($this->appName, 'icons');
 

src/components/Navigation.vue

@@ -32,6 +32,13 @@
 		<h2 class="photos-navigation__title">
 			{{ name }}
 		</h2>
+		<Actions v-if="!isRoot && showActions" class="photos-navigation__share">
+			<ActionButton
+				icon="icon-shared"
+				@click="showSidebar">
+				{{ t('photos', 'Share this folder') }}
+			</ActionButton>
+		</Actions>
 	</div>
 </template>
 
@@ -56,6 +63,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		showActions: {
+			type: Boolean,
+			default: false,
+		},
 		rootTitle: {
 			type: String,
 			default: t('photos', 'Photos'),
@@ -85,7 +96,7 @@ export default {
 		},
 		backToText() {
 			if (this.parentPath === '/') {
-				return t('photos', 'Back to home')
+				return t('photos', 'Back to {folder}', { folder: this.rootTitle })
 			}
 			return t('photos', 'Back to {folder}', { folder: this.parentName })
 		},
@@ -123,6 +134,10 @@ export default {
 		folderUp() {
 			this.$router.push(this.to)
 		},
+		showSidebar() {
+			OCA.Files.Sidebar.open(this.filename)
+
+		},
 	},
 }
 </script>
@@ -140,6 +155,9 @@ export default {
 	&__title {
 		margin: 0;
 	}
+	&__share {
+		margin-left: 10px;
+	}
 }
 
 // generate variants based on grid sizes

src/main.js

@@ -46,6 +46,15 @@ sync(store, router)
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 
+// TODO: remove when we have a proper fileinfo standalone library
+window.addEventListener('DOMContentLoaded', () => {
+	// register unused client for the sidebar to have access to its parser methods
+	if (!window.OCA.Files) {
+		window.OCA.Files = {}
+	}
+	Object.assign(window.OCA.Files, { App: { fileList: { filesClient: OC.Files.getClient() } } }, window.OCA.Files)
+})
+
 export default new Vue({
 	el: '#content',
 	// eslint-disable-next-line vue/match-component-file-name

src/mixins/FileFolder.scss

@@ -26,6 +26,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	user-select: none;
 
 	.cover {
 		z-index: 2;

src/router/index.js

@@ -57,6 +57,7 @@ export default new Router({
 				path: `/${route.params.path ? route.params.path : ''}`,
 				// if path is empty
 				isRoot: !route.params.path,
+				rootTitle: t('photos', 'Your albums'),
 			}),
 		},
 		{
@@ -68,6 +69,7 @@ export default new Router({
 				path: `/${route.params.path ? route.params.path : ''}`,
 				// if path is empty
 				isRoot: !route.params.path,
+				rootTitle: t('photos', 'Shared albums'),
 				showShared: true,
 			}),
 		},
@@ -87,6 +89,7 @@ export default new Router({
 				path: `${route.params.path ? route.params.path : ''}`,
 				// if path is empty
 				isRoot: !route.params.path,
+				rootTitle: t('photos', 'Tagged photos'),
 			}),
 		},
 		{

src/views/Albums.vue

@@ -34,7 +34,11 @@
 
 	<!-- Folder content -->
 	<Grid v-else>
-		<Navigation v-if="folder" key="navigation" v-bind="folder" />
+		<Navigation v-if="folder"
+			key="navigation"
+			v-bind="folder"
+			:root-title="rootTitle"
+			:show-actions="true" />
 
 		<Folder v-for="dir in folderList"
 			:key="dir.fileid"
@@ -67,6 +71,10 @@ export default {
 		Navigation,
 	},
 	props: {
+		rootTitle: {
+			type: String,
+			required: true,
+		},
 		path: {
 			type: String,
 			default: '/',
@@ -163,8 +171,9 @@ export default {
 			// cancel any pending requests
 			this.cancelRequest('Changed folder')
 
-			// close any potential opened viewer
-			OCA.Viewer.close()
+			// close any potential opened viewer & sidebar
+			OCA.Viewer && OCA.Viewer.close()
+			OCA.Files && OCA.Files.Sidebar.close()
 
 			// if we don't already have some cached data let's show a loader
 			if (!this.files[this.folderId]) {

src/views/Tags.vue

@@ -38,7 +38,7 @@
 			key="navigation"
 			:basename="path"
 			:filename="'/' + path"
-			:root-title="t('photos', 'Tags')" />
+			:root-title="rootTitle" />
 		<template v-if="isRoot">
 			<Tag v-for="id in tagsNames"
 				:key="id"
@@ -76,6 +76,10 @@ export default {
 		Navigation,
 	},
 	props: {
+		rootTitle: {
+			type: String,
+			required: true,
+		},
 		path: {
 			type: String,
 			default: '',