Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Negative coh red #2682

Merged
merged 1 commit into from
May 3, 2018
Merged

Negative coh red #2682

merged 1 commit into from
May 3, 2018

Conversation

gevann
Copy link

@gevann gevann commented Apr 6, 2018

This PR aims to improve the user experience of the admin, specifically with the goal of alleviating the #2530. Since we do not know if generally admins prefer to get setting the count on hand (as they do now), or would rather mostly be adjusting it instead, this PR aims instead to provide the admin better visual feedback such that they are more aware when the number they are dealing with is negative or not.

Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea 👌

}
}
});
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we move this in its own file? Then this is more easily adjustable by stores.

@@ -98,6 +98,8 @@ dl {
.red { color: $color-5 }
.yellow { color: $color-6 }

.negative { color: $color-5 !important }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use a meaningful color variable (we have $red) here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need the !important here? Especially with this generic class this could cause headaches. Would a stronger selector like

input[type="number"].negative

work as well?

document.querySelector('body').addEventListener('input', function(e){
var el = e.target;
var isInputNumber = el instanceof HTMLInputElement && el.type == 'number';
if(isInputNumber){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we please the human eye by adding some spacing here?

var el = e.target;
var isInputNumber = el instanceof HTMLInputElement && el.type == 'number';
if(isInputNumber){
if(el.value < 0){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ditto?

@tvdeyen
Copy link
Member

tvdeyen commented Apr 6, 2018

Note to self. Enable javascript syntax linting on HoundCI

This commit aims to smooth out admin user interactions when dealing with
number by providing visual feedback of negative numbers

Having negative amounts of items is unintuitive, though necessary for
backordering. This commit calls out when a number is negative by
highlighting it in red.
@gevann
Copy link
Author

gevann commented Apr 6, 2018

Requested changes made, thanks!

@jhawthorn jhawthorn added the UI label Apr 9, 2018
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants