diff --git a/corehq/apps/app_manager/models.py b/corehq/apps/app_manager/models.py index 43fbf425b517..dbfd3f0540ed 100644 --- 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 index 6cd499bbf9e7..f11a1b7e5352 100644 --- 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 = $('
').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 index e8a13d58f599..dbb383ef0762 100644 --- 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 index a8293c90513b..5ea9fb3fe38d 100644 --- 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 index 6ad97405168a..0dfe6a511df1 100644 --- 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/corehq/apps/app_manager/templates/app_manager/partials/modules/style_configuration_modal.html b/corehq/apps/app_manager/templates/app_manager/partials/modules/style_configuration_modal.html index 993c3c976e96..a45011379562 100644 --- a/corehq/apps/app_manager/templates/app_manager/partials/modules/style_configuration_modal.html +++ b/corehq/apps/app_manager/templates/app_manager/partials/modules/style_configuration_modal.html @@ -43,6 +43,14 @@

{% trans "Edit Field Style" %}

data-bind="checked: showBorder, visible: coordinatesVisible" >
+
+ + +
diff --git a/corehq/apps/app_manager/tests/test_report_config.py b/corehq/apps/app_manager/tests/test_report_config.py index 8d6d64fac015..de555a422d43 100644 --- 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): -
diff --git a/corehq/apps/app_manager/tests/test_suite_case_tiles.py b/corehq/apps/app_manager/tests/test_suite_case_tiles.py index 206dd390223e..376ebbde6bd6 100644 --- 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): -
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 index 93f9629de3cd..3b5df18f3861 100644 --- 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): """ -
@@ -94,7 +95,7 @@ def test_custom_case_tile_address(self, *args): """ -
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js index f769964588fc..15c021e08299 100644 --- 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 index 39350e706d41..8ebd738b85d1 100644 --- a/corehq/apps/cloudcare/templates/formplayer/case_list.html +++ b/corehq/apps/cloudcare/templates/formplayer/case_list.html @@ -249,12 +249,11 @@

<%- title %>

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; @@ -262,6 +261,13 @@

<%- title %>

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 %>;