From 48222e103a05a96b63c2868ed556c1883dff27bb Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Sat, 1 Jul 2023 23:34:35 +0530 Subject: [PATCH 1/5] change sidebar to tabs and add responsiveness --- app/components/side-bar.hbs | 28 +++++++-- app/components/tasks.hbs | 19 +++--- app/constants/tasks.js | 42 ++++++++++++- app/controllers/tasks.js | 12 +++- app/styles/sidebar.css | 114 +++++++++++++++++++++++++++++++----- app/styles/tasks.css | 33 +++++++---- app/templates/tasks.hbs | 39 ++++++------ 7 files changed, 227 insertions(+), 60 deletions(-) diff --git a/app/components/side-bar.hbs b/app/components/side-bar.hbs index 1478c836..73fb2354 100644 --- a/app/components/side-bar.hbs +++ b/app/components/side-bar.hbs @@ -1,14 +1,30 @@ -
-
+
+
{{#each @taskStatusList as |status|}} {{/each}}
+ {{#unless @showTasks}} +
+ + +
+ {{/unless}}
\ No newline at end of file diff --git a/app/components/tasks.hbs b/app/components/tasks.hbs index dfa7c8b6..0b5c9743 100644 --- a/app/components/tasks.hbs +++ b/app/components/tasks.hbs @@ -1,12 +1,15 @@ -
-

{{@userSelectedTask.displayLabel}} Tasks

+
{{#if @dev}} {{#if @noInProgressTask}} -
+

You have no task in progress! click below to fetch tasks

- +
{{/if}} {{/if}} @@ -25,6 +28,6 @@
{{/each}} {{else}} -
No tasks found!
- {{/if}} +
No tasks found!
+ {{/if}}
\ No newline at end of file diff --git a/app/constants/tasks.js b/app/constants/tasks.js index ea9fdc5e..1642aea0 100644 --- a/app/constants/tasks.js +++ b/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 }; diff --git a/app/controllers/tasks.js b/app/controllers/tasks.js index dc45b654..f3f02d1e 100644 --- a/app/controllers/tasks.js +++ b/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'; @@ -15,6 +19,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 ); @@ -35,6 +40,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'); @@ -119,8 +125,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) { diff --git a/app/styles/sidebar.css b/app/styles/sidebar.css index 5ecbf3f5..fd43ea4e 100644 --- a/app/styles/sidebar.css +++ b/app/styles/sidebar.css @@ -1,31 +1,113 @@ .sidebar { - margin: 0; - padding: 0; - width: 200px; - overflow: auto; + --tabs-border-color: rgb(212, 212, 213); + margin-bottom: 2.5rem; + padding: 0 2rem; + width: 80%; } - .sidebar__dropdown-container { - margin-left: 8px; - border: 1px solid var(--sidebar__dropdown-container--border); - border-radius: 4px; - padding: 1px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; } .sidebar__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; +} + +.sidebar__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); +} +.sidebar__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); +} + +.sidebar__task-selector > button { display: block; - width: 100%; + width: 90%; + margin: auto; padding: 8px; border: none; - text-align: left; + text-align: center; padding: 8px 20px; + text-transform: uppercase; background-color: var(--button-sidebar__dropdown-container--bg); } +@media (max-width: 720px) { + .sidebar__dropdown-container__button-active { + border-width: 0; + border-radius: 0; + border-style: none; + } + .sidebar__dropdown-container__button { + border-width: 0; + border-radius: 0; + border-style: none; + } -.sidebar__dropdown-container__button:hover { - cursor: pointer; - border-left: 2px solid var(--button-sidebar__dropdown-container--border-l); - font-weight: 800; -} + .sidebar__dropdown-container { + display: none; + } + .sidebar__task-selector { + display: flex; + align-items: center; + } + + .sidebar__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; + } + .sidebar__dropdown-active > *:not(:last-child) { + border-bottom-width: 1px; + border-bottom-style: solid; + } +} diff --git a/app/styles/tasks.css b/app/styles/tasks.css index 75703c00..9600cc8b 100644 --- a/app/styles/tasks.css +++ b/app/styles/tasks.css @@ -8,13 +8,15 @@ .tasks-page { display: flex; + flex-direction: column; + align-items: center; color: var(--tasks-page--text); margin-top: 40px; } -.tasks-container__title { +/* .tasks-container__title { text-transform: capitalize; -} +} */ .tasks-container { padding: 8px; @@ -449,12 +451,7 @@ input[type='range']:focus::-ms-fill-upper { margin: 10px; } -@media screen and (max-width: 800px) { - .tasks-page { - flex-direction: column; - align-items: center; - } - +@media screen and (max-width: 720px) { .task-card { width: 90%; } @@ -467,9 +464,25 @@ input[type='range']:focus::-ms-fill-upper { left: 10px; right: 10px; } + /* .tasks-container__title{ + display: none; + } */ + .task-details__title-container { + flex-direction: column; + align-items: flex-start; + } + .task-details__status-purpose-container { + grid-template-columns: unset; + grid-template-rows: 2fr; + grid-auto-flow: row; + justify-items: flex-start; + gap: 0; + } + .status-details { + width: 100%; + } } - -@media screen and (max-width: 450px) { +@media screen and (max-width: 475px) { .task-card__status { flex-direction: column; } diff --git a/app/templates/tasks.hbs b/app/templates/tasks.hbs index 85f7b1f3..31619547 100644 --- a/app/templates/tasks.hbs +++ b/app/templates/tasks.hbs @@ -1,18 +1,21 @@ -{{page-title "My Tasks"}} +{{page-title 'My Tasks'}} -
- + - - -
\ No newline at end of file From 630b575ac702f94cf33d5455e8902ab552b2102d Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Sat, 1 Jul 2023 23:35:12 +0530 Subject: [PATCH 2/5] prettier fix --- app/components/side-bar.hbs | 2 +- app/constants/tasks.js | 2 +- app/styles/sidebar.css | 20 ++++++++++---------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/components/side-bar.hbs b/app/components/side-bar.hbs index 73fb2354..2f7299eb 100644 --- a/app/components/side-bar.hbs +++ b/app/components/side-bar.hbs @@ -24,7 +24,7 @@ {{@userSelectedTaskText}} - +
{{/unless}}
\ No newline at end of file diff --git a/app/constants/tasks.js b/app/constants/tasks.js index 1642aea0..0b394baa 100644 --- a/app/constants/tasks.js +++ b/app/constants/tasks.js @@ -9,7 +9,7 @@ const TASK_KEYS = { NEEDS_REVIEW: 'NEEDS_REVIEW', IN_REVIEW: 'IN_REVIEW', APPROVED: 'APPROVED', - MERGED:'MEGRED', + MERGED: 'MEGRED', SANITY_CHECK: 'SANITY_CHECK', REGRESSION_CHECK: 'REGRESSION_CHECK', RELEASED: 'RELEASED', diff --git a/app/styles/sidebar.css b/app/styles/sidebar.css index fd43ea4e..45d1acb4 100644 --- a/app/styles/sidebar.css +++ b/app/styles/sidebar.css @@ -51,16 +51,16 @@ 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); + 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); } .sidebar__task-selector > button { From 7b1893d32340714656544632be48c28a7e3e267c Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Sun, 2 Jul 2023 12:39:08 +0530 Subject: [PATCH 3/5] rename sidebar to task-tabs --- .../{side-bar.hbs => task-tabs.hbs} | 12 ++++----- app/styles/app.css | 2 +- app/styles/{sidebar.css => task-tabs.css} | 26 +++++++++---------- app/styles/variables.css | 6 ++--- app/templates/tasks.hbs | 2 +- 5 files changed, 24 insertions(+), 24 deletions(-) rename app/components/{side-bar.hbs => task-tabs.hbs} (66%) rename app/styles/{sidebar.css => task-tabs.css} (79%) diff --git a/app/components/side-bar.hbs b/app/components/task-tabs.hbs similarity index 66% rename from app/components/side-bar.hbs rename to app/components/task-tabs.hbs index 2f7299eb..d2077ebf 100644 --- a/app/components/side-bar.hbs +++ b/app/components/task-tabs.hbs @@ -1,15 +1,15 @@ -
+
{{#each @taskStatusList as |status|}}