Merge pull request #54 from BinaryStudioAcademy/feature/52-suggested-…

…challenge-component-filters Feature/52 suggested challenge component filters
BinaryStudioAcademy · Aug 31, 2023 · f46036c · f46036c
2 parents e9cffea + cc2a6b7
commit f46036c
Show file tree

Hide file tree

Showing 8 changed files with 310 additions and 5 deletions.
diff --git a/frontend/src/app/modules/main/suggested-challenge/suggested-challenge.component.html b/frontend/src/app/modules/main/suggested-challenge/suggested-challenge.component.html
@@ -2,8 +2,9 @@
     <div class="filters">
         <h5>Suggested Challenge</h5>
         <div class="dropdowns-container">
-            <app-dropdown-select [items]="languages" [selectedItem]="languages[1]"></app-dropdown-select>
+            <app-dropdown-select [selectText]="'Choose Language...'" [items]="languages" [selectedItem]="languages[1]"></app-dropdown-select>
             <app-dropdown-select
+                [selectText]="'Choose Today\'s Focus...'"
                 [items]="score"
                 [selectedItem]="score[1]"
                 [itemsIcons]="scoreIcons"></app-dropdown-select>

diff --git a/frontend/src/app/modules/main/suggested-challenge/suggested-challenge.component.sass b/frontend/src/app/modules/main/suggested-challenge/suggested-challenge.component.sass
@@ -57,7 +57,7 @@ h5
     justify-content: center
 
 .suggested-button
-    width: 105px
+    width: 28%
     height: 45px
     color: $white
     text-align: center
@@ -161,7 +161,7 @@ h5
 
 .constraints li::marker
     color: $green
-    font-size: 18px
+    font-size: 1em
 
 .constraints-item
     color: $white
@@ -219,5 +219,6 @@ h5
     padding-bottom: 4px
 
 .constraints::-webkit-scrollbar,
-.tags::-webkit-scrollbar
+.tags::-webkit-scrollbar,
+.description-text::-webkit-scrollbar
     width: 0
diff --git a/...pp/shared/components/challenges-dropdown-select/challenges-dropdown-select.component.html b/...pp/shared/components/challenges-dropdown-select/challenges-dropdown-select.component.html
@@ -0,0 +1,24 @@
+<div ngbDropdown class="dropdown d-inline-flex" [autoClose]="true">
+    <div class="button-wrapper d-flex flex-column d-flex flex-grow-1">
+        <button class="btn d-flex" id="dropdownMenuButton" ngbDropdownToggle>
+            <div class="float-start d-flex">
+                <fa-icon *ngIf="selectedItem.iconName" [icon]="['fab', selectedItem.iconName]"></fa-icon>
+                <p>{{ selectedItem.content }}</p>
+            </div>
+            <span class="circle-icon">
+                <fa-icon [icon]="['fas', 'chevron-down']" size="2xs"></fa-icon>
+            </span>
+        </button>
+    </div>
+
+    <div class="w-100 dropdown-menu" ngbDropdownMenu aria-labelledby="dropdownMenuButton">
+        <ng-container>
+            <a ngbDropdownItem (click)="selectItem(item)" *ngFor="let item of items"
+                class="d-inline-flex dropdown-menu-link">
+                <fa-icon [icon]="'check'" size="xs"
+                    [ngStyle]="{ visibility: selectedItem === item ? 'visible' : 'hidden' }"></fa-icon>
+                <span class="link-text">{{ item.content }}</span>
+            </a>
+        </ng-container>
+    </div>
+</div>
diff --git a/...pp/shared/components/challenges-dropdown-select/challenges-dropdown-select.component.sass b/...pp/shared/components/challenges-dropdown-select/challenges-dropdown-select.component.sass
@@ -0,0 +1,58 @@
+@import 'color-variables'
+
+button
+    all: revert
+
+.dropdown
+    width: 100%
+    font-family: 'Lato', sans-serif
+    min-width: 160px
+
+    &-toggle::after
+        display: none !important
+
+    &-menu
+        background-color: $deep-dark-grey
+        border: 1px solid $transparent-white
+        overflow: auto
+        border-radius: 0
+
+    &-item
+        color: $grey
+
+        &:hover
+            background-color: $slightly-transparent-light-grey
+
+        &:focus
+            background-color: transparent
+
+.dropdown-item 
+    padding: 4px 11px
+
+.circle-icon
+    display: inline-flex
+    align-items: center
+    justify-content: center
+    width: 12px
+    height: 12px
+    border-radius: 50%
+    background-color: #EFEFEF
+
+    fa-icon
+        color: $black
+
+.btn
+    font-family: inherit
+    align-items: center
+    height: 43px
+    justify-content: space-between
+    padding: 11px 16px 11px 11px
+    color: $white-grey
+    background-color: $ultra-transparent-black
+    border: 1px solid $transparent-white
+
+.float-start
+    gap: 5px
+
+.dropdown-menu-link
+    gap: 7px
diff --git a/.../app/shared/components/challenges-dropdown-select/challenges-dropdown-select.component.ts b/.../app/shared/components/challenges-dropdown-select/challenges-dropdown-select.component.ts
@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DropdownItem } from '@shared/models/dropdown-item';
+
+@Component({
+    selector: 'app-challenges-dropdown-select',
+    templateUrl: './challenges-dropdown-select.component.html',
+    styleUrls: ['./challenges-dropdown-select.component.sass'],
+})
+export class ChallengesDropdownSelectComponent implements OnInit {
+    @Input() items: DropdownItem[] = [];
+
+    @Output() SelectedItemsChanged: EventEmitter<DropdownItem> = new EventEmitter<DropdownItem>();
+
+    selectedItem: DropdownItem;
+
+    ngOnInit(): void {
+        [this.selectedItem] = this.items;
+    }
+
+    selectItem(item: DropdownItem) {
+        this.selectedItem = item;
+        this.SelectedItemsChanged.emit(this.selectedItem);
+    }
+}
diff --git a/frontend/src/app/shared/components/dropdown-select/dropdown-select.component.html b/frontend/src/app/shared/components/dropdown-select/dropdown-select.component.html
@@ -3,7 +3,7 @@
         <label *ngIf="title" class="title">{{ title }}</label>
         <button class="btn d-flex" id="dropdownMenuButton" ngbDropdownToggle>
             <fa-icon *ngIf="selectedIcon" [icon]="selectedIcon" class="ms-0 selected-icon"></fa-icon>
-            <span class="float-start">{{ selectedItem ? selectedItem : 'Select' }}</span>
+            <span class="float-start">{{ selectedItem ? selectedItem : selectText }}</span>
             <fa-icon [icon]="'chevron-down'" size="xs"></fa-icon>
         </button>
     </div>

diff --git a/frontend/src/app/shared/components/dropdown-select/dropdown-select.component.ts b/frontend/src/app/shared/components/dropdown-select/dropdown-select.component.ts
@@ -13,6 +13,8 @@ export class DropdownSelectComponent implements OnInit {
 
     @Input() items: string[] = [];
 
+    @Input() selectText: string = 'Select';
+
     @Input() itemsIcons: IconName[] = [];
 
     @Output() SelectedItemsChanged: EventEmitter<string[] | string> = new EventEmitter<string[] | string>();