[full-ci] Fix - preview: filename hovers the image when the viewport …

…is too small (#7216) Move filename and download + close button to top toolbar
owncloud · Jul 6, 2022 · 968b4d9 · 968b4d9
1 parent 67458fc
commit 968b4d9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 44 deletions.
diff --git a/changelog/unreleased/bugfix-preview-app-filename-hovers-over-image b/changelog/unreleased/bugfix-preview-app-filename-hovers-over-image
@@ -0,0 +1,9 @@
+Bugfix: Filename hovers over the image in the preview app
+
+We've fixed a bug where the filename hovers over the image content in the preview app and the bottom toolbar is not
+accurate centered.
+Therefore we have introduced a new top bar, where the filename will be shown
+and the download and the close button will be displayed.
+
+https://github.com/owncloud/web/pull/7216
+https://github.com/owncloud/web/issues/6300
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
@@ -20,6 +20,18 @@
     />
     <template v-else>
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
+      <app-top-bar :resource="activeFilteredFile" @close="closeApp">
+        <template #right>
+          <oc-button
+            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>
       <div
         v-show="activeMediaFileCached"
         class="
@@ -52,15 +64,7 @@
         </audio>
       </div>
     </template>
-
     <div class="oc-position-medium oc-position-bottom-center preview-details">
-      <p
-        v-if="activeFilteredFile"
-        class="oc-text-lead oc-text-center oc-text-truncate oc-p-s preview-file-name"
-        aria-hidden="true"
-      >
-        {{ activeFilteredFile.name }}
-      </p>
       <div
         class="
           oc-background-brand
@@ -95,24 +99,6 @@
         >
           <oc-icon size="large" name="arrow-drop-right" />
         </oc-button>
-        <oc-button
-          class="preview-controls-download"
-          appearance="raw"
-          variation="inverse"
-          :aria-label="$gettext('Download currently viewed file')"
-          @click="triggerActiveFileDownload"
-        >
-          <oc-icon size="large" name="file-download" fill-type="line" />
-        </oc-button>
-        <oc-button
-          class="preview-controls-close"
-          appearance="raw"
-          variation="inverse"
-          :aria-label="$gettext('Close preview')"
-          @click="closeApp"
-        >
-          <oc-icon size="large" name="close" />
-        </oc-button>
       </div>
     </div>
   </main>
@@ -122,9 +108,13 @@ import { defineComponent } from '@vue/runtime-core'
 import { mapGetters } from 'vuex'
 import { useAppDefaults } from 'web-pkg/src/composables'
 import Preview from './index'
+import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
 
 export default defineComponent({
   name: 'Preview',
+  components: {
+    AppTopBar
+  },
   setup() {
     return {
       ...useAppDefaults({
@@ -307,6 +297,7 @@ export default defineComponent({
         } else {
           mediaUrl = await this.$client.signUrl(url, 86400) // Timeout of the signed URL = 24 hours
         }
+
         this.cachedFiles.push({
           id: this.activeFilteredFile.id,
           name: this.activeFilteredFile.name,
@@ -377,6 +368,11 @@ export default defineComponent({
   }
 }
 
+.preview-tool-bar {
+  align-items: center;
+  justify-content: space-between;
+}
+
 .preview-controls-action-count {
   color: var(--oc-color-swatch-inverse-default);
 }
@@ -385,17 +381,5 @@ export default defineComponent({
   .preview-player {
     max-width: 100vw;
   }
-
-  .preview-details {
-    left: 0;
-    margin: 0;
-    max-width: 100%;
-    transform: none !important;
-    width: 100%;
-
-    .preview-controls-action-bar {
-      width: 100%;
-    }
-  }
 }
 </style>
diff --git a/tests/acceptance/pageObjects/FilesPageElement/previewPage.js b/tests/acceptance/pageObjects/FilesPageElement/previewPage.js
@@ -47,16 +47,15 @@ module.exports = {
         .useCss()
     },
     downloadMediaResource: function () {
-      const downloadButtonXpath =
-        this.elements.actionBar.selector + this.elements.downLoadButton.selector
+      const downloadButtonXpath = this.elements.downLoadButton.selector
       return this.useXpath()
         .waitForElementVisible(downloadButtonXpath)
         .click(downloadButtonXpath)
         .waitForAjaxCallsToStartAndFinish()
         .useCss()
     },
     closeMediaResource: function () {
-      const closeButtonXpath = this.elements.actionBar.selector + this.elements.closeButton.selector
+      const closeButtonXpath = this.elements.closeButton.selector
       return this.useXpath()
         .waitForElementVisible(closeButtonXpath)
         .click(closeButtonXpath)
@@ -78,15 +77,15 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     downLoadButton: {
-      selector: `//button[contains(@class, "preview-controls-download")]`,
+      selector: `//button[contains(@class, "preview-download")]`,
       locateStrategy: 'xpath'
     },
     closeButton: {
-      selector: `//button[contains(@class, "preview-controls-close")]`,
+      selector: `//button[@id='app-top-bar-close']`,
       locateStrategy: 'xpath'
     },
     mediaImage: {
-      selector: '//p[contains(@class, "preview-file-name") and contains(text(),"%s")]',
+      selector: `//div[@id='app-top-bar-resource']//span[@data-test-resource-name='%s']`,
       locateStrategy: 'xpath'
     }
   }