Draft: Reposition OcNotifications in web-runtime

owncloud · Jun 17, 2022 · c3378ef · c3378ef
1 parent 5d6f401
commit c3378ef
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/changelog/unreleased/enhancement-reposition-notifications 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
@@ -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
@@ -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
@@ -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;