fix projects filter & add swipe to close

Author: Awakich

projects/social_platform/src/app/office/projects/list/list.component.html

@@ -24,9 +24,14 @@
   @if (isAll) {
   <div class="filter page__filter" [class.page__filter--open]="isFilterOpen">
     <div class="filter__overlay" (click)="isFilterOpen = false"></div>
-    <div class="filter__body">
-      <div class="filter__bar"></div>
-      <app-projects-filter></app-projects-filter>
+    <div class="filter__body" #filterBody>
+      <div
+        class="filter__bar"
+        (touchstart)="onSwipeStart($event)"
+        (touchmove)="onSwipeMove($event)"
+        (touchend)="onSwipeEnd($event)"
+      ></div>
+      <app-projects-filter (closeFilter)="closeFilter()"></app-projects-filter>
     </div>
   </div>
   } @else if (!searchedProjects.length && isMy) {

projects/social_platform/src/app/office/projects/list/list.component.scss

@@ -70,6 +70,7 @@
     display: flex;
     width: 100%;
     height: 25px;
+    touch-action: none;
 
     @include responsive.apply-desktop {
       display: none;
@@ -83,6 +84,7 @@
       content: "";
       background-color: var(--gray);
       border-radius: var(--rounded-lg);
+      transition: transform 0.2s;
     }
   }
 
@@ -96,10 +98,12 @@
     overflow-y: auto;
     background-color: var(--white);
     border-radius: var(--rounded-lg);
+    transform: translateY(0%);
 
     @include responsive.apply-desktop {
       position: static;
       max-height: unset;
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
 }

projects/social_platform/src/app/office/projects/list/list.component.ts

@@ -7,6 +7,7 @@ import {
   ElementRef,
   OnDestroy,
   OnInit,
+  Renderer2,
   ViewChild,
 } from "@angular/core";
 import { ActivatedRoute, NavigationEnd, Params, Router, RouterLink } from "@angular/router";
@@ -50,9 +51,12 @@ export class ProjectsListComponent implements OnInit, AfterViewInit, OnDestroy {
     private readonly projectService: ProjectService,
     private readonly cdref: ChangeDetectorRef,
     private readonly router: Router,
-    private readonly subscriptionService: SubscriptionService
+    private readonly subscriptionService: SubscriptionService,
+    private readonly renderer: Renderer2
   ) {}
 
+  @ViewChild("filterBody") filterBody!: ElementRef<HTMLElement>;
+
   ngOnInit(): void {
     this.navService.setNavTitle("Проекты");
 
@@ -220,6 +224,49 @@ export class ProjectsListComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  private swipeStartY = 0;
+  private swipeThreshold = 50;
+  private isSwiping = false;
+
+  onSwipeStart(event: TouchEvent): void {
+    this.swipeStartY = event.touches[0].clientY;
+    this.isSwiping = true;
+  }
+
+  onSwipeMove(event: TouchEvent): void {
+    if (!this.isSwiping) return;
+
+    const currentY = event.touches[0].clientY;
+    const deltaY = currentY - this.swipeStartY;
+
+    // Добавляем визуальную индикацию
+    const progress = Math.min(deltaY / this.swipeThreshold, 1);
+    this.renderer.setStyle(
+      this.filterBody.nativeElement,
+      "transform",
+      `translateY(${progress * 100}px)`
+    );
+  }
+
+  onSwipeEnd(event: TouchEvent): void {
+    if (!this.isSwiping) return;
+
+    const endY = event.changedTouches[0].clientY;
+    const deltaY = endY - this.swipeStartY;
+
+    if (deltaY > this.swipeThreshold) {
+      this.closeFilter();
+    }
+
+    this.isSwiping = false;
+
+    this.renderer.setStyle(this.filterBody.nativeElement, "transform", "translateY(0)");
+  }
+
+  closeFilter(): void {
+    this.isFilterOpen = false;
+  }
+
   onScroll() {
     if (this.isSubs) {
       return of({});

projects/social_platform/src/app/office/projects/projects.component.html

@@ -29,19 +29,23 @@
           },
         ]"
     >
-      <div class="bar__right">
-        @if (isMy) {
+    </app-bar>
+    <div class="bar__right">
+      @if (isMy) {
+      <div>
         <button (click)="addProject()" class="text-body-14 bar__add-project">
           <span class="bar__add-project-text">Добавить проект</span>
           <i appIcon icon="plus" appSquare="18"></i>
         </button>
-        } @else if (isAll) {
+      </div>
+      } @else if (isAll) {
+      <div class="bar__bottom">
         <form [formGroup]="searchForm">
           <app-search formControlName="search"></app-search>
         </form>
-        }
       </div>
-    </app-bar>
+      }
+    </div>
     }
   </div>
 

projects/social_platform/src/app/office/projects/projects.component.scss

@@ -15,6 +15,13 @@
     margin-left: auto;
   }
 
+  .bar__bottom {
+    background-color: var(--white);
+    border-radius: 15px;
+    padding: 20px 0;
+    border: 1px solid var(--medium-grey-for-outline);
+  }
+
   .bar__add-project {
     display: flex;
     align-items: center;
@@ -27,10 +34,6 @@
   }
 
   .bar__add-project-text {
-    display: none;
-
-    @include responsive.apply-desktop {
-      display: inline;
-    }
+    display: inline;
   }
 }