generated from Real-Dev-Squad/website-template
-
Notifications
You must be signed in to change notification settings - Fork 91
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update yarn lock file fix failing test fix failing test Revert "progress bar component" This reverts commit a6343df.
- Loading branch information
1 parent
d54300d
commit 5765e0e
Showing
13 changed files
with
202 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,51 @@ | ||
<div> | ||
<div ...attributes class='progress-bar-container'> | ||
<input | ||
...attributes | ||
{{focus-when this.isEditable}} | ||
aria-label='progress slider for IN-Progress tasks' | ||
data-test-task-progress-bar | ||
class='progress-bar__input-slider' | ||
id='input' | ||
id='progress-bar-input' | ||
type='range' | ||
value={{@value}} | ||
min="0" | ||
max="100" | ||
step="10" | ||
{{on 'change' @onUpdate}} | ||
min='0' | ||
max='100' | ||
step='10' | ||
{{on 'change' this.onChange}} | ||
{{on 'input' this.onInput}} | ||
disabled={{not this.isEditable}} | ||
/> | ||
{{@value}} | ||
<button type="button"> | ||
|
||
<button | ||
data-text-progress-bar-button | ||
{{on 'click' this.turnEditModeOn}} | ||
class='progress-bar__button | ||
{{unless this.isEditable "progress-bar__edit-hover"}}' | ||
type='button' | ||
> | ||
{{#if this.isEditable}} | ||
{{@value}} | ||
{{else}} | ||
<svg | ||
class='progress-bar__edit-icon' | ||
viewBox='0 0 24 24' | ||
fill='none' | ||
xmlns='http://www.w3.org/2000/svg' | ||
> | ||
<path | ||
class='progress-bar__edit-icon-path-inner' | ||
opacity='0.5' | ||
d='M4 20H8L18 10L14 6L4 16V20Z' | ||
fill='#000000' | ||
/> | ||
<path | ||
class='progress-bar__edit-icon-path-outer' | ||
d='M18 10L21 7L17 3L14 6M18 10L8 20H4V16L14 6M18 10L14 6' | ||
stroke='#000000' | ||
stroke-width='1.5' | ||
stroke-linecap='round' | ||
stroke-linejoin='round' | ||
/> | ||
</svg> | ||
{{/if}} | ||
</button> | ||
</div> | ||
|
||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
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; | ||
lastEditTime = null; | ||
|
||
@action turnEditModeOn() { | ||
this.isEditable = true; | ||
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; | ||
if (this.args.onInput) { | ||
this.args.onInput(this.value); | ||
} | ||
} | ||
|
||
@action onChange(e) { | ||
this.lastEditTime = Date.now(); | ||
if (this.args.onChange) { | ||
this.debouncedChange(e); | ||
} | ||
} | ||
|
||
debouncedChange = debounce(async (e) => { | ||
await this.args.onChange(e); | ||
this.isEditable = false; | ||
}, 1000); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { modifier } from 'ember-modifier'; | ||
|
||
export default modifier(function focusWhen(element, [isFocused]) { | ||
if (isFocused) { | ||
element.focus(); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,119 +1,68 @@ | ||
/* .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-container { | ||
display: flex; | ||
gap: 4px; | ||
} | ||
|
||
.progress-bar__input:disabled { | ||
pointer-events: none; | ||
.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__input::-webkit-slider-runnable-track { | ||
height: 9px; | ||
background: var(--range-slider-background); | ||
border-radius: 9px; | ||
.progress-bar__edit-icon { | ||
width: 85%; | ||
height: 85%; | ||
} | ||
.progress-bar__input::-moz-range-track { | ||
height: 9px; | ||
background: var(--range-slider-background); | ||
border-radius: 9px; | ||
.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; | ||
} | ||
.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-slider:focus { | ||
box-shadow: 0 0 0 1px 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-slider:disabled { | ||
cursor: auto; | ||
} | ||
|
||
.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-slider::-webkit-slider-thumb { | ||
-webkit-appearance: none; | ||
width: 0; | ||
box-shadow: -20rem 0 0 20rem 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::-moz-range-thumb { | ||
border: none; | ||
width: 0; | ||
box-shadow: -20rem 0 0 20rem var(--progress-bar-color); | ||
} | ||
|
||
.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); | ||
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__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__edit-hover:hover { | ||
background-color: rgba(128, 128, 128, 0.5); | ||
} | ||
|
||
.progress-bar__input-slider::-webkit-slider-thumb { | ||
-webkit-appearance: none; | ||
width: 0; | ||
box-shadow: -20rem 0 0 20rem rgba(black, 0.5); | ||
.progress-bar__edit-icon-path-inner { | ||
fill: var(--progress-bar-color); | ||
} | ||
|
||
.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%); */ | ||
} |
Oops, something went wrong.