From f514d1c8721fd516d59ff23754bf1fafd3ee0d19 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 17 Jun 2022 15:49:58 +0200
Subject: [PATCH] Redesign OcNotifications & add default position option

---
 .../enhancement-redesign-notifications        |  7 +++
 .../atoms/OcNotifications/OcNotifications.vue | 56 +++++++++---------
 .../OcNotificationMessage.vue                 | 57 ++++++-------------
 3 files changed, 53 insertions(+), 67 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-redesign-notifications

diff --git a/changelog/unreleased/enhancement-redesign-notifications b/changelog/unreleased/enhancement-redesign-notifications
new file mode 100644
index 000000000..67512efc9
--- /dev/null
+++ b/changelog/unreleased/enhancement-redesign-notifications
@@ -0,0 +1,7 @@
+Enhancement: Redesign notifications
+
+We have redesigned the notifications component to fit the overal new look of the web frontend, e.g. adding shadow and rounded corners.
+It can now also be rendered "unpositioned" instead of having it always stick to the top of the screen.
+
+https://github.com/owncloud/owncloud-design-system/pull/2210
+https://github.com/owncloud/web/issues/7082
diff --git a/src/components/atoms/OcNotifications/OcNotifications.vue b/src/components/atoms/OcNotifications/OcNotifications.vue
index 7c1a756b2..5724c7edc 100644
--- a/src/components/atoms/OcNotifications/OcNotifications.vue
+++ b/src/components/atoms/OcNotifications/OcNotifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-alerts" :class="classes">
+  <div class="oc-notification oc-mb-s" :class="classes">
     <slot />
   </div>
 </template>
@@ -29,13 +29,13 @@ export default {
       required: false,
       default: "top-center",
       validator: value => {
-        return value.match(/(top-left|top-center|top-right)/)
+        return value.match(/(defaukt|top-left|top-center|top-right)/)
       },
     },
   },
   computed: {
     classes() {
-      return `oc-notification oc-notification-${this.position}`
+      return `oc-notification-${this.position}`
     },
   },
 }
@@ -44,21 +44,25 @@ export default {
 <style lang="scss">
 .oc-notification {
   box-sizing: border-box;
-  position: fixed;
-  top: var(--oc-space-small);
-  width: 350px;
+  width: 400px;
   z-index: 1040;
 
   &-top-left {
+    position: fixed;
+    top: var(--oc-space-small);
     left: var(--oc-space-small);
   }
   &-top-center {
+    position: fixed;
+    top: var(--oc-space-small);
     left: 0;
     right: 0;
     margin-left: auto;
     margin-right: auto;
   }
   &-top-right {
+    position: fixed;
+    top: var(--oc-space-small);
     right: var(--oc-space-small);
   }
 }
@@ -77,31 +81,27 @@ export default {
       <oc-button @click="show('right')">Show right notifications</oc-button>
 
       <oc-notifications position="top-left">
-        <transition-group name="oc-alerts-transition" tag="div" class="oc-alerts-transition">
-          <oc-notification-message
-              v-for="item in messages.left"
-              :key="item.title"
-              :status="item.status"
-              :title="item.title"
-              :message="item.message"
-              :timeout="item.timeout"
-              @close="removeNotification('left', item)"
-          />
-        </transition-group>
+        <oc-notification-message
+            v-for="item in messages.left"
+            :key="item.title"
+            :status="item.status"
+            :title="item.title"
+            :message="item.message"
+            :timeout="item.timeout"
+            @close="removeNotification('left', item)"
+        />
       </oc-notifications>
 
       <oc-notifications position="top-center">
-        <transition-group name="oc-alerts-transition" tag="div" class="oc-alerts-transition">
-          <oc-notification-message
-              v-for="item in messages.center"
-              :key="item.title"
-              :status="item.status"
-              :title="item.title"
-              :message="item.message"
-              :timeout="item.timeout"
-              @close="removeNotification('center', item)"
-          />
-        </transition-group>
+        <oc-notification-message
+            v-for="item in messages.center"
+            :key="item.title"
+            :status="item.status"
+            :title="item.title"
+            :message="item.message"
+            :timeout="item.timeout"
+            @close="removeNotification('center', item)"
+        />
       </oc-notifications>
 
       <oc-notifications position="top-right">
diff --git a/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue b/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue
index 9ca178bf0..b75b43819 100644
--- a/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue
+++ b/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue
@@ -1,15 +1,19 @@
 <template>
-  <div class="oc-alert oc-notification-message" :class="classes">
-    <oc-icon :variation="iconVariation" size="large" name="information" class="oc-mr-s" />
-    <div
-      class="oc-flex oc-flex-wrap oc-flex-middle oc-flex-1 oc-mr"
-      :role="role"
-      :aria-live="ariaLive"
-    >
-      <div class="oc-notification-message-title">
-        {{ title }}
+  <div
+    class="oc-alert oc-flex oc-flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded oc-p-m"
+    :class="classes"
+  >
+    <div class="oc-flex oc-flex-wrap oc-flex-middle oc-flex-1" :role="role" :aria-live="ariaLive">
+      <div class="oc-flex oc-flex-middle">
+        <oc-icon :variation="iconVariation" name="information" fill-type="line" class="oc-mr-s" />
+        <div class="oc-notification-message-title">
+          {{ title }}
+        </div>
       </div>
-      <div v-if="message" class="oc-text-muted oc-width-1-1 oc-notification-message-content">
+      <div
+        v-if="message"
+        class="oc-text-muted oc-width-1-1 oc-notification-message-content oc-mt-s oc-pl-s oc-ml-l"
+      >
         {{ message }}
       </div>
     </div>
@@ -70,7 +74,7 @@ export default {
   },
   computed: {
     classes() {
-      return `oc-flex oc-flex-wrap oc-notification-message oc-notification-message-${this.status}`
+      return `oc-notification-message-${this.status}`
     },
     iconVariation() {
       return this.status
@@ -106,40 +110,15 @@ export default {
 </script>
 
 <style lang="scss">
-.oc-notification-message {
-  word-break: break-word;
-}
-
-// TODO: Refactor after removal of uikit
 .oc-notification-message {
   background-color: var(--oc-color-background-default) !important;
-  border: 1px solid transparent;
   cursor: pointer;
-  font-size: 1.25rem;
-  line-height: 1.4;
   margin-top: var(--oc-space-small);
-  padding: 15px;
   position: relative;
+  word-break: break-word;
 
-  &-passive {
-    color: var(--oc-color-swatch-passive-default) !important;
-    border-color: var(--oc-color-swatch-passive-default);
-  }
-  &-primary {
-    color: var(--oc-color-swatch-primary-default) !important;
-    border-color: var(--oc-color-swatch-primary-default);
-  }
-  &-success {
-    color: var(--oc-color-swatch-success-default) !important;
-    border-color: var(--oc-color-swatch-success-default);
-  }
-  &-warning {
-    color: var(--oc-color-swatch-warning-default) !important;
-    border-color: var(--oc-color-swatch-warning-default);
-  }
-  &-danger {
-    color: var(--oc-color-swatch-danger-default) !important;
-    border-color: var(--oc-color-swatch-danger-default);
+  &-title {
+    font-size: 1.15rem;
   }
 }
 </style>