Fix no close option on app pdf-viewer (#7201)

Add toolbar with filename and close button to app pdf-viewer

changelog/unreleased/enhancement-pdf-viewer-app-toolbar

@@ -0,0 +1,7 @@
+Enhancement: Added a toolbar to pdf-viewer app
+
+We've added a toolbar to the pdf-viewer app,
+where the user can see the name of the opened pdf file and also close the app.
+
+https://github.com/owncloud/web/pull/7201
+https://github.com/owncloud/web/issues/7198

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

@@ -2,12 +2,15 @@
   <main>
     <loading-screen v-if="loading" />
     <error-screen v-else-if="loadingError" />
-    <object
-      v-else
-      class="pdf-viewer oc-width-1-1 oc-height-1-1"
-      :data="blobUrl"
-      type="application/pdf"
-    />
+    <div v-else class="oc-height-1-1">
+      <div class="oc-flex oc-p-s pdf-viewer-tool-bar">
+        <span>{{ fileName }}</span>
+        <oc-button id="text-editor-controls-close" size="small" @click="closeApp">
+          <oc-icon name="close" size="small" />
+        </oc-button>
+      </div>
+      <object class="pdf-viewer oc-width-1-1" :data="blobUrl" type="application/pdf" />
+    </div>
   </main>
 </template>
 <script>
@@ -36,7 +39,11 @@ export default {
     blobUrl: ''
   }),
   computed: {
-    ...mapGetters(['getToken'])
+    ...mapGetters(['getToken']),
+
+    fileName() {
+      return this.currentFileContext.fileName
+    }
   },
   created() {
     this.loadPdf(this.currentFileContext)
@@ -69,5 +76,11 @@ export default {
   margin: 0;
   padding: 0;
   overflow: hidden;
+  height: calc(100% - 50px);
+}
+
+.pdf-viewer-tool-bar {
+  align-items: center;
+  justify-content: space-between;
 }
 </style>