Merge pull request #33908 from dimagi/rc/case-tile-shading

Rc/case tile shading
dimagi · Dec 22, 2023 · 23943f8 · 23943f8
2 parents d04471d + 9c19eda
commit 23943f8
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 9 deletions.
diff --git a/corehq/apps/app_manager/models.py b/corehq/apps/app_manager/models.py
@@ -1870,6 +1870,7 @@ class DetailColumn(IndexedSchema):
     vertical_align = StringProperty(exclude_if_none=True)
     font_size = StringProperty(exclude_if_none=True)
     show_border = BooleanProperty(exclude_if_none=True)
+    show_shading = BooleanProperty(exclude_if_none=True)
 
     enum = SchemaListProperty(MappingItem)
     graph_configuration = SchemaProperty(GraphConfiguration)

diff --git a/corehq/apps/app_manager/static/app_manager/js/details/column.js b/corehq/apps/app_manager/static/app_manager/js/details/column.js
@@ -41,6 +41,7 @@ hqDefine("app_manager/js/details/column", function () {
             vertical_align: "start",
             font_size: "medium",
             show_border: false,
+            show_shading: false,
         };
         _.each(_.keys(defaults), function (key) {
             self.original[key] = self.original[key] || defaults[key];
@@ -77,6 +78,7 @@ hqDefine("app_manager/js/details/column", function () {
         self.fontSizeOptions = ['small', 'medium', 'large'];
 
         self.showBorder = ko.observable(self.original.show_border || false);
+        self.showShading = ko.observable(self.original.show_shading || false);
 
         self.openStyleModal = function () {
             const $modalDiv = $(document.createElement("div"));
@@ -357,6 +359,7 @@ hqDefine("app_manager/js/details/column", function () {
         self.verticalAlign.subscribe(fireChange);
         self.fontSize.subscribe(fireChange);
         self.showBorder.subscribe(fireChange);
+        self.showShading.subscribe(fireChange);
 
         self.$format = $('<div/>').append(self.format.ui);
         self.$format.find("select").css("margin-bottom", "5px");
@@ -449,6 +452,7 @@ hqDefine("app_manager/js/details/column", function () {
             column.vertical_align = self.verticalAlign();
             column.font_size = self.fontSize();
             column.show_border = self.showBorder();
+            column.show_shading = self.showShading();
             column.graph_configuration = self.format.val() === "graph" ? self.graph_extra.val() : null;
             column.late_flag = parseInt(self.late_flag_extra.val(), 10);
             column.time_ago_interval = parseFloat(self.time_ago_extra.val());

diff --git a/corehq/apps/app_manager/suite_xml/features/case_tiles.py b/corehq/apps/app_manager/suite_xml/features/case_tiles.py
@@ -100,7 +100,8 @@ def build_case_tile_detail(self):
                                   horz_align=column_info.column.horizontal_align,
                                   vert_align=column_info.column.vertical_align,
                                   font_size=column_info.column.font_size,
-                                  show_border=column_info.column.show_border)
+                                  show_border=column_info.column.show_border,
+                                  show_shading=column_info.column.show_shading)
                 fields = get_column_generator(
                     self.app, self.module, self.detail,
                     detail_type=self.detail_type,

diff --git a/corehq/apps/app_manager/suite_xml/sections/details.py b/corehq/apps/app_manager/suite_xml/sections/details.py
@@ -496,6 +496,7 @@ def _get_persistent_case_context_detail(module, xml):
                     grid_x=0,
                     grid_y=0,
                     show_border=False,
+                    show_shading=False,
                 ),
                 header=Header(text=Text()),
                 template=Template(text=Text(xpath_function=xml)),
@@ -519,6 +520,7 @@ def _get_report_context_tile_detail():
                     grid_x=0,
                     grid_y=0,
                     show_border=False,
+                    show_shading=False,
                 ),
                 header=Header(text=Text()),
                 template=Template(text=Text(xpath=TextXPath(

diff --git a/corehq/apps/app_manager/suite_xml/xml_models.py b/corehq/apps/app_manager/suite_xml/xml_models.py
@@ -802,6 +802,7 @@ class Style(XmlObject):
     grid_x = StringField("grid/@grid-x")
     grid_y = StringField("grid/@grid-y")
     show_border = BooleanField("@show-border")
+    show_shading = BooleanField("@show-shading")
 
 
 class Extra(XmlObject):

diff --git a/...hq/apps/app_manager/templates/app_manager/partials/modules/style_configuration_modal.html b/...hq/apps/app_manager/templates/app_manager/partials/modules/style_configuration_modal.html
@@ -43,6 +43,14 @@ <h4 class="modal-title">{% trans "Edit Field Style" %}</h4>
                 data-bind="checked: showBorder, visible: coordinatesVisible"
               >
             </div>
+            <div class="form-group">
+              <label for="showShading" class="control-label">{% trans "Shade" %}</label>
+              <input
+                id="showShading"
+                type="checkbox"
+                data-bind="checked: showShading, visible: coordinatesVisible"
+              >
+            </div>
           </div>
         </div>
         <div class="modal-footer">

diff --git a/corehq/apps/app_manager/tests/test_report_config.py b/corehq/apps/app_manager/tests/test_report_config.py
@@ -504,7 +504,7 @@ def test_liveness_fixture(self):
               <text/>
             </title>
             <field>
-              <style horz-align="left" font-size="small" show-border="false">
+              <style horz-align="left" font-size="small" show-border="false" show-shading="false">
                 <grid grid-height="1" grid-width="12" grid-x="0" grid-y="0"/>
               </style>
               <header>

diff --git a/corehq/apps/app_manager/tests/test_suite_case_tiles.py b/corehq/apps/app_manager/tests/test_suite_case_tiles.py
@@ -368,7 +368,7 @@ def test_persistent_case_name_in_forms(self, *args):
                         <text/>
                     </title>
                     <field>
-                        <style font-size="large" horz-align="center" show-border="false">
+                        <style font-size="large" horz-align="center" show-border="false" show-shading="false">
                             <grid grid-height="1" grid-width="12" grid-x="0" grid-y="0"/>
                         </style>
                         <header>

diff --git a/corehq/apps/app_manager/tests/test_suite_custom_case_tiles.py b/corehq/apps/app_manager/tests/test_suite_custom_case_tiles.py
@@ -21,7 +21,8 @@ def add_columns_for_case_details(_module, field='a', format='plain', useXpathExp
         grid_y=1,
         width=3,
         height=1,
-        show_border=False)
+        show_border=False,
+        show_shading=False)
     column.useXpathExpression = useXpathExpression
     _module.case_details.short.columns = [
         column,
@@ -47,7 +48,7 @@ def test_custom_case_tile(self, *args):
             """
             <partial>
                 <field>
-                    <style show-border="false">
+                    <style show-border="false" show-shading="false">
                         <grid grid-height="1" grid-width="3" grid-x="1" grid-y="1"/>
                     </style>
                     <header width="13%">
@@ -94,7 +95,7 @@ def test_custom_case_tile_address(self, *args):
             """
             <partial>
                 <field>
-                    <style show-border="false">
+                    <style show-border="false" show-shading="false">
                         <grid grid-height="1" grid-width="3" grid-x="1" grid-y="1"/>
                     </style>
                     <header>

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -147,6 +147,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
     // generate the case tile's style block and insert
     const buildCellLayout = function (tiles, styles, prefix) {
         const borderInTile = Boolean(_.find(styles, s => s.showBorder));
+        const shadingInTile = Boolean(_.find(styles, s => s.showShading));
         const tileModels = _.chain(tiles || [])
             .map(function (tile, idx) {
                 if (tile === null || tile === undefined) {
@@ -161,6 +162,8 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
                     horizontalAlign: getValidFieldAlignment(style.horizontalAlign),
                     showBorder: style.showBorder,
                     borderInTile: borderInTile,
+                    showShading: style.showShading,
+                    shadingInTile: shadingInTile,
                 };
             })
             .filter(function (tile) {

diff --git a/corehq/apps/cloudcare/templates/formplayer/case_list.html b/corehq/apps/cloudcare/templates/formplayer/case_list.html
@@ -249,19 +249,25 @@ <h1  aria-label="<%- title %>" tabindex="0" class="page-title"><%- title %></h1>
       grid-area: <%- model.gridStyle %>;
       font-size: <%- model.fontStyle %>;
       text-align: <%- model.horizontalAlign %>;
-      <% if (!model.borderInTile) { %>
+      <% if (!model.borderInTile && !model.shadingInTile) { %>
         justify-self: <%- model.horizontalAlign %>;
         align-self: <%- model.verticalAlign %>;
       <% } else { %>
-        <% if (model.showBorder) { %>
-          border: 1px solid #685c53;
+        <% if (model.showBorder || model.showShading) { %>
           border-radius: 8px;
           padding-top: 5px;
           padding-bottom: 0px;
           padding-left: 5px;
           padding-right: 5px;
           justify-self: stretch;
           margin: 2px;
+          <% if (model.showBorder) { %>
+            border: 1px solid #685c53;
+          <% } %>
+          <% if (model.showShading) { %>
+            background-color: white;
+            z-index: -1;
+          <% } %>
         <% } else { %>
           margin: 7px;
           justify-self: <%- model.horizontalAlign %>;