Skip to content

Commit

Permalink
Merge pull request #33819 from dimagi/jls/web-apps-sticky-tile
Browse files Browse the repository at this point in the history 
Sticky case tile in web apps
  • Loading branch information
@orangejenny
orangejenny committed Jan 16, 2024
2 parents a97e198 + 73c1c81 commit 6189db0
Show file tree
Hide file tree
Showing 21 changed files with 181 additions and 180 deletions.
14 changes: 0 additions & 14 deletions corehq/apps/builds/templates/builds/edit_menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,6 @@

{% requirejs_main 'builds/js/edit-builds' %}

{% block stylesheets %}
<style type="text/css">
.container.ui-widget {
border: none;
}
#menu-table td {
line-height: 30px;
}



</style>
{% endblock %}

{% block page_title %}
{% trans "Editing CommCare Builds" %}
{% endblock %}
Expand Down
2 changes: 1 addition & 1 deletion corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -540,7 +540,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
});

const PersistentCaseTileView = CaseTileView.extend({
className: "formplayer-request",
className: "formplayer-request persistent-sticky",
rowClick: function (e) {
e.preventDefault();
if (this.options.hasInlineTile) {
Expand Down
12 changes: 6 additions & 6 deletions corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,13 +109,13 @@
<div id="content-container" class="container">
<div id="sidebar-region" class="noprint-sub-container"></div>
<div id="menu-region" class="print-container"></div>
<section id="webforms" data-bind="
template: {
name: 'form-fullform-ko-template',
afterRender: afterRender
}">
</section>
</div>
<section id="webforms" data-bind="
template: {
name: 'form-fullform-ko-template',
afterRender: afterRender
}">
</section>
</div>
<div role="region" id="sr-notification-region" class="sr-only" aria-live="assertive" aria-relevant="all"></div>
<small id="version-info"></small>
Expand Down
150 changes: 73 additions & 77 deletions corehq/apps/cloudcare/templates/form_entry/templates.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,93 +114,89 @@
<div class="webforms-nav"
data-bind="template: { name: 'form-navigation-ko-template' }"></div>
</div>
<div class="container form-container js-form-container print-container" data-bind="
<div class="form-container js-form-container print-container" data-bind="
css: { 'form-single-question': showInFormNavigation },
">

<div class="page-header">
<h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1>
</div>

<div class="row">
<div class="col-sm-12">
<form class="form form-horizontal" data-bind="submit: submitForm">
<div class="question-container">
<div data-bind="template: { name: childTemplate, foreach: $data.children }"/>
</div>
{% if environment == "web-apps" %}
<div class="row" data-bind="visible: erroredQuestions().length > 0">
<div class="col-sm-12 alert alert-danger">
{% blocktrans %}
Please correct the answers below before submitting.
<br>
You can use the <strong><i class='fa fa-fast-forward'></i> Next Error</strong> button on the left-hand side of the screen to navigate between required fields.
{% endblocktrans %}
<ul data-bind="foreach: erroredQuestions">
<li>
<a href="#" data-bind="click: navigateTo, html: caption_markdown() || caption() || question_id() || gettext('Unknown Question')"></a>
<span data-bind="visible: serverError, text: serverError"></span>
<span data-bind="if: error">
<!-- ko text: error --><!-- /ko -->
</span>
<span data-bind="visible: !serverError() && !error()">
{% trans "An answer is required." %}
</span>
</li>
</ul>
</div>
</div>
{% endif %}
<div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">
<div data-bind="
css: submitClass,
style: {
'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} ? '30px' : '' {# data preview bar #}
}">
<button class="submit btn btn-primary"
type="submit"
data-bind="
enable: enableSubmitButton,
css: {
'btn-lg': !isAnchoredSubmitStyle,
'btn-sm': isAnchoredSubmitStyle,
}">
<i class="fa fa-spin fa-refresh"
data-bind="visible: !enableSubmitButton(){% if environment == "web-apps" %} && erroredQuestions.length != 0{% endif %}"
></i>
<!-- ko text: submitText --><!-- /ko -->
</button>
</div>
</div>
</form>
<form class="form form-horizontal" data-bind="submit: submitForm">
<div class="question-container">
<div data-bind="template: { name: childTemplate, foreach: $data.children }"/>
</div>
<div data-bind="visible: erroredQuestions().length > 0">
{% if environment == "web-apps" %}
{% if request|ui_notify_enabled:"JUMP_TO_INVALID_QUESTIONS_WEBAPPS" %}
<div class="alert alert-ui-notify alert-dismissible helpbubble helpbubble-purple helpbubble-bottom-left fade in"
style="position: fixed; width: 300px; bottom: 65px;"
data-slug="{{ "JUMP_TO_INVALID_QUESTIONS_WEBAPPS"|ui_notify_slug }}"
role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<p class="lead">{% trans 'Navigate Across Required Questions' %}</p>
<p>
{% blocktrans %}
You can use this button to navigate between questions that are required but missing or that contain errors.
You will also see a summary of questions that need attention at the bottom of the form.
{% endblocktrans %}
<br>
<a target="_blank" class="btn btn-primary-dark" href="https://confluence.dimagi.com/display/commcarepublic/Using+Web+Apps#UsingWebApps-Navigatingtoallrequiredquestions">{% trans "Learn More" %}</a>
</p>
</div>
{% endif %}
{% endif %}
<div id="scroll-bottom" class="btn btn-danger" style="position: fixed; bottom: 35px" title="{% trans_html_attr "Jump between required/errored questions" %}" data-bind="click: jumpToErrors">
<i class='fa fa-fast-forward'> </i>
{% trans "Next Error" %}
{% if environment == "web-apps" %}
<div class="row" data-bind="visible: erroredQuestions().length > 0">
<div class="col-sm-12 alert alert-danger">
{% blocktrans %}
Please correct the answers below before submitting.
<br>
You can use the <strong><i class='fa fa-fast-forward'></i> Next Error</strong> button on the left-hand side of the screen to navigate between required fields.
{% endblocktrans %}
<ul data-bind="foreach: erroredQuestions">
<li>
<a href="#" data-bind="click: navigateTo, html: caption_markdown() || caption() || question_id() || gettext('Unknown Question')"></a>
<span data-bind="visible: serverError, text: serverError"></span>
<span data-bind="if: error">
<!-- ko text: error --><!-- /ko -->
</span>
<span data-bind="visible: !serverError() && !error()">
{% trans "An answer is required." %}
</span>
</li>
</ul>
</div>
</div>
{% endif %}
<div id="submit-button" class="form-actions form-group noprint-sub-container" data-bind="visible: showSubmitButton">
<div data-bind="
css: submitClass,
style: {
'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} ? '30px' : '' {# data preview bar #}
}">
<button class="submit btn btn-primary"
type="submit"
data-bind="
enable: enableSubmitButton,
css: {
'btn-lg': !isAnchoredSubmitStyle,
'btn-sm': isAnchoredSubmitStyle,
}">
<i class="fa fa-spin fa-refresh"
data-bind="visible: !enableSubmitButton(){% if environment == "web-apps" %} && erroredQuestions.length != 0{% endif %}"
></i>
<!-- ko text: submitText --><!-- /ko -->
</button>
</div>
</div>
</form>
</div>
<div data-bind="visible: erroredQuestions().length > 0">
{% if environment == "web-apps" %}
{% if request|ui_notify_enabled:"JUMP_TO_INVALID_QUESTIONS_WEBAPPS" %}
<div class="alert alert-ui-notify alert-dismissible helpbubble helpbubble-purple helpbubble-bottom-left fade in"
style="position: fixed; width: 300px; bottom: 65px;"
data-slug="{{ "JUMP_TO_INVALID_QUESTIONS_WEBAPPS"|ui_notify_slug }}"
role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<p class="lead">{% trans 'Navigate Across Required Questions' %}</p>
<p>
{% blocktrans %}
You can use this button to navigate between questions that are required but missing or that contain errors.
You will also see a summary of questions that need attention at the bottom of the form.
{% endblocktrans %}
<br>
<a target="_blank" class="btn btn-primary-dark" href="https://confluence.dimagi.com/display/commcarepublic/Using+Web+Apps#UsingWebApps-Navigatingtoallrequiredquestions">{% trans "Learn More" %}</a>
</p>
</div>
{% endif %}
{% endif %}
<div id="scroll-bottom" class="btn btn-danger" style="position: fixed; bottom: 35px" title="{% trans_html_attr "Jump between required/errored questions" %}" data-bind="click: jumpToErrors">
<i class='fa fa-fast-forward'> </i>
{% trans "Next Error" %}
</div>
</div>
</script>
Expand Down
9 changes: 4 additions & 5 deletions corehq/apps/hqwebapp/static/cloudcare/less/formplayer-common/notifications.less
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
.notifications-container.ui-widget-content,
.notifications-container.ui-widget.ui-widget-content {
.notifications-container {
background: transparent;
}

.notifications-container .alert {
.box-shadow(0 0 8px 1px rgba(0, 0, 0, 0.18));
.alert {
.box-shadow(0 0 8px 1px rgba(0, 0, 0, 0.18));
}
}

#cloudcare-notifications {
Expand Down
1 change: 1 addition & 0 deletions corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/breadcrumbs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
box-shadow: 0 0 5px 2px rgba(0,0,0,.3);
display: flex;
align-items: center;
height: @breadcrumb-height-cloudcare;

.breadcrumb {
box-shadow: none;
Expand Down
29 changes: 21 additions & 8 deletions corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
background-color: white;
.box-shadow(0 0 10px 2px rgba(0,0,0,.1));
margin-bottom: 2rem;
margin-top: 20px;
font-size: @font-size-base; // Don't overshadow inputs

.page-header {
Expand All @@ -19,10 +18,17 @@
padding-right: 25px;
padding-top: 3px;
}

.form-actions {
margin-top: 30px;
margin: 30px 0 0 0;
background-color: lighten(@cc-brand-hi, 10);
.border-bottom-radius(0);

.nonanchored-submit .btn {
font-size: 20px;
padding: 13px 24px;
.transition(all .5s);
}
}

.anchored-submit {
Expand Down Expand Up @@ -110,12 +116,6 @@

}

.form-container .form-actions .nonanchored-submit .btn {
font-size: 20px;
padding: 13px 24px;
.transition(all .5s);
}

.form-group-required-label {
display: none;
}
Expand Down Expand Up @@ -172,6 +172,19 @@

}

@media screen {
.case-tile-container {
position: sticky;
top: @breadcrumb-height-cloudcare;
z-index: @zindex-persistent-tile-cloudcare;

#persistent-case-tile .persistent-sticky {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid @cc-neutral-hi;
}
}
}

@media print {
.form-container.print-container {
margin: 0px;
Expand Down
21 changes: 11 additions & 10 deletions corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,21 +85,21 @@ hqDefine('hqwebapp/js/bootstrap3/main', [
ko.bindingHandlers.runOnInit = {
// suggestion from https://github.com/knockout/knockout/issues/2446 to use
// instead of an anonymous template
init: function(elem, valueAccessor) {
init: function (elem, valueAccessor) {
valueAccessor();
}
},
};
ko.virtualElements.allowedBindings.runOnInit = true;

ko.bindingHandlers.allowDescendantBindings = {
// fixes an issue where we try to apply bindings to a parent element
// that has a child element with existing bindings.
// see: https://github.com/knockout/knockout/issues/1922
init: function(elem, valueAccessor) {
init: function (elem, valueAccessor) {
// Let bindings proceed as normal *only if* my value is false
var shouldAllowBindings = ko.unwrap(valueAccessor());
return { controlsDescendantBindings: !shouldAllowBindings };
}
},
};
ko.virtualElements.allowedBindings.allowDescendantBindings = true;

Expand All @@ -118,7 +118,6 @@ hqDefine('hqwebapp/js/bootstrap3/main', [
$(".button", $elem).button().wrap('<span />');
$("input[type='submit']", $elem).button();
$("input[type='text'], input[type='password'], textarea", $elem);
$('.container', $elem).addClass('ui-widget ui-widget-content');
$('.config', $elem).wrap('<div />').parent().addClass('container block ui-corner-all');

$('.hq-help-template').each(function () {
Expand All @@ -130,7 +129,7 @@ hqDefine('hqwebapp/js/bootstrap3/main', [
'use strict';
var key;
for (key in update) {
if (update.hasOwnProperty(key)) {
if (_.has(update, key)) {
$(key).text(update[key]).val(update[key]);
}
}
Expand Down Expand Up @@ -180,7 +179,7 @@ hqDefine('hqwebapp/js/bootstrap3/main', [
this.$saved.detach();
this.$retry.detach();
var buttonUi = this.ui;
_.each(BAR_STATE, function (v, k) {
_.each(BAR_STATE, function (v) {
buttonUi.removeClass(v);
});
if (state === 'save') {
Expand Down Expand Up @@ -208,7 +207,7 @@ hqDefine('hqwebapp/js/bootstrap3/main', [
$.ajaxSettings.beforeSend(jqXHR, settings);
beforeSend.apply(this, arguments);
};
options.success = function (data) {
options.success = function () {
that.setState(that.nextState);
success.apply(this, arguments);
};
Expand Down Expand Up @@ -256,9 +255,11 @@ hqDefine('hqwebapp/js/bootstrap3/main', [
$(window).on('beforeunload', function () {
var lastParent = button.ui.parents()[button.ui.parents().length - 1];
if (lastParent) {
var stillAttached = lastParent.tagName.toLowerCase() == 'html';
var stillAttached = lastParent.tagName.toLowerCase() === 'html';
if (button.state !== 'saved' && stillAttached) {
if ($('.js-unhide-on-unsaved').length > 0) $('.js-unhide-on-unsaved').removeClass('hide');
if ($('.js-unhide-on-unsaved').length > 0) {
$('.js-unhide-on-unsaved').removeClass('hide');
}
return options.unsavedMessage || "";
}
}
Expand Down

0 comments on commit 6189db0

Please sign in to comment.