Pro 6974 update UI fields #4836
Conversation
| @@ -108,7 +155,7 @@ export default { | |||
| // adapted from http://danielstern.ca/range.css/#/ | |||
| .apos-range__input { | |||
| width: 100%; | |||
| margin: 5px 0; | |||
| margin: 5px 0; // Question: Shoud we keep that margin? It creates more space than for other fields. | |||
There was a problem hiding this comment.
@stuartromanek
Question: Should we keep this margin? It creates more space than for other fields.
| @@ -190,6 +192,10 @@ export default { | |||
| } | |||
| } | |||
|
|
|||
| .apos-field__label-meta:empty { | |||
| display: none; | |||
| } | |||
There was a problem hiding this comment.
Removes meta span container if it's empty (avoid to screwing up display with new range info part)
| .apos-field__info, | ||
| .apos-input-wrapper { | ||
| width: 48%; | ||
| } |
There was a problem hiding this comment.
Not sure it's a good thing to remove totally this. Or maybe we can add a flex-shrink: 1.
edit: This is what I did below, feel free to test it, this margin could be of another value of course
ValJed
force-pushed
the
pro-6974-update-ui-fields
branch
from
0bb9728 to
a29b735
Compare
| @@ -52,9 +55,6 @@ export default { | |||
| } | |||
| } | |||
| return false; | |||
| }, | |||
| convert(value) { | |||
| return parseFloat(value); | |||
There was a problem hiding this comment.
Not needed anymore since we ask vue to set the value of the range input as a number directly.
| @@ -5,10 +5,14 @@ export default { | |||
| mixins: [ AposInputMixin ], | |||
| data() { | |||
| return { | |||
| next: this.initNext(), | |||
There was a problem hiding this comment.
To avoid setting it to a string in AposInputMixin before to transform it
| @@ -21,27 +25,26 @@ export default { | |||
| isSet() { | |||
| // Detect whether or not a range is currently unset | |||
| // Use this flag to hide/show UI elements | |||
| if (this.next >= this.field.min) { | |||
| if (typeof this.next === 'number' && this.next >= this.field.min) { | |||
There was a problem hiding this comment.
Must be a number all the time now since we added the number modifier to range input
| } | ||
|
|
||
| return this.getDefault(); | ||
| }, |
There was a problem hiding this comment.
Must be a number all the time now since we added the number modifier to range input
| } | ||
|
|
||
| .apos-input-wrapper { | ||
| flex-grow: 1; | ||
| } |
There was a problem hiding this comment.
Improve label and field positions in inline
…o not end up to close to right elem
ValJed
force-pushed
the
pro-6974-update-ui-fields
branch
from
ffbae39 to
cd19f50
Compare
PRO-6974
Summary
See tickets, also tries to improve some inline generic style.
What are the specific steps to test this change?
See design, to test with this palette PR
Cypress tests 🟢
What kind of change does this PR introduce?
Make sure the PR fulfills these requirements: