Skip to content

Commit

Permalink
On #15: Open with inset button instead of on every focus
Browse files Browse the repository at this point in the history
  • Loading branch information
lentschi committed Apr 6, 2024
1 parent 89e676d commit 7577e81
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 8 deletions.
27 changes: 21 additions & 6 deletions app/assets/javascripts/unit-conversion-field.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,19 @@
this.converter = new UnitsConverter(this.units, this.ratios, this.supplierOrderUnit);

// if there's less then two options, don't even bother showing the popover:
if (this.unitSelectOptions.length < 2) {
this.disabled = this.unitSelectOptions.length < 2;

this.opener$ = $('<button class="conversion-popover-opener btn btn-ordering"><i class="icon-retweet"></i></button>');
this.opener$.attr('title', this.popoverTemplate.dataset.title);
this.field$.after(this.opener$);

if (this.disabled) {
this.opener$.attr('disabled', 'disabled');
this.opener$.attr('title', this.popoverTemplate.dataset.disabledTitle);
return;
}

this.initializeFocusListener();
this.initializeOpenListener();
}

loadArticleUnitRatios() {
Expand All @@ -50,10 +58,14 @@
}
}

initializeFocusListener() {
initializeOpenListener() {
this.field$.popover({title: this.popoverTemplate.dataset.title, placement: 'bottom', trigger: 'manual'});

this.field$.on('focus.unit-conversion-field',() => this.openPopover());
this.opener$.click((e) => {
e.preventDefault();
e.stopPropagation();
this.openPopover()
});

this.field$.on('shown.bs.popover', () => this.initializeConversionPopover(this.field$.next('.popover')));
}
Expand Down Expand Up @@ -95,6 +107,9 @@

this.quantityInput$ = contents$.find('input.quantity');
this.quantityInput$.val(String(this.field$.val()).replace(',', '.'));
this.quantityInput$
.focus()
.select();
this.applyButton$ = contents$.find('input.apply');
this.conversionResult$ = contents$.find('.conversion-result');
this.unitSelect$ = contents$.find('select.unit');
Expand Down Expand Up @@ -150,7 +165,7 @@
options.push(...this.getRelatedUnits(ratio.unit));
}

return options;
return options.sort((a, b) => a.label.localeCompare(b.label));
}

prepareConversion() {
Expand Down Expand Up @@ -234,7 +249,7 @@
if (conversionField === undefined || conversionField.field$ === undefined) {
break;
}
conversionField.field$.off('focus.unit-conversion-field');
conversionField.opener$.remove();
convertersMap.delete($(this)[0]);
break;
default: {
Expand Down
9 changes: 9 additions & 0 deletions app/assets/stylesheets/bootstrap_and_overrides.css.less
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,14 @@ details {
}
}

input:hover + .conversion-popover-opener, input:focus + .conversion-popover-opener, .conversion-popover-opener:hover, .conversion-popover-opener:focus {
opacity: 0.8;
}

input.with-conversion-popover-opener {
padding-right: 20px;
}

// bootstrap version 2 doesn't support some styles -> let's add makeshift ones manually for now:
.d-flex {
display: flex;
Expand Down Expand Up @@ -673,3 +681,4 @@ td.mr-1 > *:last-child {
.btn-group.numeric-step:has(> input:invalid) + .numeric-step-error {
display: block;
}

8 changes: 7 additions & 1 deletion app/assets/stylesheets/delta_input.less
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,20 @@ form.delta-input, .delta-input form {

.delta-input {
.btn.modify {
padding: 4px 0;
padding: 4px 8px;
width: 24px;
vertical-align: middle;
font-size: 10px;
line-height: 14px;
}

input[data-delta] {
text-align: center;
height: 14px;
}

.btn-ordering {
margin-top: 0px;
}

// handle error class outside of bootstrap controls
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
:javascript
const unitsData = #{raw(ArticleUnit.as_hash.to_json)};
%template#unit_conversion_popover_content_template
%div.popover_contents.text-right{"data-title" => t('helpers.unit_conversion_fields.title')}
%div.popover_contents.text-right{"data-title" => t('helpers.unit_conversion_fields.title'), "data-disabled-title" => t('helpers.unit_conversion_fields.disabled_title')}
.d-flex
%select.unit.mr-1{"data-ignore-onchange" => true}
%input.quantity.input-mini.numeric{:type => 'number', :min => 0}
Expand Down
1 change: 1 addition & 0 deletions config/locales/de.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1179,6 +1179,7 @@ de:
task_title: "%{name} (%{duration}h)"
unit_conversion_fields:
title: Einheiten umrechnen
disabled_title: Einheit kann nicht konvertiert werden
cancel: Abbrechen
apply: Anwenden
home:
Expand Down

0 comments on commit 7577e81

Please sign in to comment.