From 8829019101e2aba587a32f6c04cb2befc5de0f2b Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Wed, 26 Oct 2022 16:54:38 +0200 Subject: [PATCH] Add support for Material icon in files sidebar Signed-off-by: Carl Schwan Signed-off-by: Louis Chemineau --- apps/comments/src/comments-tab.js | 2 ++ apps/files/src/components/SidebarTab.vue | 5 ++++- apps/files/src/models/Tab.js | 8 ++++++-- apps/files/src/views/Sidebar.vue | 8 ++++++-- apps/files_sharing/src/files_sharing_tab.js | 14 ++++++++------ apps/files_versions/src/files_versions_tab.js | 3 ++- 6 files changed, 28 insertions(+), 12 deletions(-) diff --git a/apps/comments/src/comments-tab.js b/apps/comments/src/comments-tab.js index 2c81843291c..7b12de6de4f 100644 --- a/apps/comments/src/comments-tab.js +++ b/apps/comments/src/comments-tab.js @@ -20,6 +20,8 @@ * */ +import MessageReplyText from 'vue-material-design-icons/MessageReplyText.vue' + // Init Comments tab component let TabInstance = null const commentTab = new OCA.Files.Sidebar.Tab({ diff --git a/apps/files/src/components/SidebarTab.vue b/apps/files/src/components/SidebarTab.vue index c0f5a7d4416..ac3cfba7d02 100644 --- a/apps/files/src/components/SidebarTab.vue +++ b/apps/files/src/components/SidebarTab.vue @@ -26,6 +26,9 @@ :name="name" :icon="icon" @bottomReached="onScrollBottomReached"> + @@ -63,7 +66,7 @@ export default { }, icon: { type: String, - required: true, + required: false, }, /** diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js index 4c41ec5a3b1..9fd38f71bd7 100644 --- a/apps/files/src/models/Tab.js +++ b/apps/files/src/models/Tab.js @@ -59,8 +59,8 @@ export default class Tab { 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 icon !== 'string' || icon.trim() === '') && typeof icon !== 'object') { + throw new Error('The icon argument is not a valid string or vuejs component') } if (typeof mount !== 'function') { throw new Error('The mount argument should be a function') @@ -97,6 +97,10 @@ export default class Tab { return this._name } + get isIconClass() { + return typeof this._icon === 'string' + } + get icon() { return this._icon } diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue index d4bf8cfde40..7c5ac8f0fdb 100644 --- a/apps/files/src/views/Sidebar.vue +++ b/apps/files/src/views/Sidebar.vue @@ -67,12 +67,16 @@ :id="tab.id" :key="tab.id" :name="tab.name" - :icon="tab.icon" + :icon="tab.isIconClass ? tab.icon : undefined" :on-mount="tab.mount" :on-update="tab.update" :on-destroy="tab.destroy" :on-scroll-bottom-reached="tab.scrollBottomReached" - :file-info="fileInfo" /> + :file-info="fileInfo"> + + diff --git a/apps/files_sharing/src/files_sharing_tab.js b/apps/files_sharing/src/files_sharing_tab.js index c06ec051c4e..9694e2a9539 100644 --- a/apps/files_sharing/src/files_sharing_tab.js +++ b/apps/files_sharing/src/files_sharing_tab.js @@ -25,11 +25,13 @@ import Vue from 'vue' import VueClipboard from 'vue-clipboard2' import { translate as t, translatePlural as n } from '@nextcloud/l10n' -import SharingTab from './views/SharingTab' -import ShareSearch from './services/ShareSearch' -import ExternalLinkActions from './services/ExternalLinkActions' -import ExternalShareActions from './services/ExternalShareActions' -import TabSections from './services/TabSections' +import SharingTab from './views/SharingTab.vue' +import ShareSearch from './services/ShareSearch.js' +import ExternalLinkActions from './services/ExternalLinkActions.js' +import ExternalShareActions from './services/ExternalShareActions.js' +import TabSections from './services/TabSections.js' + +import ShareVariant from 'vue-material-design-icons/ShareVariant.vue' // Init Sharing Tab Service if (!window.OCA.Sharing) { @@ -53,7 +55,7 @@ window.addEventListener('DOMContentLoaded', function() { OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({ id: 'sharing', name: t('files_sharing', 'Sharing'), - icon: 'icon-share', + icon: ShareVariant, async mount(el, fileInfo, context) { if (TabInstance) { diff --git a/apps/files_versions/src/files_versions_tab.js b/apps/files_versions/src/files_versions_tab.js index 0e8f5b29838..d293a68510c 100644 --- a/apps/files_versions/src/files_versions_tab.js +++ b/apps/files_versions/src/files_versions_tab.js @@ -22,6 +22,7 @@ import { translate as t, translatePlural as n } from '@nextcloud/l10n' import VersionTab from './views/VersionTab.vue' import VTooltip from 'v-tooltip' +import BackupRestore from 'vue-material-design-icons/BackupRestore.vue' Vue.prototype.t = t Vue.prototype.n = n @@ -37,7 +38,7 @@ window.addEventListener('DOMContentLoaded', function() { OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({ id: 'version_vue', name: t('files_versions', 'Version'), - icon: 'icon-history', + icon: BackupRestore, async mount(el, fileInfo, context) { if (TabInstance) { -- 2.39.5