fix: icon line-height

README.md

@@ -11,6 +11,7 @@ http://***REMOVED***/#/start
 - demo
 - build
 # Want to see how component works / 想看看组件效果？
+Run `npm run build`, then open `http://localhost:8086/` at browser.
 # Want to add your own component?
 1. add some thing in packages
 2. add some thing in demo/index.js demo/components

demo/components/notificationDemo.vue

@@ -43,6 +43,10 @@ In the kind of world where we belong`,
         meta: '2019-5-27 15:11',
         action: 'Mark as read',
         avator: null,
+        duration: 3000,
+        afterCloseCallback: (notification) => {
+          this.$NMessage.success('Notification closed successfully!')
+        },
         actionCallback: (notification) => {
           console.log('mark read!')
           notification.close()
@@ -91,9 +95,9 @@ In the kind of world where we belong`,
         meta: '2019-5-27 15:11',
         action: 'Mark as read',
         avator: null,
-        actionCallback: (notification) => {
-          console.log('mark read!')
-          notification.close()
+        duration: 3000,
+        afterCloseCallback: (notification) => {
+          this.$NMessage.success(notification.title)
         }
       })
     },
@@ -107,9 +111,12 @@ I cant get no, I cant get no`,
         meta: '2019-5-27 15:11',
         action: 'Mark as read',
         avator: null,
-        actionCallback: (notification) => {
-          console.log('mark read!')
-          notification.close()
+        afterCloseCallback: (notification) => {
+          this.$NMessage.success(notification.title)
+        },
+        actionCallback: (notification, closeNotification) => {
+          this.$NMessage.success(notification.title)
+          closeNotification()
         }
       })
     }

packages/common/Notification/src/MessageCell.vue

@@ -1,49 +0,0 @@
-<template>
-  <div
-    class="n-notification__cell"
-    :class="{
-      [`n-notification__cell--${type}`]: true
-    }"
-  >
-    <div class="n-notification-cell__avator" />
-    <div class="n-notification-cell__body">
-      <div class="n-notification-cell__header">
-        {{ notification.title }}
-      </div>
-      <div class="n-notification-cell__title-meta">
-        {{ notification.titleMeta }}
-      </div>
-      <div class="n-notification-cell__content">
-        {{ notification.content }}
-      </div>
-      <div class="n-notification-cell__footer">
-        <div class="n-notification-cell__meta">
-          {{ notification.meta }}
-        </div>
-        <div class="n-notification-cell__action">
-          {{ notification.action }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'success'
-    },
-    content: {
-      type: String,
-      default: ''
-    },
-    notification: {
-      type: Object,
-      default: null
-    }
-  }
-}
-</script>

packages/common/Notification/src/main.js

@@ -2,9 +2,8 @@
 import Vue from 'vue'
 import NNotificationCell from './NotificationCell'
 
-function attachMessageContainer () {
+function attachNotificationContainer () {
   let notificationContainer = document.querySelector('.n-notification.n-notification__container')
-  console.log(notificationContainer)
   if (!notificationContainer) {
     notificationContainer = document.createElement('div')
     notificationContainer.classList.add('n-notification', 'n-notification__container')
@@ -26,17 +25,17 @@ function attachMessageContainer () {
 }
 
 const defaultOptions = {
-  timeout: 50000,
   emergeTransitionTimeout: 300,
   vanishTransitionTimeout: 300
 }
 
 const defaultNotification = {
+  duration: null,
   avator: null,
   actionCallback: () => {}
 }
 
-function mountMessageEl (container, vm, option) {
+function mountNotificationEl (container, vm, option) {
   const el = vm.$el
   el.classList.add('is-going-to-emerge')
   container.appendChild(el)
@@ -45,9 +44,14 @@ function mountMessageEl (container, vm, option) {
   el.style['max-height'] = `${30 + vm.$refs.body.getBoundingClientRect().height}px`
 }
 
-function removeMessageEl (container, el, option) {
+function removeNotificationEl (container, el, option, notification) {
   setTimeout(function () {
-    container.removeChild(el)
+    if (container.contains(el)) {
+      container.removeChild(el)
+      if (notification.afterCloseCallback) {
+        notification.afterCloseCallback(notification)
+      }
+    }
   }, option.vanishTransitionTimeout)
   el.classList.add('is-vanishing')
   el.style['max-height'] = '0'
@@ -56,19 +60,24 @@ function removeMessageEl (container, el, option) {
 const NMessage = {
   notify (notification, type = 'success', option = defaultOptions) {
     notification = { ...defaultNotification, ...notification }
-    const notificationContainer = attachMessageContainer()
+    const notificationContainer = attachNotificationContainer()
     const notificationCell = (new Vue({ ...NNotificationCell,
       propsData: { type, notification: notification },
+      mounted () {
+        if (notification.duration) {
+          setTimeout(this.close, notification.duration)
+        }
+      },
       methods: {
         close () {
-          removeMessageEl(notificationContainer, this.$el, option)
+          removeNotificationEl(notificationContainer, this.$el, option, notification)
         },
         handleActionClick () {
-          notification.actionCallback(this)
+          notification.actionCallback(notification, this.close)
         }
       }
     })).$mount()
-    mountMessageEl(notificationContainer, notificationCell, option)
+    mountNotificationEl(notificationContainer, notificationCell, option)
   }
 }
 

styles/Button.scss

@@ -28,9 +28,7 @@
       height: 18px;
       width: 18px;
       .n-icon {
-        &::before {
-          font-size: 18px;
-        }
+        font-size: 18px;
       }
     }
   }
@@ -48,9 +46,7 @@
       height: 20px;
       width: 20px;
       .n-icon {
-        &::before {
-          font-size: 20px;
-        }
+        font-size: 20px;
       }
     }
   }
@@ -68,9 +64,7 @@
       height: 20px;
       width: 20px;
       .n-icon {
-        &::before {
-          font-size: 20px;
-        }
+        font-size: 20px;
       }
     }
   }

styles/Icon.scss

@@ -3,11 +3,14 @@
 .n-icon {
   height: 1em;
   width: 1em;
+  line-height: 1em;
   text-align: center;
   display: inline-block;
   position: relative;
   &::before {
+    line-height: 1em;
     width: 1em;
+    height: 1em;
     position: absolute;
     top: 0;
     left: 0;