Skip to content

Commit

Permalink
Merge pull request #33917 from dimagi/jls/extract-templates
Browse files Browse the repository at this point in the history
Extracted templates in app manager
  • Loading branch information
orangejenny authored Dec 28, 2023
2 parents 9919492 + dfef21b commit 8c0eada
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,7 @@ <h4 class="panel-title panel-title-nolink">
</div>
<div class="panel-body">
<div data-bind="with: shortScreen">
{% if request|toggle_enabled:'CASE_LIST_TILE' %}
<div class="row">
<div class="col-sm-6">
<label>
{% trans "Case Tile Template" %}
</label>
<select data-bind="options:caseTileTemplateOptions, optionsText: 'templateName', optionsValue: 'templateValue', value:caseTileTemplate" class="form-control"></select>
</div>
</div>
<div class="row">
<div class="col-sm-12" data-bind="visible: caseTilePreviewForTemplate">
<label></label>
<div data-bind="html: caseTilePreviewForTemplate"></div>
</div>
</div>
{% endif %}
{% include 'app_manager/partials/modules/case_tile_templates.html' %}
{% if request|toggle_enabled:'SHOW_PERSIST_CASE_CONTEXT_SETTING' %}
<div data-bind="visible: !caseTileTemplate()">
<div class="checkbox">
Expand Down Expand Up @@ -146,76 +131,7 @@ <h4 class="panel-title panel-title-nolink">
</div>
</div>

<button class="btn btn-default btn-xs pull-right"
data-bind="click: resetCaseTilePreview, visible: showCaseTileConfigColumns()">
<i class="fa fa-magic"></i>
{% trans "Reset Grid" %}
</button>
<div data-bind="visible: showCaseTileConfigColumns()" id="preview-box">
<div id="case-tile-preview" data-bind="foreach: columns">
<div class="cell" data-bind="visible: showInTilePreview, style: {
'grid-row-start': tileRowStart,
'grid-row-end': tileRowEnd,
'grid-column-start': tileColumnStart,
'grid-column-end': tileColumnEnd,
}">
<div class="content">
#<span data-bind="text: $index()"></span>:
<span data-bind="text: tileContent"></span>
</div>
<!-- TODO: align less terribly, this gets messed up as screen/tiles resize -->
<div class="controls">
<table style="width: 100%;"><tbody><tr><td style="text-align: center;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, -1, 0, 0); }, enable: tileColumnStart() > 1">
<i class="fa fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), -1, 0, 0, 0); }, enable: tileRowStart() > 1">
<i class="fa fa-arrow-up"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 1, 0, 0, 0); }, enable: tileRowEnd() < tileRowMax()">
<i class="fa fa-arrow-down"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 1, 0, 0); }, enable: tileColumnEnd() < tileColumnMax()">
<i class="fa fa-arrow-right"></i>
</button>
</div>
<div class="btn-group" role="group" style="float: left; margin: 0 2px;">
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, -1, 0);}, enable: tileWidth() > 1">
<i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-xs" disabled>
<i class="fa fa-arrows-h"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, 1, 0); }, enable: tileColumnEnd() < tileColumnMax()">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="btn-group" role="group" style="float: right; margin: 0 2px;">
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, 0, -1); }, enable: tileHeight() > 1">
<i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-xs" disabled>
<i class="fa fa-arrows-v"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, 0, 1); }, enable: tileRowEnd() < tileRowMax()">
<i class="fa fa-plus"></i>
</button>
</div>
</td></tr></tbody></table>
</div>
</div>
</div>
</div>

{% include 'app_manager/partials/modules/case_tile_preview.html' %}
{% include 'app_manager/partials/modules/case_list_properties.html' %}
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
{% load i18n %}

<button class="btn btn-default btn-xs pull-right"
data-bind="click: resetCaseTilePreview, visible: showCaseTileConfigColumns()">
<i class="fa fa-magic"></i>
{% trans "Reset Grid" %}
</button>

<div data-bind="visible: showCaseTileConfigColumns()" id="preview-box">
<div id="case-tile-preview" data-bind="foreach: columns">
<div class="cell" data-bind="visible: showInTilePreview, style: {
'grid-row-start': tileRowStart,
'grid-row-end': tileRowEnd,
'grid-column-start': tileColumnStart,
'grid-column-end': tileColumnEnd,
}">
<div class="content">
#<span data-bind="text: $index()"></span>:
<span data-bind="text: tileContent"></span>
</div>
<!-- TODO: align less terribly, this gets messed up as screen/tiles resize -->
<div class="controls">
<table style="width: 100%;"><tbody><tr><td style="text-align: center;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, -1, 0, 0); }, enable: tileColumnStart() > 1">
<i class="fa fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), -1, 0, 0, 0); }, enable: tileRowStart() > 1">
<i class="fa fa-arrow-up"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 1, 0, 0, 0); }, enable: tileRowEnd() < tileRowMax()">
<i class="fa fa-arrow-down"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 1, 0, 0); }, enable: tileColumnEnd() < tileColumnMax()">
<i class="fa fa-arrow-right"></i>
</button>
</div>
<div class="btn-group" role="group" style="float: left; margin: 0 2px;">
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, -1, 0);}, enable: tileWidth() > 1">
<i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-xs" disabled>
<i class="fa fa-arrows-h"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, 1, 0); }, enable: tileColumnEnd() < tileColumnMax()">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="btn-group" role="group" style="float: right; margin: 0 2px;">
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, 0, -1); }, enable: tileHeight() > 1">
<i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-xs" disabled>
<i class="fa fa-arrows-v"></i>
</button>
<button type="button" class="btn btn-xs btn-default"
data-bind="click: function () { $parent.adjustTileGridArea($index(), 0, 0, 0, 1); }, enable: tileRowEnd() < tileRowMax()">
<i class="fa fa-plus"></i>
</button>
</div>
</td></tr></tbody></table>
</div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{% load i18n %}
{% load hq_shared_tags %}

{% if request|toggle_enabled:'CASE_LIST_TILE' %}
<div class="row">
<div class="col-sm-6">
<label>
{% trans "Case Tile Template" %}
</label>
<select data-bind="options:caseTileTemplateOptions, optionsText: 'templateName', optionsValue: 'templateValue', value:caseTileTemplate" class="form-control"></select>
</div>
</div>
<div class="row">
<div class="col-sm-12" data-bind="visible: caseTilePreviewForTemplate">
<label></label>
<div data-bind="html: caseTilePreviewForTemplate"></div>
</div>
</div>
{% endif %}

0 comments on commit 8c0eada

Please sign in to comment.