Apps fixes

Allow img instead of icon
Ensure canBeDefault is honored

Author: diocas

packages/web-app-files/src/components/FilesList/ContextActions.vue

@@ -17,7 +17,7 @@
             :class="['oc-text-bold', action.class]"
             v-on="getComponentListeners(action, item)"
           >
-            <oc-icon v-if="action.icon" :name="action.icon" size="medium" />
+            <oc-icon v-if="action.icon && !action.img" :name="action.icon" size="medium" />
             <oc-img v-if="action.img" :src="action.img" alt="" class="oc-icon oc-icon-m" />
             <span class="oc-files-context-action-label">{{ action.label(item) }}</span>
             <span

packages/web-app-files/src/components/SideBar/Actions/FileActions.vue

@@ -7,7 +7,7 @@
         :class="['oc-text-bold', action.class]"
         @click.stop="action.handler(highlightedFile, action.handlerData)"
       >
-        <oc-icon v-if="action.icon" :name="action.icon" size="medium" />
+        <oc-icon v-if="action.icon && !action.img" :name="action.icon" size="medium" />
         <oc-img v-if="action.img" :src="action.img" alt="" class="oc-icon oc-icon-m" />
         <span class="oc-files-actions-sidebar-action-label">{{
           action.label(highlightedFile)

packages/web-app-files/src/mixins/fileActions.js

@@ -66,33 +66,42 @@ export default {
     },
 
     $_fileActions_editorActions() {
-      return this.apps.fileEditors.map((editor) => {
-        return {
-          label: () => {
-            const translated = this.$gettext('Open in %{app}')
-            return this.$gettextInterpolate(
-              translated,
-              { app: this.apps.meta[editor.app].name },
-              true
-            )
-          },
-          icon: this.apps.meta[editor.app].icon,
-          handler: (item) =>
-            this.$_fileActions_openEditor(editor, item.path, item.id, EDITOR_MODE_EDIT),
-          isEnabled: ({ resource }) => {
-            if (editor.routes?.length > 0 && !checkRoute(editor.routes, this.$route.name)) {
-              return false
-            }
-
-            return resource.extension === editor.extension
-          },
-          canBeDefault: true,
-          componentType: 'oc-button',
-          class: `oc-files-actions-${kebabCase(
-            this.apps.meta[editor.app].name
-          ).toLowerCase()}-trigger`
-        }
-      })
+      return this.apps.fileEditors
+        .map((editor) => {
+          return {
+            label: () => {
+              const translated = this.$gettext('Open in %{app}')
+              return this.$gettextInterpolate(
+                translated,
+                { app: this.apps.meta[editor.app].name },
+                true
+              )
+            },
+            icon: this.apps.meta[editor.app].icon,
+            img: this.apps.meta[editor.app].img,
+            handler: (item) =>
+              this.$_fileActions_openEditor(editor, item.path, item.id, EDITOR_MODE_EDIT),
+            isEnabled: ({ resource }) => {
+              if (editor.routes?.length > 0 && !checkRoute(editor.routes, this.$route.name)) {
+                return false
+              }
+
+              return resource.extension === editor.extension
+            },
+            canBeDefault: editor.canBeDefault,
+            componentType: 'oc-button',
+            class: `oc-files-actions-${kebabCase(
+              this.apps.meta[editor.app].name
+            ).toLowerCase()}-trigger`
+          }
+        })
+        .sort((first, second) => {
+          // We make the default action based on the order, so put the ones who can be default on top
+          if (second.canBeDefault !== first.canBeDefault && second.canBeDefault) {
+            return 1
+          }
+          return 0
+        })
     }
   },
 
@@ -183,7 +192,8 @@ export default {
       return appProviders.map((app) => {
         const label = this.$gettext('Open in %{ appName }')
         return {
-          img: app.icon,
+          icon: app.icon,
+          img: app.img,
           componentType: 'oc-button',
           class: `oc-files-actions-${app.name}-trigger`,
           isEnabled: () => true,

packages/web-runtime/src/store/apps.js

@@ -46,11 +46,13 @@ const mutations = {
     const editor = {
       app,
       icon: extension.icon,
+      img: extension.img,
       newTab: extension.newTab || false,
       routeName: extension.routeName,
       routes: extension.routes || [],
       extension: extension.extension,
-      handler: extension.handler
+      handler: extension.handler,
+      canBeDefault: 'canBeDefault' in extension ? extension.canBeDefault : true
     }
 
     state.fileEditors.push(editor)
@@ -94,7 +96,8 @@ const mutations = {
     const app = {
       name: appInfo.name || appInfo.id,
       id: appInfo.id,
-      icon: appInfo.icon || 'check_box_outline_blank'
+      icon: appInfo.icon || 'check_box_outline_blank',
+      img: appInfo.img || null
     }
     state.meta[app.id] = app
   },