| Index: trunk/extensions/UploadWizard/resources/uploadWizard.css |
| — | — | @@ -265,11 +265,17 @@ |
| 266 | 266 | width: 40px; |
| 267 | 267 | } |
| 268 | 268 | |
| | 269 | +.mwe-upwiz-mask, .mwe-upwiz-status { |
| | 270 | + position: absolute; |
| | 271 | + top: 0px; |
| | 272 | + left: 0px; |
| | 273 | +} |
| | 274 | + |
| 269 | 275 | .mwe-upwiz-status-progress { |
| 270 | 276 | background: url(24px-spinner-0645ad.gif) no-repeat center center; |
| 271 | 277 | } |
| 272 | 278 | |
| 273 | | -.mwe-upwiz-status-stashed { |
| | 279 | +.mwe-upwiz-status-stashed, .mwe-upwiz-status-uploaded { |
| 274 | 280 | background: url(32px-Dialog-apply-009900.svg.png) no-repeat center center; |
| 275 | 281 | } |
| 276 | 282 | |
| — | — | @@ -339,6 +345,7 @@ |
| 340 | 346 | .mwe-upwiz-data { |
| 341 | 347 | float: left; |
| 342 | 348 | width: 46em; |
| | 349 | + margin-bottom: 1em; |
| 343 | 350 | } |
| 344 | 351 | |
| 345 | 352 | |
| Index: trunk/extensions/UploadWizard/resources/mw.UploadWizard.js |
| — | — | @@ -259,9 +259,7 @@ |
| 260 | 260 | * @param height (optional) |
| 261 | 261 | */ |
| 262 | 262 | setThumbnail: function( selector, width, height ) { |
| 263 | | - // set the thumbnail on the page to have a loading spinner |
| 264 | | - $j( selector ).loadingSpinner(); |
| 265 | | - |
| | 263 | + |
| 266 | 264 | var _this = this; |
| 267 | 265 | if ( typeof width === 'undefined' || width === null || width <= 0 ) { |
| 268 | 266 | width = mw.UploadWizard.config[ 'thumbnailWidth' ]; |
| — | — | @@ -273,7 +271,6 @@ |
| 274 | 272 | } |
| 275 | 273 | |
| 276 | 274 | var callback = function( image ) { |
| 277 | | - // side effect: will replace thumbnail's loadingSpinner |
| 278 | 275 | $j( selector ).html( |
| 279 | 276 | $j( '<a/>' ) |
| 280 | 277 | .attr( { 'href': _this.imageinfo.url, |
| — | — | @@ -286,8 +283,7 @@ |
| 287 | 284 | ) |
| 288 | 285 | ); |
| 289 | 286 | }; |
| 290 | | - |
| 291 | | - $j( selector ).loadingSpinner(); |
| | 287 | + |
| 292 | 288 | _this.getThumbnail( callback, width, height ); |
| 293 | 289 | } |
| 294 | 290 | |
| — | — | @@ -2159,7 +2155,6 @@ |
| 2160 | 2156 | // remove ability to edit details |
| 2161 | 2157 | $j.each( _this.uploads, function( i, upload ) { |
| 2162 | 2158 | upload.details.div.mask(); |
| 2163 | | - upload.details.div.data( 'mask' ).loadingSpinner(); |
| 2164 | 2159 | } ); |
| 2165 | 2160 | |
| 2166 | 2161 | // add the upload progress bar, with ETA |
| — | — | @@ -2169,14 +2164,21 @@ |
| 2170 | 2165 | [ 'submitting-details' ], |
| 2171 | 2166 | [ 'complete' ], |
| 2172 | 2167 | function( upload ) { |
| | 2168 | + // activate spinner |
| | 2169 | + upload.details.div.data( 'status' ).addClass( 'mwe-upwiz-status-progress' ); |
| 2173 | 2170 | upload.details.submit( function( result ) { |
| 2174 | 2171 | if ( result && result.upload && result.upload.imageinfo ) { |
| 2175 | 2172 | upload.extractImageInfo( result.upload.imageinfo ); |
| | 2173 | + // change spinner to checkmark |
| | 2174 | + upload.details.div.data( 'status' ).removeClass( 'mwe-upwiz-status-progress' ); |
| | 2175 | + upload.details.div.data( 'status' ).addClass( 'mwe-upwiz-status-uploaded' ); |
| 2176 | 2176 | } else { |
| 2177 | 2177 | // XXX alert the user, maybe don't proceed to step 4. |
| 2178 | 2178 | mw.log( "error -- final API call did not return image info" ); |
| | 2179 | + // change spinner to error icon |
| | 2180 | + upload.details.div.data( 'status' ).removeClass( 'mwe-upwiz-status-progress' ); |
| | 2181 | + upload.details.div.data( 'status' ).addClass( 'mwe-upwiz-status-error' ); |
| 2179 | 2182 | } |
| 2180 | | - upload.details.div.data( 'mask' ).html(); |
| 2181 | 2183 | } ); |
| 2182 | 2184 | }, |
| 2183 | 2185 | endCallback |
| — | — | @@ -2409,19 +2411,26 @@ |
| 2410 | 2412 | $j( el ).find( "select" ).addClass( "masked-hidden" ); |
| 2411 | 2413 | } |
| 2412 | 2414 | |
| 2413 | | - var mask = $j( '<div />' ) |
| 2414 | | - .css( { 'position' : 'absolute', |
| 2415 | | - 'top' : '0px', |
| 2416 | | - 'left' : '0px', |
| | 2415 | + var mask = $j( '<div class="mwe-upwiz-mask"/>' ) |
| | 2416 | + .css( { |
| | 2417 | + 'backgroundColor' : 'white', |
| 2417 | 2418 | 'width' : el.offsetWidth + 'px', |
| 2418 | 2419 | 'height' : el.offsetHeight + 'px', |
| 2419 | | - 'z-index' : 100 } ) |
| | 2420 | + 'z-index' : 90 |
| | 2421 | + } ); |
| | 2422 | + |
| | 2423 | + var status = $j( '<div class="mwe-upwiz-status"/>' ) |
| | 2424 | + .css( { |
| | 2425 | + 'width' : el.offsetWidth + 'px', |
| | 2426 | + 'height' : el.offsetHeight + 'px', |
| | 2427 | + 'z-index' : 91 |
| | 2428 | + } ) |
| 2420 | 2429 | .click( function( e ) { e.stopPropagation(); } ); |
| 2421 | 2430 | |
| 2422 | 2431 | $j( el ).css( { 'position' : 'relative' } ) |
| 2423 | | - .fadeTo( 'fast', 0.5 ) |
| 2424 | | - .append( mask ) |
| 2425 | | - .data( 'mask', mask ); |
| | 2432 | + .append( mask.fadeTo( 'fast', 0.6 ) ) |
| | 2433 | + .append( status ) |
| | 2434 | + .data( 'status', status ); |
| 2426 | 2435 | |
| 2427 | 2436 | |
| 2428 | 2437 | } |