Merge pull request #229 from gushil/main-OC-23960-fixed-repeat-button…

…s-grid-theme [main] OC-23960 Repeat buttons in grid theme using icon instead of text
OpenClinica · Dec 20, 2024 · 55e4779 · 55e4779
2 parents 93af88b + eebc5e7
commit 55e4779
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/packages/enketo-core/src/js/print.js b/packages/enketo-core/src/js/print.js
@@ -7,6 +7,7 @@
 import $ from 'jquery';
 import dialog from 'enketo/dialog';
 import { MutationsTracker } from './dom-utils';
+import { isGrid } from './utils';
 
 let dpi;
 let printStyleSheet;
@@ -105,18 +106,6 @@ function styleReset() {
     $('.back-to-screen-view').off('click').remove();
 }
 
-/**
- * Tests if the form element is set to use the Grid Theme.
- *
- * @static
- * @return {boolean} whether the form definition was defined to use the Grid theme
- */
-function isGrid() {
-    return /theme-.*grid.*/.test(
-        document.querySelector('form.or').getAttribute('class')
-    );
-}
-
 /**
  * Fixes a Grid Theme layout programmatically by imitating CSS multi-line flexbox in JavaScript.
  *

diff --git a/packages/enketo-core/src/js/repeat.js b/packages/enketo-core/src/js/repeat.js
@@ -112,6 +112,7 @@ import {
     getChildren,
     getSiblingElementsAndSelf,
 } from './dom-utils';
+import { isGrid } from './utils';
 import { isStaticItemsetFromSecondaryInstance } from './itemset';
 import { invalidateRepeatCaches } from './dom';
 
@@ -183,17 +184,29 @@ export default {
         $repeatInfos
             .filter('*:not([data-repeat-fixed]):not([data-repeat-count])')
             .append(
-                `<button type="button" class="btn btn-default add-repeat-btn" data-i18n="repeat.addanother.btn">${t(
-                    'repeat.addanother.btn'
-                )}</button>`
+                `<button type="button" class="btn btn-default add-repeat-btn" ${
+                    isGrid() ? '' : 'data-i18n="repeat.addanother.btn"'
+                }>
+                    ${
+                        isGrid()
+                            ? '<i class="icon icon-plus"> </i>'
+                            : t('repeat.addanother.btn')
+                    }
+                </button>`
             )
             .siblings('.or-repeat')
             .append(
                 `<div class="repeat-buttons"><button type="button" ${
                     disableFirstRepeatRemoval ? ' disabled ' : ' '
-                }class="btn btn-default remove" data-i18n="repeat.remove.btn">${t(
-                    'repeat.remove.btn'
-                )}</button></div>`
+                }class="btn btn-default remove" ${
+                    isGrid() ? '' : 'data-i18n="repeat.remove.btn"'
+                }>
+                    ${
+                        isGrid()
+                            ? '<i class="icon icon-minus"> </i>'
+                            : t('repeat.remove.btn')
+                    }
+                </button></div>`
             );
         /**
          * The model also requires storing repeat templates for repeats that do not have a jr:template.

diff --git a/packages/enketo-core/src/js/utils.js b/packages/enketo-core/src/js/utils.js
@@ -260,6 +260,18 @@ function encodeHtmlEntities(text) {
         .replace(/"/g, '&quot;');
 }
 
+/**
+ * Tests if the form element is set to use the Grid Theme.
+ *
+ * @static
+ * @return {boolean} whether the form definition was defined to use the Grid theme
+ */
+function isGrid() {
+    return /theme-.*grid.*/.test(
+        document.querySelector('form.or').getAttribute('class')
+    );
+}
+
 export {
     parseFunctionFromExpression,
     stripQuotes,
@@ -272,4 +284,5 @@ export {
     joinPath,
     getScript,
     encodeHtmlEntities,
+    isGrid,
 };