From 616c1d2f6b2c14c77f052f5cdd64cf87a42b6f20 Mon Sep 17 00:00:00 2001
From: Luke Stevenson <lucanos@gmail.com>
Date: Mon, 26 Oct 2020 22:03:57 +1100
Subject: [PATCH] Replaces small "Throbber" icon with a full page loading
 overlay.

---
 images/loading.gif           | Bin 0 -> 6820 bytes
 index.html                   | 107 +++++++++++++++--------------------
 styles/material-inspired.css |  36 +++++++++---
 styles/original.css          |  15 +++++
 4 files changed, 90 insertions(+), 68 deletions(-)
 create mode 100644 images/loading.gif

diff --git a/images/loading.gif b/images/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0e9bba25259e7fcb981c1ad95726e07e7c939b69
GIT binary patch
literal 6820
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 55e889a..b336fb8 100644
--- a/index.html
+++ b/index.html
@@ -6,55 +6,50 @@
 -->
 <html>
 <head>
-	<title>WWW SQL Designer</title>
-	<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
-	<meta charset="utf-8" />
-	<link rel="stylesheet" title="material-inspired" href="styles/material-inspired.css" media="all" />
-	<link rel="alternate stylesheet" title="original" href="styles/original.css" media="all" />
-	<!--[if IE 6]><link rel="stylesheet" type="text/css" href="styles/ie6.css" /><![endif]-->
-	<!--[if IE 7]><link rel="stylesheet" type="text/css" href="styles/ie7.css" /><![endif]-->
-	<link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
-	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
+<title>WWW SQL Designer</title>
+<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
+<meta charset="utf-8" />
+<link rel="stylesheet" title="material-inspired" href="styles/material-inspired.css" media="all" />
+<link rel="alternate stylesheet" title="original" href="styles/original.css" media="all" />
+<!--[if IE 6]><link rel="stylesheet" type="text/css" href="styles/ie6.css" /><![endif]-->
+<!--[if IE 7]><link rel="stylesheet" type="text/css" href="styles/ie7.css" /><![endif]-->
+<link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
 
-	<script src="js/oz.js"></script>
-	<script src="js/config.js"></script>
-	<script src="js/globals.js"></script>
-	<script src="js/visual.js"></script>
-	<script src="js/row.js"></script>
-	<script src="js/table.js"></script>
-	<script src="js/relation.js"></script>
-	<script src="js/key.js"></script>
-	<script src="js/rubberband.js"></script>
-	<script src="js/map.js"></script>
-	<script src="js/toggle.js"></script>
-	<script src="js/io.js"></script>
-	<script src="js/tablemanager.js"></script>
-	<script src="js/rowmanager.js"></script>
-	<script src="js/keymanager.js"></script>
-	<script src="js/window.js"></script>
-	<script src="js/options.js"></script>
-	<script src="js/wwwsqldesigner.js"></script>
+<script src="js/oz.js"></script>
+<script src="js/config.js"></script>
+<script src="js/globals.js"></script>
+<script src="js/visual.js"></script>
+<script src="js/row.js"></script>
+<script src="js/table.js"></script>
+<script src="js/relation.js"></script>
+<script src="js/key.js"></script>
+<script src="js/rubberband.js"></script>
+<script src="js/map.js"></script>
+<script src="js/toggle.js"></script>
+<script src="js/io.js"></script>
+<script src="js/tablemanager.js"></script>
+<script src="js/rowmanager.js"></script>
+<script src="js/keymanager.js"></script>
+<script src="js/window.js"></script>
+<script src="js/options.js"></script>
+<script src="js/wwwsqldesigner.js"></script>
 </head>
 
 <body>
 	<div id="area"></div>
-
 	<div id="controls">
 		<div id="bar">
 			<div id="toggle"></div>
 			<input type="button" id="saveload" />
-
 			<hr/>
-
 			<input type="button" id="addtable" />
 			<input type="button" id="edittable" />
 			<input type="button" id="tablekeys" />
 			<input type="button" id="removetable" />
 			<input type="button" id="aligntables" />
 			<input type="button" id="cleartables" />
-		
 			<hr/>
-		
 			<input type="button" id="addrow" />
 			<input type="button" id="editrow" />
 			<input type="button" id="uprow" class="small" /><input type="button" id="downrow" class="small"/>
@@ -62,27 +57,20 @@
 			<input type="button" id="foreignconnect" />
 			<input type="button" id="foreigndisconnect" />
 			<input type="button" id="removerow" />
-		
 			<hr/>
-		
 			<input type="button" id="options" />
 			<a href="https://github.com/ondras/wwwsqldesigner/wiki" target="_blank"><input type="button" id="docs" value="" /></a>
 		</div>
-	
 		<div id="rubberband"></div>
-
 		<div id="minimap"></div>
-	
 		<div id="background"></div>
-	
 		<div id="window">
-			<div id="windowtitle"><img id="throbber" src="images/throbber.gif" alt="" title=""/></div>
+			<div id="windowtitle"></div>
 			<div id="windowcontent"></div>
 			<input type="button" id="windowok" />
 			<input type="button" id="windowcancel" />
 		</div>
 	</div> <!-- #controls -->
-	
 	<div id="opts">
 		<table>
 			<tbody>
@@ -96,7 +84,7 @@
 				</tr>
 				<tr>
 					<td>
-						* <label id="db" for="optiondb"></label> 
+						* <label id="db" for="optiondb"></label>
 					</td>
 					<td>
 						<select id="optiondb"><option></option></select>
@@ -104,7 +92,7 @@
 				</tr>
 				<tr>
 					<td>
-						<label id="snap" for="optionsnap"></label> 
+						<label id="snap" for="optionsnap"></label>
 					</td>
 					<td>
 						<input type="text" size="4" id="optionsnap" />
@@ -113,7 +101,7 @@
 				</tr>
 				<tr>
 					<td>
-						<label id="pattern" for="optionpattern"></label> 
+						<label id="pattern" for="optionpattern"></label>
 					</td>
 					<td>
 						<input type="text" size="6" id="optionpattern" />
@@ -130,7 +118,7 @@
 				</tr>
 				<tr>
 					<td>
-						<label id="hide" for="optionhide"></label> 
+						<label id="hide" for="optionhide"></label>
 					</td>
 					<td>
 						<input type="checkbox" id="optionhide" />
@@ -138,7 +126,7 @@
 				</tr>
 				<tr>
 					<td>
-						* <label id="vector" for="optionvector"></label> 
+						* <label id="vector" for="optionvector"></label>
 					</td>
 					<td>
 						<input type="checkbox" id="optionvector" />
@@ -146,7 +134,7 @@
 				</tr>
 				<tr>
 					<td>
-						* <label id="showsize" for="optionshowsize"></label> 
+						* <label id="showsize" for="optionshowsize"></label>
 					</td>
 					<td>
 						<input type="checkbox" id="optionshowsize" />
@@ -154,7 +142,7 @@
 				</tr>
 				<tr>
 					<td>
-						* <label id="showtype" for="optionshowtype"></label> 
+						* <label id="showtype" for="optionshowtype"></label>
 					</td>
 					<td>
 						<input type="checkbox" id="optionshowtype" />
@@ -162,12 +150,9 @@
 				</tr>
 			</tbody>
 		</table>
-
 		<hr />
-
 		* <span class="small" id="optionsnotice"></span>
 	</div>
-	
 	<div id="io">
 		<table>
 			<tbody>
@@ -176,7 +161,7 @@
 						<fieldset>
 							<legend id="client"></legend>
 							<div id="singlerow">
-							<input type="button" id="clientsave" /> 
+							<input type="button" id="clientsave" />
 							<input type="button" id="clientload" />
 							</div>
 							<div id="singlerow">
@@ -198,11 +183,11 @@
 							<legend id="server"></legend>
 							<label for="backend" id="backendlabel"></label> <select id="backend"><option></option></select>
 							<hr/>
-							<input type="button" id="serversave" /> 
-							<input type="button" id="quicksave" /> 
-							<input type="button" id="serverload" /> 
-							<input type="button" id="serverlist" /> 
-							<input type="button" id="serverimport" /> 
+							<input type="button" id="serversave" />
+							<input type="button" id="quicksave" />
+							<input type="button" id="serverload" />
+							<input type="button" id="serverlist" />
+							<input type="button" id="serverimport" />
 						</fieldset>
 					</td>
 				</tr>
@@ -217,10 +202,9 @@
 			</tbody>
 		</table>
 	</div>
-	
 	<div id="keys">
 		<fieldset>
-			<legend id="keyslistlabel"></legend> 
+			<legend id="keyslistlabel"></legend>
 			<select id="keyslist"><option></option></select>
 			<input type="button" id="keyadd" />
 			<input type="button" id="keyremove" />
@@ -261,7 +245,6 @@
 			</table>
 		</fieldset>
 	</div>
-	
 	<div id="table">
 		<table>
 			<tbody>
@@ -275,7 +258,7 @@
 				</tr>
 				<tr>
 					<td>
-						<label id="tablecommentlabel" for="tablecomment"></label> 
+						<label id="tablecommentlabel" for="tablecomment"></label>
 					</td>
 					<td>
 						<textarea rows="5" cols="40" id="tablecomment"></textarea>
@@ -284,7 +267,9 @@
 			</tbody>
 		</table>
 	</div>
-	
+	<div id="loading">
+		<img src="images/loading.gif" alt="" />
+	</div>
 	<script type="text/javascript">
 		var d = new SQL.Designer();
 	</script>
diff --git a/styles/material-inspired.css b/styles/material-inspired.css
index 992876c..f698a86 100644
--- a/styles/material-inspired.css
+++ b/styles/material-inspired.css
@@ -152,7 +152,9 @@ label {
 	opacity: 0.7;
 }
 
-label, input, select {
+label,
+input,
+select {
 	vertical-align: middle;
 }
 
@@ -416,7 +418,8 @@ label, input, select {
 	overflow: hidden;
 }
 
-#tablename, #tablecomment {
+#tablename,
+#tablecomment {
 	margin-bottom: 10px;
 }
 
@@ -445,14 +448,31 @@ label, input, select {
 	color: #FF4081;
 }
 
-#windowok, #windowcancel {
+#windowok,
+#windowcancel {
 	float: right;
 }
 
-#windowok:hover, #windowcancel:hover {
+#windowok:hover,
+#windowcancel:hover {
 	background-color: #f2f2f2;
 }
 
+#loading {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba(255,255,255,0.6);
+}
+#loading img {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+}
+
 #throbber {
 	position: absolute;
 	top: 2px;
@@ -578,7 +598,8 @@ label, input, select {
 	box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
 }
 
-#keyleft, #keyright {
+#keyleft,
+#keyright {
 	height: auto;
 	line-height: normal;
 	box-shadow: none;
@@ -586,10 +607,11 @@ label, input, select {
 	box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
 }
 
-#keyfields, #keyavail {
+#keyfields,
+#keyavail {
 	height: auto;
 	background-image: none;
 	font-size: small;
 	border: 1px solid rgba(0, 0, 0, .26);
 	padding: 0px;
-}
\ No newline at end of file
+}
diff --git a/styles/original.css b/styles/original.css
index e61b1c3..84f704b 100644
--- a/styles/original.css
+++ b/styles/original.css
@@ -260,6 +260,21 @@ label, input, select {
 	vertical-align: middle;
 }
 
+#loading {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba(255,255,255,0.6);
+}
+#loading img {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+}
+
 #throbber {
 	position: absolute;
 	top: 2px;