From 0c3d2322ccb832bf380cf3376f04e8303e1378ab Mon Sep 17 00:00:00 2001
From: Damien Churchill <damoxc@gmail.com>
Date: Tue, 4 Oct 2011 20:39:59 +0100
Subject: [PATCH] web: add loading mask

Add a loading mask that hides the loading of the interface with
some text and a nice ajax spinner. The situation can be further
improved by loading all of the scripts and other resources
dynamically, which will be added later.
---
 deluge/ui/web/css/deluge.css      |  30 ++++++++++++++++++++++++++++++
 deluge/ui/web/images/loading.gif  | Bin 0 -> 3208 bytes
 deluge/ui/web/index.html          |   7 ++++++-
 deluge/ui/web/js/deluge-all/UI.js |   2 ++
 4 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 deluge/ui/web/images/loading.gif

diff --git a/deluge/ui/web/css/deluge.css b/deluge/ui/web/css/deluge.css
index 303a0d1f7..12ad52b5e 100644
--- a/deluge/ui/web/css/deluge.css
+++ b/deluge/ui/web/css/deluge.css
@@ -11,6 +11,36 @@ input {
 	color: Black;
 }
 
+#loading-mask {
+	position: absolute;
+	left:    0;
+	top:     0;
+	width:   100%;
+	height:  100%;
+	z-index: 20000;
+	background-color: white;
+}
+
+#loading {
+	position: absolute;
+	left:    50%;
+	top:     50%;
+	padding: 2px;
+	z-index: 20001;
+	height:  auto;
+	margin:  -35px 0 0 -30px;
+}
+
+#loading .loading-indicator {
+	background: url('../images/loading.gif') no-repeat;
+	color:      #555;
+	font:       24px "UbuntuBeta Regular",Ubuntu,"Bitstream Vera Sans","DejaVu Sans",Tahoma,sans-serif;
+	padding:    2px 42px;
+	margin:     0;
+	text-align: center;
+	height:     auto;
+}
+
 .x-deluge-main-panel {
 	background-image: url('../icons/deluge.png');
 }
diff --git a/deluge/ui/web/images/loading.gif b/deluge/ui/web/images/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3c2f7c058836808f7f1f5f9a4bdf37d4e5f9284a
GIT binary patch
literal 3208
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

literal 0
HcmV?d00001

diff --git a/deluge/ui/web/index.html b/deluge/ui/web/index.html
index 3b53400be..694c5b843 100644
--- a/deluge/ui/web/index.html
+++ b/deluge/ui/web/index.html
@@ -31,7 +31,12 @@
 		</script>
 	</head>
 	<body>
-		<div style="background-image: url('${base}resources/themes/images/default/tree/loading.gif');"></div>
+		<div id="loading-mask"></div>
+		<div id="loading">
+			<div class="loading-indicator">
+				Loading...
+			</div>
+		</div>
 
 		<!-- Preload icon classes -->
 		<div class="ext-mb-error"></div>
diff --git a/deluge/ui/web/js/deluge-all/UI.js b/deluge/ui/web/js/deluge-all/UI.js
index bab33294e..d7c710516 100644
--- a/deluge/ui/web/js/deluge-all/UI.js
+++ b/deluge/ui/web/js/deluge-all/UI.js
@@ -99,6 +99,8 @@ deluge.ui = {
 
         deluge.client.on('connected', function(e) {
             deluge.login.show();
+            Ext.get('loading').remove();
+            Ext.get('loading-mask').fadeOut({remove:true});
         }, this, {single: true});
 
         this.update = Ext.bind(this.update, this);