Merge branch 'develop' into develop

app/components/task-tabs.hbs

@@ -0,0 +1,31 @@
+<div class='task-tabs' data-test-task-tabs>
+  <div
+    class='task-tabs__dropdown-container
+      {{if @showTasks "task-tabs__dropdown-active"}}'
+  >
+    {{#each @taskStatusList as |status|}}
+      <button
+        data-test-task-tabs-button
+        href='#'
+        class='task-tabs__dropdown-container__button
+          {{if
+            (eq @userSelectedTaskText status.displayLabel)
+            "task-tabs__dropdown-container__button-active"
+          }}'
+        {{on 'click' (fn @changeUserSelectedTask status)}}
+        type='button'
+      >
+        {{status.displayLabel}}
+      </button>
+    {{/each}}
+  </div>
+  {{#unless @showTasks}}
+    <div class='task-tabs__task-selector'>
+      <button href='#' {{on 'click' @toggleTasks}} type='button'>
+        {{@userSelectedTaskText}}
+        <i class='arrow-down'></i>
+      </button>
+
+    </div>
+  {{/unless}}
+</div>

app/components/tasks.hbs

@@ -1,12 +1,15 @@
-<div class="tasks-container">
-  <h2 class="tasks-container__title">{{@userSelectedTask.displayLabel}} Tasks</h2>
+<div class='tasks-container'>
   {{#if @dev}}
     {{#if @noInProgressTask}}
-      <div class="fetch-task" data-test-fetchSection>
+      <div class='fetch-task' data-test-fetchSection>
         <p>You have no task in progress! click below to fetch tasks</p>
-        <Button @onClick={{@handleAssignment}} @disabled={{@disabled}} @isLoading={{@findingTask}}>
-          {{if @findingTask "Fetching task" "Fetch Task"}}
-        </Button> 
+        <Button
+          @onClick={{@handleAssignment}}
+          @disabled={{@disabled}}
+          @isLoading={{@findingTask}}
+        >
+          {{if @findingTask 'Fetching task' 'Fetch Task'}}
+        </Button>
       </div>
     {{/if}}
   {{/if}}
@@ -25,6 +28,6 @@
       </div>
     {{/each}}
   {{else}}
-    <div class="tasks-container__no-tasks-found">No tasks found!</div>
-  {{/if}}  
+    <div class='tasks-container__no-tasks-found'>No tasks found!</div>
+  {{/if}}
 </div>

app/constants/tasks.js

@@ -9,6 +9,7 @@ const TASK_KEYS = {
   NEEDS_REVIEW: 'NEEDS_REVIEW',
   IN_REVIEW: 'IN_REVIEW',
   APPROVED: 'APPROVED',
+  MERGED: 'MEGRED',
   SANITY_CHECK: 'SANITY_CHECK',
   REGRESSION_CHECK: 'REGRESSION_CHECK',
   RELEASED: 'RELEASED',
@@ -26,6 +27,7 @@ const {
   NEEDS_REVIEW,
   IN_REVIEW,
   APPROVED,
+  MERGED,
   SANITY_CHECK,
   REGRESSION_CHECK,
   RELEASED,
@@ -91,6 +93,44 @@ const TASK_STATUS_LIST = [
   },
 ];
 
+const TABS_TASK_STATUS_LIST = [
+  {
+    displayLabel: 'All',
+    key: ALL,
+  },
+  {
+    displayLabel: 'Assigned',
+    key: ASSIGNED,
+  },
+  {
+    displayLabel: 'In Progress',
+    key: IN_PROGRESS,
+  },
+  {
+    displayLabel: 'Blocked',
+    key: BLOCKED,
+  },
+  {
+    displayLabel: 'Needs Review',
+    key: NEEDS_REVIEW,
+  },
+  {
+    displayLabel: 'In Review',
+    key: IN_REVIEW,
+  },
+  {
+    displayLabel: 'Approved',
+    key: APPROVED,
+  },
+  {
+    displayLabel: 'Merged',
+    key: MERGED,
+  },
+  {
+    displayLabel: 'Verified',
+    key: VERIFIED,
+  },
+];
 export const TASK_MESSAGES = {
   MARK_DONE:
     'This task will be marked as complete and a new task will be assigned to you',
@@ -102,4 +142,4 @@ export const TASK_PERCENTAGE = {
   completedPercentage: '100',
 };
 
-export { TASK_KEYS, TASK_STATUS_LIST };
+export { TASK_KEYS, TASK_STATUS_LIST, TABS_TASK_STATUS_LIST };

app/controllers/tasks.js

@@ -3,7 +3,11 @@ import { tracked } from '@glimmer/tracking';
 import { later } from '@ember/runloop';
 import { action } from '@ember/object';
 import ENV from 'website-my/config/environment';
-import { TASK_KEYS, TASK_STATUS_LIST } from 'website-my/constants/tasks';
+import {
+  TASK_KEYS,
+  TASK_STATUS_LIST,
+  TABS_TASK_STATUS_LIST,
+} from 'website-my/constants/tasks';
 import { TASK_MESSAGES, TASK_PERCENTAGE } from '../constants/tasks';
 import { inject as service } from '@ember/service';
 import { toastNotificationTimeoutOptions } from '../constants/toast-notification';
@@ -14,6 +18,7 @@ export default class TasksController extends Controller {
   @service toast;
   TASK_KEYS = TASK_KEYS;
   taskStatusList = TASK_STATUS_LIST;
+  tabsTaskStatusList = TABS_TASK_STATUS_LIST;
   allTasksObject = this.taskStatusList.find(
     (obj) => obj.key === this.TASK_KEYS.ALL
   );
@@ -34,6 +39,7 @@ export default class TasksController extends Controller {
   @tracked buttonRequired = false;
   @tracked disabled = false;
   @tracked findingTask = false;
+  @tracked showTasks = false;
   @tracked showFetchButton = this.isShowFetchButton() && !this.alreadyFetched;
   alreadyFetched = localStorage.getItem('already-fetched');
 
@@ -118,8 +124,12 @@ export default class TasksController extends Controller {
   @action changeUserSelectedTask(statusObject) {
     this.userSelectedTask = statusObject;
     this.filterTasksByStatus();
+    if (this.showTasks) this.showTasks = false;
   }
 
+  @action toggleTasks() {
+    this.showTasks = !this.showTasks;
+  }
   @tracked tasksToShow = this.allTasks;
 
   @action onTaskChange(key, value) {

app/styles/app.css

@@ -2,7 +2,7 @@
 @import 'notification.css';
 @import 'image-upload.css';
 @import 'tasks.css';
-@import 'sidebar.css';
+@import 'task-tabs.css';
 @import 'local-navbar.css';
 @import 'profile.css';
 @import 'get-started.css';

app/styles/task-tabs.css

@@ -0,0 +1,113 @@
+.task-tabs {
+  --tabs-border-color: rgb(212, 212, 213);
+  margin-bottom: 2.5rem;
+  padding: 0 2rem;
+  width: 80%;
+}
+
+.task-tabs__dropdown-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.task-tabs__dropdown-container__button {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  font-size: 0.8em;
+  background-color: transparent;
+  border-radius: 5px 5px 0 0;
+  border-top-style: none;
+  border-right-style: none;
+  border-left-style: none;
+  border-bottom: 1px solid var(--tabs-border-color);
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: rgb(174, 174, 174);
+  text-transform: uppercase;
+}
+
+.task-tabs__dropdown-container__button-active {
+  font-weight: 700;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--tabs-border-color);
+  border-bottom-style: none;
+  background-color: transparent;
+  color: var(--tasks-page--text);
+}
+.task-tabs__task-selector {
+  margin: auto;
+  font-weight: 700;
+  border-radius: 0 0 0.5rem 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--tabs-border-color);
+  border-top-style: none;
+  background-color: transparent;
+  display: none;
+  padding: 4px;
+  width: 15rem;
+}
+.arrow-down {
+  margin: auto;
+  margin-left: 0.5rem;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: solid var(--tabs-border-color);
+  border-width: 0 3px 3px 0;
+  padding: 3px;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+.task-tabs__task-selector > button {
+  display: block;
+  width: 90%;
+  margin: auto;
+  padding: 8px;
+  border: none;
+  text-align: center;
+  padding: 8px 20px;
+  text-transform: uppercase;
+  background-color: var(--button-task-tabs__dropdown-container--bg);
+}
+@media (max-width: 720px) {
+  .task-tabs__dropdown-container__button-active {
+    border-width: 0;
+    border-radius: 0;
+    border-style: none;
+  }
+  .task-tabs__dropdown-container__button {
+    border-width: 0;
+    border-radius: 0;
+    border-style: none;
+  }
+
+  .task-tabs__dropdown-container {
+    display: none;
+  }
+  .task-tabs__task-selector {
+    display: flex;
+    align-items: center;
+  }
+
+  .task-tabs__dropdown-active {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0 0 0.5rem 0.5rem;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--tabs-border-color);
+    border-top-style: none;
+    width: 15rem;
+    margin: auto;
+  }
+
+  .task-tabs__dropdown-active > *:not(:last-child) {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+  }
+}

app/styles/tasks.css

@@ -33,14 +33,12 @@
 
 .tasks-page {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   color: var(--tasks-page--text);
   margin-top: 40px;
 }
 
-.tasks-container__title {
-  text-transform: capitalize;
-}
-
 .tasks-container {
   padding: 8px;
   width: 80%;
@@ -528,7 +526,11 @@
   margin: 10px;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 720px) {
+  .task-card {
+    width: 90%;
+  }
+
   .tasks-page {
     flex-direction: column;
     align-items: center;
@@ -543,8 +545,7 @@
     left: 10px;
     right: 10px;
   }
-}
-@media screen and (max-width: 720px) {
+
   .task-details__title-container {
     flex-direction: column;
     align-items: flex-start;
@@ -564,7 +565,6 @@
   .task-card {
     width: 100%;
   }
-
   .task-card__status {
     flex-direction: column;
   }