Skip to content

Commit 3d2ebd5

Browse files
iyilm4ziyilm4z
committed
app module's layout, header and footer done
1 parent d364c4c commit 3d2ebd5

15 files changed

+247
-54
lines changed

‎angular/src/app/app.component.html

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
1-
<div class="overlay"></div>
2-
3-
<top-bar></top-bar>
4-
5-
<section (window:resize)="onResize($event)">
6-
<aside id="leftsidebar" class="sidebar">
7-
<sidebar-user-area></sidebar-user-area>
8-
<sidebar-nav></sidebar-nav>
9-
<sidebar-footer></sidebar-footer>
10-
</aside>
11-
12-
<right-sidebar></right-sidebar>
13-
</section>
14-
15-
<section class="content">
16-
<div class="container-fluid">
17-
<router-outlet></router-outlet>
18-
</div>
19-
</section>
1+
<div class="wrapper">
2+
<app-header></app-header>
3+
<div class="content-wrapper">
4+
<router-outlet></router-outlet>
5+
</div>
6+
<app-footer></app-footer>
7+
</div>

‎angular/src/app/app.component.ts

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
1-
import { Component, ViewContainerRef, Injector, OnInit, ChangeDetectorRef } from '@angular/core';
1+
import { Component, Injector, OnInit, Renderer2 } from '@angular/core';
22
import { AppComponentBase } from '@shared/app-component-base';
3-
43
import { SignalRAspNetCoreHelper } from '@shared/helpers/SignalRAspNetCoreHelper';
54

65
@Component({
7-
templateUrl: './app.component.html'
6+
templateUrl: './app.component.html'
87
})
98
export class AppComponent extends AppComponentBase implements OnInit {
10-
11-
private viewContainerRef: ViewContainerRef;
12-
13-
constructor(
14-
injector: Injector
15-
) {
16-
super(injector);
17-
}
18-
19-
ngOnInit(): void {
20-
21-
SignalRAspNetCoreHelper.initSignalR();
22-
23-
abp.event.on('abp.notifications.received', userNotification => {
24-
abp.notifications.showUiNotifyForUserNotification(userNotification);
25-
26-
// Desktop notification
27-
Push.create('AbpZeroTemplate', {
28-
body: userNotification.notification.data.message,
29-
icon: abp.appPath + 'assets/app-logo-small.png',
30-
timeout: 6000,
31-
onClick: function () {
32-
window.focus();
33-
this.close();
34-
}
35-
});
36-
});
37-
}
9+
sidebarExpanded: boolean;
10+
11+
constructor(injector: Injector, private renderer: Renderer2) {
12+
super(injector);
13+
}
14+
15+
ngOnInit(): void {
16+
this.renderer.addClass(document.body, 'sidebar-mini');
17+
18+
SignalRAspNetCoreHelper.initSignalR();
19+
20+
abp.event.on('abp.notifications.received', (userNotification) => {
21+
abp.notifications.showUiNotifyForUserNotification(userNotification);
22+
23+
// Desktop notification
24+
Push.create('AbpZeroTemplate', {
25+
body: userNotification.notification.data.message,
26+
icon: abp.appPath + 'assets/app-logo-small.png',
27+
timeout: 6000,
28+
onClick: function () {
29+
window.focus();
30+
this.close();
31+
}
32+
});
33+
});
34+
}
3835
}

‎angular/src/app/app.module.ts

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { HttpClientJsonpModule } from '@angular/common/http';
55
import { HttpClientModule } from '@angular/common/http';
66

77
import { ModalModule } from 'ngx-bootstrap/modal';
8+
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
89
import { NgxPaginationModule } from 'ngx-pagination';
910

1011
import { AppRoutingModule } from './app-routing.module';
@@ -37,6 +38,12 @@ import { CreateUserDialogComponent } from '@app/users/create-user/create-user-di
3738
import { EditUserDialogComponent } from '@app/users/edit-user/edit-user-dialog.component';
3839
import { ChangePasswordComponent } from './users/change-password/change-password.component';
3940
import { ResetPasswordDialogComponent } from './users/reset-password/reset-password.component';
41+
// layout
42+
import { HeaderComponent } from './layout/header.component';
43+
import { HeaderLeftNavbarComponent } from './layout/header-left-navbar.component';
44+
import { HeaderLanguageMenuComponent } from './layout/header-language-menu.component';
45+
import { HeaderUserMenuComponent } from './layout/header-user-menu.component';
46+
import { FooterComponent } from './layout/footer.component';
4047

4148
@NgModule({
4249
declarations: [
@@ -62,7 +69,13 @@ import { ResetPasswordDialogComponent } from './users/reset-password/reset-passw
6269
CreateUserDialogComponent,
6370
EditUserDialogComponent,
6471
ChangePasswordComponent,
65-
ResetPasswordDialogComponent
72+
ResetPasswordDialogComponent,
73+
// layout
74+
HeaderComponent,
75+
HeaderLeftNavbarComponent,
76+
HeaderLanguageMenuComponent,
77+
HeaderUserMenuComponent,
78+
FooterComponent,
6679
],
6780
imports: [
6881
CommonModule,
@@ -71,11 +84,12 @@ import { ResetPasswordDialogComponent } from './users/reset-password/reset-passw
7184
HttpClientModule,
7285
HttpClientJsonpModule,
7386
ModalModule.forChild(),
87+
BsDropdownModule,
7488
AbpModule,
7589
AppRoutingModule,
7690
ServiceProxyModule,
7791
SharedModule,
78-
NgxPaginationModule
92+
NgxPaginationModule,
7993
],
8094
providers: [],
8195
entryComponents: [
@@ -88,7 +102,7 @@ import { ResetPasswordDialogComponent } from './users/reset-password/reset-passw
88102
// users
89103
CreateUserDialogComponent,
90104
EditUserDialogComponent,
91-
ResetPasswordDialogComponent
92-
]
105+
ResetPasswordDialogComponent,
106+
],
93107
})
94108
export class AppModule {}

‎angular/src/app/layout/footer.component.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<footer class="main-footer">
2+
<strong>
3+
Copyright &copy; {{ currentYear }}
4+
<a href="javascript:;">AbpProjectName</a>.
5+
</strong>
6+
<div class="float-right d-none d-sm-inline-block">
7+
<b>{{ "Version" | localize }} </b> {{ versionText }}
8+
</div>
9+
</footer>

‎angular/src/app/layout/footer.component.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, Injector, ChangeDetectionStrategy } from '@angular/core';
2+
import { AppComponentBase } from '@shared/app-component-base';
3+
4+
@Component({
5+
selector: 'app-footer',
6+
templateUrl: './footer.component.html',
7+
changeDetection: ChangeDetectionStrategy.OnPush
8+
})
9+
export class FooterComponent extends AppComponentBase {
10+
currentYear: number;
11+
versionText: string;
12+
13+
constructor(injector: Injector) {
14+
super(injector);
15+
16+
this.currentYear = new Date().getFullYear();
17+
this.versionText =
18+
this.appSession.application.version +
19+
' [' +
20+
this.appSession.application.releaseDate.format('YYYYDDMM') +
21+
']';
22+
}
23+
}

‎angular/src/app/layout/header-language-menu.component.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<li class="nav-item dropdown" dropdown>
2+
<a href="javascript:;" class="nav-link" dropdownToggle>
3+
<i class="d-inline-block {{ currentLanguage.icon }}"></i>
4+
<span class="d-none d-md-inline-block ml-1">
5+
{{ currentLanguage.displayName }}
6+
</span>
7+
</a>
8+
<div class="dropdown-menu dropdown-menu-right p-0" *dropdownMenu>
9+
<ng-container *ngFor="let language of languages">
10+
<a
11+
*ngIf="language.name != currentLanguage.name"
12+
class="dropdown-item"
13+
href="javascript:;"
14+
(click)="changeLanguage(language.name)"
15+
>
16+
<i class="d-inline-block {{ language.icon }} mr-1"></i>
17+
{{ language.displayName }}
18+
</a>
19+
</ng-container>
20+
</div>
21+
</li>

‎angular/src/app/layout/header-language-menu.component.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {
2+
Component,
3+
ChangeDetectionStrategy,
4+
OnInit,
5+
Injector
6+
} from '@angular/core';
7+
import { AppComponentBase } from '@shared/app-component-base';
8+
import {
9+
UserServiceProxy,
10+
ChangeUserLanguageDto
11+
} from '@shared/service-proxies/service-proxies';
12+
import * as _ from 'lodash';
13+
14+
@Component({
15+
selector: 'header-language-menu',
16+
templateUrl: './header-language-menu.component.html',
17+
changeDetection: ChangeDetectionStrategy.OnPush
18+
})
19+
export class HeaderLanguageMenuComponent extends AppComponentBase
20+
implements OnInit {
21+
languages: abp.localization.ILanguageInfo[];
22+
currentLanguage: abp.localization.ILanguageInfo;
23+
24+
constructor(injector: Injector, private _userService: UserServiceProxy) {
25+
super(injector);
26+
}
27+
28+
ngOnInit() {
29+
this.languages = _.filter(
30+
this.localization.languages,
31+
(l) => !l.isDisabled
32+
);
33+
this.currentLanguage = this.localization.currentLanguage;
34+
}
35+
36+
changeLanguage(languageName: string): void {
37+
const input = new ChangeUserLanguageDto();
38+
input.languageName = languageName;
39+
40+
this._userService.changeLanguage(input).subscribe(() => {
41+
abp.utils.setCookieValue(
42+
'Abp.Localization.CultureName',
43+
languageName,
44+
new Date(new Date().getTime() + 5 * 365 * 86400000), // 5 year
45+
abp.appPath
46+
);
47+
48+
window.location.reload();
49+
});
50+
}
51+
}

‎angular/src/app/layout/header-left-navbar.component.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<ul class="navbar-nav">
2+
<li class="nav-item">
3+
<a class="nav-link" href="javascript:;">
4+
<i class="fas fa-bars"></i>
5+
</a>
6+
</li>
7+
<li class="nav-item d-none d-sm-inline-block">
8+
<a class="nav-link" [routerLink]="['home']">
9+
{{ "HomePage" | localize }}
10+
</a>
11+
</li>
12+
<li class="nav-item d-none d-sm-inline-block">
13+
<a class="nav-link" [routerLink]="['about']">
14+
{{ "About" | localize }}
15+
</a>
16+
</li>
17+
</ul>

‎angular/src/app/layout/header-left-navbar.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component, ChangeDetectionStrategy } from '@angular/core';
2+
3+
@Component({
4+
selector: 'header-left-navbar',
5+
templateUrl: './header-left-navbar.component.html',
6+
changeDetection: ChangeDetectionStrategy.OnPush
7+
})
8+
export class HeaderLeftNavbarComponent {}

‎angular/src/app/layout/header-user-menu.component.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<li class="nav-item dropdown nav-user-menu" dropdown>
2+
<a href="javascript:;" class="nav-link" dropdownToggle>
3+
<img
4+
class="user-image img-circle elevation-2"
5+
src="assets/img/user.png"
6+
alt="User Image"
7+
/>
8+
</a>
9+
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
10+
<a class="dropdown-item" [routerLink]="['update-password']">
11+
<i class="fas fa-user-edit"></i> {{ "UpdatePassword" | localize }}
12+
</a>
13+
<a class="dropdown-item" href="javascript:;" (click)="logout()">
14+
<i class="fas fa-sign-out-alt"></i> {{ "Logout" | localize }}
15+
</a>
16+
</div>
17+
</li>

0 commit comments

Comments
 (0)