💄 922 Implement new design

maykinmedia · Oct 18, 2024 · 445a6c2 · 445a6c2
1 parent 6736cd4
commit 445a6c2
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 32 deletions.
diff --git a/src/sdg/components/templates/components/fields/localized.html b/src/sdg/components/templates/components/fields/localized.html
@@ -46,13 +46,20 @@
 
             {% if inline != True and 'dynamic_array' not in field.field.widget.template_name %}
             <footer class="form__control-footer reference" aria-hidden="true">
+                <p class="form__control-hint">Standaardtekst {% if field.language == 'nl' %}{% trans 'Nederlands' %}{% else %}{% trans 'Engels' %}{% endif %}</p>
                 <div class="reference__versions" aria-hidden="true">
                     <del></del>
                     <ins></ins>
                 </div>
                 <div class="form__input form__input--preview reference__preview">
                     <p class="italic">Geen standaardtekst beschikbaar</p>
                 </div>
+                <div class="button-group">
+                    <button class="button button--light button--small form__reference-btn" type="button" lang="{{field.language}}">
+                        <i class="fa fa-undo fa-xs"></i>
+                        {% trans 'Gebruik standaardtekst' %} {% if field.language == 'nl' %}{% trans 'Nederlands' %}{% else %}{% trans 'Engels' %}{% endif %}
+                    </button>
+                </div>
             </footer>
             {% endif %}
         </div>
@@ -62,29 +69,22 @@
 {% block footer %}
     {% for field in object.bound_fields %}
         {% if forloop.counter == 1 and inline != True and 'dynamic_array' not in field.field.widget.template_name %}
-        <footer class="form__field-footer">
-            <section class="form__field-toolbar" aria-hidden="true">
-                <div class="button-group">
-                    <button class="button button--light button--small form__diff-btn" type="button" title="{% trans "Toon de verschillen tussen mijn tekst en de standaardtekst" %}">
-                        <i class="fa fa-eye fa-xs"></i>
-                        {% trans 'Vergelijk met mijn teksten' %}
-                    </button>
-                    <button class="button button--light button--small reference__diff-btn" type="button" 
-                    title="{% trans "Toon de verschillen tussen mijn tekst en de standaardtekst" %}">
-                        <i class="fa fa-eye fa-xs"></i>
-                        {% trans 'Vergelijk met vorige versie' %}
-                    </button>
-                    <button class="button button--light button--small form__reference-btn" type="button">
-                        <i class="fa fa-undo fa-xs"></i>
-                        {% trans 'Gebruik standaardteksten' %}
-                    </button>
-                </div>
-            </section>
-
+        <footer class="form__field-footer button-group">
             <button class="button button--light button--small form__display-btn" type="button">
                 <i class="fa fa-chevron-right"></i>
                 {% trans 'Toon standaardtekst' %}
             </button>
+            <section class="form__field-toolbar button-group" aria-hidden="true">
+                <button class="button button--light button--small form__diff-btn" type="button" title="{% trans "Toon de verschillen tussen mijn tekst en de standaardtekst" %}">
+                    <i class="fa fa-eye fa-xs"></i>
+                    {% trans 'Vergelijk met mijn teksten' %}
+                </button>
+                <button class="button button--light button--small reference__diff-btn" type="button" 
+                    title="{% trans "Toon de verschillen tussen mijn tekst en de standaardtekst" %}">
+                    <i class="fa fa-eye fa-xs"></i>
+                    {% trans 'Vergelijk met vorige versie' %}
+                </button>
+            </section>
         </footer>
         {% endif %}
     {% endfor %}

diff --git a/src/sdg/js/components/form/abstract/reference_text_component.js b/src/sdg/js/components/form/abstract/reference_text_component.js
@@ -22,11 +22,6 @@ export class ReferenceTextComponent extends FormComponent {
      */
     bindEvents() {
         super.bindEvents();
-
-        // Hide the references if the reference copied and used.
-        this.getReferenceTextToolbar()
-            .querySelector(".form__reference-btn")
-            .addEventListener("click", () => this.setState({ active: false }));
     }
 
     /**

diff --git a/src/sdg/js/components/form/use_reference_button.js b/src/sdg/js/components/form/use_reference_button.js
@@ -14,10 +14,41 @@ class UseReferenceButton extends ReferenceTextComponent {
     onClick(event) {
         event.preventDefault();
 
-        Object.values(this.getCurrentVersionData()).forEach(({ input }) => {
-            // Set the value on both inputs at the same time (if there is a value availible)
-            if (input.value) this.setValue(input.id, input.value);
-        });
+        Object.entries(this.getCurrentVersionData()).forEach(
+            ([language, { input }]) => {
+                if (language == this.getControlLanguage() && input.value)
+                    this.setValue(input.id, input.value);
+            }
+        );
+    }
+
+    /**
+     * Updates the disabled state based on whether reference HTML is available.
+     */
+    updateDisabled() {
+        const referenceHTML = this.getCurrentReferenceHTML();
+
+        if (!referenceHTML || !referenceHTML[this.getControlLanguage()]) {
+            this.setState({ disabled: true });
+        }
+    }
+
+    /**
+     * Updates the label state based on disabled attribute.
+     */
+    updateLabel() {
+        // Make sure we keep track of the original label.
+        if (!this.state.originalLabel) {
+            this.setState({ originalLabel: this.node.textContent });
+        }
+
+        const referenceHTML = this.getCurrentReferenceHTML();
+        // Show custom label if no reference text is available.
+        if (!referenceHTML || !referenceHTML[this.getControlLanguage()]) {
+            this.setState({ label: "Geen standaardtekst beschikbaar" });
+        } else if (this.state.originalLabel) {
+            this.setState({ label: this.state.originalLabel });
+        }
     }
 }
 

diff --git a/src/sdg/scss/components/_form.scss b/src/sdg/scss/components/_form.scss
@@ -2,6 +2,7 @@
 
 .form {
   $form-gap: $grid-margin-2;
+  $form-gap--small: $grid-margin-1;
   $form-label-row-gap: $grid-margin-0;
   --field-border-color: #{$color_grey_light};
 
@@ -34,16 +35,25 @@
       gap: $form-gap;
       grid-area: bdy;
     }
+
+    &-footer{
+      gap: 8px;
+      margin-top: $form-gap;
+    }
 
     &-label {
       gap: $grid-margin-0;
       align-items: center;
       display: flex;
     }
 
-    &-toolbar[aria-hidden=true] {
-      display: none;
-      visibility: hidden;
+    &-toolbar {
+      // display: contents;
+
+      &[aria-hidden=true] {
+        display: none;
+        visibility: hidden;
+      }
     }
   }
 
@@ -171,7 +181,10 @@
     }
 
     &-footer {
-      grid-area: ftr;
+      margin-top: $form-gap--small;
+      display: flex;
+      flex-direction: column;
+      gap:$form-label-row-gap;
     }
 
   }