[优化] JigsawButton现在采用纯css的形式居中，去掉line-height的计算，优化按钮的尺寸/文字大小等；[新增] dialog现在可以设置弹框的高度

Author: hpyou

src/app/demo/dialog/demo-set.module.ts

@@ -13,6 +13,8 @@ import {DialogTopDemo} from "./top/demo.component";
 import {DialogPopOptionDemo} from "./popup-option/demo.component";
 import {DialogInDomDemoComponent} from "./in-dom/demo.component";
 import {DialogMiscDemoComponent} from "./misc/demo.component";
+import {DialogHeightDemo} from "./height/demo.component";
+import {DialogHeightDemoModule} from "./height/demo.module";
 
 export const routerConfig:any = [
     {
@@ -33,6 +35,9 @@ export const routerConfig:any = [
     {
         path: 'in-dom', component: DialogInDomDemoComponent
     },
+    {
+        path: 'height', component: DialogHeightDemo
+    },
 ];
 
 @NgModule({
@@ -43,7 +48,8 @@ export const routerConfig:any = [
         DialogMiscDemoModule,
         DialogPopOptionDemoModule,
         DialogTitleDemoModule,
-        DialogTopDemoModule
+        DialogTopDemoModule,
+        DialogHeightDemoModule
     ]
 })
 export class DialogDemoModule {

src/app/demo/dialog/height/demo.component.css

@@ -0,0 +1,16 @@
+.dialog-content {
+    background: aquamarine;
+    position: relative;
+}
+
+.dialog-content p {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+

src/app/demo/dialog/height/demo.component.html

@@ -0,0 +1,29 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>Dialog</h2>
+    <div class="demo-1 live-demo">
+        <h3>Height</h3>
+        <p class="comment">
+            一般dialog不设高度，dialog会随内容撑开，设置了高度，用户可以在自定义的content中加
+            <code>style="height: 100%"</code>，使内容撑满dialog-content</p>
+        <jigsaw-button (click)="popupDialog1(dialog1)">popup</jigsaw-button>
+        <ng-template #dialog1>
+            <jigsaw-dialog width="80%" height="400" caption="dialog title" (close)="close()">
+                <div class="dialog-content" style="height: 100%">
+                    <p>dialog content</p>
+                </div>
+                <div jigsaw-button-bar>
+                    <jigsaw-button colorType="danger" (click)="close()">OK</jigsaw-button>
+                </div>
+            </jigsaw-dialog>
+        </ng-template>
+    </div>
+</div>
+
+
+

src/app/demo/dialog/height/demo.component.ts

@@ -0,0 +1,30 @@
+import {Component, TemplateRef} from "@angular/core";
+import {PopupInfo, PopupService} from "jigsaw/service/popup.service";
+
+@Component({
+    templateUrl: './demo.component.html',
+    styleUrls: ['./demo.component.css']
+})
+export class DialogHeightDemo {
+    dialogInfo: PopupInfo;
+
+    constructor(private popupService: PopupService) {
+    }
+
+    close() {
+        this.dialogInfo.dispose();
+    }
+
+    popupDialog1(ele: TemplateRef<any>) {
+        this.dialogInfo = this.popupService.popup(ele);
+    }
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '这个demo演示了如何使用`height`属性来控制弹出的对话框的高度';
+    description: string = '';
+    tags: string[] = [
+        'JigsawDialog.height',
+    ];
+}

src/app/demo/dialog/height/demo.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {JigsawButtonModule} from "jigsaw/component/button/button";
+import {JigsawDialogModule} from "jigsaw/component/dialog/dialog";
+import {JigsawInputModule} from "jigsaw/component/input/input";
+import {PopupService} from "jigsaw/service/popup.service";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {DialogHeightDemo} from "./demo.component";
+
+@NgModule({
+    declarations: [DialogHeightDemo],
+    exports: [DialogHeightDemo],
+    imports: [JigsawDialogModule, JigsawButtonModule, JigsawInputModule, JigsawDemoDescriptionModule],
+    providers: [PopupService]
+})
+export class DialogHeightDemoModule {
+
+}

src/jigsaw/component/button/button.html

@@ -1 +1 @@
-<ng-content></ng-content>
+<div class="jigsaw-button-content"><ng-content></ng-content></div>

src/jigsaw/component/button/button.scss

@@ -4,11 +4,11 @@ $btn-prefix-cls: #{$jigsaw-prefix}-button;
 
 .#{$btn-prefix-cls} {
     @include inline-block();
-    min-width: 80px;
     padding: 0 10px;
+    min-width: 80px;
     height: $height-base;
-    line-height: $height-base - 2px;
     font-size: $font-size-base;
+    line-height: 1;
     text-align: center;
     position: relative;
     border-radius: $border-radius-base;
@@ -20,6 +20,12 @@ $btn-prefix-cls: #{$jigsaw-prefix}-button;
     background-color: #fff;
     border: 1px solid $border-color-base;
     color: $text-color;
+    &:before {
+        content: '';
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+    }
     &:hover {
         color: $primary-5;
         border: 1px solid $primary-5;
@@ -43,6 +49,11 @@ $btn-prefix-cls: #{$jigsaw-prefix}-button;
         @include prefixer(animation, buttonEffect 0.36s $ease-out forwards);
         display: block;
     }
+
+    &-content {
+        @include inline-block;
+    }
+
     &-icon {
         @include inline-block();
         img {
@@ -97,15 +108,13 @@ $btn-prefix-cls: #{$jigsaw-prefix}-button;
     }
 
     &#{&}-size-large {
-        font-size: $font-size-lg;
         height: $height-lg;
-        line-height: $height-lg - 2px;
+        font-size: $font-size-lg;
     }
 
     &#{&}-size-small {
-        font-size: $font-size-sm;
         height: $height-sm;
-        line-height: $height-sm - 2px;
+        font-size: $font-size-sm;
     }
 
     &#{&}-disabled {

src/jigsaw/component/button/button.ts

@@ -23,9 +23,8 @@ import {AbstractJigsawComponent} from '../common';
         '[class.jigsaw-button]': 'true',
         '[class.jigsaw-button-disabled]': 'disabled',
         '(click)': '_onClick()',
-        '[style.width]': 'width',
+        '[style.min-width]': 'width',
         '[style.height]': 'height',
-        '[style.line-height]': '_calcLineHeight()',
         '[class.jigsaw-button-clicked]': "_clicked",
         '[class.jigsaw-button-size-small]': "preSize === 'small'",
         '[class.jigsaw-button-size-large]': "preSize === 'large'",
@@ -66,10 +65,6 @@ export class JigsawButton extends AbstractJigsawComponent {
             this.callLater(() => this._clicked = false, 360);
         }
     }
-
-    private _calcLineHeight(): string {
-        return parseInt(this.height) - 4 + 'px';
-    }
 }
 
 @NgModule({

src/jigsaw/component/dialog/dialog.html

@@ -5,7 +5,9 @@
         <span class="jigsaw-dialog-close jigsaw-popup-close" (click)='dispose()'>&times;</span>
     </div>
     <div class="jigsaw-dialog-content">
-        <ng-content></ng-content>
+        <div class="jigsaw-dialog-content-inner">
+            <ng-content></ng-content>
+        </div>
     </div>
     <div class="jigsaw-dialog-button-group"
          *ngIf="(_$inlineButtons && _$inlineButtons.length > 0) || (buttons && buttons.length > 0)">

src/jigsaw/component/dialog/dialog.scss

@@ -5,6 +5,21 @@ $dialog-prefix-cls: #{$jigsaw-prefix}-dialog;
 .#{$dialog-prefix-cls}-host {
     @include inline-block;
     width: 100%;
+
+    &.#{$dialog-prefix-cls}-fixed-height {
+        .#{$dialog-prefix-cls} {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            .#{$dialog-prefix-cls}-content{
+                display: flex;
+                flex-grow: 1;
+                .#{$dialog-prefix-cls}-content-inner {
+                    flex-grow: 1;
+                }
+            }
+        }
+    }
 }
 
 .#{$dialog-prefix-cls} {