(refactor): rename from m-filter to m-dropdownSelector

src/app/common/common.module.ts

@@ -121,7 +121,7 @@ import { PageLayoutComponent } from './components/page-layout/page-layout.compon
 import { DashboardLayoutComponent } from './components/dashboard-layout/dashboard-layout.component';
 import { ShadowboxLayoutComponent } from './components/shadowbox-layout/shadowbox-layout.component';
 import { ShadowboxHeaderComponent } from './components/shadowbox-header/shadowbox-header.component';
-import { FilterComponent } from './components/filter/filter.component';
+import { DropdownSelectorComponent } from './components/dropdown-selector/dropdown-selector.component';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -233,7 +233,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
     DashboardLayoutComponent,
     ShadowboxLayoutComponent,
     ShadowboxHeaderComponent,
-    FilterComponent,
+    DropdownSelectorComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -329,7 +329,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
     PageLayoutComponent,
     DashboardLayoutComponent,
     ShadowboxLayoutComponent,
-    FilterComponent,
+    DropdownSelectorComponent,
   ],
   providers: [
     SiteService,

src/app/common/components/filter/filter.component.html → src/app/common/components/dropdown-selector/dropdown-selector.component.html

-<div class="m-filter__labelWrapper" *ngIf="showLabel">
+<div class="m-dropdownSelector__labelWrapper" *ngIf="showLabel">
   <span>{{ filter.label }}</span>
   <m-tooltip icon="help">
     <div>{{ filter?.description }}</div>
@@ -13,7 +13,7 @@
   </m-tooltip>
 </div>
 <div
-  class="m-filter__wrapper"
+  class="m-dropdownSelector__wrapper"
   [ngClass]="{
     expanded: expanded,
     dropUp: dropUp
@@ -21,17 +21,17 @@
   (blur)="expanded = false"
   tabindex="0"
 >
-  <div class="m-filter__header" (click)="expanded = !expanded">
-    <span class="m-filter__option">
+  <div class="m-dropdownSelector__header" (click)="expanded = !expanded">
+    <span class="m-dropdownSelector__option">
       {{ selectedOption.label }}
     </span>
     <i class="material-icons" *ngIf="!expanded">keyboard_arrow_down</i>
     <i class="material-icons" *ngIf="expanded">keyboard_arrow_up</i>
   </div>
-  <div class="m-filter__optionsContainer">
+  <div class="m-dropdownSelector__optionsContainer">
     <ng-container *ngFor="let option of filter.options">
       <div
-        class="m-filter__option"
+        class="m-dropdownSelector__option"
         (click)="updateFilter(option)"
         [ngClass]="{
           unavailable: option.available === false

src/app/common/components/filter/filter.component.scss → src/app/common/components/dropdown-selector/dropdown-selector.component.scss

 $rounded-top: 3px 3px 0 0;
 $rounded-bottom: 0 0 3px 3px;
 
-m-filter {
+m-dropdownSelector {
   position: relative;
   margin: 0 24px 36px 0;
   z-index: 2;
   display: block;
 }
-.m-filter__labelWrapper {
+.m-dropdownSelector__labelWrapper {
   position: absolute;
   bottom: 115%;
   white-space: nowrap;
@@ -45,7 +45,7 @@ m-filter {
   }
 }
 
-.m-filter__wrapper {
+.m-dropdownSelector__wrapper {
   cursor: pointer;
 
   &:focus {
@@ -56,31 +56,31 @@ m-filter {
     @include m-theme() {
       box-shadow: 0px 1px 15px 0 rgba(themed($m-black), 0.15);
     }
-    .m-filter__header {
+    .m-dropdownSelector__header {
       @include m-theme() {
         border-color: themed($m-blue);
       }
     }
-    .m-filter__optionsContainer {
+    .m-dropdownSelector__optionsContainer {
       display: block;
     }
 
     &:not(.dropUp) {
-      .m-filter__header {
+      .m-dropdownSelector__header {
         @include m-theme() {
           border-radius: $rounded-top;
         }
       }
-      .m-filter__optionsContainer {
+      .m-dropdownSelector__optionsContainer {
         border-top: none;
         border-radius: $rounded-bottom;
       }
     }
     &.dropUp {
-      .m-filter__header {
+      .m-dropdownSelector__header {
         border-radius: $rounded-bottom;
       }
-      .m-filter__optionsContainer {
+      .m-dropdownSelector__optionsContainer {
         bottom: 100%;
         border-radius: $rounded-top;
         border-bottom: none;
@@ -97,7 +97,7 @@ m-filter {
   }
 }
 
-.m-filter__header {
+.m-dropdownSelector__header {
   position: relative;
   border-radius: 3px;
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
@@ -109,7 +109,7 @@ m-filter {
   @include m-theme() {
     border: 1px solid themed($m-grey-100);
   }
-  .m-filter__label {
+  .m-dropdownSelector__label {
     margin-right: 10px;
   }
   i {
@@ -118,14 +118,14 @@ m-filter {
     height: 24px;
     padding-top: 2px;
   }
-  .m-filter__option {
+  .m-dropdownSelector__option {
     @include m-theme() {
       color: themed($m-grey-500);
     }
   }
 }
 
-.m-filter__optionsContainer {
+.m-dropdownSelector__optionsContainer {
   box-sizing: border-box;
   position: absolute;
   display: none;
@@ -139,7 +139,7 @@ m-filter {
     box-shadow: 0px 8px 16px 0px rgba(themed($m-black), 0.15);
   }
 
-  .m-filter__option {
+  .m-dropdownSelector__option {
     &:hover:not(.unavailable) {
       @include m-theme() {
         color: themed($m-grey-500);
@@ -155,13 +155,13 @@ m-filter {
   }
 }
 
-.m-filter__header {
+.m-dropdownSelector__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-right: 10px;
 }
-.m-filter__option {
+.m-dropdownSelector__option {
   display: inline-block;
   padding: 10px 20px;
   box-sizing: border-box;
@@ -184,8 +184,8 @@ m-filter {
 }
 
 @media screen and (max-width: $min-tablet) {
-  m-filter {
-    .m-filter__labelWrapper {
+  m-dropdownSelector {
+    .m-dropdownSelector__labelWrapper {
       .m-tooltip--bubble {
         width: 120px;
       }
@@ -194,19 +194,19 @@ m-filter {
 }
 
 @media screen and (max-width: $max-mobile) {
-  m-filter {
-    .m-filter__wrapper {
+  m-dropdownSelector {
+    .m-dropdownSelector__wrapper {
       > * {
         width: 160px;
       }
-      .m-filter__header {
+      .m-dropdownSelector__header {
         padding-right: 10px;
         i {
           display: none;
         }
       }
-      .m-filter__optionsContainer {
-        .m-filter__option {
+      .m-dropdownSelector__optionsContainer {
+        .m-dropdownSelector__option {
           &:first-child {
             padding-top: 11px;
           }
@@ -215,7 +215,7 @@ m-filter {
           }
         }
       }
-      .m-filter__option {
+      .m-dropdownSelector__option {
         margin-right: 0;
         padding: 8px 18px;
       }

src/app/common/components/filter/filter.component.ts → src/app/common/components/dropdown-selector/dropdown-selector.component.ts

@@ -11,11 +11,11 @@ import { Session } from '../../../services/session';
 import { Filter, Option } from '../../../interfaces/dashboard';
 
 @Component({
-  selector: 'm-filter',
-  templateUrl: './filter.component.html',
+  selector: 'm-dropdownSelector',
+  templateUrl: './dropdown-selector.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FilterComponent implements OnInit {
+export class DropdownSelectorComponent implements OnInit {
   @Input() filter: Filter;
   @Input() dropUp: boolean = false;
   @Input() showLabel: boolean = true;

src/app/modules/analytics/v2/components/filters/filters.component.html

 <div class="m-analytics__filtersContainer">
   <ng-container *ngFor="let filter of filters">
-    <m-filter
+    <m-dropdownSelector
       [filter]="filter"
       [dropUp]="true"
       (selectionMade)="selectionMade($event)"
-    ></m-filter>
+    ></m-dropdownSelector>
   </ng-container>
 </div>

src/app/modules/analytics/v2/dashboard.component.html

@@ -16,14 +16,14 @@
                 <m-analytics__search></m-analytics__search>
               </div> -->
           <!-- <div class="m-analyticsDashboard__channelFilter" *ngIf="session.isAdmin()">
-                <m-filter [filter]="channelFilter"></m-filter>
+                <m-dropdownSelector [filter]="channelFilter"></m-dropdownSelector>
               </div> -->
           <div class="m-analyticsDashboard__timespanFilter">
-            <m-filter
+            <m-dropdownSelector
               [filter]="timespanFilter"
               [showLabel]="false"
               (selectionMade)="filterSelectionMade($event)"
-            ></m-filter>
+            ></m-dropdownSelector>
           </div>
         </div>
       </ng-container>

src/app/modules/analytics/v2/dashboard.component.scss

@@ -30,10 +30,10 @@ m-analytics__dashboard {
       }
     }
   }
-  m-filter {
+  m-dropdownSelector {
     margin: 0;
   }
-  .m-filter__wrapper {
+  .m-dropdownSelector__wrapper {
     > * {
       width: 180px;
     }
@@ -56,9 +56,9 @@ m-analytics__dashboard {
 
 @media screen and (max-width: $min-tablet) {
   .m-dashboardLayout__header {
-    m-filter {
+    m-dropdownSelector {
       margin: 0 16px 8px 0;
-      .m-filter__wrapper {
+      .m-dropdownSelector__wrapper {
         > * {
           width: 180px;
         }
@@ -72,8 +72,8 @@ m-analytics__dashboard {
 
 @media screen and (max-width: $max-mobile) {
   .m-dashboardLayout__header {
-    m-filter {
-      .m-filter__wrapper {
+    m-dropdownSelector {
+      .m-dropdownSelector__wrapper {
         > * {
           width: 160px;
         }