Merge pull request #2210 from owncloud/redesign-notifications

Redesign notifications

changelog/unreleased/change-remove-oc-alert

@@ -0,0 +1,3 @@
+Change: Remove OcAlert component
+
+https://github.com/owncloud/owncloud-design-system/pull/2210

changelog/unreleased/change-remove-transitions

@@ -0,0 +1,3 @@
+Change: Remove transition animations
+
+https://github.com/owncloud/owncloud-design-system/pull/2210

changelog/unreleased/change-revamp-animations

@@ -0,0 +1,5 @@
+Change: Revamp animations
+
+We have removed the old animation classes and will subsequently add new ones, respecting the `prefers-reduced-motion` browser setting.
+
+https://github.com/owncloud/owncloud-design-system/pull/2210

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

docs/animations.md

@@ -2,7 +2,6 @@
 To see how to use animations, please follow [transitions section of Vue.js documentation](https://vuejs.org/v2/guide/transitions.html). As a name of the transition, it is possible to use any of the following animations.
 
 ## Available animations
-| Name           | Description |
-| -------------- | ----------- |
-| fade           | The element fades in  |
-| push-right     | The element slides from the left side and pushes the element to the right. It might be necessary to include a content wrapper with fixed width inside of the element to prevent deformation of the element. |
+| Name           | Description | Usage       |
+| -------------- | ----------- | ----------- |
+| fadeIn         | The element fades in from the left  | `.oc-fade-in` |

src/components/molecules/OcNotificationMessage/OcNotificationMessage.spec.js → src/components/atoms/OcNotificationMessage/OcNotificationMessage.spec.js

@@ -83,7 +83,7 @@ describe("OcNotificationMessage", () => {
   const selectors = {
     messageTitle: ".oc-notification-message-title",
     messageContent: ".oc-notification-message-content",
-    messageWrapper: ".oc-alert div",
+    messageWrapper: ".oc-notification-message div",
   }
 
   function getWrapper(props = {}) {

src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue → src/components/atoms/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-fade-in 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>

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(/(default|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">