Merge pull request #6401 from owncloud/enforce-extention-header

[full-ci] Enforce extensions to always display the ui-header
owncloud · Feb 11, 2022 · e09700e · e09700e
2 parents 7a55ccd + 396ba0f
commit e09700e
Show file tree

Hide file tree

Showing 32 changed files with 395 additions and 414 deletions.
diff --git a/changelog/unreleased/change-enforce-ui-header b/changelog/unreleased/change-enforce-ui-header
@@ -0,0 +1,6 @@
+Change: Enforce extensions to always display the ui-header
+
+We've enforced the ui to always render the header for third party extensions.
+From now on extensions are not able to disable the header anymore.
+
+https://github.com/owncloud/web/pull/6401
diff --git a/packages/web-app-draw-io/src/App.vue b/packages/web-app-draw-io/src/App.vue
@@ -250,11 +250,6 @@ export default {
 </script>
 <style scoped>
 #drawio-editor {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
   width: 100%;
   height: 100%;
   border: none;

diff --git a/packages/web-app-draw-io/src/index.js b/packages/web-app-draw-io/src/index.js
@@ -5,12 +5,9 @@ const routes = [
   {
     name: 'draw-io',
     path: '/:contextRouteName/:filePath*',
-    components: {
-      fullscreen: App
-    },
+    component: App,
     meta: {
       auth: false,
-      hideHeadbar: true,
       patchCleanPath: true
     }
   }

diff --git a/packages/web-app-external/src/index.js b/packages/web-app-external/src/index.js
@@ -16,9 +16,7 @@ const routes = [
   {
     name: 'apps',
     path: '/:contextRouteName/:fileId/:appName?',
-    components: {
-      app: App
-    },
+    component: App,
     meta: {
       auth: false,
       title: $gettext('External app')

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
@@ -104,7 +104,6 @@ export default {
 main {
   height: 100%;
   max-height: 100%;
-  overflow: hidden;
 }
 
 .files-list-wrapper {

diff --git a/packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue b/packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue
@@ -103,8 +103,8 @@ export default {
 }
 @media only screen and (min-width: 640px) {
   .oc-dropzone-navigation-collapsed > .oc-dropzone-container {
-    left: calc(67px + var(--oc-space-small));
-    width: calc(100% - 67px - (2 * var(--oc-space-small)));
+    left: calc(64px + var(--oc-space-small));
+    width: calc(100% - 64px - (2 * var(--oc-space-small)));
   }
   .oc-dropzone-navigation-expanded > .oc-dropzone-container {
     left: calc(250px + var(--oc-space-small));

diff --git a/packages/web-app-files/src/router/common.ts b/packages/web-app-files/src/router/common.ts
@@ -18,9 +18,7 @@ export const isLocationCommonActive = isLocationActiveDirector<commonTypes>(
 export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   {
     path: '/trash',
-    components: {
-      app: components.App
-    },
+    component: components.App,
     children: [
       {
         name: locationTrash.name,
@@ -36,9 +34,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   },
   {
     path: '/favorites',
-    components: {
-      app: components.App
-    },
+    component: components.App,
     children: [
       {
         name: locationFavorites.name,

diff --git a/packages/web-app-files/src/router/operations.ts b/packages/web-app-files/src/router/operations.ts
@@ -26,9 +26,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   {
     name: locationLocationPicker.name,
     path: '/ops/location-picker/:context/:action/:item*',
-    components: {
-      app: components.LocationPicker
-    },
+    component: components.LocationPicker,
     meta: {
       verbose: true,
       auth: false,
@@ -38,21 +36,16 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   {
     name: locationResolverPublicLink.name,
     path: '/ops/resolver/public-link/:token',
-    components: {
-      fullscreen: components.PublicLink
-    },
+    component: components.PublicLink,
     meta: {
       auth: false,
-      hideHeadbar: true,
       title: $gettext('Resolving public link')
     }
   },
   {
     name: locationResolverPrivateLink.name,
     path: '/ops/resolver/private-link/:fileId',
-    components: {
-      fullscreen: components.PrivateLink
-    },
-    meta: { hideHeadbar: true, title: $gettext('Resolving private link') }
+    component: components.PrivateLink,
+    meta: { title: $gettext('Resolving private link') }
   }
 ]
diff --git a/packages/web-app-files/src/router/public.ts b/packages/web-app-files/src/router/public.ts
@@ -18,9 +18,7 @@ export const isLocationPublicActive = isLocationActiveDirector<shareTypes>(
 export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   {
     path: '/public',
-    components: {
-      app: components.App
-    },
+    component: components.App,
     meta: {
       auth: false
     },
@@ -41,9 +39,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   {
     name: locationPublicDrop.name,
     path: '/public/drop/:token',
-    components: {
-      app: components.FilesDrop
-    },
+    component: components.FilesDrop,
     meta: { auth: false, title: $gettext('Public file upload') }
   }
 ]
diff --git a/packages/web-app-files/src/router/shares.ts b/packages/web-app-files/src/router/shares.ts
@@ -20,9 +20,7 @@ export const isLocationSharesActive = isLocationActiveDirector<shareTypes>(
 export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   {
     path: '/shares',
-    components: {
-      app: components.App
-    },
+    component: components.App,
     redirect: locationSharesWithMe,
     children: [
       {

diff --git a/packages/web-app-files/src/router/spaces.ts b/packages/web-app-files/src/router/spaces.ts
@@ -28,9 +28,7 @@ export const isLocationSpacesActive = isLocationActiveDirector<spaceTypes>(
 export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
   {
     path: '/spaces',
-    components: {
-      app: components.App
-    },
+    component: components.App,
     children: [
       {
         path: 'projects',

diff --git a/packages/web-app-files/src/views/PrivateLink.vue b/packages/web-app-files/src/views/PrivateLink.vue
@@ -1,22 +1,31 @@
 <template>
-  <div
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
+  <div class="oc-height-1-1">
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-login-card oc-position-center">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div v-if="loading" class="oc-login-card-body">
-        <h2 class="oc-login-card-title">
-          <translate>Resolving private link…</translate>
-        </h2>
-        <oc-spinner :aria-hidden="true" />
-      </div>
-      <div v-if="errorMessage" class="oc-login-card-body">
-        <h2 class="oc-login-card-title">
-          <translate>An error occurred while resolving the private link</translate>
-        </h2>
-        <span>{{ errorMessage }}</span>
+    <div class="oc-card oc-border oc-rounded oc-position-center oc-text-center oc-width-large">
+      <template v-if="loading">
+        <div class="oc-card-header">
+          <h2 key="private-link-loading">
+            <translate>Resolving private link…</translate>
+          </h2>
+        </div>
+        <div class="oc-card-body">
+          <oc-spinner :aria-hidden="true" />
+        </div>
+      </template>
+      <template v-else-if="errorMessage">
+        <div class="oc-card-header oc-link-resolve-error-title">
+          <h2 key="private-link-error">
+            <translate>An error occurred while resolving the private link</translate>
+          </h2>
+        </div>
+        <div class="oc-card-body oc-link-resolve-error-message">
+          <p class="oc-text-lead">{{ errorMessage }}</p>
+        </div>
+      </template>
+      <div class="oc-card-footer">
+        <p>
+          {{ configuration.currentTheme.general.slogan }}
+        </p>
       </div>
     </div>
   </div>
@@ -38,14 +47,6 @@ export default {
 
     pageTitle() {
       return this.$gettext(this.$route.meta.title)
-    },
-
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
     }
   },
   mounted() {
@@ -77,3 +78,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.oc-card-header h2,
+.oc-card-footer p {
+  margin: 0;
+}
+</style>
diff --git a/packages/web-app-files/src/views/PublicLink.vue b/packages/web-app-files/src/views/PublicLink.vue
@@ -1,37 +1,43 @@
 <template>
-  <div
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
+  <div class="oc-height-1-1">
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-login-card oc-position-center">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div class="oc-login-card-body">
-        <template v-if="loading">
-          <h2 class="oc-login-card-title">
+    <div class="oc-card oc-border oc-rounded oc-position-center oc-text-center oc-width-large">
+      <template v-if="loading">
+        <div class="oc-card-header">
+          <h2 key="public-link-loading">
             <translate>Loading public link…</translate>
           </h2>
+        </div>
+        <div class="oc-card-body">
           <oc-spinner :aria-hidden="true" />
-        </template>
-        <template v-else-if="errorMessage">
-          <h2 class="oc-login-card-title oc-login-card-error">
+        </div>
+      </template>
+      <template v-else-if="errorMessage">
+        <div class="oc-card-header oc-link-resolve-error-title">
+          <h2 key="public-link-error">
             <translate>An error occurred while loading the public link</translate>
           </h2>
+        </div>
+        <div class="oc-card-body oc-link-resolve-error-message">
           <p class="oc-text-lead">{{ errorMessage }}</p>
-        </template>
-        <template v-else-if="passwordRequired">
-          <form @submit.prevent="resolvePublicLink">
-            <h2 class="oc-login-card-title">
-              <translate>This resource is password-protected.</translate>
+        </div>
+      </template>
+      <template v-else-if="passwordRequired">
+        <form @submit.prevent="resolvePublicLink">
+          <div class="oc-card-header">
+            <h2>
+              <translate>This resource is password-protected</translate>
             </h2>
+          </div>
+          <div class="oc-card-body">
             <oc-text-input
               ref="passwordInput"
               v-model="password"
               :error-message="inputErrorMessage"
               :label="passwordFieldLabel"
               type="password"
               class="oc-mb-s"
-            ></oc-text-input>
+            />
             <oc-button
               variation="primary"
               appearance="filled"
@@ -40,10 +46,10 @@
             >
               <translate>Continue</translate>
             </oc-button>
-          </form>
-        </template>
-      </div>
-      <div class="oc-login-card-footer">
+          </div>
+        </form>
+      </template>
+      <div class="oc-card-footer">
         <p>
           {{ configuration.currentTheme.general.slogan }}
         </p>
@@ -80,17 +86,9 @@ export default {
 
     passwordFieldLabel() {
       return this.$gettext('Enter password for public link')
-    },
-
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
     }
   },
-  mounted() {
+  created() {
     this.resolvePublicLink()
   },
   methods: {
@@ -141,3 +139,13 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.oc-text-input-message {
+  justify-content: center;
+}
+.oc-card-header h2,
+.oc-card-footer p {
+  margin: 0;
+}
+</style>