Trims the SQL output to remove empty lines at top and end.

Makes Load/Save dialog a little bit wider to allow a better flow of the buttons.
Hides Dropbox buttons if Dropbox load/save is unavailable.
Renames the buttons and functions from "clientdropbox..." to "dropbox..."

4 files changed, 36 insertions, 23 deletions

diff --git a/index.html b/index.html
index 55c3401..6d8ffa6 100755
--- a/index.html
+++ b/index.html
@@ -147,24 +147,28 @@
 		<table>
 			<tbody>
 				<tr>
-					<td>
+					<td style="width:60%">
 						<fieldset>
 							<legend id="client"></legend>
+							<div id="singlerow">
 							<input type="button" id="clientsave" /> 
 							<input type="button" id="clientload" />
-							<br/>
-							<input type="button" id="clientdropboxsave" /><!--should get hidden if 'Dropbox.isBrowserSupported()' is false-->
-							<input type="button" id="clientdropboxload" /><!--should get hidden if 'Dropbox.isBrowserSupported()' is false-->
-							<input type="button" id="clientdropboxlist" /><!--should get hidden if 'Dropbox.isBrowserSupported()' is false-->
-							<br/>
+							</div>
+							<div id="singlerow">
 							<input type="button" id="clientlocalsave" />
 							<input type="button" id="clientlocalload" />
 							<input type="button" id="clientlocallist" />
+							</div>
+							<div id="singlerow">
+								<input type="button" id="dropboxsave" /><!-- may get hidden by dropBoxInit() -->
+								<input type="button" id="dropboxload" /><!-- may get hidden by dropBoxInit() -->
+								<input type="button" id="dropboxlist" /><!-- may get hidden by dropBoxInit() -->
+							</div>
 							<hr/>
 							<input type="button" id="clientsql" />
 						</fieldset>
 					</td>
-					<td>
+					<td style="width:40%">
 						<fieldset>
 							<legend id="server"></legend>
 							<label for="backend" id="backendlabel"></label> <select id="backend"><option></option></select>
diff --git a/js/wwwsqldesigner.js b/js/wwwsqldesigner.js
index b1c61ab..2653b25 100755
--- a/js/wwwsqldesigner.js
+++ b/js/wwwsqldesigner.js
@@ -1278,7 +1278,7 @@ SQL.IO.prototype.init = function(owner) {
 	};
 
 	var ids = ["saveload","clientlocalsave", "clientsave", "clientlocalload", "clientlocallist","clientload", "clientsql", 
-				"clientdropboxsave", "clientdropboxload", "clientdropboxlist",
+				"dropboxsave", "dropboxload", "dropboxlist",
 				"quicksave", "serversave", "serverload",
 				"serverlist", "serverimport"];
 	for (var i=0;i<ids.length;i++) {
@@ -1314,9 +1314,9 @@ SQL.IO.prototype.init = function(owner) {
 	OZ.Event.add(this.dom.clientlocalload, "click", this.bind(this.clientlocalload));
 	OZ.Event.add(this.dom.clientlocallist, "click", this.bind(this.clientlocallist));
 	OZ.Event.add(this.dom.clientload, "click", this.bind(this.clientload));
-	OZ.Event.add(this.dom.clientdropboxload, "click", this.bind(this.clientdropboxload));
-	OZ.Event.add(this.dom.clientdropboxsave, "click", this.bind(this.clientdropboxsave));
-	OZ.Event.add(this.dom.clientdropboxlist, "click", this.bind(this.clientdropboxlist));
+	OZ.Event.add(this.dom.dropboxload, "click", this.bind(this.dropboxload));
+	OZ.Event.add(this.dom.dropboxsave, "click", this.bind(this.dropboxsave));
+	OZ.Event.add(this.dom.dropboxlist, "click", this.bind(this.dropboxlist));
 	OZ.Event.add(this.dom.clientsql, "click", this.bind(this.clientsql));
 	OZ.Event.add(this.dom.quicksave, "click", this.bind(this.quicksave));
 	OZ.Event.add(this.dom.serversave, "click", this.bind(this.serversave));
@@ -1486,10 +1486,17 @@ SQL.IO.prototype.clientlocallist = function() {
 
 var dropboxClient = null;
 
-if (dropboxAppKey) {
+var dropBoxInit = function()
+{
+	if (dropboxAppKey && Dropbox.isBrowserSupported()) {
 	dropboxClient = new Dropbox.Client({ key: dropboxAppKey });
 } else {
-	// Here we should remove the Dropbox buttons but I (TT) honestly don't know how to do that without including something like jquery.
+		// Hide the Dropbox buttons and divider
+		var elems = document.querySelectorAll("[id^=dropbox]");	// gets all tags whose id start with "dropbox"
+		[].slice.call(elems).forEach(
+			function(elem) { elem.style.display = "none"; }
+		);
+	}
 }
 
 var showDropboxError = function(error) {
@@ -1558,7 +1565,7 @@ var showDropboxAuthenticate = function() {
 	return success;
 }
 
-SQL.IO.prototype.clientdropboxsave = function() {
+SQL.IO.prototype.dropboxsave = function() {
 	if (!showDropboxAuthenticate()) return;
 	
 	var key = prompt(_("serversaveprompt"), this._name);
@@ -1579,7 +1586,7 @@ SQL.IO.prototype.clientdropboxsave = function() {
 	});
 }
 
-SQL.IO.prototype.clientdropboxload = function() {
+SQL.IO.prototype.dropboxload = function() {
 	if (!showDropboxAuthenticate()) return;
 
 	var key = prompt(_("serverloadprompt"), this._name);
@@ -1600,7 +1607,7 @@ SQL.IO.prototype.clientdropboxload = function() {
 	});
 }
 
-SQL.IO.prototype.clientdropboxlist = function() {
+SQL.IO.prototype.dropboxlist = function() {
 	if (!showDropboxAuthenticate()) return;
     
 	var sql_io = this;
@@ -1648,7 +1655,7 @@ SQL.IO.prototype.finish = function(xslDoc) {
 		alert(_("xmlerror")+': '+e.message);
 		return;
 	}
-	this.dom.ta.value = sql;
+	this.dom.ta.value = sql.trim();
 }
 
 SQL.IO.prototype.serversave = function(e, keyword) {
@@ -2594,6 +2601,8 @@ SQL.Designer.prototype.init = function() {
 	this.flag = 2;
 	this.requestLanguage();
 	this.requestDB();
+	
+	dropBoxInit ();
 }
 
 /* update area size */
diff --git a/locale/en.xml b/locale/en.xml
index 2faabc3..51c42b6 100755
--- a/locale/en.xml
+++ b/locale/en.xml
@@ -75,12 +75,12 @@
 	<string name="output">Input / Output</string>
 	<string name="clientsave">Save XML</string>
 	<string name="clientload">Load XML</string>
-	<string name="clientdropboxsave">Save to Dropbox</string>
-	<string name="clientdropboxload">Load from Dropbox</string>
-	<string name="clientdropboxlist">List from Dropbox</string>
 	<string name="clientlocalsave">Save in Browser</string>
 	<string name="clientlocalload">Load from Browser</string>
 	<string name="clientlocallist">List from Browser</string>
+	<string name="dropboxsave">Save to Dropbox</string>
+	<string name="dropboxload">Load from Dropbox</string>
+	<string name="dropboxlist">List from Dropbox</string>
 	<string name="clientsql">Generate SQL</string>
 	<string name="backendlabel">Server backend:</string>
 	<string name="serversave">Save</string>
diff --git a/styles/style.css b/styles/style.css
index 2a3c7f5..4a8f8e0 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -3,7 +3,7 @@ body {
 	font-size: small;
 	padding: 0px;
 	margin: 0px;
-  background: #FFF;
+	background: #FFF;
 	visibility: hidden;
 	-moz-user-select: -moz-none;
 	-khtml-user-select: none;
@@ -211,8 +211,8 @@ body {
 }
 
 #textarea {
-	width: 600px;
-	height: 100px;
+	width: 650px;
+	height: 200px;
 }
 
 #opts {