FabMo / FabMo-Engine

The FabMo Engine - A software and apps ecosystem for digital fabrication.
http://gofabmo.org/
Apache License 2.0
55 stars 22 forks source link

UI: in Manual Keypad, remove number input spinners from "goto" axis data entry lines #909

Closed tedh-shopbot closed 2 years ago

tedh-shopbot commented 2 years ago

These are the up/dn indicators for incrementing or decrementing numbers that also display a validation failure if a decimal entry is out of sync. Turning off the error messages causes the spinner to only be available for integer increment.

This "spin the number up / spin the number down" function that is part of the "number input" box functionality of HTML5 is awkward and does not serve our needs in the manual keypad. The functionality can be removed for a class in CSS using something like this:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

I would also suggest doing a quick survey through our config forms and evaluate whether other uses of spinners is useful. (Note that they do not appear until you click the box.)

obra commented 2 years ago

https://appcode.app/how-to-remove-the-arrows-on-html-input-type-number/ shows off this solution including a link to a demo that confirms that this CSS will hide the arrows but won't disable the functionality.

https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types suggests you might just not want to use the number type for something like this.

Perl https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode the inputmode="decimal" attribute (without type="number" sounds like it's closer to what you want.)

An alternative would be to use the step attribute for numeric values that should have a different stepping than integers.

https://codepen.io/obra-the-animator/pen/QWQgVzj is an demo with examples of the options.

kyle-kingsbury commented 2 years ago

I believe https://github.com/FabMo/FabMo-Engine/pull/947 fixes this.