Redesign OcNotifications & add default position option

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

Hide file tree

Showing 3 changed files with 53 additions and 67 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,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>