improve positioning of validation feedback
Also refactors the template to use Octance features.
This commit is contained in:
Jeldrik Hanschke
Jeldrik Hanschke
parent
56643d08eb
commit
6e26789b8b
4 changed files with 100 additions and 95 deletions
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
// Optional - Everything else
|
||||
@import "ember-bootstrap/utilities/display";
|
||||
@import "ember-bootstrap/utilities/float";
|
||||
@import "ember-bootstrap/utilities/screenreaders";
|
||||
@import "ember-bootstrap/type";
|
||||
@import "ember-bootstrap/tables";
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<div class="cr-form-wrapper box">
|
||||
{{#if errorMessage}}
|
||||
{{#bs-alert type="warning"}}
|
||||
<BsAlert type="warning">
|
||||
{{t errorMessage}}
|
||||
{{/bs-alert}}
|
||||
</BsAlert>
|
||||
{{/if}}
|
||||
|
||||
{{#bs-form
|
||||
onSubmit=(action "submit")
|
||||
formLayout="horizontal"
|
||||
model=this
|
||||
novalidate=true
|
||||
as |form|
|
||||
}}
|
||||
<BsForm
|
||||
@onSubmit={{action "submit"}}
|
||||
@formLayout="horizontal"
|
||||
@model={{this}}
|
||||
novalidate
|
||||
as |form|
|
||||
>
|
||||
<div class="days">
|
||||
{{#each dates as |date index|}}
|
||||
{{!
|
||||
|
|
@ -25,67 +25,68 @@
|
|||
}}
|
||||
data-test-day={{date.day}}
|
||||
>
|
||||
{{!
|
||||
show label only if it differ from label before
|
||||
Nested-helpers are called first and object-at requires a positive integer
|
||||
but returns undefined if an element with the passed in index does not exist.
|
||||
Therefore we pass in array length if index is null. Cause index starting
|
||||
by zero there can't be any element with an index === array.length.
|
||||
}}
|
||||
{{#form.element
|
||||
classNames="option"
|
||||
label=date.dayFormatted
|
||||
invisibleLabel=(eq date.dayFormatted (get (object-at (if index (sub index 1) dates.length) dates) "dayFormatted"))
|
||||
model=date
|
||||
property="time"
|
||||
as |el|
|
||||
}}
|
||||
<form.element
|
||||
@label={{date.dayFormatted}}
|
||||
{{!
|
||||
show label only if it differ from label before
|
||||
Nested-helpers are called first and object-at requires a positive integer
|
||||
but returns undefined if an element with the passed in index does not exist.
|
||||
Therefore we pass in array length if index is null. Cause index starting
|
||||
by zero there can't be any element with an index === array.length.
|
||||
}}
|
||||
@invisibleLabel={{eq date.dayFormatted (get (object-at (if index (sub index 1) dates.length) dates) "dayFormatted")}}
|
||||
@model={{date}}
|
||||
@property="time"
|
||||
class="option"
|
||||
as |el|
|
||||
>
|
||||
<div class="input-group">
|
||||
{{el.control
|
||||
autofocus=(unless index true false)
|
||||
id=el.id
|
||||
placeholder="00:00"
|
||||
type="time"
|
||||
value=el.value
|
||||
onChange=(action (mut el.value))
|
||||
}}
|
||||
<el.control
|
||||
@autofocus={{unless index true false}}
|
||||
@onChange={{action (mut el.value)}}
|
||||
@placeholder="00:00"
|
||||
@type="time"
|
||||
@value={{el.value}}
|
||||
id={{el.id}}
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
{{! disable delete button if there is only one option }}
|
||||
{{#bs-button
|
||||
onClick=(action "deleteOption" date)
|
||||
type="link"
|
||||
<BsButton
|
||||
@onClick={{action "deleteOption" date}}
|
||||
@type="link"
|
||||
class="delete"
|
||||
disabled=(lte dates.length 1)
|
||||
}}
|
||||
{{! disable delete button if there is only one option }}
|
||||
disabled={{lte dates.length 1}}
|
||||
>
|
||||
<span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
|
||||
<span class="sr-only">{{t "create.options.button.delete.label"}}</span>
|
||||
{{/bs-button}}
|
||||
</BsButton>
|
||||
</div>
|
||||
</div>
|
||||
{{#bs-button
|
||||
onClick=(action "addOption" date)
|
||||
type="link"
|
||||
size="sm"
|
||||
class="add cr-option-menu__button cr-option-menu__add-button"
|
||||
}}
|
||||
|
||||
<BsButton
|
||||
@onClick={{action "addOption" date}}
|
||||
@type="link"
|
||||
@size="sm"
|
||||
class="add cr-option-menu__button cr-option-menu__add-button float-left"
|
||||
>
|
||||
<span class="oi oi-plus" title={{t "create.options.button.add.label"}} aria-hidden="true"></span>
|
||||
<span class="sr-only">{{t "create.options.button.add.label"}}</span>
|
||||
{{/bs-button}}
|
||||
{{/form.element}}
|
||||
</BsButton>
|
||||
</form.element>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
{{#if (gt groupedDates.length 1)}}
|
||||
{{#form.element}}
|
||||
{{#bs-button
|
||||
onClick=(action "adoptTimesOfFirstDay")
|
||||
<form.element>
|
||||
<BsButton
|
||||
@onClick={{action "adoptTimesOfFirstDay"}}
|
||||
@size="sm"
|
||||
class="adopt-times-of-first-day"
|
||||
size="sm"
|
||||
}}
|
||||
>
|
||||
{{t "create.options-datetime.copy-first-line"}}
|
||||
{{/bs-button}}
|
||||
{{/form.element}}
|
||||
</BsButton>
|
||||
</form.element>
|
||||
{{/if}}
|
||||
|
||||
<div class="row cr-steps-bottom-nav">
|
||||
|
|
@ -96,5 +97,5 @@
|
|||
<NextButton />
|
||||
</div>
|
||||
</div>
|
||||
{{/bs-form}}
|
||||
</BsForm>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,43 @@
|
|||
{{#each options as |option index|}}
|
||||
{{! show label only on first item }}
|
||||
{{#form.element
|
||||
classNames="option"
|
||||
label=(unless index (t "create.options.options.label"))
|
||||
model=option
|
||||
property="title"
|
||||
as |el|
|
||||
}}
|
||||
<div class="input-group">
|
||||
{{el.control
|
||||
autofocus=(unless index true false)
|
||||
id=el.id
|
||||
value=el.value
|
||||
onChange=(action (mut el.value))
|
||||
}}
|
||||
<div class="input-group-append">
|
||||
{{! disable delete button if there is only one option }}
|
||||
{{#bs-button
|
||||
onClick=(action "deleteOption" option)
|
||||
type="link"
|
||||
class="delete"
|
||||
disabled=(lte options.length 1)
|
||||
}}
|
||||
<span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
|
||||
<span class="sr-only">{{t "create.options.button.delete.label"}}</span>
|
||||
{{/bs-button}}
|
||||
{{#let @form as |form|}}
|
||||
{{#each options as |option index|}}
|
||||
<form.element
|
||||
{{! show label only on first item }}
|
||||
@label={{unless index (t "create.options.options.label")}}
|
||||
@model={{option}}
|
||||
@property="title"
|
||||
class="option"
|
||||
as |el|
|
||||
>
|
||||
<div class="input-group">
|
||||
<el.control
|
||||
@autofocus={{unless index true false}}
|
||||
@id={{el.id}}
|
||||
@value={{el.value}}
|
||||
@onChange={{action (mut el.value)}}
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<BsButton
|
||||
@onClick={{action "deleteOption" option}}
|
||||
@type="link"
|
||||
class="delete"
|
||||
{{! disable delete button if there is only one option }}
|
||||
disabled={{lte options.length 1}}
|
||||
>
|
||||
<span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
|
||||
<span class="sr-only">{{t "create.options.button.delete.label"}}</span>
|
||||
</BsButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#bs-button
|
||||
onClick=(action "addOption" option)
|
||||
type="link"
|
||||
size="sm"
|
||||
class="add"
|
||||
}}
|
||||
<span class="oi oi-plus" title={{t "create.options.button.add.label"}} aria-hidden="true"></span>
|
||||
<span class="sr-only">{{t "create.options.button.add.label"}}</span>
|
||||
{{/bs-button}}
|
||||
{{/form.element}}
|
||||
{{/each}}
|
||||
|
||||
<BsButton
|
||||
@onClick={{action "addOption" option}}
|
||||
@type="link"
|
||||
@size="sm"
|
||||
class="add float-left"
|
||||
>
|
||||
<span class="oi oi-plus" title={{t "create.options.button.add.label"}} aria-hidden="true"></span>
|
||||
<span class="sr-only">{{t "create.options.button.add.label"}}</span>
|
||||
</BsButton>
|
||||
</form.element>
|
||||
{{/each}}
|
||||
{{/let}}
|
||||
|
|
@ -9,7 +9,7 @@ module.exports = {
|
|||
},
|
||||
css: {
|
||||
pattern: 'assets/*.css',
|
||||
limit: '15KB',
|
||||
limit: '15.3KB',
|
||||
compression: 'gzip'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue