Skip to content

Commit ba8727e

Browse files
marcode24marcode24
committed
💄 add dropdown UI style
1 parent 42694f4 commit ba8727e

File tree

11 files changed

+189
-24
lines changed

11 files changed

+189
-24
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ header {
88
width: -webkit-fill-available;
99
background: var(--bg);
1010
border-bottom: 2px solid #e0e0e0;
11+
z-index: 100;
1112

1213
& .options {
1314
display: flex;

‎src/app/features/home/home.component.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
<i class="bx bx-folder"></i>
99
</div>
1010
<span class="name">Folder {{ i + 1 }} name for </span>
11-
<button class="options">
12-
<i class="bx bx-dots-vertical-rounded"></i>
13-
</button>
11+
<app-dots-dropdown></app-dots-dropdown>
1412
</div>
1513
</div>
1614
</section>

‎src/app/features/home/home.component.scss

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
border-radius: 1rem;
3333
background: var(--bg-2);
3434
box-shadow: var(--box-shadow);
35+
position: relative;
3536

3637
& .name {
3738
@include fs-6;
@@ -47,24 +48,6 @@
4748
@include fs-4;
4849
color: var(--fc-primary);
4950
}
50-
51-
& .options {
52-
@include fs-4;
53-
display: flex;
54-
justify-content: center;
55-
align-items: center;
56-
border: none;
57-
border-radius: 50%;
58-
height: 28px;
59-
width: 28px;
60-
background: transparent;
61-
transition: 0.4s ease;
62-
cursor: pointer;
63-
64-
&:hover {
65-
background: var(--bg-hover-2);
66-
}
67-
}
6851
}
6952
}
7053
}

‎src/app/features/home/home.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ElementRef, ViewChild } from '@angular/core';
22

33
@Component({
44
selector: 'app-home',
55
templateUrl: './home.component.html',
66
styleUrls: ['./home.component.scss']
77
})
8-
export class HomeComponent {}
8+
export class HomeComponent {
9+
10+
}

‎src/app/features/home/home.module.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33

4+
import { DropdownsModule } from '@shared/dropdowns/dropdowns.module';
5+
46
import { HomeComponent } from './home.component';
57

68
@NgModule({
79
declarations: [
810
HomeComponent
911
],
1012
imports: [
11-
CommonModule
13+
CommonModule,
14+
DropdownsModule
1215
]
1316
})
1417
export class HomeModule { }

‎src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<button class="options" (click)="changeVisibility()">
2+
<i class="bx bx-dots-vertical-rounded"></i>
3+
</button>
4+
<ul class='dropdown-list' role="menu" #dropdown>
5+
<li role="menuitem" class='dropdown-item'>
6+
<i class="bx bx-edit-alt"></i>
7+
<span class="title">Cambiar nombre</span>
8+
</li>
9+
<li role="menuitem" class='dropdown-item'>
10+
<i class="bx bx-palette"></i>
11+
<span class="title">Cambiar color</span>
12+
</li>
13+
<li role="menuitem" class='dropdown-item'>
14+
<i class="bx bx-download"></i>
15+
<span class="title">Descargar</span>
16+
</li>
17+
<li role="menuitem" class='dropdown-item'>
18+
<i class="bx bx-trash"></i>
19+
<span class="title">Eliminar</span>
20+
</li>
21+
</ul>

‎src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.scss

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
@import 'settings/_colors.scss';
2+
@import 'settings/_typography.scss';
3+
@import 'elements/_buttons.scss';
4+
5+
.options {
6+
@include fs-4;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
border: none;
11+
border-radius: 50%;
12+
height: 28px;
13+
width: 28px;
14+
background: transparent;
15+
transition: 0.4s ease;
16+
cursor: pointer;
17+
18+
&:hover {
19+
background: var(--bg-hover-2);
20+
}
21+
}
22+
23+
ul {
24+
display: none;
25+
z-index: 2;
26+
list-style-type: none;
27+
position: absolute;
28+
opacity: 0;
29+
top: 52px;
30+
right: 15px;
31+
background-color: #f7f7f7;
32+
padding: 0;
33+
font-size: 16px;
34+
border-radius: 10px;
35+
box-shadow: none;
36+
visibility: hidden;
37+
height: fit-content;
38+
transition: visibility 0.2s, opacity 0.2s linear, bottom 0.2s linear,
39+
box-shadow 0.2s linear;
40+
41+
&.show {
42+
opacity: 1;
43+
bottom: 0;
44+
display: block;
45+
visibility: visible;
46+
box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.25);
47+
}
48+
49+
.dropdown-item {
50+
color: rgba(0, 0, 0, 0.6);
51+
font-weight: bold;
52+
cursor: pointer;
53+
display: flex;
54+
align-items: center;
55+
justify-content: flex-start;
56+
gap: 0.8rem;
57+
padding: 0.6rem 0.8rem;
58+
transition: background-color 0.2s linear, color 0.2s linear;
59+
60+
&:hover {
61+
background-color: #b8c1ce77;
62+
color: var(--font-color-4);
63+
}
64+
65+
&:first-of-type {
66+
border-radius: 10px;
67+
}
68+
69+
&:first-child {
70+
border-radius: 10px 10px 0 0;
71+
}
72+
73+
&:last-child {
74+
border-radius: 0 0 10px 10px;
75+
}
76+
77+
& .title {
78+
@include fs-6;
79+
@include fw-400;
80+
color: var(--fc-primary);
81+
}
82+
83+
& i {
84+
@include fs-4;
85+
@include fw-500;
86+
color: var(--fc-primary);
87+
}
88+
}
89+
}

‎src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { DotsDropdownComponent } from './dots-dropdown.component';
4+
5+
describe('DotsDropdownComponent', () => {
6+
let component: DotsDropdownComponent;
7+
let fixture: ComponentFixture<DotsDropdownComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ DotsDropdownComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(DotsDropdownComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component, ElementRef, ViewChild } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-dots-dropdown',
5+
templateUrl: './dots-dropdown.component.html',
6+
styleUrls: ['./dots-dropdown.component.scss']
7+
})
8+
export class DotsDropdownComponent {
9+
@ViewChild('dropdown') dropdown: ElementRef;
10+
11+
changeVisibility() {
12+
this.dropdown.nativeElement.classList.toggle('show');
13+
}
14+
}

‎src/app/shared/dropdowns/dropdowns.module.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
4+
import { DotsDropdownComponent } from './dots-dropdown/dots-dropdown.component';
5+
6+
@NgModule({
7+
declarations: [
8+
DotsDropdownComponent
9+
],
10+
imports: [
11+
CommonModule
12+
],
13+
exports: [
14+
DotsDropdownComponent
15+
],
16+
})
17+
export class DropdownsModule { }

0 commit comments

Comments
 (0)