Introduce app top bar

changelog/unreleased/enhancement-add-app-top-bar-component

@@ -0,0 +1,6 @@
+Enhancement: Add app top bar component
+
+We've added a app top bar component for consistency,
+which will be used by the apps: preview, text-editor and pdf-viewer.
+
+https://github.com/owncloud/web/pull/7217

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

@@ -3,19 +3,15 @@
     <loading-screen v-if="loading" />
     <error-screen v-else-if="loadingError" />
     <div v-else class="oc-height-1-1">
-      <div class="oc-flex oc-p-s pdf-viewer-tool-bar">
-        <oc-resource :resource="resource" />
-        <oc-button id="text-editor-controls-close" size="small" @click="closeApp">
-          <oc-icon name="close" size="small" />
-        </oc-button>
-      </div>
+      <app-top-bar :resource="resource" @close="closeApp" />
       <object class="pdf-viewer oc-width-1-1" :data="blobUrl" type="application/pdf" />
     </div>
   </main>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 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 { buildResource } from 'files/src/helpers/resources'
@@ -24,7 +20,8 @@ export default {
   name: 'PDFViewer',
   components: {
     ErrorScreen,
-    LoadingScreen
+    LoadingScreen,
+    AppTopBar
   },
   setup() {
     return {
@@ -76,11 +73,6 @@ export default {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  height: calc(100% - 50px);
-}
-
-.pdf-viewer-tool-bar {
-  align-items: center;
-  justify-content: space-between;
+  height: calc(100% - 60px);
 }
 </style>

packages/web-app-text-editor/src/App.vue

@@ -1,13 +1,20 @@
 <template>
   <main id="text-editor" class="oc-px-l oc-py-m oc-height-1-1">
-    <app-bar
-      :current-file-context="currentFileContext"
-      :is-loading="isLoading"
-      :is-dirty="isDirty"
-      :is-read-only="isReadOnly"
-      @closeApp="closeApp"
-      @save="save"
-    />
+    <div v-if="isLoading" class="oc-text-center">
+      <oc-spinner :aria-label="$gettext('Loading editor content')" />
+    </div>
+    <app-top-bar v-else :resource="resource" @close="closeApp">
+      <template #right>
+        <oc-button
+          id="text-editor-controls-save"
+          :aria-label="$gettext('Save')"
+          :disabled="isReadOnly || !isDirty"
+          @click="save"
+        >
+          <oc-icon name="save" size="small" />
+        </oc-button>
+      </template>
+    </app-top-bar>
     <div class="oc-flex editor-wrapper-height">
       <div :class="showPreview ? 'oc-width-1-2' : 'oc-width-1-1'" class="oc-height-1-1">
         <oc-textarea
@@ -36,12 +43,13 @@ import { computed, onMounted, onBeforeUnmount, ref, unref } from '@vue/compositi
 import { mapActions } from 'vuex'
 import { DavPermission, DavProperty } from 'web-pkg/src/constants'
 import { useAppDefaults } from 'web-pkg/src/composables'
-import AppBar from './AppBar.vue'
+import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
+import { buildResource } from 'files/src/helpers/resources'
 
 export default {
   name: 'TextEditor',
   components: {
-    AppBar
+    AppTopBar
   },
   beforeRouteLeave(_to, _from, next) {
     if (this.isDirty) {
@@ -76,6 +84,7 @@ export default {
     const currentContent = ref()
     const currentETag = ref()
     const isReadOnly = ref(true)
+    const resource = ref()
 
     const loadFileTask = useTask(function* () {
       const filePath = unref(currentFileContext).path
@@ -86,6 +95,7 @@ export default {
           isReadOnly.value = ![DavPermission.Updateable, DavPermission.FileUpdateable].some(
             (p) => response.fileInfo[DavProperty.Permissions].indexOf(p) > -1
           )
+          resource.value = buildResource(response)
         })
 
       return yield unref(defaults)
@@ -206,6 +216,7 @@ export default {
       currentContent,
       renderedMarkdown,
       config,
+      resource,
 
       // methods
       save,

packages/web-pkg/src/components/AppTopBar.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="oc-flex oc-p-s app-top-bar">
+    <oc-resource
+      id="app-top-bar-resource"
+      :is-path-displayed="true"
+      :is-thumbnail-displayed="false"
+      :resource="resource"
+    />
+    <div>
+      <slot name="right"></slot>
+      <oc-button
+        id="app-top-bar-close"
+        :aria-label="$gettext('Close')"
+        size="small"
+        @click="$emit('close')"
+      >
+        <oc-icon name="close" size="small" />
+      </oc-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core'
+
+export default defineComponent({
+  name: 'AppTopBar',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.app-top-bar {
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

tests/acceptance/pageObjects/textEditorPage.js

@@ -84,7 +84,7 @@ module.exports = {
       selector: '#text-editor-controls-save'
     },
     closeButton: {
-      selector: '#text-editor-controls-close'
+      selector: '#app-top-bar-close'
     },
     fileName: {
       selector: '#text-editor-file-path'