codex-storage
/
deluge
mirror of https://github.com/codex-storage/deluge.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Damien Churchill 2011-10-04 20:39:59 +01:00
parent 07b6db0c98
commit 0c3d2322cc
4 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
deluge/ui/web/css/deluge.css
View File

@ -11,6 +11,36 @@ input {
color: Black; 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 { .x-deluge-main-panel {
background-image: url('../icons/deluge.png'); background-image: url('../icons/deluge.png');
} }

BIN
deluge/ui/web/images/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

7
deluge/ui/web/index.html
View File

@ -31,7 +31,12 @@
</script> </script>
</head> </head>
<body> <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 --> <!-- Preload icon classes -->
<div class="ext-mb-error"></div> <div class="ext-mb-error"></div>

2
deluge/ui/web/js/deluge-all/UI.js
View File

@ -99,6 +99,8 @@ deluge.ui = {
deluge.client.on('connected', function(e) { deluge.client.on('connected', function(e) {
deluge.login.show(); deluge.login.show();
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, this, {single: true}); }, this, {single: true});
this.update = Ext.bind(this.update, this); this.update = Ext.bind(this.update, this);