Skip to content

Commit 4886ac4

Browse files
daros10daros10
committed
added some styles
1 parent ed7dcd2 commit 4886ac4

File tree

8 files changed

+58
-15
lines changed

8 files changed

+58
-15
lines changed

‎src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { CreateProjectComponent } from './components/shared/create-project/creat
1818
import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
1919
import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
2020
import { ModalComponent } from './components/shared/modal/modal.component';
21+
import { HighlightedDirective } from './directives/highlighted.directive';
2122
@NgModule({
2223
declarations: [
2324
AppComponent,
@@ -32,7 +33,8 @@ import { ModalComponent } from './components/shared/modal/modal.component';
3233
TimeClockComponent,
3334
DetailsFieldsComponent,
3435
ProjectListHoverComponent,
35-
ModalComponent
36+
ModalComponent,
37+
HighlightedDirective
3638
],
3739
imports: [
3840
CommonModule,

‎src/app/components/options-sidebar/time-clock/time-clock.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="text-center mt-3">
1+
<div class="text-center mt-5">
22

33
<div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
44
Field technology is requiered. Enter this field for clock out.

‎src/app/components/shared/navbar/navbar.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<nav class="navbar navbar-dark bg-dark">
2-
<a class="navbar-brand" href="#">
1+
<nav class="navbar navbar-dark bg-dark ">
2+
<a class="navbar-brand" href="/">
33
<img src="assets/img/ioet.png" width="20" height="35" class="d-inline-block align-top" alt="">
44
</a>
55

‎src/app/components/shared/sidebar/sidebar.component.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ body {
22
overflow-x: hidden;
33
}
44

5+
.options-sidebar-hover :hover {
6+
color: #30BCED !important
7+
}
8+
9+
.color-item-avtive {
10+
color: #16BAC5 !important
11+
}
12+
513
#sidebar-wrapper {
614
min-height: 100vh;
715
margin-left: -15rem;

‎src/app/components/shared/sidebar/sidebar.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<div class="d-flex" id="wrapper">
22
<!-- Sidebar -->
3-
<div class="bg-light border-right" id="sidebar-wrapper">
4-
<div class="list-group list-group-flush">
5-
<a [routerLink]="['/getting-started']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-flag"></i> Getting Started</a>
6-
<a [routerLink]="['/time-clock']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i> Time Clock</a>
7-
<a [routerLink]="['/time-entries']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i> Time Entries</a>
8-
<a [routerLink]="['/time-off']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-paper-plane"></i> Time Off</a>
9-
<a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i> Reports</a>
10-
<a [routerLink]="['/project-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-folder-open"></i> Projects</a>
3+
<div class="bg-dark border-right rounded-right " id="sidebar-wrapper">
4+
<div class="list-group options-sidebar-hover">
5+
<a [routerLink]="['/getting-started']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white" style="border-top-color: #565264; border-color: #565264;"><i class="fas fa-flag "></i> Getting Started</a>
6+
<a [routerLink]="['/time-clock']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-clock "></i> Time Clock</a>
7+
<a [routerLink]="['/time-entries']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-list-alt "></i> Time Entries</a>
8+
<a [routerLink]="['/time-off']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-paper-plane "></i> Time Off</a>
9+
<a [routerLink]="['/reports']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="fas fa-chart-pie "></i> Reports</a>
10+
<a [routerLink]="['/project-management']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-folder-open "></i> Projects</a>
1111
</div>
1212
</div>
1313
<!-- /#sidebar-wrapper -->
@@ -19,4 +19,4 @@
1919
<!-- /#page-content-wrapper -->
2020

2121
</div>
22-
<!-- /#wrapper -->
22+
<!-- /#wrapper -->

‎src/app/directives/highlighted.directive.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { HighlightedDirective } from './highlighted.directive';
2+
3+
describe('HighlightedDirective', () => {
4+
it('should create an instance', () => {
5+
const directive = new HighlightedDirective();
6+
expect(directive).toBeTruthy();
7+
});
8+
});

‎src/app/directives/highlighted.directive.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
2+
3+
@Directive({
4+
selector: '[appHighlighted]'
5+
})
6+
export class HighlightedDirective {
7+
8+
constructor( private el: ElementRef ) {
9+
console.log('Directiva llamada!');
10+
}
11+
12+
@Input('appHighlighted') nuevoColor: string;
13+
14+
@HostListener('mouseenter') mouseEntro() {
15+
this.resaltar( this.nuevoColor || 'red' );
16+
}
17+
18+
@HostListener('mouseleave') mouseSalio() {
19+
this.resaltar( null );
20+
}
21+
22+
private resaltar( color: string ) {
23+
this.el.nativeElement.style.color = color;
24+
}
25+
26+
}

‎src/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<base href="/">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="icon" type="image/x-icon" href="favicon.ico">
10-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
1110

1211
</head>
1312

@@ -17,4 +16,4 @@
1716
<script src="https://kit.fontawesome.com/76d0c245a1.js" crossorigin="anonymous"></script>
1817
</body>
1918

20-
</html>
19+
</html>

0 commit comments

Comments
 (0)