Skip to content

Navigation Menu

Sign in
Appearance settings

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
Sign up
Appearance settings

Commit 07bee1e

Browse files
enhacements
1 parent 3c9f292 commit 07bee1e

File tree

8 files changed

+94
-38
lines changed

8 files changed

+94
-38
lines changed

‎AngularUI/src/app/app.component.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,9 @@ section {
99
.button-row {
1010
margin: 8px 8px 8px 0;
1111
}
12+
button {
13+
opacity: 0.8;
14+
}
15+
.activeItem {
16+
opacity: 1;
17+
}

‎AngularUI/src/app/app.component.html‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="container">
22
<h3 class="d-flex justify-content-center">Angular App with .NET WEB API</h3>
33
<h5 class="d-flex justify-content-center">Employee Management Portal</h5>
4-
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
4+
<nav class="navbar navbar-expand-sm navbar-light">
55
<a class="navbar-brand" href="#"></a>
66
<button
77
class="navbar-toggler"
@@ -14,12 +14,30 @@ <h5 class="d-flex justify-content-center">Employee Management Portal</h5>
1414
>
1515
<span class="navbar-toggler-icon"></span>
1616
</button>
17-
<section>
17+
<mat-toolbarcolor="primary">
1818
<div class="button-row">
19-
<button mat-button routerLink="department" Button>Departments</button>
20-
<button mat-button routerLink="employee" Button>Employees</button>
19+
<button
20+
mat-raised-button
21+
[routerLink]="['department']"
22+
[routerLinkActive]="['activeItem']"
23+
Button
24+
color="accent"
25+
class="mx-2"
26+
>
27+
Departments
28+
</button>
29+
<button
30+
mat-raised-button
31+
[routerLink]="['employee']"
32+
[routerLinkActive]="['activeItem']"
33+
Button
34+
color="accent"
35+
class="mx-2"
36+
>
37+
Employees
38+
</button>
2139
</div>
22-
</section>
40+
</mat-toolbar>
2341
</nav>
2442

2543
<router-outlet></router-outlet>

‎AngularUI/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {MatDialogModule} from '@angular/material/dialog';
3232
import { MatSelectModule } from '@angular/material/select';
3333
import {MatDatepickerModule} from '@angular/material/datepicker';
3434
import {MatNativeDateModule} from '@angular/material/core';
35+
import {MatToolbarModule} from '@angular/material/toolbar';
3536

3637
@NgModule({
3738
declarations: [
@@ -67,7 +68,8 @@ import {MatNativeDateModule} from '@angular/material/core';
6768
MatDialogModule,
6869
MatSelectModule,
6970
MatDatepickerModule,
70-
MatNativeDateModule
71+
MatNativeDateModule,
72+
MatToolbarModule
7173
],
7274
providers: [SharedapiService],
7375
bootstrap: [AppComponent]
Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<mat-card>
1+
<mat-card>
22
<mat-card-header>
3-
<p class="lead pb-3" *ngIf="!updateClicked;else updateDept">Add New Department</p>
3+
<p class="lead pb-3" *ngIf="!updateClicked; else updateDept">
4+
Add New Department
5+
</p>
46
<ng-template #updateDept>
57
<p class="lead pb-3">Update Department</p>
68
</ng-template>
@@ -10,16 +12,48 @@
1012
<div class="row">
1113
<mat-form-field appearance="outline">
1214
<mat-label>Department Name</mat-label>
13-
<input type="text" matInput placeholder="Department Name" formControlName="DepartmentName">
15+
<input
16+
type="text"
17+
matInput
18+
placeholder="Department Name"
19+
formControlName="DepartmentName"
20+
/>
1421
</mat-form-field>
1522
</div>
1623
<div class="row">
1724
<div class="col-6">
18-
<button type="submit" [disabled]="!addDepartmentForm.valid" mat-raised-button color="primary" *ngIf="!updateClicked" >Add</button>&nbsp;
19-
<button type="button" [disabled]="!addDepartmentForm.valid" mat-raised-button color="accent" *ngIf="updateClicked" (click)="updateDepartment(addDepartmentForm.value)">Update</button>&nbsp;
20-
<button type="button" mat-raised-button color="warn" (click)="CloseDialog()">Close</button>
25+
<button
26+
type="submit"
27+
class="mx-1"
28+
[disabled]="!addDepartmentForm.valid"
29+
mat-raised-button
30+
color="primary"
31+
*ngIf="!updateClicked"
32+
>
33+
Add</button
34+
>&nbsp;
35+
<button
36+
type="button"
37+
class="mx-1"
38+
[disabled]="!addDepartmentForm.valid"
39+
mat-raised-button
40+
color="accent"
41+
*ngIf="updateClicked"
42+
(click)="updateDepartment(addDepartmentForm.value)"
43+
>
44+
Update</button
45+
>&nbsp;
46+
<button
47+
type="button"
48+
class="mx-1"
49+
mat-raised-button
50+
color="warn"
51+
(click)="CloseDialog()"
52+
>
53+
Close
54+
</button>
2155
</div>
2256
</div>
2357
</form>
24-
</mat-card-content>
58+
</mat-card-content>
2559
</mat-card>

‎AngularUI/src/app/components/department/show-dep/show-dep.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- Button trigger modal -->
22
<div fxLayout="row" fxLayoutAlign="end center">
3-
<button color="primary" mat-flat-button (click)="addDepartment()">
3+
<button color="accent" mat-flat-button (click)="addDepartment()">
44
Add Department
55
</button>
66
</div>
@@ -39,7 +39,7 @@
3939
<button mat-icon-button (click)="editClick(element)">
4040
<mat-icon>edit</mat-icon>
4141
</button>
42-
<button mat-icon-button (click)="deleteClick(element)">
42+
<button mat-icon-button color="warn" (click)="deleteClick(element)">
4343
<mat-icon>delete</mat-icon>
4444
</button>
4545
</td>

‎AngularUI/src/app/components/employee/add-edit-emp/add-edit-emp.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
<button
6464
mat-raised-button
6565
type="submit"
66+
class="mx-1"
6667
*ngIf="!updateClicked"
6768
color="primary"
6869
>
@@ -73,13 +74,15 @@
7374
type="button"
7475
mat-raised-button
7576
(click)="updateEmployee(addEmployeeForm.value)"
77+
class="mx-1"
7678
*ngIf="updateClicked"
7779
color="accent"
7880
>
7981
Update
8082
</button>
8183
<button
8284
type="button"
85+
class="mx-1"
8386
mat-raised-button
8487
color="warn"
8588
(click)="CloseDialog()"

‎AngularUI/src/app/components/employee/show-emp/show-emp.component.html‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- Button trigger modal -->
22
<div fxLayout="row" fxLayoutAlign="end center">
3-
<button mat-flat-button color="primary" (click)="addEmployee()">
3+
<button mat-flat-button color="accent" (click)="addEmployee()">
44
Add Employee
55
</button>
66
</div>
@@ -38,7 +38,7 @@
3838
<ng-container matColumnDef="DateOfJoining">
3939
<th mat-header-cell *matHeaderCellDef mat-sort-header>DateOfJoining</th>
4040
<td mat-cell *matCellDef="let row">
41-
{{ row.DateOfJoining | date}}
41+
{{ row.DateOfJoining | date}}
4242
</td>
4343
</ng-container>
4444
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -48,17 +48,10 @@
4848
<ng-container matColumnDef="action">
4949
<th mat-header-cell *matHeaderCellDef>Action</th>
5050
<td mat-cell *matCellDef="let element">
51-
<button
52-
mat-icon-button
53-
(click)="editEmployee(element)"
54-
data-bs-toggle="modal"
55-
data-bs-target="#employeeModal"
56-
data-backdrop="static"
57-
data-keyboard="false"
58-
>
51+
<button mat-icon-button (click)="editEmployee(element)">
5952
<mat-icon>edit</mat-icon>
6053
</button>
61-
<button mat-icon-button (click)="deleteEmployee(element)">
54+
<button mat-icon-button color="warn" (click)="deleteEmployee(element)">
6255
<mat-icon>delete</mat-icon>
6356
</button>
6457
</td>

‎AngularUI/src/custom-theme.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
21
// Custom Theming for Angular Material
32
// For more information: https://material.angular.io/guide/theming
4-
@use '@angular/material' as mat;
3+
@use "@angular/material" as mat;
54
// Plus imports for other components in your app.
65

76
// Include the common styles for Angular Material. We include this here so that you only
@@ -12,24 +11,25 @@
1211
// Define the palettes for your theme using the Material Design palettes available in palette.scss
1312
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
1413
// hue. Available color palettes: https://material.io/design/color/
15-
$app-primary: mat.define-palette(mat.$indigo-palette);
16-
$app-accent: mat.define-palette(mat.$teal-palette, 300,400,500);
14+
$app-primary: mat.define-palette(mat.$teal-palette, 800);
15+
$app-accent: mat.define-palette(mat.$orange-palette, A400);
1716

1817
// The warn palette is optional (defaults to red).
19-
$app-warn: mat.define-palette(mat.$red-palette);
18+
$app-warn: mat.define-palette(mat.$red-palette, A700);
2019

2120
// Create the theme object. A theme consists of configurations for individual
2221
// theming systems such as "color" or "typography".
23-
$app-theme: mat.define-light-theme((
24-
color: (
25-
primary: $app-primary,
26-
accent: $app-accent,
27-
warn: $app-warn,
22+
$app-theme: mat.define-light-theme(
23+
(
24+
color: (
25+
primary: $app-primary,
26+
accent: $app-accent,
27+
warn: $app-warn,
28+
),
2829
)
29-
));
30+
);
3031

3132
// Include theme styles for core and each component used in your app.
3233
// Alternatively, you can import and @include the theme mixins for each component
3334
// that you are using.
3435
@include mat.all-component-themes($app-theme);
35-

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /