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 = [