Skip to content

Commit ad395f8

Browse files
gnllucenagnllucena
committed
Painel de adição e edição criado.
1 parent 2c895d5 commit ad395f8

File tree

7 files changed

+213
-46
lines changed

7 files changed

+213
-46
lines changed

‎src/app/modules/animations/route.animation.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,16 @@ export const RouterAnimation = trigger('route-transition', [
1111
query(':leave',
1212
[
1313
style({ opacity: 1 }),
14-
animate('0.2s', style({ opacity: 0 }))
14+
animate('0.3s', style({ opacity: 0 }))
1515
],
1616
{ optional: true }
1717
),
1818
query(':enter',
1919
[
2020
style({ opacity: 0 }),
2121
animate(
22-
'0.2s 0s',
22+
'0.5s 0s',
2323
keyframes([
24-
style({
25-
opacity: 0,
26-
transform: 'translate3d(0, -5%, 0)',
27-
offset: 0
28-
}),
2924
style({
3025
opacity: 1,
3126
transform: 'translate3d(0, 0, 0)',

‎src/app/routes/users/users-add/users-add.component.html

Lines changed: 133 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,136 @@
1-
<div class="row mb-2 mb-2">
2-
<div class="col-lg-12">
3-
<div class="card">
4-
<div class="card-body">
5-
<h4 class="header-title mb-3">Search for mine:</h4>
6-
7-
<users-form></users-form>
8-
</div>
1+
<div class="fullscreen">
2+
<div class="panel">
3+
<div class="row mb-2 mb-2">
4+
<div class="col-lg-12">
5+
<div class="card">
6+
<div class="card-body">
7+
<h4 class="header-title mb-3">Search for mine:</h4>
8+
9+
<users-form></users-form>
10+
</div>
11+
</div>
12+
</div>
913
</div>
14+
<div class="row mb-2 mb-2">
15+
<div class="col-lg-12">
16+
<div class="card">
17+
<div class="card-body">
18+
<h4 class="header-title mb-3">Search for mine:</h4>
19+
20+
<users-form></users-form>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
<div class="row mb-2 mb-2">
26+
<div class="col-lg-12">
27+
<div class="card">
28+
<div class="card-body">
29+
<h4 class="header-title mb-3">Search for mine:</h4>
30+
31+
<users-form></users-form>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
<div class="row mb-2 mb-2">
37+
<div class="col-lg-12">
38+
<div class="card">
39+
<div class="card-body">
40+
<h4 class="header-title mb-3">Search for mine:</h4>
41+
42+
<users-form></users-form>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="row mb-2 mb-2">
48+
<div class="col-lg-12">
49+
<div class="card">
50+
<div class="card-body">
51+
<h4 class="header-title mb-3">Search for mine:</h4>
52+
53+
<users-form></users-form>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
<div class="row mb-2 mb-2">
59+
<div class="col-lg-12">
60+
<div class="card">
61+
<div class="card-body">
62+
<h4 class="header-title mb-3">Search for mine:</h4>
63+
64+
<users-form></users-form>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
<div class="row mb-2 mb-2">
70+
<div class="col-lg-12">
71+
<div class="card">
72+
<div class="card-body">
73+
<h4 class="header-title mb-3">Search for mine:</h4>
74+
75+
<users-form></users-form>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<div class="row mb-2 mb-2">
81+
<div class="col-lg-12">
82+
<div class="card">
83+
<div class="card-body">
84+
<h4 class="header-title mb-3">Search for mine:</h4>
85+
86+
<users-form></users-form>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="row mb-2 mb-2">
92+
<div class="col-lg-12">
93+
<div class="card">
94+
<div class="card-body">
95+
<h4 class="header-title mb-3">Search for mine:</h4>
96+
97+
<users-form></users-form>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<div class="row mb-2 mb-2">
103+
<div class="col-lg-12">
104+
<div class="card">
105+
<div class="card-body">
106+
<h4 class="header-title mb-3">Search for mine:</h4>
107+
108+
<users-form></users-form>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
<div class="row mb-2 mb-2">
114+
<div class="col-lg-12">
115+
<div class="card">
116+
<div class="card-body">
117+
<h4 class="header-title mb-3">Search for mine:</h4>
118+
119+
<users-form></users-form>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
<div class="row mb-2 mb-2">
125+
<div class="col-lg-12">
126+
<div class="card">
127+
<div class="card-body">
128+
<h4 class="header-title mb-3">Search for mine:</h4>
129+
130+
<users-form></users-form>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
10135
</div>
11136
</div>

‎src/app/routes/users/users-add/users-add.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
66
encapsulation: ViewEncapsulation.None
77
})
88
export class UsersAddComponent {
9-
title = 'Add';
109

1110
constructor() { }
1211
}

‎src/app/routes/users/users-list/users-list.component.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,21 @@
3838
</div>
3939
</div>
4040
</div>
41+
42+
<nav aria-label="Page navigation example">
43+
<ul class="pagination justify-content-end">
44+
<li class="page-item disabled">
45+
<a class="page-link" href="#" tabindex="-1">Previous</a>
46+
</li>
47+
<li class="page-item"><a class="page-link" href="#">1</a></li>
48+
<li class="page-item"><a class="page-link" href="#">2</a></li>
49+
<li class="page-item"><a class="page-link" href="#">3</a></li>
50+
<li class="page-item">
51+
<a class="page-link" href="#">Next</a>
52+
</li>
53+
</ul>
54+
</nav>
55+
56+
4157
</div>
4258
</ng-container>

‎src/app/routes/users/users-page/users-page.component.html

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
1-
<div class="container">
1+
<div class="container mb-5">
22
<h2 class="mb-4">Users</h2>
33

4-
<slide-panel [activePane]="isLeftVisible ? 'left' : 'right'">
5-
<div left-panel>
6-
<users-filter #userFilter
7-
(filterEvent)="filter($event)">
8-
</users-filter>
9-
10-
<users-list #userList>
11-
</users-list>
12-
<!-- #listCanal
13-
(editEvent)="openEditPanel($event)"
14-
(exportList)="applyExportList($event)"> -->
15-
</div>
16-
<div right-panel>
17-
<users-add></users-add>
18-
<!-- *ngIf="adding"
19-
#canalAdd
20-
(returnSave)="added()"
21-
(closeModal)="closeModal()"> -->
22-
23-
<users-edit></users-edit>
24-
</div>
25-
</slide-panel>
26-
27-
<button (click)="isLeftVisible = !isLeftVisible">Toggle panes</button>
4+
<users-filter #userFilter
5+
(filterEvent)="filter($event)">
6+
</users-filter>
7+
8+
<users-list #userList>
9+
</users-list>
10+
<!-- #listCanal
11+
(editEvent)="openEditPanel($event)"
12+
(exportList)="applyExportList($event)"> -->
13+
14+
<users-add #userAdd
15+
[hidden]="add">
16+
</users-add>
17+
<!-- *ngIf="adding"
18+
#canalAdd
19+
(returnSave)="added()"
20+
(closeModal)="closeModal()"> -->
21+
22+
<!-- <users-edit></users-edit> -->
2823
</div>

‎src/app/routes/users/users-page/users-page.component.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AuthenticationService } from './../../../services/authentication.servic
33
import { UsersListComponent } from '../users-list/users-list.component';
44
import { UsersFilterComponent } from '../users-filter/users-filter.component';
55
import { FormGroup } from '@angular/forms';
6+
import { UsersAddComponent } from '../users-add/users-add.component';
67

78
type PaneType = 'left' | 'right';
89

@@ -18,13 +19,15 @@ export class UsersPageComponent {
1819
@Input() activePane: PaneType = 'left';
1920
@ViewChild('userFilter') userFilter: UsersFilterComponent;
2021
@ViewChild('userList') userList: UsersListComponent;
21-
22-
public isLeftVisible = true;
22+
@ViewChild('userAdd') userAdd: UsersAddComponent;
23+
24+
public add = false;
25+
public edit = false;
2326

2427
constructor(
2528
private authenticationService: AuthenticationService) { }
2629

27-
filter(filters: FormGroup) {
28-
this.userList.filter(filters);
29-
}
30+
filter(filters: FormGroup) {
31+
this.userList.filter(filters);
32+
}
3033
}

‎src/styles.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,39 @@
11
@import "~bootstrap/dist/css/bootstrap.min.css";
22

3+
.fullscreen {
4+
position:fixed;
5+
padding:0;
6+
margin:0;
7+
top:0;
8+
left:0;
9+
width: 100%;
10+
height: 100%;
11+
background: rgba(0,0,0,.3);
12+
}
13+
14+
.panel {
15+
z-index: 10;
16+
position: fixed;
17+
top: 0;
18+
right: 0;
19+
bottom: 0;
20+
padding: 15px;
21+
background: #fff;
22+
border: 1px solid rgba(230,230,230,.8);
23+
box-shadow: 0 0 30px 0 rgba(0,0,0,.19);
24+
overflow-y: scroll;
25+
height: 100%;
26+
width: 66.6%;
27+
}
28+
29+
.blur {
30+
-webkit-filter: blur(3px);
31+
-moz-filter: blur(3px);
32+
-o-filter: blur(3px);
33+
-ms-filter: blur(3px);
34+
filter: blur(3px);
35+
}
36+
337
.form-control:focus {
438
border-color: #cccccc;
539
-webkit-box-shadow: none;

0 commit comments

Comments
 (0)