wip filter button

kolzchut · Dec 13, 2023 · 9abb2d6 · 9abb2d6
1 parent b5d32a9
commit 9abb2d6
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 90 deletions.
diff --git a/projects/srm/src/app/analytics.service.ts b/projects/srm/src/app/analytics.service.ts
@@ -162,7 +162,7 @@ export class AnalyticsService {
         },
         ...eventParams
       });
-    }
+    } 
   }
 
   interactionEvent(what: string, where: string, content: string, params: SearchParams | null) {

diff --git a/projects/srm/src/app/search-filters-bar/search-filters-bar.component.html b/projects/srm/src/app/search-filters-bar/search-filters-bar.component.html
@@ -1,13 +1,8 @@
-<app-search-filters-button [totalFilters]='filtersState.totalFilters' [showDiscovery]='!!filtersState.showDiscovery' (activate)='filtersState.active = true'
-interactionEvent='open-filters' [interactionEventWhere]='location.path(false)' [searchParams]='filtersState.searchParams'
-
+<app-search-filters-button
+        [totalFilters]='filtersState.totalFilters'
+        [showDiscovery]='!!filtersState.showDiscovery' 
+        (activate)='filtersState.active = true'
+        interactionEvent='open-filters' 
+        [interactionEventWhere]='location.path(false)' 
+        [searchParams]='filtersState.searchParams'
 ></app-search-filters-button>
-<div class='tags header' *ngIf='filtersState.responseCategoryItems && false'> <!-- todo #483 -->
-<app-response *ngFor='let response of filtersState.responseCategoryItems' 
-        [response]='response' 
-        [selected]='filtersState.isResponseCategorySelected(response)'
-        [disabled]='filtersState.isResponseCategoryDisabled(response)'
-        [dynamic]='true'
-        (clicked)='filtersState.toggleResponseCategory(response)'
-></app-response>
-</div>
diff --git a/projects/srm/src/app/search-filters-button/search-filters-button.component.html b/projects/srm/src/app/search-filters-button/search-filters-button.component.html
@@ -1,10 +1,7 @@
 <button class='open-modal' [class.active]='!!totalFilters' (click)='activate.next()' aria-label='פתיחת אפשרויות הסינון'>
-    <img *ngIf='!totalFilters' src='assets/img/icon-filter-white.svg' class='hover' alt='אייקון סינון'>
-    <img *ngIf='!totalFilters' src='assets/img/icon-filter-gray-3.svg' class='nohover' alt='אייקון סינון'>
-    <img *ngIf='!!totalFilters' src='assets/img/icon-filter-white.svg' class='hover' [alt]='"אייקון סינון עם " + totalFilters + " מסננים פעילים"'>
-    <img *ngIf='!!totalFilters' src='assets/img/icon-filter-gray-1.svg' class='nohover' [alt]='"אייקון סינון עם " + totalFilters + " מסננים פעילים"'>
+    <div class='img'></div>
     <span>סינון</span>
-    <div class='count' *ngIf='totalFilters'>{{totalFilters}}</div>
+    <!-- <div class='count' *ngIf='totalFilters'>{{totalFilters}}</div> -->
 </button>
 <div class='discovery' *ngIf='showDiscovery' (click)='activate.next()' (mousedown)='$event.stopPropagation()' (touchstart)='$event.stopPropagation()'>
     <span class='text'>

diff --git a/projects/srm/src/app/search-filters-button/search-filters-button.component.less b/projects/srm/src/app/search-filters-button/search-filters-button.component.less
@@ -3,64 +3,102 @@
 
 :host {
     position: relative;
+    width: 100%;
+    padding-left: 8px;
+
     .open-modal {
-        position: relative;
-        background-color: @color-white;
-        cursor: pointer;
+        // position: relative;
+        // background-color: @color-white;
+        // cursor: pointer;
 
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
+        // display: flex;
+        // flex-direction: row;
+        // justify-content: center;
+        // align-items: center;
 
-        .font-rag-sans;
-        font-weight: 600;
-        font-size: 16px;
-        line-height: 21px;
-        color: @color-gray-3;
+        // .font-rag-sans;
+        // font-weight: 600;
+        // font-size: 16px;
+        // line-height: 21px;
+        // color: @color-gray-3;
 
-        height: 32px;
-        padding-left: 16px;
-        padding-right: 4px;
+        // height: 32px;
+        // padding-left: 16px;
+        // padding-right: 4px;
 
-        border: 1px solid @color-gray-5;
-        border-radius: 16px;
+        // border: 1px solid @color-gray-5;
+        // border-radius: 16px;
 
-        &.active {
-            border: 1px solid @color-gray-1;
-            color: @color-gray-1;
-        }
+        // &.active {
+        //     border: 1px solid @color-gray-1;
+        //     color: @color-gray-1;
+        // }
 
-        img {
-            display: none;
-        }
-        &:hover {
-            color: @color-white;
-            background-color: @color-gray-1;
-            transform: translateY(-1px);
-            img.hover {
-                display: block;
-            }
+        // img {
+        //     display: none;
+        // }
+        // &:hover {
+        //     color: @color-white;
+        //     background-color: @color-gray-1;
+        //     transform: translateY(-1px);
+        //     img.hover {
+        //         display: block;
+        //     }
 
-            .count {
-                top: -3px;
-                left: -3px;
-                width: 18px;
-                height: 18px;
-                border: 1px solid @color-white;
-            }
-        }
-        &:not(:hover) {
-            img.nohover {
-                display: block;
-            }
+        //     .count {
+        //         top: -3px;
+        //         left: -3px;
+        //         width: 18px;
+        //         height: 18px;
+        //         border: 1px solid @color-white;
+        //     }
+        // }
+        // &:not(:hover) {
+        //     img.nohover {
+        //         display: block;
+        //     }
+        // }
+        position: relative;
+        width: 100%;
+        height: 32px;
+
+        cursor: pointer;
+
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+
+        padding: 0 8px;
+        padding-right: 4px;
+
+        .img {
+            width: 24px;
+            height: 24px;
+            .background-image;
+            background-image: url('../../assets/img/icon-filter-blue-2.svg');
+            background-size: 24px;
+            background-position: center;
         }
+
+        border-radius: 4px;
+        border: 1px solid @color-blue-5;
+        background-color: @color-blue-8;
+
+        color: @color-blue-2;
+        .font-rag-sans;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 20px;
+
     }
     .discovery {
         position: absolute;
-        right: 0;
+        right: 50%;
+        transform: translateX(50%);
         width: 160px;
-        background: rgba(0, 0, 0, 0.7);
+        background: rgba(31, 55, 246, 0.70);
         border-radius: 4px;
         padding: 4px 8px;
         cursor: pointer;
@@ -91,34 +129,19 @@
                 height: 16px;
                 border-top-left-radius: 4px;
                 transform-origin: 8px 8px;
-                background: rgba(0, 0, 0, 0.7);
+                background: rgba(31, 55, 246, 0.70);
             }
         }
 
-        .mobile({
+        top: 44px;
+        .arrow {
             top: -16px;
-            transform: translateY(-100%);
-            .arrow {
-                right: 20px;
-                top: 100%;
-                &::after {
-                    transform: rotate(-135deg);
-                    top: -9px;
-                    left: 2px;
-                }
-            }
-        });
-        .desktop({
-            top: 48px;
-            .arrow {
-                top: -16px;
-                right: 20px;
-                &::after {
-                    transform: rotate(45deg);
-                    top: 9px;
-                    left: 2px;
-                }
+            right: calc(50% ~'-' 16px);
+            &::after {
+                transform: rotate(45deg);
+                top: 9px;
+                left: 2px;
             }
-        })
+        }
     }
 }
diff --git a/projects/srm/src/app/search-filters-button/search-filters-button.component.ts b/projects/srm/src/app/search-filters-button/search-filters-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'app-search-filters-button',
@@ -15,5 +15,4 @@ export class SearchFiltersButtonComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
 }
diff --git a/projects/srm/src/assets/img/icon-filter-blue-0.svg b/projects/srm/src/assets/img/icon-filter-blue-0.svg
diff --git a/projects/srm/src/assets/img/icon-filter-blue-1.svg b/projects/srm/src/assets/img/icon-filter-blue-1.svg
diff --git a/projects/srm/src/assets/img/icon-filter-blue-2.svg b/projects/srm/src/assets/img/icon-filter-blue-2.svg
diff --git a/projects/srm/src/common.less b/projects/srm/src/common.less
@@ -5,7 +5,7 @@
 @color-gray-2: #555452; // neutral-600
 @color-gray-3: #767573; // neutral-500
 @color-gray-35: #989693; // neutral-400    
-@color-gray-4: #B9B7B4; // neutral-300    
+@color-gray-4: #b9b7b4; // neutral-300    
 @color-gray-5: #E1DEDB; // neutral-200
 @color-gray-6: #F1EEEA; // neutral-150
 @color-gray-7: #FFFDF5; // neutral-100