core&ui: contest balloon notice (#1071)

packages/ui-default/components/notification/index.ts

@@ -38,11 +38,12 @@ export default class Notification {
     if (avatar) this.type += ' avatar';
     if (title) this.type += ' title';
     this.action = action || (() => { });
-    this.$dom = $(tpl`<div class="notification ${type} hide"></div>`);
-    if (avatar) $(tpl`<img width="64" height="64" class="avatar" src="${avatar}"></img>`).appendTo(this.$dom);
+    this.$dom = $(tpl`<div class="notification ${this.type} hide"></div>`);
+    if (avatar) $(tpl`<img width="32" height="32" class="avatar" src="${avatar}"></img>`).appendTo(this.$dom);
+    const content = message.split('\n').map((line) => tpl`<p>${line}</p>`).join('');
     if (title) {
-      $(tpl`<div class="notification-content"><h2>${title}</h2><p>${message}</p></div>`).appendTo(this.$dom);
-    } else $(tpl`<p>${message}</p>`).appendTo(this.$dom);
+      $(tpl`<div class="notification-content"><h2>${title}</h2>${{ templateRaw: true, html: content }}</div>`).appendTo(this.$dom);
+    } else $(`<div>${content}</div>`).appendTo(this.$dom);
     this.$dom.on('click', this.handleClick.bind(this));
     this.$n = this.$dom
       .css('z-index', zIndexManager.getNext())

packages/ui-default/components/notification/notification.page.styl

@@ -21,6 +21,15 @@
     opacity: 0
     transform: translateY(20px) scale(0.9)
 
+  &.avatar
+    display: flex
+    align-items: center
+
+  .avatar
+    display: inline-block
+    vertical-align: top
+    margin-right: rem(10px)
+
   &:before
     display: inline-block
     font-family: $icon-font-name !important
@@ -30,6 +39,9 @@
     vertical-align: top
     margin-top: rem((20px - $font-size-icon) / 2)
 
+  &.avatar:before
+    display: none !important
+
   for key, value in $notification-color
     &.{key}
       border-left: 5px solid value
@@ -37,7 +49,7 @@
         color: value
 
   for key, value in $notification-icon
-    &.{key}:before
+    &:not(.avatar).{key}:before
       content: value
 
 +mobile()