Skip to content

Commit 4f0dffb

Browse files
BlariBlari
authored
Merge pull request #4 from flatlogic/refactored_code_fixed_chat
updated auth page, refactored code and fixed chat
2 parents 71204b0 + 9c9882a commit 4f0dffb

File tree

15 files changed

+182
-116
lines changed

15 files changed

+182
-116
lines changed

‎changelog.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## [1.0.9] - 09/27/2021
4+
### Updated
5+
6+
- Updated auth page;
7+
- Refactored code, fixed chat;
8+
39
## [1.0.8] - 09/14/2021
410
### Updated
511

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-material-admin",
3-
"version": "1.0.8",
3+
"version": "1.0.9",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

‎src/app/modules/auth/containers/auth-page/auth-page.component.html

+25-25
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
<div class="auth-page">
2-
<div class="auth-page__content-block">
3-
<div class="auth-page__content-wrapper">
4-
<mat-tab-group class="auth-page__group" mat-stretch-tabs>
2+
<div class="content-block">
3+
<div class="content-wrapper">
4+
<mat-tab-group class="group" mat-stretch-tabs>
55
<mat-tab label="Login">
6-
<h4 class="auth-page__group-title">Good Morning, User</h4>
7-
<div class="auth-page__google-button-wrapper">
8-
<button (click)="googleLogin()" mat-raised-button class="auth-page__google-button">
9-
<img class="auth-page__google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
6+
<h4 class="group-title">Good Morning, User</h4>
7+
<div class="google-button-wrapper">
8+
<button (click)="googleLogin()" mat-raised-button class="google-button">
9+
<img class="google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
1010
</button>
1111
</div>
1212

13-
<div class="auth-page__border-wrapper">
14-
<div class="auth-page__border-line"></div>
15-
<p class="auth-page__border-title">or</p>
16-
<div class="auth-page__border-line"></div>
13+
<div class="border-wrapper">
14+
<div class="border-line"></div>
15+
<p class="border-title">or</p>
16+
<div class="border-line"></div>
1717
</div>
1818

1919
<app-login-form (sendLoginForm)="sendLoginForm($event)"></app-login-form>
2020

2121
</mat-tab>
2222
<mat-tab label="New User">
23-
<h4 class="auth-page__group-title">Welcome!</h4>
24-
<p class="auth-page__group-sub-title">Create your account</p>
23+
<h4 class="group-title">Welcome!</h4>
24+
<p class="group-sub-title">Create your account</p>
2525

2626
<app-sign-form (sendSignForm)="sendSignForm($event)"></app-sign-form>
2727

28-
<div class="auth-page__border-wrapper">
29-
<div class="auth-page__border-line"></div>
30-
<p class="auth-page__border-title">or</p>
31-
<div class="auth-page__border-line"></div>
28+
<div class="border-wrapper">
29+
<div class="border-line"></div>
30+
<p class="border-title">or</p>
31+
<div class="border-line"></div>
3232
</div>
3333

34-
<div class="auth-page__google-button-wrapper">
35-
<button (click)="googleLogin()" mat-raised-button class="auth-page__google-button">
36-
<img class="auth-page__google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
34+
<div class="google-button-wrapper">
35+
<button (click)="googleLogin()" mat-raised-button class="google-button">
36+
<img class="google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
3737
</button>
3838
</div>
3939
</mat-tab>
4040
</mat-tab-group>
4141

42-
<p class="auth-page__footer-title">© 2014-{{todayDate | year}} <a href="https://flatlogic.com">Flatlogic</a>, LLC. All rights reserved.</p>
42+
<p class="footer-title">© 2014-{{todayDate | year}} <a href="https://flatlogic.com">Flatlogic</a>, LLC. All rights reserved.</p>
4343
</div>
4444
</div>
45-
<div class="auth-page__logo">
46-
<div class="auth-page__logo-wrapper">
47-
<img class="auth-page__logo-img" src="./assets/auth/logo.svg" alt="logo">
48-
<h6 class="auth-page__logo-title">Material Admin</h6>
45+
<div class="logo">
46+
<div class="logo-wrapper">
47+
<img class="logo-img" src="./assets/auth/logo.svg" alt="logo">
48+
<h6 class="logo-title">Material Admin</h6>
4949
</div>
5050
</div>
5151
</div>

‎src/app/modules/auth/containers/auth-page/auth-page.component.scss

+29-23
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@
77
height: 100%;
88
display: flex;
99

10+
.mat-tab-label {
11+
font-size: $fs-medium;
12+
}
13+
1014
@media (max-width: $medium) {
1115
flex-direction: column;
1216
}
1317

14-
&__content-block {
15-
width: 37%;
18+
.content-block {
19+
width: 40%;
1620
height: 100%;
1721
background-color: $white;
1822
display: flex;
@@ -24,8 +28,8 @@
2428
}
2529
}
2630

27-
&__content-wrapper {
28-
width: 45%;
31+
.content-wrapper {
32+
width: 55%;
2933
height: 100%;
3034
padding: 16px;
3135
display: flex;
@@ -41,21 +45,21 @@
4145
}
4246
}
4347

44-
&__group {
48+
.group {
4549
margin-top: 28px;
4650
}
4751

48-
&__group-title {
49-
font-size: 32px;
52+
.group-title {
53+
font-size: 3rem;
5054
font-weight: $fw-normal;
5155
margin-top: 37px;
52-
letter-spacing: -0.7px;
5356
text-align: center;
54-
line-height: 37px;
57+
line-height: 3.125rem;
58+
letter-spacing: normal;
5559
color: $dark-grey;
5660
}
5761

58-
&__group-sub-title {
62+
.group-sub-title {
5963
font-size: $fs-large;
6064
font-weight: $fw-normal;
6165
margin-bottom: 30px;
@@ -65,7 +69,7 @@
6569
color: $dark-grey;
6670
}
6771

68-
&__google-button-wrapper {
72+
.google-button-wrapper {
6973
margin-top: 32px;
7074
margin-bottom: 10px;
7175
width: 100%;
@@ -74,40 +78,42 @@
7478
align-items: center;
7579
}
7680

77-
&__google-button {
81+
.google-button {
7882
width: 95%;
7983
padding: 0;
84+
font-size: .875rem;
8085
background-color: $white;
8186
box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
8287
}
8388

84-
&__google-button-icon {
89+
.google-button-icon {
8590
width: 20px;
8691
margin-right: 16px;
8792
}
8893

89-
&__border-wrapper {
94+
.border-wrapper {
9095
align-items: center;
9196
display: flex;
9297
justify-content: center;
9398
margin: 32px 0;
9499
}
95100

96-
&__border-line {
101+
.border-line {
97102
height: 1px;
98103
width: 100%;
99104
background-color: $light-grey;
100105
opacity: 0.3;
101106
}
102107

103-
&__border-title {
104-
font-size: $fs-xs;
108+
.border-title {
109+
font-size: $fs-small;
110+
font-family: Roboto,Helvetica,Arial,sans-serif;
105111
padding: 0 16px;
106112
margin: 0;
107-
color: $dark-grey
113+
color: black;
108114
}
109115

110-
&__logo {
116+
.logo {
111117
width: 63%;
112118
height: 100%;
113119
background-color: $blue;
@@ -119,27 +125,27 @@
119125
}
120126
}
121127

122-
&__logo-wrapper {
128+
.logo-wrapper {
123129
width: 100%;
124130
display: flex;
125131
justify-content: center;
126132
flex-direction: column;
127133
align-items: center;
128134
}
129135

130-
&__logo-img {
136+
.logo-img {
131137
margin-bottom: 50px;
132138
}
133139

134-
&__logo-title {
140+
.logo-title {
135141
font-size: 62px;
136142
color: $white;
137143
font-weight: 500;
138144
letter-spacing: -1.5px;
139145
line-height: 62px;
140146
}
141147

142-
&__footer-title {
148+
.footer-title {
143149
color: $blue;
144150
font-size: 10px;
145151
opacity: 0.7;

‎src/app/modules/auth/containers/auth-page/auth-page.component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ViewEncapsulation } from '@angular/core';
22
import { ActivatedRoute, Router } from '@angular/router';
33

44
import { AuthService } from '../../services';
@@ -7,7 +7,8 @@ import { routes } from '../../../../consts';
77
@Component({
88
selector: 'app-auth-page',
99
templateUrl: './auth-page.component.html',
10-
styleUrls: ['./auth-page.component.scss']
10+
styleUrls: ['./auth-page.component.scss'],
11+
encapsulation: ViewEncapsulation.None
1112
})
1213
export class AuthPageComponent {
1314
public todayDate: Date = new Date();
@@ -17,7 +18,7 @@ export class AuthPageComponent {
1718
private route: ActivatedRoute,
1819
private router: Router) {
1920
if (this.authService.isAuthenticated()) {
20-
this.authService.receiveLogin();
21+
this.authService.logoutUser();
2122
}
2223

2324
this.route.queryParams.subscribe((params) => {

‎src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.ts

+20-28
Original file line numberDiff line numberDiff line change
@@ -60,45 +60,37 @@ export class DailyLineChartComponent implements OnInit, OnChanges, AfterViewInit
6060

6161
public ngOnChanges(changes: SimpleChanges): void {
6262
if (changes.currentTheme && changes.currentTheme.currentValue && this.chartObj) {
63-
this.chartObj.updateOptions({
64-
colors: [
65-
this.currentTheme === 'blue'
66-
? colors.BLUE
67-
: this.currentTheme === 'green'
68-
? colors.GREEN
69-
: colors.PINK,
70-
this.currentMode === 'dark'
71-
? colors.DARK_BLUE
72-
: colors.LIGHT_BLUE,
73-
colors.YELLOW
74-
]
75-
})
63+
this.updateChartOptions();
7664
}
77-
7865
if (changes.currentMode && changes.currentMode.currentValue && this.chartObj) {
79-
this.chartObj.updateOptions({
80-
colors: [
81-
this.currentTheme === 'blue'
82-
? colors.BLUE
83-
: this.currentTheme === 'green'
84-
? colors.GREEN
85-
: colors.PINK,
86-
this.currentMode === 'dark'
87-
? colors.DARK_BLUE
88-
: colors.LIGHT_BLUE,
89-
colors.YELLOW
90-
]
91-
})
66+
this.updateChartOptions();
9267
}
9368
}
9469

9570
public ngAfterViewInit() {
9671
this.chartObj = new ApexCharts(
9772
this.chart.nativeElement,
9873
this.chartOptions
99-
)
74+
);
10075

10176
this.chartObj.render();
77+
this.updateChartOptions();
78+
}
79+
80+
private updateChartOptions(): void {
81+
this.chartObj.updateOptions({
82+
colors: [
83+
this.currentTheme === 'blue'
84+
? colors.BLUE
85+
: this.currentTheme === 'green'
86+
? colors.GREEN
87+
: colors.PINK,
88+
this.currentMode === 'dark'
89+
? colors.DARK_BLUE
90+
: colors.LIGHT_BLUE,
91+
colors.YELLOW
92+
]
93+
});
10294
}
10395

10496
public initChart(data: TimeData, labels: string[]): void {

‎src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,10 @@
2929
&__content {
3030
display: flex;
3131
align-items: center;
32-
justify-content: space-between;
3332

3433
&-chart {
3534
height: 140px;
36-
width: 50%;
35+
width: 60%;
3736
max-width: 218px
3837
}
3938
}

‎src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
<mat-card-title>
66
<p>Badge Example</p>
77
</mat-card-title>
8-
<mat-card-subtitle>
8+
<mat-card-subtitle class="subtitle">
99
<p>Badge generates a small badge to the top-right of its child(ren)</p>
1010
</mat-card-subtitle>
1111

1212
<mat-card-content>
13-
<h1 class="text h1" matBadge="Primary" matBadgeOverlap="false" matBadgeColor="primary">Example heading</h1>
14-
<h2 class="text" matBadge="Accent" matBadgeOverlap="false" matBadgeColor="accent">Example heading</h2>
13+
<h1 class="text h1" matBadge="Primary" matBadgePosition="above after" matBadgeOverlap="false" matBadgeColor="primary">Example heading</h1>
14+
<h2 class="text" matBadge="Accent" matBadgePosition="after" matBadgeOverlap="false" matBadgeColor="accent">Example heading</h2>
1515
<h3 class="text" matBadge="Warn" matBadgeOverlap="false" matBadgeColor="warn">Example heading</h3>
1616
<h4 class="text" matBadge="Info" matBadgeOverlap="false" matBadgeColor="info">Example heading</h4>
1717
<h5 class="text" matBadge="Success" matBadgeOverlap="false" matBadgeColor="success">Example heading</h5>

‎src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.scss

+11-1
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,21 @@
1414
width: 50%;
1515
margin-right: 18px;
1616

17+
.subtitle {
18+
margin-bottom: 22px;
19+
}
20+
1721
@media (max-width: $small) {
1822
width: 100%;
1923
margin-right: 0;
2024
}
2125
}
2226

27+
.mat-badge-medium.mat-badge-above .mat-badge-content {
28+
margin-right: -21px;
29+
top: -20px;
30+
}
31+
2332
.second-subtitle {
2433
padding-top: 24px;
2534
}
@@ -55,7 +64,8 @@
5564
width: 100%;
5665

5766
& span.mat-badge-content {
58-
right: -22px;
67+
margin-right: -10px !important;
68+
top: -12px !important;
5969
padding: 0;
6070
width: 22px;
6171
height: 22px;

0 commit comments

Comments
 (0)