add notification component

Comp game zhangchen
rdkmaster · Feb 22, 2018 · dee6935 · dee6935
2 parents ffa9193 + 0a079f4
commit dee6935
Show file tree

Hide file tree

Showing 17 changed files with 661 additions and 63 deletions.
diff --git a/src/app/demo-list.component.ts b/src/app/demo-list.component.ts
@@ -16,6 +16,7 @@ import {routerConfig as layoutConfig} from "./demo/layout/demo-set.module";
 import {routerConfig as listConfig} from "./demo/list/demo-set.module";
 import {routerConfig as loadingConfig} from "./demo/loading/demo-set.module";
 import {routerConfig as miscConfig} from "./demo/misc/demo-set.module";
+import {routerConfig as notificationConfig} from "./demo/notification/demo-set.module";
 import {routerConfig as paginationConfig} from "./demo/pagination/demo-set.module";
 import {routerConfig as popupConfig} from "./demo/popup/demo-set.module";
 import {routerConfig as radioConfig} from "./demo/radio-group/demo-set.module";
@@ -94,6 +95,7 @@ export class DemoListManager {
         this._addRouterConfig(routerConfig, 'list', listConfig);
         this._addRouterConfig(routerConfig, 'loading', loadingConfig);
         this._addRouterConfig(routerConfig, 'misc', miscConfig);
+        this._addRouterConfig(routerConfig, 'notification', notificationConfig);
         this._addRouterConfig(routerConfig, 'pagination', paginationConfig);
         this._addRouterConfig(routerConfig, 'popup', popupConfig);
         this._addRouterConfig(routerConfig, 'radio-group', radioConfig);

diff --git a/src/app/demo/notification/demo-set.module.ts b/src/app/demo/notification/demo-set.module.ts
@@ -0,0 +1,19 @@
+import {NgModule} from "@angular/core";
+import {RouterModule} from "@angular/router";
+
+import {NotificationFullDemoComponent} from "./full/demo.component";
+import {NotificationFullDemoModule} from "./full/demo.module";
+
+export const routerConfig = [
+    {
+        path: 'full', component: NotificationFullDemoComponent
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routerConfig), NotificationFullDemoModule
+    ]
+})
+export class NotificationDemoModule {
+}
diff --git a/src/app/demo/notification/full/demo.component.html b/src/app/demo/notification/full/demo.component.html
@@ -0,0 +1,61 @@
+
+<div class="wrapper">
+    <h4>所有可用选项：</h4>
+
+    <div class="row">
+        <label>消息</label>
+        <jigsaw-input [(value)]="message"></jigsaw-input>
+    </div>
+
+    <div class="row">
+        <label>标题</label>
+        <jigsaw-input [(value)]="caption" placeholder="输入标题（可选）"></jigsaw-input>
+    </div>
+
+    <div class="row">
+        <label>位置</label>
+        <jigsaw-radios [(value)]="position">
+            <jigsaw-radio-option value="leftTop">左上</jigsaw-radio-option>
+            <jigsaw-radio-option value="leftBottom">左下</jigsaw-radio-option>
+            <jigsaw-radio-option value="rightTop">右上（默认）</jigsaw-radio-option>
+            <jigsaw-radio-option value="rightBottom">右下</jigsaw-radio-option>
+        </jigsaw-radios>
+    </div>
+
+    <div class="row">
+        <label>图标</label>
+        <jigsaw-input [(value)]="icon" width="195px" placeholder="输入图标（可选）"
+                      jigsawTooltip="图标的class字符串，支持font-awesome和iconfont">
+        </jigsaw-input>
+        <span>例如：fa fa-info</span>
+    </div>
+
+    <div class="row">
+        <label>超时</label>
+        <jigsaw-slider min="0" max="20" [(value)]="timeout"></jigsaw-slider>
+        <span>{{timeout}} 秒</span>
+    </div>
+
+    <div class="row">
+        <label>宽度</label>
+        <jigsaw-slider min="60" max="600" [(value)]="width"></jigsaw-slider>
+        <span>{{width}} px</span>
+    </div>
+
+    <div class="row">
+        <label>高度</label>
+        <jigsaw-slider min="0" max="200" [(value)]="height"></jigsaw-slider>
+        <span>{{height}} px</span>
+    </div>
+
+    <jigsaw-button width="340" (click)="showWithOptions()">弹出消息</jigsaw-button>
+
+    <hr><br>
+
+    <h4>常见用法：</h4>
+    <jigsaw-button (click)="showNormal()">最简洁的用法</jigsaw-button>
+    <jigsaw-button (click)="showCaption()">带标题的简洁用法</jigsaw-button>
+    <jigsaw-button (click)="showButtons()">带交互按钮用法</jigsaw-button>
+    <br>
+    <jigsaw-button width="350px" (click)="customizeInteractive()">自定义交互用法</jigsaw-button>
+</div>
diff --git a/src/app/demo/notification/full/demo.component.ts b/src/app/demo/notification/full/demo.component.ts
@@ -0,0 +1,99 @@
+import {Component} from '@angular/core';
+import {JigsawNotification} from "jigsaw/component/notification/notification";
+
+@Component({
+    templateUrl: './demo.component.html',
+    styles: [`
+        .wrapper {
+            width: 380px;
+            margin: auto;
+            overflow: hidden;
+        }
+
+        .row {
+            margin: 6px;
+        }
+
+        h4 {
+            margin: 6px 0 18px 6px;
+        }
+        
+        jigsaw-button {
+            margin: 0 6px 6px 6px;
+        }
+        
+        label {
+            width: 30px;
+        }
+        
+        jigsaw-input {
+            width: 300px;
+        }
+
+        jigsaw-slider {
+            width: 270px;
+        }
+    `]
+})
+export class NotificationFullDemoComponent {
+    message = '这是一个 <b>很棒的</b> 消息提示框！';
+    caption = undefined;  // this is the default value
+    position = undefined; // this is the default value
+    icon = undefined;     // this is the default value
+    timeout = 8;          // this is the default value
+    width = 350;          // this is the default value
+    height = 0;           // this is the default value
+
+    showWithOptions() {
+        JigsawNotification.show(this.message, {
+            caption: this.caption, position: this.position, icon: this.icon,
+            timeout: this.timeout * 1000, width: this.width, height: this.height
+        });
+    }
+
+    showNormal() {
+        JigsawNotification.show('最简洁方便的使用方式：<code>JigsawNotification.show("message")</code>');
+    }
+
+    showCaption() {
+        JigsawNotification.show(
+            '带有标题的使用方式：<code>JigsawNotification.show("message", "caption")</code>',
+            '我是一个很长的标题，真的很长很长很长很长很长很长很长很长很长很长');
+    }
+
+    showButtons() {
+        JigsawNotification.show(
+            '支持通过按钮的方式与用户交互，用户选择的按钮会被传递给回调函数。' +
+            '虽然交互方式较为单一，但是简单便捷，推荐使用。<br><br>' +
+            '这是一个很棒的提示框，你同意吗？',
+            {
+                callback: answer => alert(answer ? '你的答案是：' + answer.label : '看来对于这个问题你很犹豫...'),
+                // 支持 jigsaw-button 的所有选项
+                buttons: [{label: '同意！', type: 'primary'}, {label: '不好说'}], icon: 'fa fa-question'
+            });
+    }
+
+    investigate(result) {
+        alert('你的答案是：' + result);
+    }
+
+    starJigsaw() {
+        window.open('https://github.com/rdkmaster/jigsaw', '_blank');
+    }
+
+    customizeInteractive() {
+        JigsawNotification.show(
+            '提示：消息体支持基础html片段，因此可以使用 ' +
+                     '<code>a</code> / <code>button</code> 等标签可以实现自定义交互。<br><br>' +
+                     '以上提示信息是否有用？我认为 <button onclick="investigate(\'有用\')">有用</button> ' +
+                     '<button onclick="investigate(\'没用\')">没用</button><br><br>' +
+                     '如果你喜欢这个提示框，那请帮我们<a onclick="starJigsaw()">点个星星</a>。',
+            {
+                width: 500,
+                // 这个 innerHtmlContext 是实现自定义交互的必选项，
+                // 它指定了 a / button 标签的 onclick 的值（是一个函数）是在哪个对象上定义的，
+                // 推荐将这些函数都定义在当前组件内，因此他的值一般设置为 this 即可
+                innerHtmlContext: this
+            });
+    }
+}
diff --git a/src/app/demo/notification/full/demo.module.ts b/src/app/demo/notification/full/demo.module.ts
@@ -0,0 +1,22 @@
+import {NgModule} from "@angular/core";
+import {JigsawButtonModule} from "jigsaw/component/button/button";
+import {JigsawNotificationModule} from "jigsaw/component/notification/notification";
+import {PopupService} from "jigsaw/service/popup.service";
+import {JigsawInputModule} from "jigsaw/component/input/input";
+import {JigsawRadioModule} from "jigsaw/component/radio/radio";
+import {JigsawSliderModule} from "jigsaw/component/slider/index";
+import {JigsawTooltipModule} from "jigsaw/component/tooltip/tooltip";
+
+import {NotificationFullDemoComponent} from "./demo.component";
+
+@NgModule({
+    declarations: [NotificationFullDemoComponent],
+    imports: [
+        JigsawButtonModule, JigsawNotificationModule, JigsawInputModule,
+        JigsawRadioModule, JigsawSliderModule, JigsawTooltipModule
+    ],
+    providers: [PopupService],
+    exports: [NotificationFullDemoComponent]
+})
+export class NotificationFullDemoModule {
+}
diff --git a/src/app/router-config.ts b/src/app/router-config.ts
@@ -68,6 +68,10 @@ export const routerConfig = [
         path: "misc",
         loadChildren: "./demo/misc/demo-set.module#MiscDemoModule",
     },
+    {
+        path: "notification",
+        loadChildren: "./demo/notification/demo-set.module#NotificationDemoModule",
+    },
     {
         path: "pagination",
         loadChildren: "./demo/pagination/demo-set.module#PaginationDemoModule",

diff --git a/src/jigsaw/component/combo-select/combo-select.ts b/src/jigsaw/component/combo-select/combo-select.ts
@@ -439,7 +439,7 @@ export class JigsawComboSelect extends AbstractJigsawComponent implements Contro
             setTimeout(() => {
                 // 等待combo高度变化，调整下拉位置
                 if (this._popupElement) {
-                    this._popupService.setPosition(this._getPopupOption(), this._popupElement, this._renderer);
+                    this._popupService.setPosition(this._getPopupOption(), this._popupElement);
                 }
             });
         })

diff --git a/src/jigsaw/component/notification/notification.html b/src/jigsaw/component/notification/notification.html
@@ -0,0 +1,31 @@
+<div class="jigsaw-notification" (mouseenter)="_$onEnter()" (mouseleave)="_$onLeave()">
+
+    <div class="jigsaw-notification-content">
+        <div class="jigsaw-notification-icon" *ngIf="!!icon">
+            <i class="jigsaw-notification-icon {{icon}}"></i>
+        </div>
+
+        <div class="jigsaw-notification-text">
+            <div class="jigsaw-notification-caption" title="{{caption}}" *ngIf="!!caption">
+                {{caption}}
+            </div>
+            <div class="jigsaw-notification-message" [trustedHtml]="message" [trustedHtmlContext]="innerHtmlContext"></div>
+        </div>
+    </div>
+
+    <div class="jigsaw-notification-button-bar" *ngIf="buttons && buttons.length > 0">
+        <jigsaw-button *ngFor="let button of buttons"
+                       [colorType]="button.type"
+                       [disabled]="button.disabled"
+                       [preSize]="button.preSize ? button.preSize : 'small'"
+                       (click)="answer.emit(button)"
+                       class="{{button.clazz}}">{{button.label}}
+        </jigsaw-button>
+    </div>
+
+    <div class="jigsaw-notification-close">
+        <span (click)='_$close()'>&times;</span>
+    </div>
+</div>
+
+
diff --git a/src/jigsaw/component/notification/notification.scss b/src/jigsaw/component/notification/notification.scss
@@ -0,0 +1,58 @@
+@import "../../assets/scss/core/base";
+
+.jigsaw-notification {
+    border-radius: $border-radius-base;
+    background: $component-background;
+    box-shadow: $box-shadow-base;
+    padding: 18px 22px 18px 18px;
+    height: 100%;
+    overflow: hidden;
+
+    .jigsaw-notification-content {
+        display: flex;
+
+        .jigsaw-notification-icon {
+            flex-grow: 0;
+            font-size: 44px;
+            margin-right: 11px;
+        }
+
+        .jigsaw-notification-text {
+            flex-grow: 1;
+            width: calc(100% - 94px);
+
+            .jigsaw-notification-caption {
+                @include line-ellipsis-style;
+                font-size: $font-size-lg+1px;
+                color: $heading-color-dark;
+                margin-bottom: 6px;
+            }
+
+            .jigsaw-notification-message {
+                word-wrap: break-word;
+                font-size: $font-size-base;
+                color: $text-color;
+            }
+        }
+    }
+
+    .jigsaw-notification-close {
+        position: absolute;
+        left: calc(100% - 20px);
+        top: 0;
+        span {
+            cursor: pointer;
+            font-size: 18px;
+        }
+    }
+
+    .jigsaw-notification-button-bar {
+        text-align: right;
+        flex: none;
+        margin: 18px -8px -6px 0;
+
+        jigsaw-button {
+            margin-left: 6px;
+        }
+    }
+}