From c3378efb7eceacd20ed95fb671451f70bc979b65 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 17 Jun 2022 16:43:29 +0200
Subject: [PATCH] Draft: Reposition OcNotifications in web-runtime

---
 .../enhancement-reposition-notifications      |  7 +++++++
 .../web-runtime/src/components/MessageBar.vue |  3 +--
 .../web-runtime/src/components/UploadInfo.vue |  5 -----
 .../web-runtime/src/layouts/Application.vue   | 20 +++++++++++++++++--
 4 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-reposition-notifications

diff --git a/changelog/unreleased/enhancement-reposition-notifications b/changelog/unreleased/enhancement-reposition-notifications
new file mode 100644
index 00000000000..429422c8a61
--- /dev/null
+++ b/changelog/unreleased/enhancement-reposition-notifications
@@ -0,0 +1,7 @@
+Enhancement: Reposition notifications
+
+We've repositioned the notifications to no longer block the searchbar - they are now in the bottom right corner, above the (possibly visible) upload information.
+It has also been redesigned to better fit the overall design.
+
+https://github.com/owncloud/web/pull/7139
+https://github.com/owncloud/web/issues/7082
diff --git a/packages/web-runtime/src/components/MessageBar.vue b/packages/web-runtime/src/components/MessageBar.vue
index 0238ffcf656..d080a79418e 100644
--- a/packages/web-runtime/src/components/MessageBar.vue
+++ b/packages/web-runtime/src/components/MessageBar.vue
@@ -1,12 +1,11 @@
 <template>
-  <oc-notifications>
+  <oc-notifications position="default">
     <oc-notification-message
       v-for="item in $_ocMessages_limited"
       :key="item.id"
       :title="item.title"
       :message="item.desc"
       :status="item.status"
-      class="oc-width-large"
       @close="deleteMessage(item)"
     />
   </oc-notifications>
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 79079fb1712..fa49710f93a 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -540,16 +540,11 @@ export default {
 
 <style lang="scss">
 #upload-info {
-  position: absolute;
-  right: 20px;
   background-color: var(--oc-color-background-secondary);
-  bottom: 20px;
   width: 400px;
   z-index: 4;
 
   @media (max-width: 640px) {
-    left: 0;
-    right: 0;
     margin: 0 auto;
     width: 100%;
     max-width: 500px;
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index ab7ce98a5a4..566dcc986e4 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -7,7 +7,6 @@
       <top-bar :applications-list="applicationsList" :active-notifications="activeNotifications" />
     </div>
     <div id="web-content-main" class="oc-px-s oc-pb-s">
-      <message-bar :active-messages="activeMessages" @deleteMessage="deleteMessage" />
       <div class="app-container oc-flex">
         <sidebar-nav v-if="isSidebarVisible" class="app-navigation" :nav-items="sidebarNavItems" />
         <router-view
@@ -18,7 +17,10 @@
         />
       </div>
     </div>
-    <upload-info />
+    <div class="snacky">
+      <message-bar :active-messages="activeMessages" @deleteMessage="deleteMessage" />
+      <upload-info />
+    </div>
   </div>
 </template>
 
@@ -163,6 +165,20 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.snacky {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+
+  @media (max-width: 640px) {
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 500px;
+  }
+}
+
 #web-content {
   display: flex;
   flex-flow: column;