[full-ci] Refactor extension appBar design/concept

.drone.star

@@ -2271,6 +2271,7 @@ def setupNotificationsAppForServer():
             "rm -rf %s/apps/notifications" % dir["server"],
             "git clone -b master https://github.com/owncloud/notifications.git %s/apps/notifications" % dir["server"],
             "cd %s || exit" % dir["server"],
+            "php occ upgrade",
             "php occ a:e notifications",
             "php occ a:l",
         ],

changelog/unreleased/enhancement-improve-extension-app-topbar

@@ -0,0 +1,7 @@
+Enhancement: Improve extension app topbar
+
+We have redesigned the app topbar used in extensions and added more file actions.
+
+https://github.com/owncloud/web/issues/8422
+https://github.com/owncloud/web/pull/8442
+https://github.com/owncloud/web/pull/8447

packages/design-system/src/tokens/ods/color.yaml

@@ -122,6 +122,12 @@ color:
       value: rgb(206, 221, 238)
     bg:
       value: rgb(255, 255, 255)
+  components:
+    apptopbar:
+      background:
+        value: 'transparent'
+      border:
+        value: rgb(206, 221, 238)
   icon:
     folder:
       value: rgb(44, 101, 255)

packages/web-app-external/src/App.vue

@@ -6,6 +6,7 @@
     }"
   >
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
+    <app-top-bar v-if="!loading && !loadingError" :resource="resource" @close="closeApp" />
     <loading-screen v-if="loading" />
     <error-screen v-else-if="loadingError" :message="errorMessage" />
     <iframe
@@ -33,21 +34,20 @@
 </template>
 
 <script lang="ts">
+import { stringify } from 'qs'
 import { mapGetters } from 'vuex'
-import ErrorScreen from './components/ErrorScreen.vue'
-import LoadingScreen from './components/LoadingScreen.vue'
-import { computed, unref } from 'vue'
-import { queryItemAsString, useAppDefaults, useRouteQuery } from 'web-pkg/src/composables'
-import { defineComponent } from 'vue'
-import { DavProperty } from 'web-client/src/webdav/constants'
+import { computed, defineComponent, unref } from 'vue'
 import { urlJoin } from 'web-client/src/utils'
-import { stringify } from 'qs'
+import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
+import { queryItemAsString, useAppDefaults, useRouteQuery } from 'web-pkg/src/composables'
 import { configurationManager } from 'web-pkg/src/configuration'
+import ErrorScreen from './components/ErrorScreen.vue'
+import LoadingScreen from './components/LoadingScreen.vue'
 
 export default defineComponent({
   name: 'ExternalApp',
-
   components: {
+    AppTopBar,
     ErrorScreen,
     LoadingScreen
   },
@@ -64,12 +64,13 @@ export default defineComponent({
   },
 
   data: () => ({
+    appUrl: '',
+    errorMessage: '',
+    formParameters: {},
     loading: false,
     loadingError: false,
-    errorMessage: '',
-    appUrl: '',
     method: '',
-    formParameters: {}
+    resource: null
   }),
   computed: {
     ...mapGetters(['capabilities']),
@@ -86,20 +87,18 @@ export default defineComponent({
         appName: this.applicationName
       })
     },
-    fileId() {
+    fileIdFromRoute() {
       return this.$route.query.fileId
     }
   },
   async created() {
     this.loading = true
     try {
-      const fileId =
-        this.fileId ||
-        (
-          await this.getFileInfo(this.currentFileContext, {
-            davProperties: [DavProperty.FileId]
-          })
-        ).fileId
+      this.resource = await this.getFileInfo(this.currentFileContext, {
+        davProperties: []
+      })
+
+      const fileId = this.fileIdFromRoute || this.resource.fileId
 
       // fetch iframe params for app and file
       const baseUrl = urlJoin(

packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap

@@ -3,6 +3,7 @@
 exports[`The app provider extension should be able to load an iFrame via get 1`] = `
 <main class="oc-height-1-1">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
+  <app-top-bar-stub dropdownactions="" mainactions="" resource="undefined"></app-top-bar-stub>
   <!--v-if-->
   <iframe allowfullscreen="" class="oc-width-1-1 oc-height-1-1" src="https://example.test/d12ab86/loe009157-MzBw" title="&quot;exampleApp&quot; app content area"></iframe>
   <!--v-if-->
@@ -12,6 +13,7 @@ exports[`The app provider extension should be able to load an iFrame via get 1`]
 exports[`The app provider extension should be able to load an iFrame via post 1`] = `
 <main class="oc-height-1-1">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
+  <app-top-bar-stub dropdownactions="" mainactions="" resource="undefined"></app-top-bar-stub>
   <!--v-if-->
   <!--v-if-->
   <div class="oc-height-1-1">
@@ -32,6 +34,7 @@ exports[`The app provider extension should be able to load an iFrame via post 1`
 exports[`The app provider extension should fail for unauthenticated users 1`] = `
 <main class="oc-height-1-1 oc-flex oc-flex-center oc-flex-middle">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
+  <!--v-if-->
   <error-screen-stub message="Error retrieving file information"></error-screen-stub>
   <!--v-if-->
   <!--v-if-->
@@ -41,6 +44,7 @@ exports[`The app provider extension should fail for unauthenticated users 1`] =
 exports[`The app provider extension should show a loading spinner while loading 1`] = `
 <main class="oc-height-1-1 oc-flex oc-flex-center oc-flex-middle">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
+  <!--v-if-->
   <loading-screen-stub></loading-screen-stub>
   <!--v-if-->
   <!--v-if-->
@@ -50,6 +54,7 @@ exports[`The app provider extension should show a loading spinner while loading
 exports[`The app provider extension should show a meaningful message if an error occurs during loading 1`] = `
 <main class="oc-height-1-1 oc-flex oc-flex-center oc-flex-middle">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
+  <!--v-if-->
   <error-screen-stub message="Error retrieving file information"></error-screen-stub>
   <!--v-if-->
   <!--v-if-->

packages/web-app-external/tests/unit/app.spec.ts

@@ -22,6 +22,7 @@ jest.mock('web-pkg/src/composables/appDefaults', () => {
 })
 
 const componentStubs = {
+  AppTopBar: true,
   ErrorScreen: true,
   LoadingScreen: true
 }

packages/web-app-pdf-viewer/src/App.vue

@@ -1,26 +1,26 @@
 <template>
   <main>
-    <app-top-bar :resource="resource" @close="closeApp" />
+    <app-top-bar v-if="!loading && !loadingError" :resource="resource" @close="closeApp" />
     <loading-screen v-if="loading" />
     <error-screen v-else-if="loadingError" />
     <div v-else class="oc-height-1-1">
-      <object class="pdf-viewer oc-width-1-1" :data="url" type="application/pdf" />
+      <object class="pdf-viewer oc-height-1-1 oc-width-1-1" :data="url" type="application/pdf" />
     </div>
   </main>
 </template>
 <script lang="ts">
+import { defineComponent } from 'vue'
 import { useAppDefaults } from 'web-pkg/src/composables'
 import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
 import ErrorScreen from './components/ErrorScreen.vue'
 import LoadingScreen from './components/LoadingScreen.vue'
-import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'PDFViewer',
   components: {
+    AppTopBar,
     ErrorScreen,
-    LoadingScreen,
-    AppTopBar
+    LoadingScreen
   },
   setup() {
     return {
@@ -81,6 +81,5 @@ export default defineComponent({
   margin: 0;
   padding: 0;
   overflow: hidden;
-  height: calc(100% - 52px);
 }
 </style>

packages/web-app-preview/src/App.vue

@@ -8,19 +8,12 @@
     @keydown.esc="closeApp"
   >
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
-    <app-top-bar :resource="activeFilteredFile" @close="closeApp">
-      <template #right>
-        <oc-button
-          v-if="!isFileContentError"
-          class="preview-download"
-          size="small"
-          :aria-label="$gettext('Download currently viewed file')"
-          @click="triggerActiveFileDownload"
-        >
-          <oc-icon size="small" name="file-download" />
-        </oc-button>
-      </template>
-    </app-top-bar>
+    <app-top-bar
+      v-if="!isFileContentError"
+      :resource="activeFilteredFile"
+      :main-actions="fileActions"
+      @close="closeApp"
+    />
 
     <div v-if="isFolderLoading || isFileContentLoading" class="oc-position-center">
       <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
@@ -75,6 +68,9 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent, ref, unref } from 'vue'
+import { RouteLocationRaw } from 'vue-router'
+import { Resource } from 'web-client/src'
+import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
 import {
   queryItemAsString,
   sortHelper,
@@ -83,11 +79,9 @@ import {
   useRouteQuery,
   useRouter
 } from 'web-pkg/src/composables'
-import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { Action, ActionOptions } from 'web-pkg/src/composables/actions/types'
 import { useDownloadFile } from 'web-pkg/src/composables/download/useDownloadFile'
-import { RouteLocationRaw } from 'vue-router'
-import { Resource } from 'web-client/src'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import MediaControls from './components/MediaControls.vue'
 import MediaAudio from './components/Sources/MediaAudio.vue'
 import MediaImage from './components/Sources/MediaImage.vue'
@@ -127,6 +121,7 @@ export default defineComponent({
     const route = useRoute()
     const appDefaults = useAppDefaults({ applicationId: 'preview' })
     const contextRouteQuery = useRouteQuery('contextRouteQuery')
+    const { downloadFile } = useDownloadFile()
 
     const activeIndex = ref()
     const cachedFiles = ref<CachedFile[]>([])
@@ -190,23 +185,45 @@ export default defineComponent({
         query: { ...unref(route).query, ...query }
       })
     }
+    const isFileContentLoading = ref(true)
+
+    const triggerActiveFileDownload = () => {
+      if (isFileContentLoading.value) {
+        return
+      }
+      downloadFile(activeFilteredFile.value)
+    }
+
+    const fileActions: Action<ActionOptions>[] = [
+      {
+        name: 'download-file',
+        isEnabled: () => true,
+        componentType: 'button',
+        icon: 'file-download',
+        id: 'preview-download',
+        label: () => 'Download',
+        handler: () => {
+          triggerActiveFileDownload()
+        }
+      }
+    ]
 
     return {
       ...appDefaults,
-      ...useDownloadFile(),
-      cachedFiles,
-      filteredFiles,
       activeFilteredFile,
       activeIndex,
       activeMediaFileCached,
+      cachedFiles,
+      filteredFiles,
+      fileActions,
+      isFileContentLoading,
       isFullScreenModeActivated,
       toggleFullscreenMode,
       updateLocalHistory
     }
   },
   data() {
     return {
-      isFileContentLoading: true,
       isFileContentError: false,
       isAutoPlayEnabled: true,
 
@@ -348,13 +365,6 @@ export default defineComponent({
         console.error(e)
       }
     },
-    triggerActiveFileDownload() {
-      if (this.isFileContentLoading) {
-        return
-      }
-
-      return this.downloadFile(this.activeFilteredFile)
-    },
     next() {
       if (this.isFileContentLoading) {
         return

packages/web-app-search/src/portals/SearchBar.vue

@@ -30,7 +30,7 @@
     <oc-button
       v-oc-tooltip="$gettext('Display search bar')"
       :aria-label="$gettext('Click to display and focus the search bar')"
-      class="mobile-search-btn oc-mr-s"
+      class="mobile-search-btn oc-mr-l"
       appearance="raw-inverse"
       variation="brand"
       @click="showSearchBar"