Redesign OcNotifications & add default position option

owncloud · Jun 17, 2022 · 663c82e · 663c82e
1 parent 879df1b
commit 663c82e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 65 deletions.
diff --git a/changelog/unreleased/enhancement-redesign-notifications 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
@@ -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
@@ -1,15 +1,25 @@
 <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-alert oc-flex oc-flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded oc-p-m
+    "
+    :class="classes"
+  >
+    <oc-icon
+      :variation="iconVariation"
+      size="large"
+      name="information"
+      fill-type="line"
+      class="oc-mr-s"
+    />
+    <div class="oc-flex oc-flex-wrap oc-flex-middle oc-flex-1" :role="role" :aria-live="ariaLive">
       <div class="oc-notification-message-title">
         {{ title }}
       </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"
+      >
         {{ message }}
       </div>
     </div>
@@ -70,7 +80,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 +116,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>