Extension specific navigation and automatically inject extensions int…

…o app switcher

Added translation

apps/files/src/default.js

@@ -76,7 +76,7 @@ const navItems = [
     iconMaterial: appInfo.icon,
     route: {
       name: 'files-list',
-      path: '/'
+      path: `/${appInfo.id}/list`
     }
   },
   {

changelog/unreleased/2746

@@ -0,0 +1,7 @@
+Change: Display only items for current extension in sidebar menu
+
+We've filtered out nav items in the sidebar menu. Now only items for current extension will be displayed.
+In case the extension has only one nav item, the sidebar menu is hidden and instead of menu button is displayed the name of extension.
+
+https://github.com/owncloud/phoenix/issues/2746
+https://github.com/owncloud/phoenix/pull/3013

src/Phoenix.vue

@@ -7,8 +7,20 @@
       </template>
       <template v-else>
         <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
-        <top-bar :applicationsList="$_applicationsList" :activeNotifications="activeNotifications" :user-id="user.id" :user-display-name="user.displayname" :hasAppNavigation="!!appNavigationEntries.length" @toggleAppNavigation="$_toggleAppNavigation(!appNavigationVisible)"></top-bar>
-        <side-menu :visible="appNavigationVisible" :entries="appNavigationEntries" @closed="$_toggleAppNavigation(false)"></side-menu>
+        <top-bar
+          :applicationsList="$_applicationsList"
+          :activeNotifications="activeNotifications"
+          :user-id="user.id"
+          :user-display-name="user.displayname"
+          :hasAppNavigation="appNavigationEntries.length > 1"
+          @toggleAppNavigation="$_toggleAppNavigation(!appNavigationVisible)"
+        />
+        <side-menu
+          v-if="appNavigationEntries.length > 1"
+          :visible="appNavigationVisible"
+          :entries="appNavigationEntries"
+          @closed="$_toggleAppNavigation(false)"
+        />
         <main id="main">
           <router-view id="oc-app-container" name="app" class="uk-height-1-1"></router-view>
         </main>
@@ -39,27 +51,47 @@ export default {
   },
   computed: {
     ...mapState(['route', 'user']),
-    ...mapGetters(['configuration', 'activeNotifications', 'activeMessages', 'capabilities']),
+    ...mapGetters(['configuration', 'activeNotifications', 'activeMessages', 'capabilities', 'apps']),
     $_applicationsList () {
-      return this.configuration.applications
+      const list = []
+
+      // Get extensions manually added into config
+      list.push(this.configuration.applications)
+
+      // Get extensions which have at least one nav item
+      const navItems = this.$root.navItems
+      for (const extensionId in navItems) {
+        list.push(this.apps[extensionId])
+      }
+
+      return list.flat()
     },
 
     appNavigationEntries () {
       if (this.publicPage()) {
         return []
       }
+
       // FIXME: use store or other ways, not $root
-      return this.$root.navItems.filter(item => {
-        // FIXME: filter to only show current app
+      const items = this.$root.navItems[this.currentExtension]
+
+      if (!items) {
+        return []
+      }
+
+      return items.filter(item => {
         if (item.enabled === undefined) {
           return true
         }
+
         if (this.capabilities === undefined) {
           return false
         }
+
         return item.enabled(this.capabilities)
       })
     },
+
     showHeader () {
       return this.$route.meta.hideHeadbar !== true
     },

src/components/ApplicationsMenu.vue

@@ -1,7 +1,15 @@
 <template>
   <div v-if="!!applicationsList.length">
     <oc-button id="_appSwitcherButton" icon="apps" variation="primary" class="oc-topbar-menu-burger uk-height-1-1"  aria-label="$gettext('Application Switcher')" ref="menubutton" />
-    <oc-drop toggle="#_appSwitcherButton" mode="click" :options="{pos:'bottom-right'}" class="uk-width-large" ref="menu">
+    <oc-drop
+      dropId="app-switcher-dropdown"
+      toggle="#_appSwitcherButton"
+      mode="click"
+      :options="{pos:'bottom-right', delayHide: 0}"
+      class="uk-width-large"
+      ref="menu"
+      closeOnClick
+    >
       <div class="uk-grid-small uk-text-center" uk-grid>
         <div class="uk-width-1-3" v-for="(n, nid) in $_applicationsList" :key="nid">
           <a v-if="n.url" key="external-link" target="_blank" :href="n.url">
@@ -36,14 +44,14 @@ export default {
   },
   computed: {
     $_applicationsList () {
-      return this.applicationsList.map((item) => {
+      return this.applicationsList.map(item => {
         const lang = this.$language.current
         // TODO: move language resolution to a common function
         // FIXME: need to handle logic for variants like en_US vs en_GB
-        let title = item.title.en
+        let title = item.title ? item.title.en : item.name
         let iconMaterial
         let iconUrl
-        if (item.title[lang]) {
+        if (item.title && item.title[lang]) {
           title = item.title[lang]
         }
 
@@ -64,10 +72,10 @@ export default {
 
         if (item.url) {
           app.url = item.url
-        }
-
-        if (item.path) {
+        } else if (item.path) {
           app.path = item.path
+        } else {
+          app.path = `/${item.id}`
         }
 
         return app

src/components/Top-Bar.vue

@@ -1,9 +1,19 @@
 <template>
   <oc-navbar id="oc-topbar" tag="header" class="oc-topbar uk-position-relative uk-navbar">
     <oc-navbar-item position="left">
-      <oc-button v-if="hasAppNavigation" icon="menu" variation="primary" class="oc-topbar-menu-burger uk-height-1-1" aria-label="Menu" @click="$_onOpenAppNavigation" ref="menubutton">
+      <oc-button
+        v-if="hasAppNavigation"
+        key="extension-navigation-button"
+        icon="menu"
+        variation="primary"
+        class="oc-topbar-menu-burger uk-height-1-1"
+        :aria-label="$gettext('Menu')"
+        @click="$_onOpenAppNavigation"
+        ref="menubutton"
+      >
         <span class="oc-topbar-menu-burger-label" v-translate>Menu</span>
       </oc-button>
+      <span v-else key="extension-title" class="topbar-current-extension-title uk-margin-left" v-text="currentExtensionName" />
     </oc-navbar-item>
     <oc-navbar-item position="center">
       <router-link to="/" class="oc-topbar-icon">ownCloud X</router-link>
@@ -17,6 +27,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import pluginHelper from '../mixins/pluginHelper.js'
 import ApplicationsMenu from './ApplicationsMenu.vue'
 import UserMenu from './UserMenu.vue'
@@ -59,8 +70,14 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['apps']),
+
     isPublicPage () {
       return !this.userId
+    },
+
+    currentExtensionName () {
+      return this.$gettext(this.apps[this.currentExtension].name)
     }
   },
   methods: {
@@ -70,3 +87,10 @@ export default {
   }
 }
 </script>
+
+TODO: Move to ODS and enable theming
+<style scoped>
+.topbar-current-extension-title {
+  color: white
+}
+</style>

src/phoenix.js

@@ -84,7 +84,7 @@ const supportedLanguages = {
 
 function loadApps () {
   let plugins = []
-  let navItems = []
+  let navItems = {}
   let translations = coreTranslations
 
   let routes = [{
@@ -122,7 +122,7 @@ function loadApps () {
       plugins.push(app.plugins)
     }
     if (app.navItems) {
-      navItems.push(app.navItems)
+      navItems[app.appInfo.id] = app.navItems
     }
     if (app.translations) {
       Object.keys(supportedLanguages).forEach((lang) => {
@@ -157,7 +157,6 @@ function loadApps () {
     silent: true
   })
 
-  navItems = navItems.flat()
   const OC = new Vue({
     el: '#owncloud',
     data: {

src/plugins/phoenix.js

@@ -5,7 +5,11 @@ export default {
     Vue.mixin({
       computed: {
         ...mapGetters(['getToken', 'isAuthenticated']),
-        ...mapGetters('Files', ['publicLinkPassword'])
+        ...mapGetters('Files', ['publicLinkPassword']),
+
+        currentExtension () {
+          return this.$route.path.split('/')[1]
+        }
       },
       methods: {
         ...mapActions('Files', ['addActionToProgress', 'removeActionFromProgress']),