Merge pull request #18556 from nextcloud/enh/16602/files-app-settings

Add OCA.Files.Settings for Files navigation settings

apps/files/src/components/Setting.vue

@@ -0,0 +1,41 @@
+<!--
+  - @copyright Copyright (c) 2020 Gary Kim <gary@garykim.dev>
+  -
+  - @author Gary Kim <[email protected]>
+  -
+  - @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/>.
+  -
+  -->
+
+<template>
+	<div />
+</template>
+<script>
+export default {
+	name: 'Setting',
+	props: {
+		el: {
+			type: Function,
+			required: true,
+		}
+	},
+	mounted() {
+		this.$el.appendChild(this.el())
+	}
+}
+</script>
+<style>
+</style>

apps/files/src/files-app-settings.js

@@ -0,0 +1,53 @@
+/**
+ * @copyright Copyright (c) 2019 Gary Kim <[email protected]>
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author Gary Kim <[email protected]>
+ *
+ * @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/>.
+ *
+ */
+
+import Vue from 'vue'
+import Settings from './services/Settings'
+import SettingsView from './views/Settings'
+import Setting from './models/Setting'
+
+Vue.prototype.t = t
+
+// Init Files App Settings Service
+if (!window.OCA.Files) {
+	window.OCA.Files = {}
+}
+Object.assign(window.OCA.Files, { Settings: new Settings() })
+Object.assign(window.OCA.Files.Settings, { Setting })
+
+window.addEventListener('DOMContentLoaded', () => {
+	// Init Vue app
+	// eslint-disable-next-line
+	new Vue({
+		el: '#files-app-settings',
+		render: h => h(SettingsView),
+	})
+
+	const appSettingsHeader = document.getElementById('app-settings-header')
+	if (appSettingsHeader) {
+		appSettingsHeader.addEventListener('click', e => {
+			const opened = e.currentTarget.children[0].classList.contains('opened')
+			OCA.Files.Settings.settings.forEach(e => opened ? e.close() : e.open())
+		})
+	}
+})

apps/files/src/models/Setting.js

@@ -0,0 +1,69 @@
+/**
+ * @copyright Copyright (c) 2019 Gary Kim <[email protected]>
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author Gary Kim <[email protected]>
+ *
+ * @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/>.
+ *
+ */
+
+export default class Setting {
+
+	#close
+	#el
+	#name
+	#open
+
+	/**
+	 * Create a new files app setting
+	 *
+	 * @since 19.0.0
+	 * @param {string} name the name of this setting
+	 * @param {Function} component.el function that returns an unmounted dom element to be added
+	 * @param {Function} [component.open] callback for when setting is added
+	 * @param {Function} [component.close] callback for when setting is closed
+	 */
+	constructor(name, { el, open, close }) {
+		this.#name = name
+		this.#el = el
+		this.#open = open
+		this.#close = close
+		if (typeof this.#open !== 'function') {
+			this.#open = () => {}
+		}
+		if (typeof this.#close !== 'function') {
+			this.#close = () => {}
+		}
+	}
+
+	get name() {
+		return this.#name
+	}
+
+	get el() {
+		return this.#el
+	}
+
+	get open() {
+		return this.#open
+	}
+
+	get close() {
+		return this.#close
+	}
+
+}

apps/files/src/services/Settings.js

@@ -0,0 +1,56 @@
+/**
+ * @copyright Copyright (c) 2019 Gary Kim <[email protected]>
+ *
+ * @author Gary Kim <[email protected]>
+ *
+ * @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/>.
+ *
+ */
+
+export default class Settings {
+
+	#settings
+
+	constructor() {
+		this.#settings = []
+		console.debug('OCA.Files.Settings initialized')
+	}
+
+	/**
+	 * Register a new setting
+	 *
+	 * @since 19.0.0
+	 * @param {OCA.Files.Settings.Setting} view element to add to settings
+	 * @returns {boolean} whether registering was successful
+	 */
+	register(view) {
+		if (this.#settings.filter(e => e.name === view.name).length > 0) {
+			console.error('A setting with the same name is already registered')
+			return false
+		}
+		this.#settings.push(view)
+		return true
+	}
+
+	/**
+	 * All settings elements
+	 * @returns {OCA.Files.Settings.Setting[]} All currently registered settings
+	 */
+	get settings() {
+		return this.#settings
+	}
+
+}

apps/files/src/views/Settings.vue

@@ -0,0 +1,48 @@
+<!--
+  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  -
+  - @author Gary Kim <[email protected]>
+  -
+  - @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/>.
+  -
+  -->
+<template>
+	<div id="files-app-extra-settings">
+		<template v-for="setting in settings">
+			<Setting :el="setting.el" :key="setting.name" />
+		</template>
+	</div>
+</template>
+
+<script>
+import Setting from '../components/Setting'
+
+export default {
+	name: 'Settings',
+	components: {
+		Setting
+	},
+	data() {
+		return {
+			settings: OCA.Files.Settings.settings
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

apps/files/templates/appnavigation.php

@@ -1,3 +1,6 @@
+<?php
+script(\OCA\Files\AppInfo\Application::APP_ID, 'dist/files-app-settings');
+?>
 <div id="app-navigation">
 	<ul class="with-icon">
 
@@ -35,6 +38,7 @@
 			</button>
 		</div>
 		<div id="app-settings-content">
+			<div id="files-app-settings"></div>
 			<div id="files-setting-showhidden">
 				<input class="checkbox" id="showhiddenfilesToggle"
 					   checked="checked" type="checkbox">

apps/files/webpack.js

@@ -3,6 +3,7 @@ const path = require('path');
 module.exports = {
 	entry: {
 		'sidebar': path.join(__dirname, 'src', 'sidebar.js'),
+		'files-app-settings': path.join(__dirname, 'src', 'files-app-settings.js'),
 		'personal-settings': path.join(__dirname, 'src', 'main-personal-settings.js'),
 	},
 	output: {