Merge pull request #1939 from nextcloud/fix/1859/tabs-md-icon

nextcloud-libraries · May 10, 2021 · 01fd135 · 01fd135
2 parents 0792858 + a3bc8b9
commit 01fd135
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -30,16 +30,28 @@ include a standard-header like it's used by the files app.
 ### Standard usage
 
 ```vue
-<AppSidebar
- title="cat-picture.jpg"
- subtitle="last edited 3 weeks ago">
- <AppSidebarTab icon="icon-settings" name="Settings" id="settings">
- Settings tab content
- </AppSidebarTab>
- <AppSidebarTab icon="icon-share" name="Sharing" id="share">
- Sharing tab content
- </AppSidebarTab>
-</AppSidebar>
+<template>
+ <AppSidebar
+ title="cat-picture.jpg"
+ subtitle="last edited 3 weeks ago">
+ <AppSidebarTab icon="icon-settings" name="Settings" id="settings">
+ <Cog slot="icon" :size="24" decorative />
+ Settings tab content
+ </AppSidebarTab>
+ <AppSidebarTab icon="icon-share" name="Sharing" id="share">
+ Sharing tab content
+ </AppSidebarTab>
+ </AppSidebar>
+</template>
+<script>
+ import Cog from 'vue-material-design-icons/Cog.vue'
+
+ export default {
+ components: {
+ Cog,
+ },
+ }
+</script>
 ```
 
 ### Editable title

diff --git a/src/components/AppSidebar/AppSidebarTabs.vue b/src/components/AppSidebar/AppSidebarTabs.vue
@@ -45,7 +45,10 @@
  :tabindex="activeTab === tab.id ? null : -1"
  role="tab"
  @click.prevent="setActive(tab.id)">
- <span :class="tab.icon" class="app-sidebar-tabs__tab-icon" />
+ <span class="app-sidebar-tabs__tab-icon">
+ <VNodes v-if="hasMdIcon(tab)" :vnodes="tab.$slots.icon[0]" />
+ <span v-else :class="tab.icon" />
+ </span>
  {{ tab.name }}
  </a>
  </li>
@@ -73,6 +76,15 @@ const IsValidStringWithoutSpaces = function(value) {
 
 export default {
  name: 'AppSidebarTabs',
+
+ components: {
+ // Component to render the material design icon (vnodes)
+ VNodes: {
+ functional: true,
+ render: (h, context) => context.props.vnodes,
+ },
+ },
+
  props: {
  /**
  * Id of the tab to activate
@@ -208,6 +220,10 @@ export default {
  : ''
  },
 
+ hasMdIcon(tab) {
+ return tab?.$slots?.icon
+ },
+
  /**
  * Manually update the sidebar tabs according to $slots.default
  */
@@ -227,7 +243,7 @@ export default {
  // Make sure all required props are provided and valid
  if (IsValidString(tab?.name)
  && IsValidStringWithoutSpaces(tab?.id)
- && IsValidStringWithoutSpaces(tab?.icon)) {
+ && (IsValidStringWithoutSpaces(tab?.icon) || tab?.$slots?.icon)) {
  tabs.push(tab)
  } else {
  invalidTabs.push(tabNode)
@@ -331,6 +347,12 @@ export default {
  opacity: $opacity_normal;
  background-position: center 8px;
  background-size: 16px;
+
+ & > span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
  }
 
  &__content {

diff --git a/src/components/AppSidebarTab/AppSidebarTab.vue b/src/components/AppSidebarTab/AppSidebarTab.vue
@@ -52,7 +52,7 @@ export default {
  },
  icon: {
  type: String,
- required: true,
+ default: '',
  },
  order: {
  type: Number,