generated from Real-Dev-Squad/website-template
-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
13 changed files
with
357 additions
and
26 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 |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <div ...attributes class='progress-slider'> | ||
| <input | ||
| {{focus-when this.isEditable}} | ||
| aria-label='progress slider for IN-Progress tasks' | ||
| data-test-progress-bar | ||
| class='progress-slider__input-slider' | ||
| id='progress-slider-input' | ||
| type='range' | ||
| value={{@value}} | ||
| min='0' | ||
| max='100' | ||
| step='10' | ||
| {{on 'change' this.onChange}} | ||
| {{on 'input' this.onInput}} | ||
| disabled={{not this.isEditable}} | ||
| /> | ||
| <button | ||
| data-test-progress-bar-button | ||
| {{on 'click' this.turnEditModeOn}} | ||
| class='progress-slider__button | ||
| {{unless this.isEditable "progress-slider__button--hover"}}' | ||
| type='button' | ||
| > | ||
| {{#if this.isEditable}} | ||
| <span class='progress-slider__button__text'>{{@value}}</span> | ||
| {{else}} | ||
| <svg | ||
| class='progress-slider__button__edit-icon' | ||
| viewBox='0 0 24 24' | ||
| fill='none' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path | ||
| class='progress-slider__button__edit-icon__inner' | ||
| opacity='0.5' | ||
| d='M4 20H8L18 10L14 6L4 16V20Z' | ||
| fill='#000000' | ||
| /> | ||
| <path | ||
| class='progress-slider__button__edit-icon__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> |
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,47 @@ | ||
| import Component from '@glimmer/component'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
| import { action } from '@ember/object'; | ||
| import { debounce } from '@ember/runloop'; | ||
|
|
||
| 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(() => { | ||
| const timeDelta = Date.now() - this.lastEditTime; | ||
| if (this.isEditable && timeDelta >= 5000) { | ||
| this.isEditable = false; | ||
| } else if (this.isEditable) { | ||
| 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) { | ||
| debounce(this, this.debouncedChange, e, 600); | ||
| } | ||
| } | ||
|
|
||
| async debouncedChange(e) { | ||
| await this.args.onChange(e); | ||
| this.isEditable = false; | ||
| } | ||
| } |
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
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,81 @@ | ||
| :root { | ||
| --progress-bar-color: rgba(0, 128, 0, 0.9); | ||
| --light-grey: rgba(128, 128, 128, 0.5); | ||
| --black: black; | ||
| --white: white; | ||
| } | ||
| .progress-slider { | ||
| display: flex; | ||
| gap: 4px; | ||
| } | ||
|
|
||
| .progress-slider__button { | ||
| width: 1.5rem; | ||
| height: 1.1rem; | ||
| border: 2px solid var(--black); | ||
| border-radius: 4px; | ||
| background-color: transparent; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-items: center; | ||
| } | ||
|
|
||
| .progress-slider__button__text { | ||
| font-size: 0.6em; | ||
| font-weight: bolder; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .progress-slider__button__edit-icon { | ||
| width: 1rem; | ||
| height: 1rem; | ||
| margin: 3px; | ||
| } | ||
| .progress-slider__input-slider { | ||
| -webkit-appearance: none; | ||
| appearance: none; | ||
| width: 90%; | ||
| height: 1.1rem; | ||
| cursor: pointer; | ||
| outline: none; | ||
| overflow: hidden; | ||
| border: 2px solid var(--black); | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .progress-slider__input-slider:focus { | ||
| box-shadow: 0 0 0 2px var(--progress-bar-color); | ||
| } | ||
| .progress-slider__input-slider:disabled { | ||
| cursor: auto; | ||
| } | ||
|
|
||
| .progress-slider__input-slider::-webkit-slider-thumb { | ||
| -webkit-appearance: none; | ||
| width: 0; | ||
| box-shadow: -20rem 0 0 20rem var(--progress-bar-color); | ||
| } | ||
|
|
||
| .progress-slider__input-slider::-moz-range-thumb { | ||
| border: none; | ||
| width: 0; | ||
| box-shadow: -20rem 0 0 20rem var(--progress-bar-color); | ||
| } | ||
|
|
||
| .progress-slider__input-slider[step] { | ||
| background-color: transparent; | ||
| background: repeating-linear-gradient( | ||
| to right, | ||
| var(--white), | ||
| var(--white) calc(10.05% - 1.5px), | ||
| var(--black) 10.05% | ||
| ); | ||
| } | ||
|
|
||
| .progress-slider__button--hover:hover { | ||
| background-color: var(--light-grey); | ||
| } | ||
|
|
||
| .progress-slider__button__edit-icon__inner { | ||
| fill: var(--progress-bar-color); | ||
| } |
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
Oops, something went wrong.