Redesign small fixes (#6222)

* Fix layout and vertical paddings

* Hide elements in topbar that require authentication when unauthenticated

* Update changelog item

* For resource size fall back to Number.NaN to avoid type check failures

* Fix unit test

changelog/unreleased/enhancement-redesign-main-layout

@@ -6,3 +6,4 @@ While doing so, we also removed the `vue2-touch-events` dependency.
 
 https://github.com/owncloud/web/issues/6036
 https://github.com/owncloud/web/pull/6086
+https://github.com/owncloud/web/pull/6222

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -68,7 +68,7 @@
       />
     </template>
     <template #size="{ item }">
-      <oc-resource-size :size="item.size" />
+      <oc-resource-size :size="item.size || Number.NaN" />
     </template>
     <template #mdate="{ item }">
       <span

packages/web-runtime/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="web">
     <oc-hidden-announcer :announcement="announcement" level="polite" />
-    <skip-to target="main">
+    <skip-to target="web-content-main">
       <translate>Skip to main</translate>
     </skip-to>
     <div
@@ -17,20 +17,29 @@
       <router-view name="fullscreen" />
     </template>
     <div v-else id="web-content">
-      <top-bar
-        v-if="!publicPage() && !$route.meta.verbose"
-        :applications-list="applicationsList"
-        :active-notifications="activeNotifications"
-        :user-id="user.username || user.id"
-        :user-display-name="user.displayname"
-      />
-      <div id="main">
+      <div id="web-content-header">
+        <top-bar
+          :applications-list="applicationsList"
+          :active-notifications="activeNotifications"
+          :user-id="user.username || user.id"
+          :user-display-name="user.displayname"
+        />
+      </div>
+      <div id="web-content-main" class="oc-px-s oc-pb-s">
         <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
-        <div id="main-app-area" class="oc-my-m oc-mx-s uk-flex">
+        <div class="app-container uk-flex">
           <transition>
-            <sidebar-nav v-if="isSidebarVisible" :nav-items="sidebarNavItems" />
+            <sidebar-nav
+              v-if="isSidebarVisible"
+              class="app-navigation"
+              :nav-items="sidebarNavItems"
+            />
           </transition>
-          <router-view class="oc-app-container uk-width-1-1 oc-py-s oc-ps-s" name="app" />
+          <router-view
+            class="app-content uk-width-1-1 oc-py-s"
+            :class="{ 'app-content-standalone': !isSidebarVisible }"
+            name="app"
+          />
         </div>
       </div>
     </div>
@@ -300,27 +309,50 @@ export default {
 }
 </script>
 <style lang="scss">
-html,
-body,
-#web,
-#web-content {
-  height: 100%;
-  overflow-y: hidden;
-}
-
 #web {
   background-color: #202020;
+  height: 100vh;
+  max-height: 100vh;
+  overflow-y: hidden;
 }
 
-.oc-app-container {
-  min-height: 85vh;
-  max-height: 85vh !important;
-  overflow-y: scroll;
-}
+#web-content {
+  display: flex;
+  flex-flow: column;
+  flex-wrap: nowrap;
+  height: 100vh;
+
+  #web-content-header,
+  #web-content-main {
+    flex-shrink: 1;
+    flex-basis: auto;
+  }
+  #web-content-header {
+    flex-grow: 0;
+  }
+  #web-content-main {
+    flex-grow: 1;
+    overflow-y: scroll;
+
+    .app-container {
+      height: 100%;
+
+      .app-navigation {
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+      }
 
-#main-app-area {
-  background-color: var(--oc-color-background-default);
-  border-radius: 15px;
+      .app-content {
+        background-color: var(--oc-color-background-default);
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+
+        &-standalone {
+          border-radius: 15px;
+        }
+      }
+    }
+  }
 }
 
 .loading-overlay {

packages/web-runtime/src/components/TopBar.vue

@@ -15,8 +15,9 @@
     </div>
     <div class="topbar-gap uk-flex uk-flex-middle uk-flex-between">
       <feedback-link v-if="isFeedbackLinkEnabled" />
-      <notifications v-if="activeNotifications.length" />
+      <notifications v-if="isNotificationBellEnabled" />
       <user-menu
+        v-if="isUserMenuEnabled"
         :user-id="userId"
         :user-display-name="userDisplayName"
         :applications-list="applicationsList"
@@ -63,7 +64,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['configuration']),
+    ...mapGetters(['configuration', 'user']),
 
     sidebarLogoAlt() {
       return this.$gettext('Navigate to all files page')
@@ -75,6 +76,14 @@ export default {
 
     isFeedbackLinkEnabled() {
       return !this.configuration.options.disableFeedbackLink
+    },
+
+    isNotificationBellEnabled() {
+      return this.user?.id && this.activeNotifications.length
+    },
+
+    isUserMenuEnabled() {
+      return this.user?.id
     }
   }
 }

packages/web-runtime/tests/unit/components/TopBar.spec.js

@@ -23,16 +23,18 @@ const defaultRoute = () => ({
 
 describe('Top Bar component', () => {
   it('Displays applications menu', () => {
+    const userId = 'einstein'
     const wrapper = shallowMount(TopBar, {
       store: new Vuex.Store({
         getters: {
-          configuration: () => feedbackButtonPresent(true)
+          configuration: () => feedbackButtonPresent(true),
+          user: () => ({ id: userId })
         }
       }),
       localVue,
       stubs,
       propsData: {
-        userId: 'einstein',
+        userId,
         userDisplayName: 'Albert Einstein',
         applicationsList: ['testApp']
       },

tests/acceptance/pageObjects/webPage.js

@@ -291,7 +291,7 @@ module.exports = {
       selector: '#web'
     },
     appContainer: {
-      selector: '.oc-app-container'
+      selector: '.app-content'
     },
     notificationElement: {
       selector: '//div[@id="oc-notification"]//h4',