From 63312402b9c23ccb8e684a3a10f684c0ced0a462 Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Fri, 14 Jul 2023 18:12:08 +0530 Subject: [PATCH 01/16] progress bar component test --- .../components/progress-bar-test.js | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 tests/integration/components/progress-bar-test.js diff --git a/tests/integration/components/progress-bar-test.js b/tests/integration/components/progress-bar-test.js new file mode 100644 index 00000000..e43553c0 --- /dev/null +++ b/tests/integration/components/progress-bar-test.js @@ -0,0 +1,79 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { find, render, fillIn, click } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | progress-bar', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + + assert.dom('[data-test-progress-bar]').exists(); + }); + + test('it has edit button', async function (assert) { + await render(hbs``); + + assert.dom('[data-text-progress-bar-button]').exists(); + }); + + test('verify edit button click', async function (assert) { + await render(hbs``); + + const editButton = find('[data-text-progress-bar-button]'); + + await click(editButton); + assert.dom(editButton).containsText('%'); + }); + + test('verify update success', async function (assert) { + this.setProperties({ + percentageCompleted: '10', + onUpdate: (value) => { + this.percentageCompleted = value; + }, + }); + await render( + hbs`` + ); + + const editButton = find('[data-text-progress-bar-button]'); + + await click(editButton); + + const progressBarInput = find('[data-test-progress-bar]'); + + await fillIn(progressBarInput, '50'); + + assert.dom('[data-text-progress-bar-button]').exists(); + assert.equal(progressBarInput.value, '50', "The value should be '50'."); + }); + + test('verify update error', async function (assert) { + this.setProperties({ + percentageCompleted: '10', + onUpdate: () => { + this.percentageCompleted = '10'; + }, + }); + await render( + hbs`` + ); + + const editButton = find('[data-text-progress-bar-button]'); + + await click(editButton); + const progressBarInput = find('[data-test-progress-bar]'); + + await fillIn(progressBarInput, '50'); + + assert.dom('[data-text-progress-bar-button]').exists(); + assert.notEqual( + progressBarInput.value, + '50', + "The value should not be '50'." + ); + assert.equal(progressBarInput.value, '10', "The value should be '10'."); + }); +}); From 91a886e7da3da0b110d7b69047c8cce42431e3fb Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Mon, 17 Jul 2023 08:20:57 +0530 Subject: [PATCH 02/16] create progress bar component --- app/components/progress-bar.hbs | 18 +++++ app/components/task-details.hbs | 19 +---- app/styles/app.css | 1 + app/styles/progress-bar.css | 119 ++++++++++++++++++++++++++++++++ 4 files changed, 141 insertions(+), 16 deletions(-) create mode 100644 app/components/progress-bar.hbs create mode 100644 app/styles/progress-bar.css diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs new file mode 100644 index 00000000..a9e7a749 --- /dev/null +++ b/app/components/progress-bar.hbs @@ -0,0 +1,18 @@ +
+ + {{@value}} + +
  \ No newline at end of file diff --git a/app/components/task-details.hbs b/app/components/task-details.hbs index 640e17f4..5267f5d4 100644 --- a/app/components/task-details.hbs +++ b/app/components/task-details.hbs @@ -3,22 +3,9 @@

{{@task.title}}

- - {{@percentCompleted}}% -
+ + +
diff --git a/app/styles/app.css b/app/styles/app.css index 307b7444..4f75d41c 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -17,6 +17,7 @@ @import 'card.css'; @import 'discord.css'; @import 'qrcode.css'; +@import 'progress-bar.css'; html, body { diff --git a/app/styles/progress-bar.css b/app/styles/progress-bar.css new file mode 100644 index 00000000..df9beb16 --- /dev/null +++ b/app/styles/progress-bar.css @@ -0,0 +1,119 @@ +/* .progress-bar__input { + -webkit-appearance: none; + appearance: none; + width: 80%; + height: 9px; + cursor: pointer; + outline: none; + overflow: hidden; + border-radius: 9px; + border: 2px solid var(--black-grey); +} + +.progress-bar__input:disabled { + pointer-events: none; +} + +.progress-bar__input::-webkit-slider-runnable-track { + height: 9px; + background: var(--range-slider-background); + border-radius: 9px; +} + +.progress-bar__input::-moz-range-track { + height: 9px; + background: var(--range-slider-background); + border-radius: 9px; +} + +.progress-bar__input::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + height: 9px; + width: 9px; + background-color: var(--progress-bar-color); + border-radius: 50%; + border: 2px solid var(--progress-bar-color); + transition: 0.25s ease-in-out; + box-shadow: -407px 0 0 400px var(--progress-bar-color); +} + +.progress-bar__input::-webkit-slider-thumb:active, +.task-card__progress-bar-container__progress-bar:hover .progress-bar__input:not(:disabled)::-webkit-slider-thumb { + background-color: var(--white); +} + +.progress-bar__input::-moz-range-thumb { + background-color: var(--progress-bar-color); + border-radius: 50%; + height: 4.5px; + width: 4.5px; + border: 2px solid var(--progress-bar-color); + transition: 0.25s ease-in-out; + box-shadow: -407px 0 0 400px var(--progress-bar-color); +} + +.progress-bar__input::-moz-range-thumb:active, +.task-card__progress-bar-container__progress-bar:hover .progress-bar__input:not(:disabled)::-moz-range-thumb { + background-color: var(--white); +} */ +/* +.progress-bar__input-slider { + -webkit-appearance: none; + appearance: none; + width: 80%; + height: 16px; + cursor: pointer; + outline: none; + overflow: hidden; + border: 2px solid var(--black-grey); + border-radius: 0.5rem; + cursor: row-resize; + +} + +.progress-bar__input-slider[step] { + background-color: transparent; + background-image: repeating-linear-gradient(to right, green); +} +.progress-bar__input-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 12px; + box-shadow: -20rem 0 0 20rem rgba(#000, 0.2); +} +.progress-bar__input-slider::-moz-range-thumb { + border: none; + width: 12px; + box-shadow: -20rem 0 0 20rem rgba(#000, 0.2); +} */ + +.progress-bar__input-slider { + -webkit-appearance: none; + appearance: none; + width: 20rem; + height: 16px; + cursor: pointer; + outline: none; + overflow: hidden; + border: 2px solid black; + border-radius: 0.5rem; + cursor: row-resize; +} + +.progress-bar__input-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 0; + box-shadow: -20rem 0 0 20rem rgba(black, 0.5); +} + +.progress-bar__input-slider::-moz-range-thumb { + border: none; + width: 0; + box-shadow: -20rem 0 0 20rem rgba(black, 0.5); +} + +.progress-bar__input-slider[step] { + background-color: transparent; + background: repeating-linear-gradient(to right, #e66465, #e66465 20px, black 25px); + /* background: repeating-linear-gradient(to right, , rgba(green, .2) calc(10% - 1px), black 10%); */ +} \ No newline at end of file From 8fa33c8575be71747b43546b362729896fa8e6ac Mon Sep 17 00:00:00 2001 From: Aryex82 <98796547+Aryex82@users.noreply.github.com> Date: Mon, 17 Jul 2023 14:29:34 +0000 Subject: [PATCH 03/16] made progress on progress bar css --- app/components/progress-bar.hbs | 11 ++-- app/components/task-details.hbs | 4 +- app/styles/progress-bar.css | 107 +++++--------------------------- app/styles/tasks.css | 4 +- 4 files changed, 24 insertions(+), 102 deletions(-) diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs index a9e7a749..33201493 100644 --- a/app/components/progress-bar.hbs +++ b/app/components/progress-bar.hbs @@ -1,4 +1,4 @@ -
+
- {{@value}} - -
  \ No newline at end of file +
\ No newline at end of file diff --git a/app/components/task-details.hbs b/app/components/task-details.hbs index 5267f5d4..ee484ec4 100644 --- a/app/components/task-details.hbs +++ b/app/components/task-details.hbs @@ -3,7 +3,6 @@

{{@task.title}}

-
@@ -27,8 +26,7 @@
{{#if @task.purpose}} -

Purpose: {{@task.purpose}}

+

Purpose: {{@task.purpose}}

{{/if}} \ No newline at end of file diff --git a/app/styles/progress-bar.css b/app/styles/progress-bar.css index df9beb16..d3612ab8 100644 --- a/app/styles/progress-bar.css +++ b/app/styles/progress-bar.css @@ -1,119 +1,42 @@ -/* .progress-bar__input { - -webkit-appearance: none; - appearance: none; - width: 80%; - height: 9px; - cursor: pointer; - outline: none; - overflow: hidden; - border-radius: 9px; - border: 2px solid var(--black-grey); -} - -.progress-bar__input:disabled { - pointer-events: none; -} - -.progress-bar__input::-webkit-slider-runnable-track { - height: 9px; - background: var(--range-slider-background); - border-radius: 9px; -} - -.progress-bar__input::-moz-range-track { - height: 9px; - background: var(--range-slider-background); - border-radius: 9px; -} - -.progress-bar__input::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - height: 9px; - width: 9px; - background-color: var(--progress-bar-color); - border-radius: 50%; - border: 2px solid var(--progress-bar-color); - transition: 0.25s ease-in-out; - box-shadow: -407px 0 0 400px var(--progress-bar-color); -} -.progress-bar__input::-webkit-slider-thumb:active, -.task-card__progress-bar-container__progress-bar:hover .progress-bar__input:not(:disabled)::-webkit-slider-thumb { - background-color: var(--white); +.progress-bar-container{ + display: flex; + gap: 4px; } -.progress-bar__input::-moz-range-thumb { - background-color: var(--progress-bar-color); - border-radius: 50%; - height: 4.5px; - width: 4.5px; - border: 2px solid var(--progress-bar-color); - transition: 0.25s ease-in-out; - box-shadow: -407px 0 0 400px var(--progress-bar-color); +.progress-bar__button{ + width: 1.4rem; + height: 1.2rem; + font-size: 50%; + border: 2px solid black; + border-radius: 4px; } - -.progress-bar__input::-moz-range-thumb:active, -.task-card__progress-bar-container__progress-bar:hover .progress-bar__input:not(:disabled)::-moz-range-thumb { - background-color: var(--white); -} */ -/* -.progress-bar__input-slider { - -webkit-appearance: none; - appearance: none; - width: 80%; - height: 16px; - cursor: pointer; - outline: none; - overflow: hidden; - border: 2px solid var(--black-grey); - border-radius: 0.5rem; - cursor: row-resize; - -} - -.progress-bar__input-slider[step] { - background-color: transparent; - background-image: repeating-linear-gradient(to right, green); -} -.progress-bar__input-slider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 12px; - box-shadow: -20rem 0 0 20rem rgba(#000, 0.2); -} -.progress-bar__input-slider::-moz-range-thumb { - border: none; - width: 12px; - box-shadow: -20rem 0 0 20rem rgba(#000, 0.2); -} */ - .progress-bar__input-slider { -webkit-appearance: none; appearance: none; - width: 20rem; - height: 16px; + width: 90%; + height: 1.2rem; cursor: pointer; outline: none; overflow: hidden; border: 2px solid black; - border-radius: 0.5rem; + border-radius: 4px; cursor: row-resize; } .progress-bar__input-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 0; - box-shadow: -20rem 0 0 20rem rgba(black, 0.5); + box-shadow: -20rem 0 0 20rem rgba(0, 128,0, 0.5); } .progress-bar__input-slider::-moz-range-thumb { border: none; width: 0; - box-shadow: -20rem 0 0 20rem rgba(black, 0.5); -} + box-shadow: -20rem 0 0 20rem rgba(0, 128, 0, 0.5);} .progress-bar__input-slider[step] { background-color: transparent; - background: repeating-linear-gradient(to right, #e66465, #e66465 20px, black 25px); + background: repeating-linear-gradient(to right,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) calc(10% - 1px), black 10%); /* background: repeating-linear-gradient(to right, , rgba(green, .2) calc(10% - 1px), black 10%); */ } \ No newline at end of file diff --git a/app/styles/tasks.css b/app/styles/tasks.css index 016cd280..f540fd16 100644 --- a/app/styles/tasks.css +++ b/app/styles/tasks.css @@ -88,14 +88,14 @@ flex-shrink: 0; } -.task-card__progress-bar-container__progress-bar { +/* .task-card__progress-bar-container__progress-bar { background-color: transparent; overflow: hidden; position: relative; display: flex; align-items: center; gap: 5px; -} +} */ .progress-bar__input { -webkit-appearance: none; From af6bb51727e111ad69dff2d825eafc4338ee3e51 Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Tue, 18 Jul 2023 09:07:43 +0530 Subject: [PATCH 04/16] made more progress on progress bar --- app/components/progress-bar.hbs | 23 +++++++++++++----- app/components/progress-bar.js | 42 +++++++++++++++++++++++++++++++++ app/components/task/holder.js | 3 ++- app/styles/progress-bar.css | 34 +++++++++++++++++++++----- app/styles/tasks.css | 8 +++---- package.json | 9 ++++--- public/icons/edit-icon.svg | 5 ++++ 7 files changed, 104 insertions(+), 20 deletions(-) create mode 100644 app/components/progress-bar.js create mode 100644 public/icons/edit-icon.svg diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs index 33201493..c1f14473 100644 --- a/app/components/progress-bar.hbs +++ b/app/components/progress-bar.hbs @@ -1,19 +1,30 @@ -
+
+
\ No newline at end of file diff --git a/app/components/progress-bar.js b/app/components/progress-bar.js new file mode 100644 index 00000000..9ae89281 --- /dev/null +++ b/app/components/progress-bar.js @@ -0,0 +1,42 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { debounce } from 'lodash'; +export default class ProgressBarComponent extends Component { + @tracked isEditable = false; + + @tracked value = this.args.value; + + @action turnEditModeOn() { + this.isEditable = true; + // document.getElementById('progress-bar-input').focus(); + } + + @action onInput(e) { + this.value = e.target.value; + // this.args.onInput(e); + } + @action something() { + console.log('helo'); + } + + @action onHover(e) { + this.debouncedHover(e); + } + @action onChange(e) { + this.debouncedChange(e); + } + + debouncedHover = debounce(async (e) => { + const rangeWidth = e.target.offsetWidth; + const offsetX = e.offsetX; + let newValue = Math.round((offsetX / rangeWidth) * 100); + newValue = newValue + (10 - (newValue % 10)); + this.value = newValue; + }, 0); + + debouncedChange = debounce(async (e) => { + await this.args.onUpdate(e); + this.isEditable = false; + }, 1000); +} diff --git a/app/components/task/holder.js b/app/components/task/holder.js index 1153550a..85d0617c 100644 --- a/app/components/task/holder.js +++ b/app/components/task/holder.js @@ -71,13 +71,14 @@ export default class TasksHolderComponent extends Component { } @action - onPercentageChange(e) { + async onPercentageChange(e) { const { value } = e.target; this.percentCompleted = value; this.args.onTaskChange('percentCompleted', value); if (value === TASK_PERCENTAGE.completedPercentage) { this.percentCompleted = this.args.task.percentCompleted; } + await this.onUpdate(this.args.task.id); } @action diff --git a/app/styles/progress-bar.css b/app/styles/progress-bar.css index d3612ab8..601edccc 100644 --- a/app/styles/progress-bar.css +++ b/app/styles/progress-bar.css @@ -6,28 +6,39 @@ .progress-bar__button{ width: 1.4rem; - height: 1.2rem; + height: 1.1rem; font-size: 50%; + font-weight: bold; border: 2px solid black; border-radius: 4px; + background-color: transparent; +} + +.progress-bar__edit-icon{ + width: 75%; + height: 75%; } .progress-bar__input-slider { -webkit-appearance: none; appearance: none; width: 90%; - height: 1.2rem; + height: 1.1rem; cursor: pointer; outline: none; overflow: hidden; border: 2px solid black; border-radius: 4px; - cursor: row-resize; + cursor:pointer; +} + +.progress-bar__input-slider:disabled{ + cursor: auto; } .progress-bar__input-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 0; - box-shadow: -20rem 0 0 20rem rgba(0, 128,0, 0.5); + box-shadow: -20rem 0 0 20rem var(--progress-bar-color); } .progress-bar__input-slider::-moz-range-thumb { @@ -38,5 +49,16 @@ .progress-bar__input-slider[step] { background-color: transparent; background: repeating-linear-gradient(to right,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) calc(10% - 1px), black 10%); - /* background: repeating-linear-gradient(to right, , rgba(green, .2) calc(10% - 1px), black 10%); */ -} \ No newline at end of file +} + +.progress-bar__edit-hover:hover { + background-color: rgba(128, 128, 128, 0.5); +} + +.progress-bar-container:hover ,.progress-bar-container:active { + .progress-bar__button{ + color: var(--progress-bar-color); + font-weight: bolder; + } + +} diff --git a/app/styles/tasks.css b/app/styles/tasks.css index f540fd16..7ae009ab 100644 --- a/app/styles/tasks.css +++ b/app/styles/tasks.css @@ -18,17 +18,17 @@ } .progress-bar-red { - --progress-bar-color: red; + --progress-bar-color:rgba(255, 0, 0, 0.8); } .progress-bar-yellow { - --progress-bar-color: #ecef08; + --progress-bar-color: rgba(255, 255, 0, 0.9); } .progress-bar-green { - --progress-bar-color: green; + --progress-bar-color: rgba(0, 128, 0, 0.9); } .progress-bar-orange { - --progress-bar-color: orange; + --progress-bar-color: rgba(255, 165, 0,0.9); } .tasks-page { diff --git a/package.json b/package.json index e4d944aa..97b6f3d7 100644 --- a/package.json +++ b/package.json @@ -32,14 +32,16 @@ "dotenv": "^16.0.1", "ember-cli-qrcode": "^2.1.0", "ember-click-outside": "^5.0.1", + "ember-resources": "^5.6.0", + "lodash": "^4.17.21", "mixpanel-browser": "^2.43.0", "webpack": "^5.74.0", - "webpack-5": "^0.0.0", - "ember-resources": "^5.6.0" + "webpack-5": "^0.0.0" }, "devDependencies": { "@ember/jquery": "^2.0.0", "@ember/optional-features": "^2.0.0", + "@ember/render-modifiers": "^2.1.0", "@ember/test-helpers": "^2.2.1", "@fortawesome/ember-fontawesome": "^0.2.3", "@fortawesome/free-solid-svg-icons": "^5.15.2", @@ -57,12 +59,14 @@ "ember-cli-dependency-checker": "^3.2.0", "ember-cli-htmlbars": "^5.3.2", "ember-cli-inject-live-reload": "^2.0.2", + "ember-cli-mirage": "^2.4.0", "ember-cli-sri": "^2.1.1", "ember-cli-terser": "^4.0.1", "ember-data": "~3.25.0", "ember-export-application-global": "^2.0.1", "ember-load-initializers": "^2.1.2", "ember-maybe-import-regenerator": "^0.1.6", + "ember-modifier": "^4.1.0", "ember-page-title": "^6.2.1", "ember-qunit": "^5.1.3", "ember-resolver": "^8.0.2", @@ -85,7 +89,6 @@ "qunit": "^2.14.0", "qunit-dom": "^1.6.0", "toastr": "^2.1.4", - "ember-cli-mirage": "^2.4.0", "tracked-maps-and-sets": "^3.0.2" }, "engines": { diff --git a/public/icons/edit-icon.svg b/public/icons/edit-icon.svg new file mode 100644 index 00000000..564b2625 --- /dev/null +++ b/public/icons/edit-icon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From 6de4449db9fde90926620bb10495b16d25b93395 Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Wed, 19 Jul 2023 21:11:04 +0530 Subject: [PATCH 05/16] progress bar added dev flag and added a modifier --- app/components/progress-bar.hbs | 53 +++++++++++++------ app/components/progress-bar.js | 41 ++++++++------- app/components/task-details.hbs | 33 ++++++++++-- app/components/task/holder.hbs | 2 + app/components/task/holder.js | 4 ++ app/components/tasks.hbs | 1 + app/controllers/tasks.js | 3 +- app/modifiers/focus-when.js | 7 +++ app/styles/progress-bar.css | 90 +++++++++++++++++---------------- app/styles/tasks.css | 9 ++-- app/templates/tasks.hbs | 1 + 11 files changed, 158 insertions(+), 86 deletions(-) create mode 100644 app/modifiers/focus-when.js diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs index c1f14473..c09385cf 100644 --- a/app/components/progress-bar.hbs +++ b/app/components/progress-bar.hbs @@ -1,30 +1,51 @@ -
+
\ No newline at end of file diff --git a/app/components/progress-bar.js b/app/components/progress-bar.js index 9ae89281..c9682d5c 100644 --- a/app/components/progress-bar.js +++ b/app/components/progress-bar.js @@ -4,39 +4,42 @@ import { action } from '@ember/object'; import { debounce } from 'lodash'; export default class ProgressBarComponent extends Component { @tracked isEditable = false; - @tracked value = this.args.value; + lastEditTime = null; @action turnEditModeOn() { this.isEditable = true; - // document.getElementById('progress-bar-input').focus(); + this.lastEditTime = Date.now(); + this.setEditableToFalse(); + } + + setEditableToFalse() { + setTimeout(() => { + if (this.isEditable && Date.now() - this.lastEditTime >= 5000) { + this.isEditable = false; + } else { + this.setEditableToFalse(); + } + }, 5000); } @action onInput(e) { + this.lastEditTime = Date.now(); this.value = e.target.value; - // this.args.onInput(e); - } - @action something() { - console.log('helo'); + if (this.args.onInput) { + this.args.onInput(this.value); + } } - @action onHover(e) { - this.debouncedHover(e); - } @action onChange(e) { - this.debouncedChange(e); + this.lastEditTime = Date.now(); + if (this.args.onChange) { + this.debouncedChange(e); + } } - debouncedHover = debounce(async (e) => { - const rangeWidth = e.target.offsetWidth; - const offsetX = e.offsetX; - let newValue = Math.round((offsetX / rangeWidth) * 100); - newValue = newValue + (10 - (newValue % 10)); - this.value = newValue; - }, 0); - debouncedChange = debounce(async (e) => { - await this.args.onUpdate(e); + await this.args.onChange(e); this.isEditable = false; }, 1000); } diff --git a/app/components/task-details.hbs b/app/components/task-details.hbs index ee484ec4..c077d04b 100644 --- a/app/components/task-details.hbs +++ b/app/components/task-details.hbs @@ -3,8 +3,34 @@

{{@task.title}}

- -
+ {{#if @progressBarDev}} + {{#if (eq @task.status 'IN_PROGRESS')}} + + {{/if}} + {{else}} + + {{@percentCompleted}}% + {{/if}} + +
@@ -26,7 +52,8 @@
{{#if @task.purpose}} -

Purpose: {{@task.purpose}}

+

Purpose: {{@task.purpose}}

{{/if}} \ No newline at end of file diff --git a/app/components/task/holder.hbs b/app/components/task/holder.hbs index 2b96de6f..1f3a020a 100644 --- a/app/components/task/holder.hbs +++ b/app/components/task/holder.hbs @@ -7,6 +7,8 @@ @percentCompleted={{this.percentCompleted}} @progressBarClass={{this.progressBarClass}} @isProgressBarDisabled={{this.isProgressBarDisabled}} + @onInputChange={{this.progressBarInputChange}} + @progressBarDev={{@progressBarDev}} />
diff --git a/app/components/task/holder.js b/app/components/task/holder.js index 85d0617c..bf4642c4 100644 --- a/app/components/task/holder.js +++ b/app/components/task/holder.js @@ -66,6 +66,10 @@ export default class TasksHolderComponent extends Component { return 'progress-bar-yellow'; } + @action progressBarInputChange(value) { + this.percentCompleted = value; + } + get isProgressBarDisabled() { return this.args.task.status !== TASK_KEYS.IN_PROGRESS; } diff --git a/app/components/tasks.hbs b/app/components/tasks.hbs index 1ee3fd20..b060bb30 100644 --- a/app/components/tasks.hbs +++ b/app/components/tasks.hbs @@ -23,6 +23,7 @@ @onTaskUpdate={{@onTaskUpdate}} @userSelectedTask={{@userSelectedTask}} @disabled={{@disabled}} + @progressBarDev={{@progressBarDev}} />
{{/each}} diff --git a/app/controllers/tasks.js b/app/controllers/tasks.js index 917d448a..4283b3b8 100644 --- a/app/controllers/tasks.js +++ b/app/controllers/tasks.js @@ -14,7 +14,7 @@ import { toastNotificationTimeoutOptions } from '../constants/toast-notification const API_BASE_URL = ENV.BASE_API_URL; export default class TasksController extends Controller { - queryParams = ['dev']; + queryParams = ['dev', 'progressBarDev']; @service toast; TASK_KEYS = TASK_KEYS; taskStatusList = TASK_STATUS_LIST; @@ -25,6 +25,7 @@ export default class TasksController extends Controller { DEFAULT_TASK_TYPE = this.allTasksObject; @tracked dev = false; + @tracked progressBarDev = null; @tracked isUpdating = false; @tracked assignTask = false; @tracked closeDisabled = false; diff --git a/app/modifiers/focus-when.js b/app/modifiers/focus-when.js new file mode 100644 index 00000000..fa90e385 --- /dev/null +++ b/app/modifiers/focus-when.js @@ -0,0 +1,7 @@ +import { modifier } from 'ember-modifier'; + +export default modifier(function focusWhen(element, [isFocused]) { + if (isFocused) { + element.focus(); + } +}); diff --git a/app/styles/progress-bar.css b/app/styles/progress-bar.css index 601edccc..7b8c1729 100644 --- a/app/styles/progress-bar.css +++ b/app/styles/progress-bar.css @@ -1,64 +1,68 @@ - -.progress-bar-container{ - display: flex; - gap: 4px; +.progress-bar-container { + display: flex; + gap: 4px; } -.progress-bar__button{ - width: 1.4rem; - height: 1.1rem; - font-size: 50%; - font-weight: bold; - border: 2px solid black; - border-radius: 4px; - background-color: transparent; +.progress-bar__button { + width: 1.4rem; + height: 1.1rem; + font-size: 60%; + font-weight: bolder; + text-justify: auto; + border: 2px solid black; + border-radius: 4px; + background-color: transparent; } -.progress-bar__edit-icon{ - width: 75%; - height: 75%; +.progress-bar__edit-icon { + width: 85%; + height: 85%; } .progress-bar__input-slider { - -webkit-appearance: none; - appearance: none; - width: 90%; - height: 1.1rem; - cursor: pointer; - outline: none; - overflow: hidden; - border: 2px solid black; - border-radius: 4px; - cursor:pointer; + -webkit-appearance: none; + appearance: none; + width: 90%; + height: 1.1rem; + cursor: pointer; + outline: none; + overflow: hidden; + border: 2px solid black; + border-radius: 4px; + cursor: pointer; } - -.progress-bar__input-slider:disabled{ - cursor: auto; +.progress-bar__input-slider:focus { + box-shadow: 0 0 0 1px var(--progress-bar-color); +} +.progress-bar__input-slider:disabled { + cursor: auto; } .progress-bar__input-slider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 0; - box-shadow: -20rem 0 0 20rem var(--progress-bar-color); + -webkit-appearance: none; + width: 0; + box-shadow: -20rem 0 0 20rem var(--progress-bar-color); } .progress-bar__input-slider::-moz-range-thumb { - border: none; - width: 0; - box-shadow: -20rem 0 0 20rem rgba(0, 128, 0, 0.5);} + border: none; + width: 0; + box-shadow: -20rem 0 0 20rem var(--progress-bar-color); +} .progress-bar__input-slider[step] { - background-color: transparent; - background: repeating-linear-gradient(to right,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) calc(10% - 1px), black 10%); + background-color: transparent; + background: repeating-linear-gradient( + to right, + rgb(255, 255, 255), + rgb(255, 255, 255) calc(10.05% - 1.5px), + black 10.05% + ); } .progress-bar__edit-hover:hover { - background-color: rgba(128, 128, 128, 0.5); + background-color: rgba(128, 128, 128, 0.5); } -.progress-bar-container:hover ,.progress-bar-container:active { - .progress-bar__button{ - color: var(--progress-bar-color); - font-weight: bolder; - } - +.progress-bar__edit-icon-path-inner { + fill: var(--progress-bar-color); } diff --git a/app/styles/tasks.css b/app/styles/tasks.css index 7ae009ab..7fa599d1 100644 --- a/app/styles/tasks.css +++ b/app/styles/tasks.css @@ -83,19 +83,20 @@ } .task-card__progress-bar-container { - padding: 1em; - width: 15rem; + padding-right: 0.5em; + padding-bottom: 0.5em; + width: 14.5rem; flex-shrink: 0; } -/* .task-card__progress-bar-container__progress-bar { +.task-card__progress-bar-container__progress-bar { background-color: transparent; overflow: hidden; position: relative; display: flex; align-items: center; gap: 5px; -} */ +} .progress-bar__input { -webkit-appearance: none; diff --git a/app/templates/tasks.hbs b/app/templates/tasks.hbs index 726175ca..cea0bcb6 100644 --- a/app/templates/tasks.hbs +++ b/app/templates/tasks.hbs @@ -22,6 +22,7 @@ @handleAssignment={{this.handleAssignment}} @findingTask={{this.findingTask}} @dev={{this.dev}} + @progressBarDev={{this.progressBarDev}} /> Date: Thu, 20 Jul 2023 09:11:46 +0530 Subject: [PATCH 06/16] progress bar added dev flag and added a modifier --- app/components/progress-bar.hbs | 4 +- app/components/progress-bar.js | 2 +- app/components/task-details.hbs | 8 +- app/styles/progress-bar.css | 8 +- package.json | 1 - public/icons/edit-icon.svg | 5 - .../components/progress-bar-test.js | 27 +- yarn.lock | 2320 +++++++++-------- 8 files changed, 1290 insertions(+), 1085 deletions(-) delete mode 100644 public/icons/edit-icon.svg diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs index c09385cf..545af820 100644 --- a/app/components/progress-bar.hbs +++ b/app/components/progress-bar.hbs @@ -2,7 +2,7 @@