Skip to content

Commit 721aadb

Browse files
marcode24marcode24
authored
Merge pull request #5 from marcode24/dev
✨ add download files
2 parents f8a7693 + 21aaecf commit 721aadb

File tree

55 files changed

+1175
-131
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1175
-131
lines changed

‎src/app/core/components/components.module.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { RouterModule } from '@angular/router';
44

5+
import { PipesModule } from '@pipes/pipes.module';
6+
57
import { HeaderComponent } from './header/header.component';
68
import { SidebarComponent } from './sidebar/sidebar.component';
79

@@ -12,7 +14,8 @@ import { SidebarComponent } from './sidebar/sidebar.component';
1214
],
1315
imports: [
1416
CommonModule,
15-
RouterModule
17+
RouterModule,
18+
PipesModule
1619
],
1720
exports: [
1821
SidebarComponent,

‎src/app/core/components/header/header.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<header>
22
<div class="options">
3+
<div class="burger" (click)="changeVisibilitySidebar()">
4+
<i class="bx bx-menu"></i>
5+
</div>
36
<div class="search">
47
<div class="input-group">
58
<input type="text" class="icon" #txtSearch
69
placeholder="Search...">
710
<i class="bx bx-search"></i>
811
</div>
9-
<button class="btn btn-primary filter">
10-
<i class="bx bx-equalizer"></i>
11-
</button>
1212
</div>
1313
<div class="user">
1414
here's user

‎src/app/core/components/header/header.component.scss

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
@import 'elements/_buttons.scss';
2+
@import 'settings/_media.scss';
3+
@import 'settings/_typography.scss';
24

35
header {
46
position: fixed;
57
margin-left: 250px;
68
height: 75px;
7-
padding: 1rem 0.8rem;
89
width: -webkit-fill-available;
910
background: var(--bg);
1011
border-bottom: 2px solid #e0e0e0;
11-
z-index: 100;
12+
z-index: 90;
13+
14+
@include width-medium {
15+
margin-left: 0;
16+
height: 70px;
17+
}
1218

1319
& .options {
1420
display: flex;
1521
align-items: center;
1622
justify-content: space-between;
1723
gap: 1rem;
24+
padding: 0 1rem;
25+
height: 100%;
1826

1927
& .search {
2028
flex: 1;
@@ -64,14 +72,31 @@ header {
6472
}
6573
}
6674

67-
.btn {
68-
&.filter {
69-
& i {
70-
@include fs-4;
71-
}
75+
.burger {
76+
display: none;
77+
color: var(--fc-primary);
78+
transition: 0.5s;
79+
border-radius: 50%;
80+
background: transparent;
81+
padding: 0.5rem;
82+
width: 45px;
83+
height: 45px;
84+
85+
&:hover {
86+
background: var(--bg-hover-2);
87+
cursor: pointer;
7288
}
73-
}
7489

90+
& i {
91+
@include fs-1;
92+
}
93+
94+
@include width-medium {
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
}
99+
}
75100

76101
.user {
77102
flex: 1;

‎src/app/core/components/header/header.component.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,9 @@ import { Component } from '@angular/core';
55
templateUrl: './header.component.html',
66
styleUrls: ['./header.component.scss']
77
})
8-
export class HeaderComponent {}
8+
export class HeaderComponent {
9+
changeVisibilitySidebar(): void {
10+
const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
11+
sidebarElement.classList.toggle('closed');
12+
}
13+
}

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

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
<nav class="sidebar">
1+
<nav class="sidebar closed">
22
<div class="logo">
3-
<i class="bx bx-folder"></i>
4-
<!-- <img src="" alt="cloud_box_image"> -->
53
<span class="name">Cloud Box</span>
4+
<div class="close">
5+
<i class="bx bx-x" (click)="changeVisibilitySidebar()"></i>
6+
</div>
67
</div>
78
<ul class="items">
89
<li class="item">
@@ -11,17 +12,21 @@
1112
<span class="name">Home</span>
1213
</a>
1314
</li>
14-
<li class="item">
15-
<a href="#">
16-
<i class='bx bx-cog'></i>
17-
<span class="name">Settings</span>
18-
</a>
19-
</li>
20-
<li class="item">
21-
<a href="#">
22-
<i class='bx bx-trash'></i>
23-
<span class="name">Deleted</span>
24-
</a>
15+
<li class="item space">
16+
<div class="used-space">
17+
<span class="name">Espacio utilizado</span>
18+
<div class="progress-bar">
19+
<div class="progress"
20+
#progress
21+
[ngStyle]="{'width': getProgress() }">
22+
</div>
23+
</div>
24+
<div class="percentage">
25+
<span class="used">{{ userActive.usedSpace | fileSize }}</span>
26+
<span class="slash">/</span>
27+
<span class="remaining">{{ userActive.totalSpace | fileSize }}</span>
28+
</div>
29+
</div>
2530
</li>
2631
</ul>
2732
</nav>

‎src/app/core/components/sidebar/sidebar.component.scss

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
11
@import 'settings/_typography.scss';
2+
@import 'settings/_media.scss';
23

34
nav {
45
position: fixed;
56
height: 100%;
67
width: 250px;
78
padding: 1rem 0.8rem;
89
z-index: 100;
9-
transition: 0.5s ease;
1010
display: flex;
1111
flex-direction: column;
1212
align-items: flex-start;
1313
background: var(--bg-sidebar);
1414
gap: 2rem;
15+
transition: margin-left 0.3s ease-in-out;
16+
17+
&.closed {
18+
margin-left: -250px;
19+
}
20+
21+
@media (min-width: 769px) {
22+
margin-left: 0 !important;
23+
}
1524
}
1625

1726
.logo {
1827
display: flex;
1928
align-items: center;
29+
justify-content: space-between;
2030
gap: 1rem;
31+
width: 100%;
2132

2233
& .name {
2334
@include fs-1;
@@ -65,3 +76,71 @@ nav {
6576
}
6677
}
6778
}
79+
80+
.space {
81+
margin-top: 1.5rem;
82+
83+
& .used-space {
84+
padding: 0 0.5rem;
85+
display: flex;
86+
flex-direction: column;
87+
88+
& .name {
89+
@include fs-5;
90+
@include fw-500;
91+
color: var(--fc-primary);
92+
text-align: center;
93+
margin-bottom: 0.8rem;
94+
}
95+
96+
& .progress-bar {
97+
width: 100%;
98+
height: 10px;
99+
border-radius: 1rem;
100+
background: var(--bg-hover-2);
101+
overflow: hidden;
102+
103+
& .progress {
104+
height: 100%;
105+
background: var(--fc-purple);
106+
width: 0%;
107+
border-radius: 1rem;
108+
}
109+
}
110+
111+
& .percentage {
112+
@include fs-6;
113+
@include fw-500;
114+
color: var(--fc-primary);
115+
margin-top: 0.5rem;
116+
display: flex;
117+
align-items: center;
118+
justify-content: center;
119+
gap: 0.2rem;
120+
}
121+
}
122+
}
123+
124+
.close {
125+
display: none;
126+
color: var(--fc-primary);
127+
transition: 0.5s;
128+
border-radius: 50%;
129+
background: var(--bg-hover-2);
130+
width: 45px;
131+
height: 45px;
132+
133+
&:hover {
134+
cursor: pointer;
135+
}
136+
137+
& i {
138+
@include fs-1;
139+
}
140+
141+
@include width-medium {
142+
display: flex;
143+
align-items: center;
144+
justify-content: center;
145+
}
146+
}

‎src/app/core/components/sidebar/sidebar.component.ts

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,40 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnDestroy, OnInit } from '@angular/core';
2+
3+
import { Subscription } from 'rxjs';
4+
5+
import { AuthService } from '@services/auth.service';
6+
import { FileService } from '@services/file.service';
27

38
@Component({
49
selector: 'app-sidebar',
510
templateUrl: './sidebar.component.html',
611
styleUrls: ['./sidebar.component.scss']
712
})
8-
export class SidebarComponent {}
13+
export class SidebarComponent implements OnDestroy, OnInit {
14+
userActive = this.authService.userActive;
15+
private totalSizeSubscription: Subscription;
16+
constructor(
17+
private authService: AuthService,
18+
private fileService: FileService
19+
) { }
20+
ngOnInit(): void {
21+
this.totalSizeSubscription = this.fileService.updateTotalSize
22+
.subscribe((totalSize) => {
23+
this.userActive.usedSpace += totalSize;
24+
});
25+
}
26+
27+
ngOnDestroy(): void {
28+
this.totalSizeSubscription.unsubscribe();
29+
}
30+
31+
getProgress(): string {
32+
const percentage = this.userActive.usedSpace / this.userActive.totalSpace * 100;
33+
return `${percentage}%`;
34+
}
35+
36+
changeVisibilitySidebar(): void {
37+
const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
38+
sidebarElement.classList.toggle('closed');
39+
}
40+
}

‎src/app/core/constants/colors.constant.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const COLORS = [
2+
'#FF8C00',
3+
'#FF8550',
4+
'#FF0000',
5+
'#FF5159',
6+
'#FF889D',
7+
'#FFBCD9',
8+
'#F2BEFF',
9+
'#D1A0FF',
10+
'#8D67FF',
11+
'#00CEDE',
12+
'#00BAE5',
13+
'#008C62',
14+
'#53C395',
15+
'#95FFCA'
16+
];

‎src/app/core/interfaces/breadcrumb.interface.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface IBreadcrumb {
2+
name: string;
3+
_id: string;
4+
color: string;
5+
}

‎src/app/core/interfaces/response.interface.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { File } from "@models/file.model";
22
import { Folder } from "@models/folder.model";
33
import { User } from "@models/user.model";
44

5+
import { IBreadcrumb } from "./breadcrumb.interface";
6+
57
export interface IUserCreated {
68
ok: boolean;
79
user: User;
@@ -20,6 +22,7 @@ export interface IFolderCreated {
2022
export interface IFolderResponse {
2123
ok: boolean,
2224
folder: Folder,
25+
breadcrumb?: IBreadcrumb[],
2326
}
2427

2528
export interface IFileResponse {

0 commit comments

Comments
 (0)