8000 feat(dialog): add thySize for header, add pill style for close #264303 · atinc/ngx-tethys@e6a4856 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit e6a4856

Browse files
why520crazywhy520crazy
committed
feat(dialog): add thySize for header, add pill style for close #264303
if you don't need pill close style please set $dialog-close-pill-enabled as false
1 parent 270862e commit e6a4856

File tree

12 files changed

+131
-11
lines changed

12 files changed

+131
-11
lines changed

‎demo/src/app/components/+dialog/api-parameters.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,36 @@ export const apiParameters = [
4242
default: '85vh'
4343
}
4444
];
45+
46+
export const headerApiParameters = [
47+
{
48+
property: 'thyTitle',
49+
description: '标题',
50+
type: 'string',
51+
default: ''
52+
},
53+
{
54+
property: 'thyTitleTranslationKey',
55+
description: '标题的多语言 Key',
56+
type: 'string',
57+
default: ''
58+
},
59+
{
60+
property: 'thySize',
61+
description: '大小，只有大的详情页场景会使用 lg, 左右 padding 缩小至 20px',
62+
type: 'md | lg',
63+
default: 'md'
64+
},
65+
{
66+
property: '#dialogHeader',
67+
description: '自定义头部模版',
68+
type: 'ng-template',
69+
default: ''
70+
},
71+
{
72+
property: 'thyOnClose',
73+
description: '关闭事件',
74+
type: 'EventEmitter',
75+
default: 'null'
76+
}
77+
];

‎demo/src/app/components/+dialog/dialog-content.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<thy-dialog-header thyTitle="Install Angular">
1+
<thy-dialog-header thyTitle="Install Angular" thySize="lg">
22
<ng-template #dialogHeader>
33
<h3 class="dialog-title">
44
Install Angular

‎demo/src/app/components/+dialog/dialog-section.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@
55
<app-live-demos [data]="liveDemos"></app-live-demos>
66

77
<api-parameters title="config 参数列表" [parameters]="apiParameters"></api-parameters>
8+
<api-parameters title="thy-dialog-header 参数列表" [parameters]="headerApiParameters"></api-parameters>

‎demo/src/app/components/+dialog/dialog-section.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, OnDestroy, TemplateRef, Renderer2 } from '@angular/core';
22
import { ThyDialog, ThyDialogConfig, ThyDialogSizes } from '../../../../../src/dialog';
3-
import { apiParameters } from './api-parameters';
3+
import { apiParameters, headerApiParameters } from './api-parameters';
44
import { mixinUnsubscribe, MixinBase } from '../../../../../src/core';
55
import { LiveDemoCodeExample } from '../../core/live-demo/live-demo.component';
66
import { DemoDialogBasicComponent } from './basic/dialog-basic.component';
@@ -13,6 +13,7 @@ import { DemoDialogInteractiveComponent } from './interactive/interactive.compon
1313
})
1414
export class DemoDialogSectionComponent extends mixinUnsubscribe(MixinBase) implements OnDestroy {
1515
public apiParameters = apiParameters;
16+
headerApiParameters = headerApiParameters;
1617

1718
liveDemos: LiveDemoCodeExample[] = [
1819
{

‎src/core/testing/thy-icon.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const defaultInlineIconSet = `
1515
<defs>
1616
<svg id="inbox"></svg>
1717
<svg id="close"></svg>
18+
<svg id="close-bold"></svg>
1819
<svg id="calendar-check"></svg>
1920
<svg id="angle-down"></svg>
2021
<svg id="check"></svg>

‎src/dialog/dialog.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { THY_DIALOG_DEFAULT_OPTIONS_PROVIDER } from './dialog.config';
1313
import { ThyConfirmComponent } from './confirm/confirm.component';
1414
import { THY_CONFIRM_DEFAULT_OPTIONS_PROVIDER } from './confirm.config';
1515
import { ThyIconModule } from '../icon/icon.module';
16+
import { ThySharedModule } from '../shared';
1617

1718
@NgModule({
1819
declarations: [
@@ -22,7 +23,7 @@ import { ThyIconModule } from '../icon/icon.module';
2223
DialogFooterComponent,
2324
ThyConfirmComponent
2425
],
25-
imports: [CommonModule, PortalModule, OverlayModule, ThyButtonModule, ThyIconModule],
26+
imports: [CommonModule, ThySharedModule, PortalModule, OverlayModule, ThyButtonModule, ThyIconModule],
2627
providers: [ThyDialog, THY_DIALOG_DEFAULT_OPTIONS_PROVIDER, THY_CONFIRM_DEFAULT_OPTIONS_PROVIDER],
2728
entryComponents: [ThyDialogContainerComponent, ThyConfirmComponent],
2829
exports: [ThyDialogContainerComponent, DialogHeaderComponent, DialogBodyComponent, DialogFooterComponent]

‎src/dialog/header/dialog-header.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
<ng-template #defaultHeader>
55
<h3 class="modal-title"><thy-icon [thyIconName]="thyIcon"></thy-icon> {{ thyTitle }}</h3>
66
<button type="button" class="close" (click)="close($event)">
7-
<i class="wtf wtf-times"></i>
7+
<thy-icon thyIconName="close-bold"></thy-icon>
88
</button>
99
</ng-template>

‎src/dialog/header/dialog-header.component.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,19 @@ import { ThyInternalDialogRef } from '../dialog-ref';
2323
exportAs: 'thyDialogHeader'
2424
})
2525
export class DialogHeaderComponent implements OnInit {
26-
@HostBinding(`class.dialog-header`) _isDialogHeader = true;
26+
@HostBinding(`class.dialog-header`) isDialogHeader = true;
27+
28+
@HostBinding(`class.dialog-header-lg`) isDialogHeaderLg = false;
2729

2830
@ContentChild('dialogHeader')
2931
public headerTemplate: TemplateRef<any>;
3032

3133
@Input() thyTitle: string;
3234

< 10000 /code>
35+
@Input() set thySize(value: 'lg' | 'md') {
36+
this.isDialogHeaderLg = value === 'lg';
37+
}
38+
3339
@Input()
3440
set thyTitleTranslationKey(key: string) {
3541
if (key && !this.thyTitle) {
@@ -56,7 +62,7 @@ export class DialogHeaderComponent implements OnInit {
5662
// ID. This must occur in `onInit`, as the ID binding for the dialog container won't
5763
// be resolved at constructor time.
5864
const dialogRef = this.dialog.getClosestDialog(this.elementRef.nativeElement) as ThyInternalDialogRef<any>;
59-
this.dialogContainer = dialogRef.containerInstance;
65+
this.dialogContainer = dialogRef ? dialogRef.containerInstance : null;
6066
}
6167

6268
// change in next microtask avoid throw ExpressionChangedAfterItHasBeenCheckedError

‎src/dialog/styles/dialog.scss

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,28 @@
3434
border-bottom: $dialog-header-border-width solid $dialog-header-border-color;
3535
@include border-top-radius($border-radius-lg);
3636

37+
&.dialog-header-lg {
38+
padding: 0 $dialog-header-padding-lg;
39+
}
40+
3741
h3 {
3842
font-size: $font-size-md;
3943
font-weight: 500;
4044
}
4145

4246
.close {
4347
outline: none;
44-
padding: 1rem $dialog-header-padding;
45-
margin: (-$dialog-header-padding) (-$dialog-header-padding) (-$dialog-header-padding) auto;
48+
@if $dialog-close-pill-enabled {
49+
padding: 3px 7px;
50+
margin-right: -7px;
51+
&:hover {
52+
background: rgba($primary, 0.1);
53+
border-radius: $border-radius;
54+
}
 57AE
55+
} @else {
56+
padding: 1rem $dialog-header-padding;
57+
margin: (-$dialog-header-padding) (-$dialog-header-padding) (-$dialog-header-padding) auto;
58+
}
4659
}
4760
}
4861

‎src/dialog/test/dialog-layout.spec.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { TestBed, ComponentFixture } from '@angular/core/testing';
2+
import { ThyDialogModule } from '../dialog.module';
3+
import { Component, DebugElement } from '@angular/core';
4+
import { By } from '@angular/platform-browser';
5+
import { DialogHeaderComponent } from '../header/dialog-header.component';
6+
import { bypassSanitizeProvider, injectDefaultSvgIconSet } from '../../core/testing/thy-icon';
7+
8+
@Component({
9+
selector: 'dialog-header-basic',
10+
template: `
11+
<thy-dialog-header [thySize]="size" thyTitle="I am dialog header"></thy-dialog-header>
12+
`
13+
})
14+
class DialogHeaderBasicComponent {
15+
size: 'lg' | 'md';
16+
}
17+
18+
describe('dialog-layout', () => {
19+
beforeEach(() => {
20+
TestBed.configureTestingModule({
21+
imports: [ThyDialogModule],
22+
declarations: [DialogHeaderBasicComponent],
23+
providers: [bypassSanitizeProvider]
24+
});
25+
TestBed.compileComponents();
26+
27+
injectDefaultSvgIconSet();
28+
});
29+
30+
describe('dialog-header', () => {
31+
let dialogHeaderBasicFixture: ComponentFixture<DialogHeaderBasicComponent>;
32+
let dialogHeaderDebugElement: DebugElement;
33+
let dialogHeaderElement: HTMLElement;
34+
35+
beforeEach(() => {
36+
dialogHeaderBasicFixture = TestBed.createComponent(DialogHeaderBasicComponent);
37+
dialogHeaderBasicFixture.detectChanges();
38+
dialogHeaderDebugElement = dialogHeaderBasicFixture.debugElement.query(By.directive(DialogHeaderComponent));
39+
dialogHeaderElement = dialogHeaderDebugElement.nativeElement;
40+
});
41+
42+
it('should create dialog header', () => {
43+
expect(dialogHeaderDebugElement).toBeTruthy();
44+
});
45+
46+
it('should get correct class', () => {
47+
expect(dialogHeaderElement.classList.contains('dialog-header')).toBeTruthy();
48+
});
49+
50+
it('should get correct title', () => {
51+
expect(dialogHeaderElement.textContent.includes('I am dialog header')).toBeTruthy();
52+
});
53+
54+
it('should get correct class when size is lg', () => {
55+
dialogHeaderBasicFixture.componentInstance.size = 'lg';
56+
dialogHeaderBasicFixture.detectChanges();
57+
expect(dialogHeaderElement.classList.contains('dialog-header-lg')).toBeTruthy();
58+
});
59+
});
60+
});

‎src/dialog/test/dialog.spec.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
DialogFullContentComponent
1919
} from './module';
2020
import { ESCAPE, A } from '../../util/keycodes';
21-
import { dispatchKeyboardEvent } from '../../core/testing';
21+
import { dispatchKeyboardEvent, bypassSanitizeProvider, injectDefaultSvgIconSet } from '../../core/testing';
2222
import { By } from '@angular/platform-browser';
2323
import { ThyDialogContainerComponent } from '../dialog-container.component';
2424
import { ThyDialogSizes } from '../dialog.config';
@@ -37,6 +37,7 @@ describe('ThyDialog', () => {
3737
TestBed.configureTestingModule({
3838
imports: [ThyDialogModule, DialogTestModule],
3939
providers: [
40+
bypassSanitizeProvider,
4041
{ provide: Location, useClass: SpyLocation }
4142
// {
4243
// provide: ScrollDispatcher,
@@ -46,7 +47,7 @@ describe('ThyDialog', () => {
4647
// }
4748
]
4849
});
49-
50+
injectDefaultSvgIconSet();
5051
TestBed.compileComponents();
5152
}));
5253

‎src/styles/variables.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,10 +343,13 @@ $modal-sm: 400px !default; //
343343
$modal-transition: transform 0.3s ease-out !default;
344344

345345
// Dialog
346+
$dialog-close-pill-enabled: true;
346347
$dialog-border-radius: 4px !default;
347348
$dialog-header-height: 50px !default;
348349
$dialog-header-title-line-height: 1.5rem !default;
349350
$dialog-header-padding: 1.875rem !default;
351+
$dialog-header-padding-lg: 1.25rem !default;
352+
350353
$dialog-header-border-width: 1px !default;
351354
$dialog-header-border-color: $gray-200 !default;
352355
$dialog-box-shadow: 0 0 24px rgba(0, 0, 0, 0.25) !default;
@@ -406,7 +409,7 @@ $close-font-size: $font-size-md !default;
406409
$close-font-weight: normal !default;
407410
$close-color: $black !default;
408411
$close-text-shadow: 0 1px 0 $white !default;
409-
$close-text-color: $gray-300 !default;
412+
$close-text-color: $gray-400 !default;
410413
$empty-text-color: $gray-400 !default;
411414
$empty-icon-color: $gray-200 !default;
412415
$empty-text-size: $font-size-base !default;

0 commit comments

Comments
 (0)
0