Switch to accordions in the sidebar

apps/files/src/components/FileDetails.vue

@@ -2,7 +2,7 @@
   <oc-app-side-bar
     id="files-sidebar"
     :key="highlightedFile.id"
-    class="oc-p-s uk-overflow-auto uk-height-1-1"
+    class="oc-p-s uk-overflow-auto uk-height-1-1 oc-border-l"
     :disable-action="false"
     @close="close()"
   >
@@ -34,29 +34,17 @@
       </div>
     </template>
     <template slot="content">
-      <div>
-        <oc-tabs>
-          <oc-tab-item
-            v-for="tab of fileSideBarsEnabled"
-            :key="tab.name"
-            :active="tab.app === currentTab"
-            @click="setCurrentTab(tab.app)"
-          >
-            {{ tab.title || tab.component.title($gettext) }} {{ tab.name }}
-          </oc-tab-item>
-        </oc-tabs>
-        <component
-          :is="activeTabComponent.component"
-          v-if="fileSideBars.length > 0 && activeTabComponent"
-          :component-name="
-            activeTabComponent.propsData ? activeTabComponent.propsData.componentName : ''
-          "
-          :component-url="
-            activeTabComponent.propsData ? activeTabComponent.propsData.componentUrl : ''
-          "
-          @reload="$emit('reload')"
-        ></component>
-      </div>
+      <oc-accordion class="oc-mt-m" :expand-first="true" :expanded-id="expandedAccordionId">
+        <oc-accordion-item
+          v-for="accordion in fileSideBarsEnabled"
+          :id="buildAppSidebarId(accordion.app)"
+          :key="accordion.app"
+          :title="accordion.component.title($gettext)"
+          :icon="accordion.icon"
+        >
+          <component :is="accordion.component" />
+        </oc-accordion-item>
+      </oc-accordion>
     </template>
   </oc-app-side-bar>
 </template>
@@ -71,68 +59,48 @@ export default {
   computed: {
     ...mapGetters(['getToken', 'fileSideBars', 'capabilities']),
     ...mapGetters('Files', ['highlightedFile']),
-    ...mapState('Files', ['currentSidebarTab']),
+    ...mapState('Files', ['appSidebarExpandedAccordion']),
 
     fileSideBarsEnabled() {
       return this.fileSideBars.filter(
         b => b.enabled === undefined || b.enabled(this.capabilities, this.highlightedFile)
       )
     },
-    defaultTab() {
-      if (this.fileSideBarsEnabled.length < 1) return null
-
-      return this.fileSideBarsEnabled[0].app
-    },
-
-    currentTab() {
-      if (this.currentSidebarTab && this.currentSidebarTab.tab) {
-        return this.currentSidebarTab.tab
-      }
-
-      return this.defaultTab
-    },
-
-    activeTabComponent() {
-      return this.fileSideBarsEnabled.find(sidebar => sidebar.app === this.currentTab)
-    },
 
     isFavoritesEnabled() {
       return this.capabilities.files && this.capabilities.files.favorites
-    }
-  },
-  watch: {
-    // Switch back to default tab after selecting different file
-    highlightedFile() {
-      this.SET_CURRENT_SIDEBAR_TAB({ tab: this.defaultTab })
-    }
-  },
+    },
 
-  created() {
-    this.SET_CURRENT_SIDEBAR_TAB({ tab: this.currentTab })
+    expandedAccordionId() {
+      return this.buildAppSidebarId(this.appSidebarExpandedAccordion)
+    }
   },
 
   beforeDestroy() {
-    this.SET_CURRENT_SIDEBAR_TAB({})
+    this.SET_APP_SIDEBAR_EXPANDED_ACCORDION(null)
   },
 
   methods: {
     ...mapActions('Files', ['deleteFiles', 'markFavorite']),
     ...mapActions(['showMessage']),
-    ...mapMutations('Files', ['SET_CURRENT_SIDEBAR_TAB']),
+    ...mapMutations('Files', ['SET_APP_SIDEBAR_EXPANDED_ACCORDION']),
 
     close() {
       this.$emit('reset')
     },
 
-    setCurrentTab(app) {
-      this.SET_CURRENT_SIDEBAR_TAB({ tab: app })
-    },
-
     toggleFileFavorite(file) {
       this.markFavorite({
         client: this.$client,
         file: file
       })
+    },
+
+    buildAppSidebarId(accordion) {
+      if (accordion) {
+        return `app-sidebar-${accordion}`
+      }
+      return null
     }
   }
 }

apps/files/src/components/FileSharingSidebar.vue

@@ -54,37 +54,17 @@
         </section>
       </template>
     </div>
-    <div v-if="currentPanel === PANEL_NEW" :key="PANEL_NEW">
-      <transition
-        enter-active-class="uk-animation-slide-right uk-animation-fast"
-        leave-active-class="uk-animation-slide-right uk-animation-reverse uk-animation-fast"
-        name="custom-classes-transition"
-      >
-        <div class="uk-position-cover oc-default-background">
-          <new-collaborator
-            v-if="$_ocCollaborators_canShare"
-            key="new-collaborator"
-            @close="$_ocCollaborators_showList"
-          />
-        </div>
-      </transition>
-    </div>
-    <div v-if="currentPanel === PANEL_EDIT" :key="PANEL_EDIT">
-      <transition
-        enter-active-class="uk-animation-slide-right uk-animation-fast"
-        leave-active-class="uk-animation-slide-right uk-animation-reverse uk-animation-fast"
-        name="custom-classes-transition"
-      >
-        <div class="uk-position-cover oc-default-background">
-          <edit-collaborator
-            v-if="$_ocCollaborators_canShare"
-            key="edit-collaborator"
-            :collaborator="currentShare"
-            @close="$_ocCollaborators_showList"
-          />
-        </div>
-      </transition>
-    </div>
+    <new-collaborator
+      v-if="$_ocCollaborators_canShare && currentPanel === PANEL_NEW"
+      key="new-collaborator"
+      @close="$_ocCollaborators_showList"
+    />
+    <edit-collaborator
+      v-if="$_ocCollaborators_canShare && currentPanel === PANEL_EDIT"
+      key="edit-collaborator"
+      :collaborator="currentShare"
+      @close="$_ocCollaborators_showList"
+    />
   </div>
 </template>
 
@@ -138,18 +118,12 @@ export default {
       'incomingShares',
       'incomingSharesLoading',
       'sharesTree',
-      'currentSidebarTab'
+      'appSidebarAccordionContext'
     ]),
     ...mapState(['user']),
 
     currentPanel() {
-      const tabOptions = this.currentSidebarTab.options
-
-      if (tabOptions && tabOptions.collaboratorsCurrentPanel) {
-        return tabOptions.collaboratorsCurrentPanel
-      }
-
-      return PANEL_SHOW
+      return this.appSidebarAccordionContext || PANEL_SHOW
     },
 
     $_transitionGroupEnter() {
@@ -330,7 +304,7 @@ export default {
   },
 
   beforeDestroy() {
-    this.SET_CURRENT_SIDEBAR_TAB_OPTIONS({ collaboratorsCurrentPanel: PANEL_SHOW })
+    this.SET_APP_SIDEBAR_ACCORDION_CONTEXT(null)
   },
 
   methods: {
@@ -342,7 +316,7 @@ export default {
       'loadIncomingShares',
       'incomingSharesClearState'
     ]),
-    ...mapMutations('Files', ['SET_CURRENT_SIDEBAR_TAB_OPTIONS']),
+    ...mapMutations('Files', ['SET_APP_SIDEBAR_ACCORDION_CONTEXT']),
 
     $_isCollaboratorShare(collaborator) {
       return userShareTypes.includes(collaborator.shareType)
@@ -374,11 +348,11 @@ export default {
     },
     $_ocCollaborators_addShare() {
       this.transitionGroupActive = true
-      this.SET_CURRENT_SIDEBAR_TAB_OPTIONS({ collaboratorsCurrentPanel: PANEL_NEW })
+      this.SET_APP_SIDEBAR_ACCORDION_CONTEXT(PANEL_NEW)
     },
     $_ocCollaborators_editShare(share) {
       this.currentShare = share
-      this.SET_CURRENT_SIDEBAR_TAB_OPTIONS({ collaboratorsCurrentPanel: PANEL_EDIT })
+      this.SET_APP_SIDEBAR_ACCORDION_CONTEXT(PANEL_EDIT)
     },
     $_ocCollaborators_deleteShare(share) {
       this.transitionGroupActive = true
@@ -388,7 +362,7 @@ export default {
       })
     },
     $_ocCollaborators_showList() {
-      this.SET_CURRENT_SIDEBAR_TAB_OPTIONS({ collaboratorsCurrentPanel: PANEL_SHOW })
+      this.SET_APP_SIDEBAR_ACCORDION_CONTEXT(PANEL_SHOW)
       this.currentShare = null
     },
     $_ocCollaborators_isUser(collaborator) {
@@ -441,9 +415,4 @@ export default {
 .oc-autocomplete-suggestion-selected .uk-text-meta {
   color: white;
 }
-
-/** needed to cover the container below when transitioning */
-.oc-app-side-bar .oc-default-background {
-  background-color: white;
-}
 </style>

apps/files/src/components/FilesApp.vue

@@ -112,7 +112,7 @@ export default {
   methods: {
     ...mapActions('Files', ['dragOver', 'setHighlightedFile', 'resetFileSelection']),
     ...mapActions(['showMessage']),
-    ...mapMutations('Files', ['SET_CURRENT_SIDEBAR_TAB']),
+    ...mapMutations('Files', ['SET_APP_SIDEBAR_EXPANDED_ACCORDION']),
     ...mapMutations(['SET_SIDEBAR_FOOTER_CONTENT_COMPONENT']),
 
     trace() {
@@ -121,9 +121,7 @@ export default {
 
     openSideBar(file, sideBarName) {
       this.setHighlightedFile(file)
-      setTimeout(() => {
-        this.SET_CURRENT_SIDEBAR_TAB({ tab: sideBarName })
-      })
+      this.SET_APP_SIDEBAR_EXPANDED_ACCORDION(sideBarName)
     },
 
     $_ocApp_dragOver() {

apps/files/src/default.js

@@ -4,7 +4,6 @@ import 'regenerator-runtime/runtime'
 import FilesApp from './components/FilesApp.vue'
 import FileInfoVersions from './components/FileInfoVersions.vue'
 import FileSharingSidebar from './components/FileSharingSidebar.vue'
-import FileSidebarWebComponent from './components/FileSidebarWebComponent.vue'
 import FileLinkSidebar from './components/FileLinkSidebar.vue'
 import PrivateLink from './components/PrivateLink.vue'
 import PublicLink from './components/PublicLinks/PublicLink.vue'
@@ -20,18 +19,6 @@ function $gettext(msg) {
   return msg
 }
 const filesConfig = window.phoenixConfig.files || []
-const filesSidebars = filesConfig.sidebars || []
-const sidebarsFromConfig = filesSidebars.map(s => {
-  return {
-    app: s.tabTitle,
-    component: FileSidebarWebComponent,
-    title: s.tabTitle,
-    propsData: {
-      componentName: s.componentName,
-      componentUrl: s.componentUrl
-    }
-  }
-})
 
 const appInfo = {
   name: $gettext('Files'),
@@ -43,13 +30,15 @@ const appInfo = {
   fileSideBars: [
     {
       app: 'files-version',
+      icon: 'file_version',
       component: FileInfoVersions,
       enabled(capabilities, highlightedFile) {
         return !!capabilities.core && highlightedFile && highlightedFile.type !== 'folder'
       }
     },
     {
       app: 'files-sharing',
+      icon: 'group',
       component: FileSharingSidebar,
       enabled(capabilities) {
         if (capabilities.files_sharing) {
@@ -60,15 +49,15 @@ const appInfo = {
     },
     {
       app: 'file-link',
+      icon: 'link',
       component: FileLinkSidebar,
       enabled(capabilities) {
         if (capabilities.files_sharing) {
           return capabilities.files_sharing.public.enabled
         }
         return false
       }
-    },
-    ...sidebarsFromConfig
+    }
   ]
 }
 const navItems = [