From 2965125bf5ead72eaf1d9809431ee4da46b19a4c Mon Sep 17 00:00:00 2001
From: Peter Rotich <peter@osticket.com>
Date: Fri, 15 Feb 2013 13:00:25 -0500
Subject: [PATCH] Add overlay & loading spinner to client interface - shown on
form submission to help cut down on double submits.
---
css/osticket.css | 25 +++++++++++++++++++++++++
images/FhHRx-Spinner.gif | Bin 0 -> 2608 bytes
include/client/footer.inc.php | 5 +++++
include/client/header.inc.php | 1 +
js/osticket.js | 22 ++++++++++++++++++----
5 files changed, 49 insertions(+), 4 deletions(-)
create mode 100644 css/osticket.css
create mode 100644 images/FhHRx-Spinner.gif
diff --git a/css/osticket.css b/css/osticket.css
new file mode 100644
index 000000000..7417c890e
--- /dev/null
+++ b/css/osticket.css
@@ -0,0 +1,25 @@
+/* Overlay */
+#overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #000;
+ z-index: 1000;
+ -webkit-transform: translate3d(0,0,0);
+}
+
+#loading {
+ border:1px solid #2a67ac;
+ padding: 10px 10px 10px 60px;
+ width: 300px;
+ height: 100px;
+ background: rgb( 255, 255, 255) url('../images/FhHRx-Spinner.gif') 10px 50% no-repeat;
+ position: fixed;
+ display: none;
+ z-index: 3000;
+}
+
+#loading h4 { margin: 3px 0 0 0; padding: 0; color: #d80; }
diff --git a/images/FhHRx-Spinner.gif b/images/FhHRx-Spinner.gif
new file mode 100644
index 0000000000000000000000000000000000000000..574b1d4a161707c6c7f0ba9d2bc531bead4a3028
GIT binary patch
literal 2608
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
FV*tO5tv&z%
literal 0
HcmV?d00001
diff --git a/include/client/footer.inc.php b/include/client/footer.inc.php
index 4b3d902c6..3398d1b93 100644
--- a/include/client/footer.inc.php
+++ b/include/client/footer.inc.php
@@ -4,5 +4,10 @@
<p>Copyright © <?php echo date('Y'); ?> <a href="http://osticket.com" target="_blank" title="osTicket">osTicket.com</a> - All rights reserved.</p>
<a id="poweredBy" href="http://osticket.com" target="_blank">Powered by osTicket</a>
</div>
+<div id="overlay"></div>
+<div id="loading">
+ <h4>Please Wait!</h4>
+ <p>Please wait... it will take a second!</p>
+</div>
</body>
</html>
diff --git a/include/client/header.inc.php b/include/client/header.inc.php
index 2e9906b0b..d4c90ff1f 100644
--- a/include/client/header.inc.php
+++ b/include/client/header.inc.php
@@ -10,6 +10,7 @@ header("Content-Type: text/html; charset=UTF-8\r\n");
<meta name="description" content="customer support platform">
<meta name="keywords" content="osTicket, Customer support system, support ticket system">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <link rel="stylesheet" href="<?php echo ROOT_PATH; ?>css/osticket.css" media="screen">
<link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/theme.css" media="screen">
<link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/print.css" media="print">
<script src="<?php echo ROOT_PATH; ?>js/jquery-1.7.2.min.js"></script>
diff --git a/js/osticket.js b/js/osticket.js
index 4057b04b8..ceca388f0 100644
--- a/js/osticket.js
+++ b/js/osticket.js
@@ -8,18 +8,31 @@ $(document).ready(function(){
$("input:not(.dp):visible:enabled:first").focus();
$('table.list tbody tr:odd').addClass('odd');
- $("form#save :input").change(function() {
+ //Overlay
+ $('#overlay').css({
+ opacity : 0.3,
+ top : 0,
+ left : 0
+ });
+
+ /* loading ... */
+ $("#loading").css({
+ top : ($(window).height() / 3),
+ left : ($(window).width() / 2 - 160)
+ });
+
+ $("form :input").change(function() {
var fObj = $(this).closest('form');
if(!fObj.data('changed')){
fObj.data('changed', true);
$('input[type=submit]', fObj).css('color', 'red');
$(window).bind('beforeunload', function(e) {
- return 'Are you sure you want to leave? Any changes or info you\'ve entered will be discarded!';
+ return "Are you sure you want to leave? Any changes or info you've entered will be discarded!";
});
}
});
- $("form#save :input[type=reset]").click(function() {
+ $("form :input[type=reset]").click(function() {
var fObj = $(this).closest('form');
if(fObj.data('changed')){
$('input[type=submit]', fObj).removeAttr('style');
@@ -30,8 +43,9 @@ $(document).ready(function(){
}
});
- $('form#save').submit(function() {
+ $('form').submit(function() {
$(window).unbind('beforeunload');
+ $('#overlay, #loading').show();
return true;
});
--
GitLab