Add support for Material icon in files sidebar

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Signed-off-by: Louis Chemineau <louis@chmn.me>

diff --git a/apps/comments/src/comments-tab.js b/apps/comments/src/comments-tab.js
index 2c81843291ceaece464e93d42be35d8846cde895..7b12de6de4f96c53a670b7e14029a66e12cc2cc2 100644 (file)
--- 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 c0f5a7d44169b2aea303d28f8250d99c0a90045e..ac3cfba7d02ab6d36503f0a23efe7a99047509e7 100644 (file)
--- a/apps/files/src/components/SidebarTab.vue
+++ b/apps/files/src/components/SidebarTab.vue
@@ -26,6 +26,9 @@
                :name="name"
                :icon="icon"
                @bottomReached="onScrollBottomReached">
+               <template #icon>
+                       <slot name="icon" />
+               </template>
                <!-- Fallback loading -->
                <NcEmptyContent v-if="loading" icon="icon-loading" />
 
@@ -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 4c41ec5a3b18fa06296495a67414d27b362bc17a..9fd38f71bd735a39056392ea3d5aafc358e9dd76 100644 (file)
--- 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 d4bf8cfde404dc88d69a817c42f0aef1f7f53a55..7c5ac8f0fdbba8b31c5dce5a3d52f82855b500c9 100644 (file)
--- 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">
+                               <template #icon v-if="!tab.isIconClass">
+                                       <component :is="tab.icon" />
+                               </template>
+                       </SidebarTab>
                </template>
        </NcAppSidebar>
 </template>

diff --git a/apps/files_sharing/src/files_sharing_tab.js b/apps/files_sharing/src/files_sharing_tab.js
index c06ec051c4e4e62f2f5b96b8450b1bbe3540e4f0..9694e2a953916add9ab9fe36a9049bc478baff0c 100644 (file)
--- 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 0e8f5b29838ed1d6f7fa2c3ab2f06fce7c578d2b..d293a68510c3399af6d0845a8d421e13b36ae2ee 100644 (file)
--- 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) {