Merge pull request #33844 from dimagi/em/stripe-repeats-attribute

Apply repeat striping with stripe-repeats appearance attribute
dimagi · Dec 11, 2023 · 7679bdf · 7679bdf
2 parents 15ae45f + d5fa19e
commit 7679bdf
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js
@@ -41,6 +41,7 @@ hqDefine("cloudcare/js/form_entry/const", function () {
         BUTTON_SELECT: 'button-select',
         SHORT: 'short',
         MEDIUM: 'medium',
+        STRIPE_REPEATS: 'stripe-repeats',
 
         // Note it's important to differentiate these two
         NO_PENDING_ANSWER: undefined,

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
@@ -590,6 +590,7 @@ hqDefine("cloudcare/js/form_entry/form_ui", function () {
         };
 
         var styles = _.has(json, 'style') && json.style && json.style.raw ? json.style.raw.split(/\s+/) : [];
+        self.stripeRepeats = _.contains(styles, constants.STRIPE_REPEATS);
         self.collapsible = _.contains(styles, constants.COLLAPSIBLE);
         self.showChildren = ko.observable(!self.collapsible || _.contains(styles, constants.COLLAPSIBLE_OPEN));
         self.toggleChildren = function () {

diff --git a/corehq/apps/cloudcare/templates/form_entry/templates.html b/corehq/apps/cloudcare/templates/form_entry/templates.html
@@ -3,13 +3,14 @@
 
 <script type="text/html" id="sub-group-fullform-ko-template">
   <div tabindex="-1" class ="gr" data-bind="
-        class: isRepetition ? 'repetition' : '',
         css: {
           'gr-no-children': $data.children().length === 0,
           'gr-has-no-questions': _.all($data.children(), function(d) { return d.type() !== 'grouped-question-tile-row' }),
           'gr-has-no-nested-questions': !$data.hasAnyNestedQuestions(),
           'panel panel-default': collapsible,
+          'repetition': isRepetition,
           'required-group': !showChildren() && childrenRequired(),
+          'stripe-repeats': stripeRepeats,
         }">
     <fieldset class="gr-header" data-bind="
         css: {

diff --git a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
@@ -66,6 +66,20 @@
     }
   }
 
+  .stripe-repeats {
+    .gr {
+      &:nth-of-type(odd) {
+        background-color: @table-bg-accent;
+      }
+      &:nth-of-type(even) {
+        background-color: white;
+      }
+      &:hover {
+        background-color: @table-bg-hover;
+      }
+    }
+  }
+
   .info {
     overflow-x: auto;
   }