Module: deluge Branch: extjs4-port Commit: bf89ddc72ed235aea4de10806d241a022eb06239
Author: Damien Churchill <[email protected]> Date: Tue Oct 4 20:39:59 2011 +0100 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 deletions(-) diff --git a/deluge/ui/web/css/deluge.css b/deluge/ui/web/css/deluge.css index c1da56f..db3a220 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 0000000..3c2f7c0 Binary files /dev/null and b/deluge/ui/web/images/loading.gif differ diff --git a/deluge/ui/web/index.html b/deluge/ui/web/index.html index 3b53400..694c5b8 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 bab3329..d7c7105 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); -- You received this message because you are subscribed to the Google Groups "deluge-commit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/deluge-commit?hl=en.
