diff options
Diffstat (limited to 'apps/files/src')
| -rw-r--r-- | apps/files/src/components/SidebarTab.vue (renamed from apps/files/src/components/LegacyTab.vue) | 67 | ||||
| -rw-r--r-- | apps/files/src/models/Tab.js | 59 | ||||
| -rw-r--r-- | apps/files/src/sidebar.js | 3 | ||||
| -rw-r--r-- | apps/files/src/views/Sidebar.vue | 40 |
4 files changed, 88 insertions, 81 deletions
diff --git a/apps/files/src/components/LegacyTab.vue b/apps/files/src/components/SidebarTab.vue index c8308dd6209..ecf04e9c9b3 100644 --- a/apps/files/src/components/LegacyTab.vue +++ b/apps/files/src/components/SidebarTab.vue @@ -1,3 +1,4 @@ + <!-- - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com> - @@ -19,74 +20,74 @@ - along with this program. If not, see <http://www.gnu.org/licenses/>. - --> - <template> <AppSidebarTab :id="id" - :icon="icon" :name="name" - :active-tab="activeTab" /> + :icon="icon"> + <!-- Using a dummy div as Vue mount replace the element directly + It does NOT append to the content --> + <div ref="mount"></div> + </AppSidebarTab> </template> + <script> import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab' - export default { - name: 'LegacyTab', + name: 'SidebarTab', + components: { AppSidebarTab, }, + props: { - component: { + fileInfo: { type: Object, + default: () => {}, required: true, }, id: { type: String, required: true, }, - fileInfo: { - type: Object, - default: () => {}, + name: { + type: String, required: true, }, - }, - computed: { - icon() { - return this.component.getIcon() - }, - name() { - return this.component.getLabel() + icon: { + type: String, + required: true, }, - order() { - return this.component.order - ? this.component.order - : 0 + render: { + type: Function, + required: true, }, - // needed because AppSidebarTab also uses $parent.activeTab + }, + + computed: { + // TODO: implement a better way to force pass a prop fromm Sidebar activeTab() { return this.$parent.activeTab }, }, + watch: { - fileInfo(fileInfo) { - if (fileInfo) { - this.setFileInfo(fileInfo) + fileInfo(newFile, oldFile) { + if (newFile.id !== oldFile.id) { + this.mountTab() } }, }, + mounted() { - // append the backbone element and set the FileInfo - this.component.$el.appendTo(this.$el) - }, - beforeDestroy() { - this.component.remove() + this.mountTab() }, + methods: { - setFileInfo(fileInfo) { - this.component.setFileInfo(new OCA.Files.FileInfoModel(fileInfo)) + mountTab() { + // Mount the tab into this component + this.render(this.$refs.mount, this.fileInfo) }, }, } </script> -<style> -</style> diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js index fd1ea9888d9..753b9c9c282 100644 --- a/apps/files/src/models/Tab.js +++ b/apps/files/src/models/Tab.js @@ -22,32 +22,49 @@ export default class Tab { - #component - #legacy #id + #name + #icon + #render #enabled /** * Create a new tab instance * - * @param {string} id the unique id of this tab - * @param {Object} component the vue component - * @param {Function} [enabled] function that returns if the tab should be shown or not - * @param {boolean} [legacy] is this a legacy tab + * @param {Object} options destructuring object + * @param {string} options.id the unique id of this tab + * @param {string} options.name the translated tab name + * @param {string} options.icon the vue component + * @param {Function} options.render function to render the tab + * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean */ - constructor(id, component, enabled = () => true, legacy) { + constructor({ id, name, icon, render, enabled }) { + if (enabled === undefined) { + enabled = () => true + } + + // Sanity checks + if (typeof id !== 'string' || id.trim() === '') { + throw new Error('The id argument is not a valid string') + } + if (typeof name !== 'string' || name.trim() === '') { + throw new Error('The name argument is not a valid string') + } + if (typeof icon !== 'string' || icon.trim() === '') { + throw new Error('The icon argument is not a valid string') + } + if (typeof render !== 'function') { + throw new Error('The render argument should be a function') + } if (typeof enabled !== 'function') { throw new Error('The enabled argument should be a function') } this.#id = id - this.#component = component + this.#name = name + this.#icon = icon + this.#render = render this.#enabled = enabled - this.#legacy = legacy === true - - if (this.#legacy) { - console.warn('Legacy tabs are deprecated! They will be removed in nextcloud 20.') - } } @@ -55,16 +72,20 @@ export default class Tab { return this.#id } - get component() { - return this.#component + get name() { + return this.#name } - get isEnabled() { - return this.#enabled + get icon() { + return this.#icon } - get isLegacyTab() { - return this.#legacy === true + get render() { + return this.#render + } + + get enabled() { + return this.#enabled } } diff --git a/apps/files/src/sidebar.js b/apps/files/src/sidebar.js index f815a498938..508093465d4 100644 --- a/apps/files/src/sidebar.js +++ b/apps/files/src/sidebar.js @@ -24,9 +24,6 @@ import Vue from 'vue' import SidebarView from './views/Sidebar.vue' import Sidebar from './services/Sidebar' import Tab from './models/Tab' -import VueClipboard from 'vue-clipboard2' - -Vue.use(VueClipboard) Vue.prototype.t = t diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue index 1fc89c6a7ee..6fa5c35dca2 100644 --- a/apps/files/src/views/Sidebar.vue +++ b/apps/files/src/views/Sidebar.vue @@ -58,15 +58,14 @@ </div> <!-- If fileInfo fetch is complete, display tabs --> - <template v-for="tab in tabs" v-else-if="fileInfo"> - <component - :is="tabComponent(tab).is" - v-if="canDisplay(tab)" + <template v-else-if="fileInfo" v-for="tab in tabs"> + <SidebarTab + v-if="tab.enabled(fileInfo)" :id="tab.id" :key="tab.id" - :component="tabComponent(tab).component" :name="tab.name" - :dav-path="davPath" + :icon="tab.icon" + :render="tab.render" :file-info="fileInfo" /> </template> </AppSidebar> @@ -77,7 +76,7 @@ import axios from '@nextcloud/axios' import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import FileInfo from '../services/FileInfo' -import LegacyTab from '../components/LegacyTab' +import SidebarTab from '../components/SidebarTab' import LegacyView from '../components/LegacyView' import { encodePath } from '@nextcloud/paths' @@ -87,6 +86,7 @@ export default { components: { ActionButton, AppSidebar, + SidebarTab, LegacyView, }, @@ -258,8 +258,8 @@ export default { }) this.$nextTick(() => { - if (this.$refs.sidebar) { - this.$refs.sidebar.updateTabs() + if (this.$refs.tabs) { + this.$refs.tabs.updateTabs() } }) } catch (error) { @@ -278,14 +278,14 @@ export default { * @returns {boolean} */ canDisplay(tab) { - return tab.isEnabled(this.fileInfo) + return tab.enabled(this.fileInfo) }, resetData() { this.error = null this.fileInfo = null this.$nextTick(() => { - if (this.$refs.sidebar) { - this.$refs.sidebar.updateTabs() + if (this.$refs.tabs) { + this.$refs.tabs.updateTabs() } }) }, @@ -327,18 +327,6 @@ export default { return OC.MimeType.getIconUrl(mimeType) }, - tabComponent(tab) { - if (tab.isLegacyTab) { - return { - is: LegacyTab, - component: tab.component, - } - } - return { - is: tab.component, - } - }, - /** * Set current active tab * @@ -430,8 +418,8 @@ export default { }) this.$nextTick(() => { - if (this.$refs.sidebar) { - this.$refs.sidebar.updateTabs() + if (this.$refs.tabs) { + this.$refs.tabs.updateTabs() } }) } catch (error) { |