8000 feat(card): add divided mode, header has border, padding increas #265857 · atinc/ngx-tethys@86862a5 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 86862a5

Browse files
why520crazywhy520crazy
committed
feat(card): add divided mode, header has border, padding increas #265857
1 parent 2603706 commit 86862a5

File tree

13 files changed

+238
-20
lines changed

13 files changed

+238
-20
lines changed

‎demo/src/app/app.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ body {
108108
.demo-main-content {
109109
position: relative;
110110
border-radius: 10px;
111-
padding: 0 150px 0 20px;
111+
padding: 0 $demo-toc-width 0 20px;
112112
}
113113
}
114114

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { DemoCardBasicComponent } from './basic/basic.component';
44
import { DemoCardCustomHeaderComponent } from './custom-header/custom-header.component';
55
import { DemoCardContentScrollComponent } from './content-scroll/content-scroll.component';
66
import { apiCardParameters, apiHeaderParameters, apiContentParameters } from './api-parameters';
7+
import { DemoCardDividedComponent } from './divided/divided.component';
78

89
@Component({
910
selector: 'demo-card-section',
@@ -69,6 +70,23 @@ export class DemoCardSectionComponent {
6970
content: require('!!raw-loader!./content-scroll/content-scroll.component.ts')
7071
}
7172
]
73+
},
74+
{
75+
title: '分割模式',
76+
component: DemoCardDividedComponent,
77+
description: ``,
78+
codeExamples: [
79+
{
80+
type: 'html',
81+
name: 'divided.component.html',
82+
content: require('!!raw-loader!./divided/divided.component.html')
83+
},
84+
{
85+
type: 'ts',
86+
name: 'divided.component.ts',
87+
content: require('!!raw-loader!./divided/divided.component.ts')
88+
}
89+
]
7290
}
7391
];
7492

‎demo/src/app/components/+card/divided/divided.component.html

Lines changed: 13 additions & 0 deletions
Original f F438 ile line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="demo-inner-wrapper">
2+
<thy-card style="width: 240px" thyDivided="true">
3+
<thy-card-header thyTitle="头部标题">
4+
<ng-template #headerOperation>
5+
<button thyButtonIcon="outdent"></button>
6+
</ng-template>
7+
</thy-card-header>
8+
<thy-card-content>
9+
我是 content<br />
10+
我是 content<br />
11+
</thy-card-content>
12+
</thy-card>
13+
</div>

‎demo/src/app/components/+card/divided/divided.component.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-demo-card-divided',
5+
templateUrl: './divided.component.html'
6+
})
7+
export class DemoCardDividedComponent implements OnInit {
8+
constructor() {}
9+
10+
ngOnInit(): void {}
11+
}

‎demo/src/app/components/+card/module.ts

Lines changed: 13 additions & 2 deletions
< 10000 /tr>
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,23 @@ import { SharedModule } from '../../shared.module';
33
import { DemoCardBasicComponent } from './basic/basic.component';
44
import { DemoCardCustomHeaderComponent } from './custom-header/custom-header.component';
55
import { DemoCardContentScrollComponent } from './content-scroll/content-scroll.component';
6+
import { DemoCardDividedComponent } from './divided/divided.component';
67

78
@NgModule({
8-
declarations: [DemoCardBasicComponent, DemoCardCustomHeaderComponent, DemoCardContentScrollComponent],
9+
declarations: [
10+
DemoCardBasicComponent,
11+
DemoCardCustomHeaderComponent,
12+
DemoCardContentScrollComponent,
13+
DemoCardDividedComponent
14+
],
915
imports: [SharedModule],
1016
exports: [DemoCardBasicComponent],
11-
entryComponents: [DemoCardBasicComponent, DemoCardCustomHeaderComponent, DemoCardContentScrollComponent],
17+
entryComponents: [
18+
DemoCardBasicComponent,
19+
DemoCardCustomHeaderComponent,
20+
DemoCardContentScrollComponent,
21+
DemoCardDividedComponent
22+
],
1223
providers: []
1324
})
1425
export class DemoCardModule {}

‎demo/src/app/core/demo-title/demo-title.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@
1414
height: 100%;
1515
top: 0;
1616
right: 0;
17+
width: $demo-toc-width - 20px;
1718
> ul {
18-
width: 130px;
19+
// width: 130px;
1920
position: sticky;
2021
top: 20px;
2122
// right: 15px;

‎demo/src/styles.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
// @import '~bootstrap/scss/bootstrap';
44
// $primary: #338FE5;
55

6+
$demo-toc-width: 200px;
7+
68
@import '../../src/styles/index.scss';
7-
// @import './styles/wt-font.scss';
89
@import './assets/fonts/wtd/iconfont.css';
910
@import './assets/icons/fonts/icons.scss';
1011
@import '~bootstrap/scss/nav';

‎src/card/card.component.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,23 @@ import { inputValueToBoolean } from '../util/helpers';
44
@Component({
55
selector: 'thy-card',
66
template: `
7-
<ng-content></ng-content>
8-
`
7+
<ng-content></ng-content>
8+
`
99
})
1010
export class ThyCardComponent {
11-
1211
@HostBinding('class.thy-card') thyCardClass = true;
1312

1413
@HostBinding('class.thy-card--clear-left-right-padding') clearLeftRightPadding = false;
1514

15+
@HostBinding('class.thy-card--divided') _thyDivided = false;
16+
1617
@Input('thyHasLeftRightPadding')
1718
set thyHasLeftRightPadding(value: any) {
1819
this.clearLeftRightPadding = !inputValueToBoolean(value);
1920
}
2021

22+
@Input('thyDivided')
23+
set thyDivided(value: boolean) {
24+
this._thyDivided = inputValueToBoolean(value);
25+
}
2126
}

‎src/card/header.component.ts

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
import { Component, HostBinding, Input, OnInit, TemplateRef, Optional, ViewChild, ContentChild, ViewContainerRef } from '@angular/core';
1+
import {
2+
Component,
3+
HostBinding,
4+
Input,
5+
OnInit,
6+
TemplateRef,
7+
Optional,
8+
ViewChild,
9+
ContentChild,
10+
ViewContainerRef
11+
} from '@angular/core';
212
import { inputValueToBoolean } from '../util/helpers';
313
@Component({
414
selector: 'thy-card-header',
515
preserveWhitespaces: false,
616
templateUrl: './header.component.html'
717
})
818
export class ThyCardHeaderComponent implements OnInit {
9-
1019
public iconClass: string;
1120

1221
@HostBinding('class.thy-card-header') thyLayoutHeaderClass = true;
@@ -21,8 +30,8 @@ export class ThyCardHeaderComponent implements OnInit {
2130

2231
@Input('thySize')
2332
set thySize(value: string) {
24-
this._thySizeSm = (value === 'sm');
25-
this._thySizeLg = (value === 'lg');
33+
this._thySizeSm = value === 'sm';
34+
this._thySizeLg = value === 'lg';
2635
}
2736

2837
@ContentChild('headerTitle')
@@ -34,9 +43,7 @@ export class ThyCardHeaderComponent implements OnInit {
3443
@ContentChild('headerOperation')
3544
public operationTemplateRef: TemplateRef<any>;
3645

37-
constructor() {
38-
}
46+
constructor() {}
3947

40-
ngOnInit() {
41-
}
48+
ngOnInit() {}
4249
}

‎src/card/styles/card.scss

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,10 @@
4040
}
4141

4242
&--lg {
43-
padding-top: 20px;
43+
padding: {
44+
top: 15px;
45+
bottom: 15px;
46+
}
4447
}
4548
}
4649

@@ -66,6 +69,36 @@
6669
}
6770
}
6871

72+
// 分割的模式, 头底部出现分割线，标题前面的垂直分割符隐藏，上下间距变大
73+
&--divided {
74+
.thy-card-header {
75+
position: relative;
76+
padding: {
77+
top: $card-divided-spacing-y;
78+
bottom: $card-divided-spacing-y;
79+
}
80+
&::after {
81+
position: absolute;
82+
content: ' ';
83+
bottom: 0;
84+
height: 1px;
85+
background-color: $card-header-divider-color;
86+
left: 20px;
87+
right: 20px;
88+
}
89+
90+
.card-header-icon {
91+
display: none;
92+
}
93+
}
94+
.thy-card-content {
95+
padding: {
96+
top: $card-divided-spacing-y;
97+
bottom: $card-divided-spacing-y;
98+
}
99+
}
100+
}
101+
69102
&--clear-left-right-padding {
70103
.thy-card-header {
71104
padding-left: 0;

‎src/card/test/card.component.spec.ts

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { TestBed, ComponentFixture } from '@angular/core/testing';
2+
import { ThyCardModule } from '../card.module';
3+
import { Component, OnInit, DebugElement } from '@angular/core';
4+
import { By } from '@angular/platform-browser';
5+
import { ThyCardComponent } from '../card.component';
6+
7+
@Component({
8+
selector: 'card-basic',
9+
template: `
10+
<thy-card>
11+
<thy-card-header thyTitle="This is basic test"></thy-card-header>
12+
<thy-card-content>This is content</thy-card-content>
13+
</thy-card>
14+
`
15+
})
16+
class CardBasicComponent implements OnInit {
17+
constructor() {}
18+
19+
ngOnInit(): void {}
20+
}
21+
22+
@Component({
23+
selector: 'card-clear-padding',
24+
template: `
25+
<thy-card thyHasLeftRightPadding="false">
26+
<thy-card-header thyTitle="This is basic test"></thy-card-header>
27+
<thy-card-content>This is content</thy-card-content>
28+
</thy-card>
29+
`
30+
})
31+
class CardClearPaddingComponent implements OnInit {
32+
constructor() {}
33+
34+
ngOnInit(): void {}
35+
}
36+
37+
@Component({
38+
selector: 'card-divided',
39+
template: `
40+
<thy-card thyDivided="true">
41+
<thy-card-header thyTitle="This is basic test"></thy-card-header>
42+
<thy-card-content>This is content</thy-card-content>
43+
</thy-card>
44+
`
45+
})
46+
class CardDividedComponent implements OnInit {
47+
constructor() {}
48+
49+
ngOnInit(): void {}
50+
}
51+
52+
describe('thy-card', () => {
53+
beforeEach(() => {
54+
TestBed.configureTestingModule({
55+
imports: [ThyCardModule],
56+
declarations: [CardBasicComponent, CardDividedComponent, CardClearPaddingComponent]
57+
});
58+
TestBed.compileComponents();
59+
});
60+
61+
describe('basic', () => {
62+
let basicFixture: ComponentFixture<CardBasicComponent>;
63+
let cardBasicDebugElement: DebugElement;
64+
65+
beforeEach(() => {
66+
basicFixture = TestBed.createComponent(CardBasicComponent);
67+
basicFixture.detectChanges();
68+
cardBasicDebugElement = basicFixture.debugElement.query(By.directive(ThyCardComponent));
69+
});
70+
71+
it('should get correct thy-card class', () => {
72+
expect(basicFixture).toBeTruthy();
73+
expect(cardBasicDebugElement).toBeTruthy();
74+
const cardElement: HTMLElement = cardBasicDebugElement.nativeElement;
75+
expect(cardElement.classList.contains('thy-card')).toBe(true);
76+
});
77+
});
78+
79+
describe('divided', () => {
80+
let fixture: ComponentFixture<CardDividedComponent>;
81+
let cardDebugElement: DebugElement;
82+
83+
beforeEach(() => {
84+
fixture = TestBed.createComponent(CardDividedComponent);
85+
fixture.detectChanges();
86+
cardDebugElement = fixture.debugElement.query(By.directive(ThyCardComponent));
87+
});
88+
89+
it('should get correct divided thy-card--divided class', () => {
90+
expect(fixture).toBeTruthy();
91+
expect(cardDebugElement).toBeTruthy();
92+
const cardElement: HTMLElement = cardDebugElement.nativeElement;
93+
expect(cardElement.classList.contains('thy-card--divided')).toBe(true);
94+
});
95+
});
96+
97+
describe('clear-padding', () => {
98+
let fixture: ComponentFixture<CardClearPaddingComponent>;
99+
let cardDebugElement: DebugElement;
100+
101+
beforeEach(() => {
102+
fixture = TestBed.createComponent(CardClearPaddingComponent);
103+
fixture.detectChanges();
104+
cardDebugElement = fixture.debugElement.query(By.directive(ThyCardComponent));
105+
});
106+
107+
it('should get correct thy-card--clear-left-right-padding class when thyHasLeftRightPadding is false', () => {
108+
expect(fixture).toBeTruthy();
109+
expect(cardDebugElement).toBeTruthy();
110+
const cardElement: HTMLElement = cardDebugElement.nativeElement;
111+
expect(cardElement.classList.contains('thy-card--clear-left-right-padding')).toBe(true);
112+
});
113+
});
114+
});

‎src/styles/variables.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,10 @@ $card-border-radius: 0 !default;
378378
$card-title-icon-color: $primary !default;
379379
$card-title-color: $gray-700 !default;
380380
$card-title-info-color: $gray-500 !default;
381+
$card-header-divider-color: $gray-200 !default;
382+
// divided 分割模式，头部和内容区域的上下间距
383+
$card-divided-spacing-y: 15px;
384+
381385
//Datepicker
382386
$datepicker-z-index: 1100 !default;
383387
// Notify

‎src/test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ declare const require: any;
1010
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
1111

1212
// Then we find all the tests.
13-
const context = require.context('./', true, /custom-select\.spec\.ts$/);
13+
const context = require.context('./', true, /\.spec\.ts$/);
1414

1515
// And load the modules.
16-
const testcaseFilter = '';
16+
const testSpecFilter = '';
1717
context
1818
.keys()
1919
.filter(n => {
20-
return n.includes(testcaseFilter);
20+
return n.includes(testSpecFilter);
2121
})
2222
.map(context);

0 commit comments

Comments
 (0)
0