✨ add change folder color

Author: marcode24

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

@@ -0,0 +1,16 @@
+export const COLORS = [
+  '#FF8C00',
+  '#FF8550',
+  '#FF0000',
+  '#FF5159',
+  '#FF889D',
+  '#FFBCD9',
+  '#F2BEFF',
+  '#D1A0FF',
+  '#8D67FF',
+  '#00CEDE',
+  '#00BAE5',
+  '#008C62',
+  '#53C395',
+  '#95FFCA'
+];

src/app/core/models/file.model.ts

@@ -14,4 +14,5 @@ export class File {
   folder: Folder;
   type: string;
   _id?: string;
+  color?: string;
 }

src/app/core/models/folder.model.ts

@@ -16,4 +16,5 @@ export class Folder {
   files: File[];
   color: string;
   _id?: string;
+  __v?: number;
 }

src/app/core/services/modal.service.ts

@@ -7,6 +7,8 @@ export class ModalService {
   openNewFolderModal: EventEmitter<{ open: boolean, folderID: string }> = new EventEmitter();
   openNewFileModal: EventEmitter<{ open: boolean, folderID: string }> = new EventEmitter();
   openUpdateNameModal: EventEmitter<{ folderID: string, name: string }> = new EventEmitter();
+  openUpdateColorModal: EventEmitter<{ folderID: string, currentColor: string }>
+    = new EventEmitter();
 
   openNewFolder(folderID: string): void {
     this.openNewFolderModal.emit({ open: true, folderID });
@@ -19,4 +21,8 @@ export class ModalService {
   openUpdateName(folderID: string, name: string): void {
     this.openUpdateNameModal.emit({ folderID, name });
   }
+
+  openUpdateColor(folderID: string, currentColor: string): void {
+    this.openUpdateColorModal.emit({ folderID, currentColor });
+  }
 }

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

@@ -27,3 +27,4 @@
 <app-new-folder></app-new-folder>
 <app-upload-files></app-upload-files>
 <app-update-name></app-update-name>
+<app-colors></app-colors>

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

@@ -6,7 +6,7 @@
     <i class="bx bx-edit-alt"></i>
     <span class="title">Cambiar nombre</span>
   </li>
-  <li role="menuitem" class='dropdown-item' *ngIf="!isFile()">
+  <li role="menuitem" class='dropdown-item' *ngIf="!isFile()" (click)="openUpdateColorModal()">
     <i class="bx bx-palette"></i>
     <span class="title">Cambiar color</span>
   </li>

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

@@ -64,4 +64,11 @@ export class DotsDropdownComponent {
     this.hideDropdown();
     this.modalService.openUpdateName(this.file._id as string, this.file.name);
   }
+
+  openUpdateColorModal(): void {
+    if (this.file.type === 'folder') {
+      this.hideDropdown();
+      this.modalService.openUpdateColor(this.file._id as string, this.file.color as string);
+    }
+  }
 }

src/app/shared/modals/colors/colors.component.html

@@ -0,0 +1,23 @@
+<div class="modal dialog" #modalColors>
+  <div class="modal-content">
+    <div class="header">
+      <span class="title">Cambiar color</span>
+      <div class="i-wrapper">
+        <i class="bx bx-x" (click)="closeModal()"></i>
+      </div>
+    </div>
+    <div class="body">
+      <div class="colors">
+        <div class="color"
+          *ngFor="let color of colors"
+          [ngStyle]="{'background-color': color}"
+          (click)="selectColor(color)"
+          [ngClass]="{'selected': color === selectedColor}">
+        </div>
+      </div>
+      <div class="actions">
+        <button class="btn btn-primary" [disabled]="!selectedColor" (click)="updateColor()">Guardar</button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/modals/colors/colors.component.scss

@@ -0,0 +1,26 @@
+.colors {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  grid-gap: 0.7rem;
+  width: 100%;
+  padding: 0.6rem 0.4rem;
+
+  .color {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    border: 4px solid transparent;
+
+    &:hover {
+      transform: scale(1.1);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    &.selected {
+      box-shadow: none;
+      border: 4px solid var(--fc-purple);
+    }
+  }
+}

src/app/shared/modals/colors/colors.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColorsComponent } from './colors.component';
+
+describe('ColorsComponent', () => {
+  let component: ColorsComponent;
+  let fixture: ComponentFixture<ColorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ColorsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});