Skip to content

Commit

Permalink
Merge pull request #33410 from dimagi/bmb/b5-hqwebapp-views-static
Browse files Browse the repository at this point in the history
[B5] Migrate license pages to Bootstrap 5 (first real views!)
  • Loading branch information
biyeun authored Sep 5, 2023
2 parents fc75a75 + c8b4e31 commit a2bb5c5
Show file tree
Hide file tree
Showing 28 changed files with 537 additions and 166 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
hqDefine("hqwebapp/js/bootstrap5/alert_user", [
"jquery",
"knockout",
"hqwebapp/js/bootstrap3/hq.helpers",
"hqwebapp/js/bootstrap5/hq.helpers",
],
function (
$,
Expand Down
135 changes: 74 additions & 61 deletions corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/hq-bug-report.js
Original file line number Diff line number Diff line change
@@ -1,107 +1,120 @@
hqDefine('hqwebapp/js/bootstrap5/hq-bug-report', [
"jquery", "jquery-form/dist/jquery.form.min", "hqwebapp/js/bootstrap5/hq.helpers",
], function ($) {
"jquery",
"hqwebapp/js/bootstrap5_loader",
"jquery-form/dist/jquery.form.min",
"hqwebapp/js/bootstrap5/hq.helpers",
], function ($, bootstrap) {
'use strict';
$(function () {
var $hqwebappBugReportModal = $('#modalReportIssue'),
$hqwebappBugReportForm = $('#hqwebapp-bugReportForm'),
$hqwebappBugReportSubmit = $('#bug-report-submit'),
$hqwebappBugReportCancel = $('#bug-report-cancel'),
$ccFormGroup = $("#bug-report-cc-form-group"),
$emailFormGroup = $("#bug-report-email-form-group"),
$issueSubjectFormGroup = $("#bug-report-subject-form-group"),
isBugReportSubmitting = false;
let self = {};

var resetForm = function () {
$hqwebappBugReportForm.find("button[type='submit']").button('reset');
$hqwebappBugReportForm.resetForm();
$hqwebappBugReportCancel.enableButton();
$hqwebappBugReportSubmit.button('reset');
$ccFormGroup.removeClass('has-error has-feedback');
$ccFormGroup.find(".label-danger").addClass('hide');
$emailFormGroup.removeClass('has-error has-feedback');
$emailFormGroup.find(".label-danger").addClass('hide');
self.$bugReportModalElement = $('#modalReportIssue');
self.bugReportModal = new bootstrap.Modal(self.$bugReportModalElement);
self.$hqwebappBugReportForm = $('#hqwebapp-bugReportForm');
self.$hqwebappBugReportSubmit = $('#bug-report-submit');
self.$hqwebappBugReportCancel = $('#bug-report-cancel');
self.$ccFormGroup = $("#bug-report-cc-form-group");
self.$emailFormGroup = $("#bug-report-email-form-group");
self.$issueSubjectFormGroup = $("#bug-report-subject-form-group");
self.isBugReportSubmitting = false;

self.resetForm = function () {
self.$hqwebappBugReportForm.find("button[type='submit']").changeButtonState('reset');
self.$hqwebappBugReportForm.resetForm();
self.$hqwebappBugReportCancel.enableButton();
self.$hqwebappBugReportSubmit.changeButtonState('reset');
self.$ccFormGroup.removeClass('has-error has-feedback');
self.$ccFormGroup.find(".label-danger").addClass('hide');
self.$emailFormGroup.removeClass('has-error has-feedback');
self.$emailFormGroup.find(".label-danger").addClass('hide');
};

$hqwebappBugReportModal.on('shown.bs.modal', function () {
self.$bugReportModalElement.on('shown.bs.modal', function () {
$("input#bug-report-subject").focus();
});

$hqwebappBugReportForm.submit(function () {
var isDescriptionEmpty = !$("#bug-report-subject").val() && !$("#bug-report-message").val();
self.$hqwebappBugReportForm.submit(function (e) {
e.preventDefault();

let isDescriptionEmpty = !$("#bug-report-subject").val() && !$("#bug-report-message").val();
if (isDescriptionEmpty) {
highlightInvalidField($issueSubjectFormGroup);
self.highlightInvalidField(self.$issueSubjectFormGroup);
}

var emailAddress = $(this).find("input[name='email']").val();
if (emailAddress && !IsValidEmail(emailAddress)) {
highlightInvalidField($emailFormGroup);
let emailAddress = $(this).find("input[name='email']").val();
if (emailAddress && !self.isValidEmail(emailAddress)) {
self.highlightInvalidField(self.$emailFormGroup);
return false;
}

var emailAddresses = $(this).find("input[name='cc']").val();
let emailAddresses = $(this).find("input[name='cc']").val();
emailAddresses = emailAddresses.replace(/ /g, "").split(",");
for (var index in emailAddresses) {
var email = emailAddresses[index];
if (email && !IsValidEmail(email)) {
highlightInvalidField($ccFormGroup);
for (let index in emailAddresses) {
let email = emailAddresses[index];
if (email && !self.isValidEmail(email)) {
self.highlightInvalidField(self.$ccFormGroup);
return false;
}
}
if (isDescriptionEmpty) {
return false;
}

if (!isBugReportSubmitting && $hqwebappBugReportSubmit.text() === $hqwebappBugReportSubmit.data("success-text")) {
$hqwebappBugReportModal.modal("hide");
} else if (!isBugReportSubmitting) {
$hqwebappBugReportCancel.disableButtonNoSpinner();
$hqwebappBugReportSubmit.button('loading');
if (!self.isBugReportSubmitting && self.$hqwebappBugReportSubmit.text() ===
self.$hqwebappBugReportSubmit.data("success-text")) {
self.bugReportModal.hide();
} else if (!self.isBugReportSubmitting) {
self.$hqwebappBugReportCancel.disableButtonNoSpinner();
self.$hqwebappBugReportSubmit.changeButtonState('loading');
$(this).ajaxSubmit({
type: "POST",
url: $(this).attr('action'),
beforeSerialize: hqwebappBugReportBeforeSerialize,
beforeSubmit: hqwebappBugReportBeforeSubmit,
success: hqwebappBugReportSucccess,
error: hqwebappBugReportError,
beforeSerialize: self.hqwebappBugReportBeforeSerialize,
beforeSubmit: self.hqwebappBugReportBeforeSubmit,
success: self.hqwebappBugReportSuccess,
error: self.hqwebappBugReportError,
});
}
return false;
});

function IsValidEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
self.isValidEmail = function (email) {
let regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
};

function hqwebappBugReportBeforeSerialize($form) {
self.hqwebappBugReportBeforeSerialize = function ($form) {
$form.find("#bug-report-url").val(location.href);
}
};

function hqwebappBugReportBeforeSubmit() {
isBugReportSubmitting = true;
}
self.hqwebappBugReportBeforeSubmit = function () {
self.isBugReportSubmitting = true;
};

function hqwebappBugReportSucccess() {
isBugReportSubmitting = false;
$hqwebappBugReportForm.find("button[type='submit']").button('success').removeClass('btn-danger').addClass('btn-primary');
$hqwebappBugReportModal.one('hidden.bs.modal', function () {
resetForm();
self.hqwebappBugReportSuccess = function () {
self.isBugReportSubmitting = false;
self.$bugReportModalElement.one('hidden.bs.modal', function () {
self.resetForm();
});
}
self.$hqwebappBugReportForm.find("button[type='submit']")
.changeButtonState('success')
.removeClass('btn-danger').addClass('btn-primary');
};

function hqwebappBugReportError() {
isBugReportSubmitting = false;
$hqwebappBugReportForm.find("button[type='submit']").button('error').removeClass('btn-primary').addClass('btn-danger');
$hqwebappBugReportCancel.enableButton();
}
self.hqwebappBugReportError = function () {
self.isBugReportSubmitting = false;
self.$hqwebappBugReportForm.find("button[type='submit']").changeButtonState('error')
.removeClass('btn-primary').addClass('btn-danger');
self.$hqwebappBugReportCancel.enableButton();
};

function highlightInvalidField($element) {
self.highlightInvalidField = function ($element) {
$element.addClass('has-error has-feedback');
$element.find(".label-danger").removeClass('hide');
$element.find("input").focus(function () {
$element.removeClass("has-error has-feedback");
$element.find(".label-danger").addClass('hide');
});
}
};
});
});
18 changes: 5 additions & 13 deletions corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/hq.helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,6 @@ hqDefine("hqwebapp/js/bootstrap5/hq.helpers", [
return false; // let default handler run
};

var oldHide = $.fn.popover.Constructor.prototype.hide;

$.fn.popover.Constructor.prototype.hide = function () {
if (this.options.trigger === "hover" && this.tip().is(":hover")) {
var that = this;
setTimeout(function () {
return that.hide.apply(that, arguments);
}, that.options.delay.hide);
return;
}
oldHide.apply(this, arguments);
};

$.fn.hqHelp = function () {
var self = this;
self.each(function (i) {
Expand Down Expand Up @@ -103,6 +90,11 @@ hqDefine("hqwebapp/js/bootstrap5/hq.helpers", [
});
};

$.fn.changeButtonState = function (state) {
$(this).text($(this).data(state + '-text'));
return this;
};

$.fn.addSpinnerToButton = function () {
$(this).find("i").addClass("hide");
$(this).prepend('<i class="fa fa-refresh fa-spin icon-refresh icon-spin"></i> ');
Expand Down
3 changes: 3 additions & 0 deletions corehq/apps/hqwebapp/static/hqwebapp/js/hqModules.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ function hqDefine(path, dependencies, moduleAccessor) {
'hqwebapp/js/lib/modernizr': 'Modernizr',
'sinon/pkg/sinon': 'sinon',
};
if (window.USE_BOOTSTRAP5) {
thirdPartyGlobals['hqwebapp/js/bootstrap5_loader'] = 'bootstrap';
}
var args = [];
for (var i = 0; i < dependencies.length; i++) {
var dependency = dependencies[i];
Expand Down
1 change: 1 addition & 0 deletions corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "functions";
@import "commcarehq/variables"; // This comes before Bootstrap 5 variables to override the defaults
@import "variables";
@import "variables-dark";
@import "commcarehq/variables_bootstrap3"; // Variables specific to B3-era Stylesheet
@import "maps";
@import "mixins";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
html, body {
height: 100%;
}

.hq-container {
min-height: 100%;
height: auto !important;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: darken($dropdown-bg, 20%);
border-left-color: darken($body-bg, 20%);
margin-right: -5px;
margin-top: 3.3px;
color: $dropdown-link-color;
Expand Down Expand Up @@ -72,14 +72,19 @@
margin-top: 5px;
}

.dropdown-menu .dropdown-divider {
margin-top: 0px;
margin-bottom: 0px;
.navbar-nav > li > a.dropdown-toggle-with-icon {
padding-top: 22px !important;
padding-bottom: 17px !important;
}

.nav-settings-bar .dropdown-toggle-with-icon.nav-link::after {
display: none;
}

.dropdown-toggle::after {
vertical-align: 2.48px;
margin-left: 2px;
}
}

@media (max-width: map-get($grid-breakpoints, "lg")) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
.nav-main-icon {
font-size: 1.7em;
line-height: 0.7em;
color: $gray-light;
}

.text-hq-nav-header {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@
min-height: $navbar-height;

.navbar-brand {
padding-top: 11px;
line-height: 17px;
height: $navbar-height - 4px;
height: $navbar-height - 6px;
display: inline-block;
margin-left: -1px;
margin-right: 3px;

// Standard HQ logo
// Custom domain logos use an actual image
Expand All @@ -30,8 +33,9 @@
}

&.navbar-expand-lg .navbar-nav .nav-link {
padding: 21px 15px;
padding: 21px 15px 20px;
line-height: 19.5px;
color: $gray-light;
}

&.navbar-expand-lg .navbar-nav li:not(.active) > .nav-link:focus,
Expand Down Expand Up @@ -64,6 +68,7 @@
.nav-settings-bar {
margin-left: auto;
order: 2;
padding-right: 8px;
}

@media(max-width: 1057px) {
Expand Down Expand Up @@ -131,7 +136,7 @@
.dimagi-logo svg {
height: 22px;
width: 50px;
top: 3px;
top: 2px;
position: relative;
display: inline-block;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,10 @@ code {
a {
cursor: pointer;
}

// we should eventually get rid of this as bootstrap5+ doesn't natively support
.page-header {
padding-bottom: 7.5px;
margin: 34px 0 17px;
border-bottom: 1px solid #eeeeee;
}
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
// Grid Containers
// we will want to adapt the defaults in a full redesign
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1160px
);


// Typography Overrides
$font-family-sans-serif: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size-base: .75rem; // approx 12px
Expand Down
Loading

0 comments on commit a2bb5c5

Please sign in to comment.