From 7577e815319bb3595655d9f2f24efa32d1404d91 Mon Sep 17 00:00:00 2001
From: Florian Lentsch <office@florian-lentsch.at>
Date: Sat, 6 Apr 2024 19:00:14 +0200
Subject: [PATCH] On #15: Open with inset button instead of on every focus

---
 .../javascripts/unit-conversion-field.js      | 27 ++++++++++++++-----
 .../bootstrap_and_overrides.css.less          |  9 +++++++
 app/assets/stylesheets/delta_input.less       |  8 +++++-
 .../_unit_conversion_popover_template.haml    |  2 +-
 config/locales/de.yml                         |  1 +
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/unit-conversion-field.js b/app/assets/javascripts/unit-conversion-field.js
index 7efde41d..c4fa59c9 100644
--- a/app/assets/javascripts/unit-conversion-field.js
+++ b/app/assets/javascripts/unit-conversion-field.js
@@ -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() {
@@ -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')));
     }
@@ -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');
@@ -150,7 +165,7 @@
         options.push(...this.getRelatedUnits(ratio.unit));
       }
 
-      return options;
+      return options.sort((a, b) => a.label.localeCompare(b.label));
     }
 
     prepareConversion() {
@@ -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: {
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.css.less b/app/assets/stylesheets/bootstrap_and_overrides.css.less
index c1cdf2f1..9005a213 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.css.less
+++ b/app/assets/stylesheets/bootstrap_and_overrides.css.less
@@ -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;
@@ -673,3 +681,4 @@ td.mr-1 > *:last-child {
 .btn-group.numeric-step:has(> input:invalid) + .numeric-step-error {
   display: block;
 }
+
diff --git a/app/assets/stylesheets/delta_input.less b/app/assets/stylesheets/delta_input.less
index 24a38d66..753d6a83 100644
--- a/app/assets/stylesheets/delta_input.less
+++ b/app/assets/stylesheets/delta_input.less
@@ -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
diff --git a/app/views/shared/js_templates/_unit_conversion_popover_template.haml b/app/views/shared/js_templates/_unit_conversion_popover_template.haml
index 69274718..60dba287 100644
--- a/app/views/shared/js_templates/_unit_conversion_popover_template.haml
+++ b/app/views/shared/js_templates/_unit_conversion_popover_template.haml
@@ -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}
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 98615b76..b9c687c1 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -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: