Skip to content

Commit b171a8f

Browse files
rmlzyrmlzy
committed
feat: update default layout
1 parent 5d4be72 commit b171a8f

27 files changed

+141
-57
lines changed

Diff for: ‎src/app/components/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export * from "./example/example.component";
22
export * from "./tag-picker/tag-picker.component";
3-
export * from "./ng-card/ng-card.component";
3+
export * from "./nz-footer-bar/nz-footer-bar.component";

Diff for: ‎src/app/components/ng-card/ng-card.component.html

-1
This file was deleted.

Diff for: ‎src/app/components/ng-card/ng-card.component.ts

-12
This file was deleted.

Diff for: ‎src/app/components/nz-footer-bar/nz-footer-bar.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="nz-footer-bar">
2+
<ng-content></ng-content>
3+
</div>

Diff for: ‎src/app/components/nz-footer-bar/nz-footer-bar.component.less

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.nz-footer-bar {
2+
position: fixed;
3+
right: 0;
4+
bottom: 0;
5+
z-index: 99;
6+
height: 50px;
7+
display: flex;
8+
align-items: center;
9+
justify-content: flex-end;
10+
padding: 0 20px;
11+
background: #fff;
12+
border-top: 1px solid #e8e8e8;
13+
}

Diff for: ‎src/app/components/nz-footer-bar/nz-footer-bar.component.spec.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentFixture, TestBed } from "@angular/core/testing";
2+
3+
import { NzFooterBarComponent } from "./nz-footer-bar.component";
4+
5+
describe("NzFooterBarComponent", () => {
6+
let component: NzFooterBarComponent;
7+
let fixture: ComponentFixture<NzFooterBarComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [NzFooterBarComponent],
12+
}).compileComponents();
13+
});
14+
15+
beforeEach(() => {
16+
fixture = TestBed.createComponent(NzFooterBarComponent);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it("should create", () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});

Diff for: ‎src/app/components/nz-footer-bar/nz-footer-bar.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, OnInit } from "@angular/core";
2+
3+
@Component({
4+
selector: "nz-footer-bar",
5+
templateUrl: "./nz-footer-bar.component.html",
6+
styleUrls: ["./nz-footer-bar.component.less"],
7+
})
8+
export class NzFooterBarComponent implements OnInit {
9+
constructor() {}
10+
11+
ngOnInit(): void {}
12+
}

Diff for: ‎src/app/config/app-menu.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ export const APP_MENUS: IAppMenu = [
3131
level: 1,
3232
title: "Form",
3333
icon: "form",
34-
children: [{ level: 2, title: "Basic form", link: "/form/basic" }],
34+
children: [
35+
{ level: 2, title: "Basic form", link: "/form/basic" },
36+
{ level: 2, title: "Advanced form", link: "/form/advanced" },
37+
],
3538
},
3639
];

Diff for: ‎src/app/pages/form/advanced/advanced.component.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<nz-page-header nzTitle="Basic Form">
2+
<nz-breadcrumb nz-page-header-breadcrumb>
3+
<nz-breadcrumb-item>
4+
<a routerLink="/">Home</a>
5+
</nz-breadcrumb-item>
6+
<nz-breadcrumb-item>
7+
<a routerLink="/form">Form</a>
8+
</nz-breadcrumb-item>
9+
<nz-breadcrumb-item>Advanced Form</nz-breadcrumb-item>
10+
</nz-breadcrumb>
11+
<nz-page-header-content>高级表单常见于一次性输入和提交大批量数据的场景。</nz-page-header-content>
12+
</nz-page-header>
13+
14+
<nz-card nzTitle="仓库管理" class="mb15"></nz-card>
15+
16+
<nz-card nzTitle="任务管理" class="mb15"></nz-card>
17+
18+
<nz-card nzTitle="成员管理"></nz-card>
19+
20+
<nz-footer-bar>
21+
<button nz-button nzType="primary">提交</button>
22+
</nz-footer-bar>

Diff for: ‎src/app/components/ng-card/ng-card.component.less renamed to ‎src/app/pages/form/advanced/advanced.component.less

File renamed without changes.

Diff for: ‎src/app/components/ng-card/ng-card.component.spec.ts renamed to ‎src/app/pages/form/advanced/advanced.component.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { ComponentFixture, TestBed } from "@angular/core/testing";
22

3-
import { NgCardComponent } from "./ng-card.component";
3+
import { AdvancedComponent } from "./advanced.component";
44

5-
describe("NgCardComponent", () => {
6-
let component: NgCardComponent;
7-
let fixture: ComponentFixture<NgCardComponent>;
5+
describe("AdvancedComponent", () => {
6+
let component: AdvancedComponent;
7+
let fixture: ComponentFixture<AdvancedComponent>;
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
declarations: [NgCardComponent],
11+
declarations: [AdvancedComponent],
1212
}).compileComponents();
1313
});
1414

1515
beforeEach(() => {
16-
fixture = TestBed.createComponent(NgCardComponent);
16+
fixture = TestBed.createComponent(AdvancedComponent);
1717
component = fixture.componentInstance;
1818
fixture.detectChanges();
1919
});

Diff for: ‎src/app/pages/form/advanced/advanced.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, OnInit } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-advanced",
5+
templateUrl: "./advanced.component.html",
6+
styleUrls: ["./advanced.component.less"],
7+
})
8+
export class AdvancedComponent implements OnInit {
9+
constructor() {}
10+
11+
ngOnInit(): void {}
12+
}

Diff for: ‎src/app/pages/form/basic/basic.component.html

+7
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
</nz-form-control>
2424
</nz-form-item>
2525

26+
<nz-form-item>
27+
<nz-form-label [nzSm]="7" nzRequired>Start and end date</nz-form-label>
28+
<nz-form-control [nzSm]="10" nzErrorTip="Please select the start and end date">
29+
<nz-range-picker formControlName="range" class="w100"></nz-range-picker>
30+
</nz-form-control>
31+
</nz-form-item>
32+
2633
<nz-form-item>
2734
<nz-form-label [nzSm]="7" nzRequired>Goal description</nz-form-label>
2835
<nz-form-control [nzSm]="10" nzErrorTip="Please enter a description of the goal">

Diff for: ‎src/app/pages/form/basic/basic.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export class BasicComponent implements OnInit {
1616
ngOnInit() {
1717
this.loginForm = this.fb.group({
1818
title: ["", [Validators.required]],
19+
range: [null, [Validators.required]],
1920
goal: ["", [Validators.required]],
2021
standard: ["", [Validators.required]],
2122
client: [""],

Diff for: ‎src/app/pages/form/form-routing.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { NgModule } from "@angular/core";
22
import { RouterModule, Routes } from "@angular/router";
33
import { BasicComponent } from "./basic/basic.component";
4+
import { AdvancedComponent } from "./advanced/advanced.component";
45

56
const routes: Routes = [
67
{ path: "", redirectTo: "/basic", pathMatch: "full" },
78
{ path: "basic", component: BasicComponent },
9+
{ path: "advanced", component: AdvancedComponent },
810
];
911

1012
@NgModule({

Diff for: ‎src/app/pages/form/form.module.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { CommonModule } from "@angular/common";
44
import { SharedModule } from "../../shared/shared.module";
55
import { FormRoutingModule } from "./form-routing.module";
66
import { BasicComponent } from "./basic/basic.component";
7+
import { AdvancedComponent } from "./advanced/advanced.component";
78

89
@NgModule({
9-
declarations: [BasicComponent],
10+
declarations: [BasicComponent, AdvancedComponent],
1011
imports: [CommonModule, SharedModule, FormRoutingModule],
1112
})
1213
export class FormModule {}

Diff for: ‎src/app/shared/shared.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { CommonModule } from "@angular/common";
33
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
44
import { NgApexchartsModule } from "ng-apexcharts";
55
import { NgZorroAntdModule } from "./ng-zorro-antd.module";
6-
import { ExampleComponent, TagPickerComponent, NgCardComponent } from "../components";
6+
import { ExampleComponent, TagPickerComponent, NzFooterBarComponent } from "../components";
77

8-
const globalCmpts = [ExampleComponent, TagPickerComponent, NgCardComponent];
8+
const globalCmpts = [ExampleComponent, TagPickerComponent, NzFooterBarComponent];
99

1010
@NgModule({
1111
imports: [CommonModule, FormsModule, ReactiveFormsModule, NgZorroAntdModule, NgApexchartsModule],

Diff for: ‎src/app/theme/components/app-aside/app-aside.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div class="app-aside">
22
<a class="brand" routerLink="/">
3-
<img width="110" height="32" src="assets/images/logo-white.svg" alt="" />
3+
<img *ngIf="collapsed" width="110" height="32" src="assets/images/logo-small-white.svg" />
4+
<img *ngIf="!collapsed" width="110" height="32" src="assets/images/logo-white.svg" />
45
</a>
56

67
<div class="ng-layout-container">
@@ -11,7 +12,7 @@
1112
<li
1213
*ngIf="!menu.children"
1314
nz-menu-item
14-
[nzPaddingLeft]="menu.level * 24"
15+
[nzPaddingLeft]="menu.level * 16"
1516
[nzDisabled]="menu.disabled"
1617
[nzSelected]="menu.selected"
1718
>
@@ -23,7 +24,7 @@
2324
<li
2425
*ngIf="menu.children"
2526
nz-submenu
26-
[nzPaddingLeft]="menu.level * 24"
27+
[nzPaddingLeft]="menu.level * 16"
2728
[nzOpen]="menu.open"
2829
[nzTitle]="menu.title"
2930
[nzIcon]="menu.icon"
@@ -42,7 +43,7 @@
4243

4344
<div *ngIf="menuMode === 'inline'" class="app-aside-collapsed">
4445
<div class="collapsed-icon" (click)="toggle()">
45-
<i nz-icon [nzType]="collapsed ? 'arrow-right' : 'arrow-left'" nzTheme="outline"></i>
46+
<i nz-icon [nzType]="collapsed ? 'menu-fold' : 'menu-unfold'" nzTheme="outline"></i>
4647
</div>
4748
</div>
4849
</div>

Diff for: ‎src/app/theme/components/app-body/app-body.component.html

-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
<div class="ng-layout-container">
22
<div class="app-body">
3-
<!-- <div class="breadcrumb">-->
4-
<!-- <nz-breadcrumb>-->
5-
<!-- <nz-breadcrumb-item *ngFor="let bread of currentBreads">-->
6-
<!-- <a [routerLink]="bread.link">{{ bread.title }}</a>-->
7-
<!-- </nz-breadcrumb-item>-->
8-
<!-- </nz-breadcrumb>-->
9-
<!-- </div>-->
10-
113
<div class="main">
124
<router-outlet></router-outlet>
135
</div>

Diff for: ‎src/app/theme/layouts/default/default.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
[class.is-fixed-header]="config.fixedHeader"
99
[class.is-fluid]="config.fluid"
1010
>
11-
<app-header></app-header>
1211
<app-aside [collapsed]="collapsed" (toggleCollapsed)="onToggleCollapsed($event)"></app-aside>
12+
<app-header></app-header>
1313
<app-body></app-body>
1414
<app-footer></app-footer>
1515
</div>

Diff for: ‎src/assets/images/logo-small-white.svg

+3
Loading

Diff for: ‎src/assets/images/logo-small.svg

+3
Loading

Diff for: ‎src/assets/images/logo.svg

+4
Loading

Diff for: ‎src/assets/styles/global.less

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
@import "layout";
22

3+
.w100 {
4+
width: 100%;
5+
}
6+
37
.mt15 {
48
margin-top: 15px;
59
}

Diff for: ‎src/assets/styles/layout.less

+7-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@aside-width: 240px;
2-
@aside-mini-width: 80px;
2+
@aside-mini-width: 48px;
33

44
.ng-layout {
55
display: flex;
@@ -13,7 +13,8 @@
1313
margin: 0 auto;
1414
}
1515

16-
.app-header {
16+
.app-header,
17+
.nz-footer-bar {
1718
width: calc(100% - @aside-width);
1819
}
1920
}
@@ -41,14 +42,7 @@
4142
overflow-x: hidden;
4243
overflow-y: auto;
4344
border-right: 1px solid #e8e8e8;
44-
45-
& > .ng-layout-container {
46-
width: 100%;
47-
}
48-
}
49-
50-
.app-header {
51-
margin-left: @aside-width;
45+
z-index: 200;
5246

5347
& > .ng-layout-container {
5448
width: 100%;
@@ -62,14 +56,10 @@
6256

6357
.app-aside {
6458
width: @aside-mini-width;
65-
66-
.brand-name {
67-
display: none;
68-
}
6959
}
7060

71-
.app-header {
72-
margin-left: @aside-mini-width;
61+
.app-header,
62+
.nz-footer-bar {
7363
width: calc(100% - @aside-mini-width);
7464
}
7565
}
@@ -86,7 +76,7 @@
8676
.app-header {
8777
position: fixed;
8878
top: 0;
89-
left: 0;
79+
right: 0;
9080
z-index: 20;
9181
}
9282
}

Diff for: ‎src/assets/styles/ng-zorro.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@
323323
// ---
324324
@menu-inline-toplevel-item-height: 40px;
325325
@menu-item-height: 40px;
326-
@menu-collapsed-width: 80px;
326+
@menu-collapsed-width: 48px;
327327
@menu-bg: @component-background;
328328
@menu-popup-bg: @component-background;
329329
@menu-item-color: @text-color;

Diff for: ‎src/tslint.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"extends": "../tslint.json",
33
"rules": {
4-
"directive-selector": [true, "attribute", "app", "camelCase"],
5-
"component-selector": [true, "element", "app", "kebab-case"],
4+
"directive-selector": [true, "attribute", "app", "camelCase", "nz"],
5+
"component-selector": [true, "element", "app", "kebab-case", "nz"],
66
"forin": false
77
}
88
}

0 commit comments

Comments
 (0)