From 7375233de3d91ef28901029d82df6f1e991bb7a9 Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Thu, 11 Nov 2021 18:16:24 +0100
Subject: [PATCH 1/2] Remove unused OcAppContent component

---
 .../src/components/OcAppContent.vue           | 15 -----------
 .../unit/components/OcAppContent.spec.js      | 25 -------------------
 2 files changed, 40 deletions(-)
 delete mode 100644 packages/web-runtime/src/components/OcAppContent.vue
 delete mode 100644 packages/web-runtime/tests/unit/components/OcAppContent.spec.js

diff --git a/packages/web-runtime/src/components/OcAppContent.vue b/packages/web-runtime/src/components/OcAppContent.vue
deleted file mode 100644
index 839047f3d1c..00000000000
--- a/packages/web-runtime/src/components/OcAppContent.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="oc-app-content">
-    <slot name="content"></slot>
-  </div>
-</template>
-<script>
-export default {
-  data: () => ({})
-}
-</script>
-<style scoped>
-.oc-app-content {
-  overflow-y: scroll;
-}
-</style>
diff --git a/packages/web-runtime/tests/unit/components/OcAppContent.spec.js b/packages/web-runtime/tests/unit/components/OcAppContent.spec.js
deleted file mode 100644
index f618204a448..00000000000
--- a/packages/web-runtime/tests/unit/components/OcAppContent.spec.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import OcAppContent from 'web-runtime/src/components/OcAppContent.vue'
-
-const selectors = {
-  appContent: '.oc-app-content'
-}
-
-describe('OcAppContent component', () => {
-  it('should render provided element in the slot', () => {
-    const wrapper = getShallowWrapper()
-    const appContent = wrapper.find(selectors.appContent)
-    const slotEl = appContent.find('p')
-
-    expect(slotEl.exists()).toBeTruthy()
-    expect(slotEl.text()).toEqual('Some content')
-  })
-})
-
-function getShallowWrapper() {
-  return shallowMount(OcAppContent, {
-    slots: {
-      content: '<p>Some content</p>'
-    }
-  })
-}

From 412dc5babeaffcbf83bf46946f07acfb7db76095 Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Thu, 11 Nov 2021 18:17:45 +0100
Subject: [PATCH 2/2] WIP: Implement new TopBar

---
 packages/web-app-files/src/App.vue            | 140 +++++++++-
 packages/web-app-markdown-editor/src/index.js |  32 +--
 packages/web-app-media-viewer/src/App.vue     |   4 +-
 packages/web-runtime/src/App.vue              | 249 ++----------------
 .../web-runtime/src/components/TopBar.vue     |  63 ++---
 .../web-runtime/src/components/UserMenu.vue   |   2 +-
 6 files changed, 202 insertions(+), 288 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 566fb697067..4c0b94e4de3 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,5 +1,50 @@
 <template>
   <main id="files" class="uk-flex uk-height-1-1">
+    <!-- <transition :name="appNavigationAnimation">
+      <focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible"> -->
+        <oc-sidebar-nav
+
+          id="web-nav-sidebar"
+          class="oc-app-navigation"
+          :accessible-label-header="$gettext('Sidebar header')"
+          :accessible-label-nav="$gettext('Sidebar navigation menu')"
+          :accessible-label-footer="$gettext('Sidebar footer')"
+          :class="sidebarClasses"
+        >
+          <template #header>
+            <div class="uk-text-center">
+              <oc-button
+                v-if="isSidebarFixed"
+                variation="inverse"
+                appearance="raw"
+                class="web-sidebar-btn-close"
+                :aria-label="$gettext('Close sidebar')"
+                @click="toggleAppNavigationVisibility"
+              >
+                <oc-icon name="close" />
+              </oc-button>
+            </div>
+          </template>
+          <template #nav>
+            <oc-list>
+              <oc-sidebar-nav-item
+                v-for="link in sidebarNavItems"
+                :key="link.route.path"
+                :active="link.active"
+                :target="link.route.path"
+                :icon="link.icon || link.iconMaterial"
+              >
+                {{ link.name }}
+              </oc-sidebar-nav-item>
+            </oc-list>
+          </template>
+          <template v-if="sidebar.sidebarFooterContentComponent" #footer>
+            <component :is="sidebar.sidebarFooterContentComponent" />
+          </template>
+        </oc-sidebar-nav>
+      <!-- </focus-trap>
+    </transition> -->
+
     <div
       ref="filesListWrapper"
       tabindex="-1"
@@ -29,16 +74,19 @@ import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import AppBar from './components/AppBar/AppBar.vue'
 import ProgressBar from './components/Upload/ProgressBar.vue'
 import SideBar from './components/SideBar/SideBar.vue'
+import { FocusTrap } from 'focus-trap-vue'
 
 export default {
   components: {
     AppBar,
     ProgressBar,
-    SideBar
+    SideBar,
+    FocusTrap
   },
   mixins: [Mixins, MixinRoutes],
   data() {
     return {
+      appNavigationVisible: false,
       createFolder: false,
       fileUploadName: '',
       fileUploadProgress: 0,
@@ -48,6 +96,12 @@ export default {
     }
   },
   computed: {
+    ...mapState(['route', 'sidebar']),
+    ...mapGetters([
+      'capabilities',
+      'getNavItemsByExtension'
+    ]),
+
     ...mapGetters('Files', ['dropzone', 'inProgress']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
@@ -56,6 +110,66 @@ export default {
     },
     showSidebar() {
       return !this.sidebarClosed
+    },
+
+    sidebarNavItems() {
+      if (this.publicPage()) {
+        return []
+      }
+
+      const items = this.getNavItemsByExtension(this.currentExtension)
+      if (!items) {
+        return []
+      }
+
+      items.filter((item) => {
+        if (this.capabilities === undefined) {
+          return false
+        }
+
+        if (item.enabled === undefined) {
+          return true
+        }
+
+        return item.enabled(this.capabilities)
+      })
+
+      return items.map((item) => ({
+        ...item,
+        name: this.$gettext(item.name),
+        active: this.$route.name === item.route.name
+      }))
+    },
+
+    sidebarClasses() {
+      if (this.appNavigationVisible) {
+        return ''
+      }
+
+      return 'uk-visible@l'
+    },
+
+    isSidebarFixed() {
+      return this.windowWidth <= 960
+    },
+
+    isSidebarVisible() {
+      if (this.sidebarNavItems.length === 0) {
+        return false
+      }
+      return this.windowWidth >= 900 || this.appNavigationVisible
+    },
+
+    appNavigationAnimation() {
+      if (this.windowWidth > 1200) {
+        return null
+      }
+
+      if (this.windowWidth > 960) {
+        return 'push-right'
+      }
+
+      return 'fade'
     }
   },
   watch: {
@@ -206,4 +320,28 @@ main {
     }
   }
 }
+
+// .oc-app-navigation {
+//   position: sticky;
+//   top: 0;
+//   z-index: 1;
+// }
+
+
+// .web-sidebar-btn-close {
+//   position: absolute;
+//   right: var(--oc-space-medium);
+//   top: var(--oc-space-medium);
+//   z-index: 3;
+// }
+// @media only screen and (max-width: 960px) {
+//   #web-nav-sidebar {
+//     height: 100%;
+//     left: 0;
+//     position: fixed;
+//     top: 0;
+//     width: 100%;
+//     z-index: 3;
+//   }
+// }
 </style>
diff --git a/packages/web-app-markdown-editor/src/index.js b/packages/web-app-markdown-editor/src/index.js
index 31dc134fb9c..c5cf86a563e 100644
--- a/packages/web-app-markdown-editor/src/index.js
+++ b/packages/web-app-markdown-editor/src/index.js
@@ -1,10 +1,5 @@
-// --- Components --------------------------------------------------------------
-
 import App from './App.vue'
-import t from '../l10n/translations'
-
-// --- Routing -----------------------------------------------------------------
-
+import translations from '../l10n/translations'
 import store from './store.js'
 
 const routes = [
@@ -17,6 +12,14 @@ const routes = [
   }
 ]
 
+const routesForFileExtensions = [
+  'files-personal',
+  'files-favorites',
+  'files-shared-with-others',
+  'files-shared-with-me',
+  'files-public-list'
+]
+
 const appInfo = {
   name: 'MarkdownEditor',
   id: 'markdown-editor',
@@ -30,13 +33,7 @@ const appInfo = {
           return $gettext('New plain text file…')
         }
       },
-      routes: [
-        'files-personal',
-        'files-favorites',
-        'files-shared-with-others',
-        'files-shared-with-me',
-        'files-public-list'
-      ]
+      routes: routesForFileExtensions
     },
     {
       extension: 'md',
@@ -45,18 +42,11 @@ const appInfo = {
           return $gettext('New mark-down file…')
         }
       },
-      routes: [
-        'files-personal',
-        'files-favorites',
-        'files-shared-with-others',
-        'files-shared-with-me',
-        'files-public-list'
-      ]
+      routes: routesForFileExtensions
     }
   ]
 }
 
-const translations = t
 export default {
   appInfo,
   routes,
diff --git a/packages/web-app-media-viewer/src/App.vue b/packages/web-app-media-viewer/src/App.vue
index 83bcfe7c86c..fa837d6da81 100644
--- a/packages/web-app-media-viewer/src/App.vue
+++ b/packages/web-app-media-viewer/src/App.vue
@@ -360,12 +360,12 @@ export default {
 
 <style lang="scss" scoped>
 #mediaviewer {
-  min-height: 100vh;
+  min-height: 93vh;
 }
 .media-viewer-player {
   max-width: 90vw;
   height: 70vh;
-  margin: 10px auto;
+  margin: 0 auto;
   object-fit: contain;
   img,
   video {
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 048dfa0b4c5..a54259985c6 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -16,77 +16,20 @@
     <template v-else-if="!showHeader">
       <router-view name="fullscreen" />
     </template>
-    <div v-else id="web-content" key="core-content" class="uk-flex uk-flex-stretch">
-      <transition :name="appNavigationAnimation">
-        <focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
-          <oc-sidebar-nav
-            v-show="isSidebarVisible"
-            id="web-nav-sidebar"
-            v-touch:swipe.left="handleNavSwipe"
-            class="oc-app-navigation"
-            :accessible-label-header="$gettext('Sidebar header')"
-            :accessible-label-nav="$gettext('Sidebar navigation menu')"
-            :accessible-label-footer="$gettext('Sidebar footer')"
-            :class="sidebarClasses"
-          >
-            <template #header>
-              <div class="uk-text-center">
-                <oc-button
-                  v-if="isSidebarFixed"
-                  variation="inverse"
-                  appearance="raw"
-                  class="web-sidebar-btn-close"
-                  :aria-label="$gettext('Close sidebar')"
-                  @click="toggleAppNavigationVisibility"
-                >
-                  <oc-icon name="close" />
-                </oc-button>
-                <router-link ref="navigationSidebarLogo" to="/">
-                  <oc-logo :src="logoImage" :alt="sidebarLogoAlt" />
-                </router-link>
-              </div>
-            </template>
-            <template #nav>
-              <oc-list>
-                <oc-sidebar-nav-item
-                  v-for="link in sidebarNavItems"
-                  :key="link.route.path"
-                  :active="link.active"
-                  :target="link.route.path"
-                  :icon="link.icon || link.iconMaterial"
-                >
-                  {{ link.name }}
-                </oc-sidebar-nav-item>
-              </oc-list>
-            </template>
-            <template v-if="sidebar.sidebarFooterContentComponent" #footer>
-              <component :is="sidebar.sidebarFooterContentComponent" />
-            </template>
-          </oc-sidebar-nav>
-        </focus-trap>
-      </transition>
-      <div class="uk-width-expand web-content-container">
-        <top-bar
-          v-if="!publicPage() && !$route.meta.verbose"
-          id="oc-topbar"
-          class="uk-width-expand"
-          :applications-list="applicationsList"
-          :active-notifications="activeNotifications"
-          :user-id="user.username || user.id"
-          :user-display-name="user.displayname"
-          @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
-        />
-        <div id="main">
-          <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
-          <router-view class="oc-app-container" name="app" />
-        </div>
+    <div v-else id="web-content" key="core-content" class="uk-width-expand web-content-container">
+      <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" class="oc-my-l oc-mx-l">
+        <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
+        <router-view class="oc-app-container" name="app" />
       </div>
     </div>
-    <transition
-      enter-active-class="uk-animation-fade uk-animation-fast"
-      leave-active-class="uk-animation-fade uk-animation-reverse uk-animation-fast"
-      name="custom-classes-transition"
-    >
+    <transition name="custom-classes-transition">
       <oc-modal
         v-if="modal.displayed"
         :variation="modal.variation"
@@ -116,20 +59,16 @@ import { mapGetters, mapState, mapActions } from 'vuex'
 import TopBar from './components/TopBar.vue'
 import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
-import { FocusTrap } from 'focus-trap-vue'
 
 export default {
   components: {
     MessageBar,
     TopBar,
-    SkipTo,
-    FocusTrap
+    SkipTo
   },
   data() {
     return {
-      appNavigationVisible: false,
       $_notificationsInterval: null,
-      windowWidth: 0,
       announcement: ''
     }
   },
@@ -142,7 +81,6 @@ export default {
       'capabilities',
       'apps',
       'getSettingsValue',
-      'getNavItemsByExtension',
       'getExtensionsWithNavItems'
     ]),
     applicationsList() {
@@ -173,74 +111,6 @@ export default {
       return this.configuration.theme.logo.favicon
     },
 
-    logoImage() {
-      return this.configuration.theme.logo.sidebar
-    },
-
-    sidebarLogoAlt() {
-      return this.$gettext('Navigate to all files page')
-    },
-
-    sidebarNavItems() {
-      if (this.publicPage()) {
-        return []
-      }
-
-      const items = this.getNavItemsByExtension(this.currentExtension)
-      if (!items) {
-        return []
-      }
-
-      items.filter((item) => {
-        if (this.capabilities === undefined) {
-          return false
-        }
-
-        if (item.enabled === undefined) {
-          return true
-        }
-
-        return item.enabled(this.capabilities)
-      })
-
-      return items.map((item) => ({
-        ...item,
-        name: this.$gettext(item.name),
-        active: this.$route.name === item.route.name
-      }))
-    },
-
-    sidebarClasses() {
-      if (this.appNavigationVisible) {
-        return ''
-      }
-
-      return 'uk-visible@l'
-    },
-
-    isSidebarFixed() {
-      return this.windowWidth <= 960
-    },
-
-    isSidebarVisible() {
-      if (this.sidebarNavItems.length === 0) {
-        return false
-      }
-      return this.windowWidth >= 1200 || this.appNavigationVisible
-    },
-
-    appNavigationAnimation() {
-      if (this.windowWidth > 1200) {
-        return null
-      }
-
-      if (this.windowWidth > 960) {
-        return 'push-right'
-      }
-
-      return 'fade'
-    },
-
     selectedLanguage() {
       return this.getSettingsValue({
         extension: 'ocis-accounts',
@@ -255,7 +125,6 @@ export default {
       handler: function (to) {
         this.announceRouteChange(to)
         document.title = this.extractPageTitleFromRoute(to)
-        this.appNavigationVisible = false
       }
     },
     capabilities: {
@@ -289,10 +158,6 @@ export default {
     }
   },
 
-  beforeDestroy() {
-    window.removeEventListener('resize', this.onResize)
-  },
-
   destroyed() {
     if (this.$_notificationsInterval) {
       clearInterval(this.$_notificationsInterval)
@@ -307,36 +172,15 @@ export default {
     return metaInfo
   },
 
-  mounted() {
-    this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize)
-      this.onResize()
-    })
-  },
-
   methods: {
     ...mapActions(['fetchNotifications', 'deleteMessage']),
 
-    focusModal(component, event) {
+    focusModal(event) {
       this.focus({
         revert: event === 'beforeDestroy'
       })
     },
 
-    hideAppNavigation() {
-      this.appNavigationVisible = false
-    },
-
-    toggleAppNavigationVisibility() {
-      this.appNavigationVisible = !this.appNavigationVisible
-
-      if (this.appNavigationVisible) {
-        this.$nextTick(() => {
-          this.$refs.navigationSidebarLogo.$el.focus()
-        })
-      }
-    },
-
     $_updateNotifications() {
       this.fetchNotifications(this.$client).catch((error) => {
         console.error('Error while loading notifications: ', error)
@@ -348,25 +192,6 @@ export default {
       this.deleteMessage(item)
     },
 
-    onResize() {
-      const width = window.innerWidth
-
-      // Reset navigation visibility in case of switching back to permanently visible sidebar
-      if (width >= 1200) {
-        this.appNavigationVisible = false
-      }
-
-      this.windowWidth = width
-    },
-
-    handleNavSwipe() {
-      if (this.windowWidth <= 960 || this.windowWidth > 1200) {
-        return
-      }
-
-      this.appNavigationVisible = false
-    },
-
     announceRouteChange(route) {
       const pageTitle = this.extractPageTitleFromRoute(route, false)
       const translated = this.$gettext('Navigated to %{ pageTitle }')
@@ -399,6 +224,10 @@ export default {
 }
 </script>
 <style lang="scss">
+body {
+  background-color: var(--oc-color-swatch-brand-default);
+}
+
 html,
 body,
 #web,
@@ -407,18 +236,6 @@ body,
   overflow-y: hidden;
 }
 
-#web {
-  background-color: var(--oc-color-background-default);
-}
-
-#oc-topbar {
-  position: sticky;
-  top: 0;
-  height: 60px;
-  z-index: 2;
-  background-color: var(--oc-color-background-default);
-}
-
 .web-content-container {
   display: grid;
   grid-template-columns: 1fr;
@@ -430,15 +247,13 @@ body,
 }
 
 #main {
-  position: relative;
+  background-color: var(--oc-color-swatch-brand-default);
+  border-radius: 2rem;
   grid-area: main;
   overflow-y: auto;
-}
-
-.oc-app-navigation {
-  position: sticky;
-  top: 0;
-  z-index: 1;
+  main {
+    background-color: var(--oc-color-background-default);
+  }
 }
 
 .loading-overlay {
@@ -457,22 +272,4 @@ body,
     }
   }
 }
-
-@media only screen and (max-width: 960px) {
-  #web-nav-sidebar {
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 3;
-  }
-}
-
-.web-sidebar-btn-close {
-  position: absolute;
-  right: var(--oc-space-medium);
-  top: var(--oc-space-medium);
-  z-index: 3;
-}
 </style>
diff --git a/packages/web-runtime/src/components/TopBar.vue b/packages/web-runtime/src/components/TopBar.vue
index cdc78a32f70..86a35ab4109 100644
--- a/packages/web-runtime/src/components/TopBar.vue
+++ b/packages/web-runtime/src/components/TopBar.vue
@@ -1,33 +1,27 @@
 <template>
   <header
-    class="oc-topbar uk-flex uk-flex-middle uk-flex-wrap oc-border-b oc-p-s"
+    id="oc-topbar"
+    class="uk-flex uk-flex-middle uk-flex-between oc-mx-m"
     :aria-label="$gettext('Top bar')"
   >
-    <oc-grid gutter="medium" flex>
-      <div class="uk-hidden@l">
-        <oc-button
-          appearance="raw"
-          class="oc-m-s oc-app-navigation-toggle"
-          :aria-label="$gettext('Open navigation menu')"
-          @click="toggleAppNavigationVisibility"
-        >
-          <oc-icon name="menu" />
-        </oc-button>
-      </div>
-    </oc-grid>
+  <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
+    <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
+    <router-link ref="navigationSidebarLogo" to="/">
+      <oc-img :src="logoImage" :alt="sidebarLogoAlt" />
+    </router-link>
+  </div>
     <div class="portal-wrapper">
       <portal-target name="app.runtime.header" multiple></portal-target>
     </div>
-    <oc-grid flex gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+    <div class="gap-15 uk-flex uk-flex-middle uk-flex-between">
       <feedback-link v-if="isFeedbackLinkEnabled" />
       <notifications v-if="activeNotifications.length" />
-      <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
       <user-menu
         :user-id="userId"
         :user-display-name="userDisplayName"
         :applications-list="applicationsList"
       />
-    </oc-grid>
+    </div>
   </header>
 </template>
 
@@ -47,6 +41,9 @@ export default {
     UserMenu
   },
   props: {
+    sidebarLogoAlt() {
+      return this.$gettext('Navigate to all files page')
+    },
     userId: {
       type: String,
       required: false,
@@ -62,11 +59,6 @@ export default {
       required: false,
       default: () => []
     },
-    hasAppNavigation: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     activeNotifications: {
       type: [Array, Boolean],
       required: false,
@@ -76,30 +68,27 @@ export default {
   computed: {
     ...mapGetters(['configuration']),
 
+    logoImage() {
+      return this.configuration.theme.logo.sidebar
+    },
+
     isFeedbackLinkEnabled() {
       return !this.configuration.options.disableFeedbackLink
     }
-  },
-  methods: {
-    toggleAppNavigationVisibility() {
-      this.$emit('toggleAppNavigationVisibility')
-    }
   }
 }
 </script>
 
-<style scoped>
-.topbar-current-extension-title {
-  color: white;
+<style lang="scss" scoped>
+.gap-15 {
+  gap: 15px;
 }
-
-.oc-topbar {
-  height: 60px;
-}
-
-@media (min-width: 960px) {
-  .portal-wrapper {
-    margin-left: 30px;
+#oc-topbar {
+  z-index: 2;
+  height: 80px;
+  img {
+    margin: 0 !important;
+    height: 60px;
   }
 }
 </style>
diff --git a/packages/web-runtime/src/components/UserMenu.vue b/packages/web-runtime/src/components/UserMenu.vue
index 7b595e4d202..fa6b5f864f5 100644
--- a/packages/web-runtime/src/components/UserMenu.vue
+++ b/packages/web-runtime/src/components/UserMenu.vue
@@ -15,7 +15,7 @@
           :userid="userId"
           :user-name="userDisplayName"
         />
-        <div class="oc-topbar-personal-label oc-text-bold oc-ml-rm" v-text="userDisplayName" />
+        <!-- <div class="oc-topbar-personal-label oc-text-bold oc-ml-rm" v-text="userDisplayName" /> -->
       </oc-grid>
     </oc-button>
     <oc-drop