Skip to content

Commit

Permalink
More DND upload fixes/display tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@ged
ged committed Feb 25, 2011
1 parent 7a020dc commit b586325
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 86 deletions.
29 changes: 26 additions & 3 deletions Manifest.txt
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,45 @@
ChangeLog
History.md
LICENSE
README.md
Rakefile
bin/gemserver
data/gemserver/gemserver.conf.example
data/gemserver/public/css/jquery.fileupload-ui.css
data/gemserver/public/css/master.css
data/gemserver/public/css/overcast/images/ui-bg_flat_0_aaaaaa_40x100.png
data/gemserver/public/css/overcast/images/ui-bg_flat_0_eeeeee_40x100.png
data/gemserver/public/css/overcast/images/ui-bg_flat_55_c0402a_40x100.png
data/gemserver/public/css/overcast/images/ui-bg_flat_55_eeeeee_40x100.png
data/gemserver/public/css/overcast/images/ui-bg_glass_100_f8f8f8_1x400.png
data/gemserver/public/css/overcast/images/ui-bg_glass_35_dddddd_1x400.png
data/gemserver/public/css/overcast/images/ui-bg_glass_60_eeeeee_1x400.png
data/gemserver/public/css/overcast/images/ui-bg_inset-hard_75_999999_1x100.png
data/gemserver/public/css/overcast/images/ui-bg_inset-soft_50_c9c9c9_1x100.png
data/gemserver/public/css/overcast/images/ui-icons_3383bb_256x240.png
data/gemserver/public/css/overcast/images/ui-icons_454545_256x240.png
data/gemserver/public/css/overcast/images/ui-icons_70b2e1_256x240.png
data/gemserver/public/css/overcast/images/ui-icons_999999_256x240.png
data/gemserver/public/css/overcast/images/ui-icons_fbc856_256x240.png
data/gemserver/public/css/overcast/jquery-ui-1.8.9.custom.css
data/gemserver/public/images/favicon.ico
data/gemserver/public/images/pbar-ani.gif
data/gemserver/public/images/upload-arrow.png
data/gemserver/public/js/gemserver.js
data/gemserver/public/js/jquery-1.4.2.min.js
data/gemserver/public/js/jquery.filedrop.js
data/gemserver/public/js/jquery.tools-1.2.3.min.js
data/gemserver/public/js/jquery-1.4.4.min.js
data/gemserver/public/js/jquery-ui-1.8.9.custom.min.js
data/gemserver/public/js/jquery.fileupload-ui.js
data/gemserver/public/js/jquery.fileupload.js
data/gemserver/views/details.erb
data/gemserver/views/index.erb
data/gemserver/views/layout.erb
lib/gemserver.rb
lib/gemserver/app.rb
lib/gemserver/authentication.rb
lib/gemserver/keystore.rb
lib/gemserver/mixins.rb
spec/gemserver/app_spec.rb
spec/gemserver/keystore_spec.rb
spec/gemserver/mixins_spec.rb
spec/gemserver_spec.rb
spec/lib/helpers.rb
99 changes: 40 additions & 59 deletions data/gemserver/public/css/master.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
*
*/

@import url(overcast/jquery-ui-1.8.9.custom.css);
/*@import url(overcast/jquery-ui-1.8.9.custom.css);*/

/* @group Entity styles */

Expand Down Expand Up @@ -225,11 +225,12 @@ body > nav ul {
}

body > footer {
color: #888;
clear: both;
font-size: 0.8em;
margin: 0;
position: absolute;
bottom: 1em;
width: 95%;
position: relative;
margin-top: 3em;
}

body > footer p {
Expand Down Expand Up @@ -259,17 +260,25 @@ section#upload {
border-radius: 1em
}

section#upload p {
text-align: center;
font-size: 0.9em;
color: #666;
margin-bottom: 0;
}
section#upload label {
color: #666;
font-size: 1.2em;
padding: 0 0.5em;
}

section#upload input[type=file] {
background: #eee;
border-radius: 1em;
width: 60%;
}

button,
section#upload input[type=submit] {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Expand All @@ -293,6 +302,7 @@ section#upload input[type=submit] {

}

button:hover,
section#upload input[type=submit]:hover {
background:rgba(240,240,240,1);
background: -webkit-gradient( linear,
Expand All @@ -307,7 +317,10 @@ section#upload input[type=submit]:hover {
);
}

button:active, button:focus {
button:active,
button:focus,
section#upload input[type=submit]:active,
section#upload input[type=submit]:focus {
background: -webkit-gradient( linear,
0% 100%,
0% 0%,
Expand All @@ -320,25 +333,37 @@ button:active, button:focus {
);
}

button:disabled {
button:disabled,
section#upload input[type=submit]:disabled {
color:rgba(0,0,0,0.4);
text-shadow:1px 1px 0px rgba(255,255,255,0.5);
background:rgba(220,220,220,1);
}

section#upload.targeted {
display: block;
section#upload table.uploads {
display: none;
background: #eee;
width: 80%;
font-size: 0.8em;
}

section#upload.uploading {
section#upload.uploading table.uploads {
display: block;
}
section#upload table.uploads tbody {
padding: 0;
}
section#upload table.uploads td {
padding: 0 4px;
}
section#upload table.uploads td.cancel {
width: 10%;
}

#dropzone {
display: none;
position: absolute;
top: 35%;
left: 35%%;
left: 35%;
opacity: 0.5;
border: 3px dashed rgba( 85,85,85, 0.4 );
border-radius: 35px;
Expand All @@ -356,6 +381,10 @@ section#upload.uploading {
rgba(25,25,25, 0.25));
}

#dropzone.dragging {
display: block;
}

#dropzone.targeted {
opacity: 1.0;
}
Expand All @@ -364,54 +393,6 @@ section#upload.uploading {
display: none;
}

section#upload .progress-bar {
color: white;
text-shadow: 0px 0px 2px #333;
position: relative;
font-size: 10px;
vertical-align: top;
width: 300px;
height: 14px;
background-color: rgba(240, 240, 240, 0.9);
margin: 2px auto;
border: 1px solid #999;
-webkit-box-shadow: 1px 1px 3px rgba( 25,25,25, 0.5 );
}

.progress-bar-progress {
background-color: #6c8c22;
background-image: -webkit-gradient( linear, 0 0, 0 100%,
color-stop( 0.0, rgba(255,255,255, 0.25) ),
color-stop( 0.4, rgba( 0, 0, 0, 0.35) ),
color-stop( 1.0, rgba(255,255,255, 0.15) )
);
background-image: -moz-linear-gradient( -90deg,
rgba(255,255,255, 0.15),
rgba( 0, 0, 0, 0.35) 40%,
rgba(255,255,255, 0.15)
);
width: 0%;
height: 12px;
margin: 1px 0px;
}

.progress-bar-filename {
position: absolute;
top: -3px;
left: 1em;
}

.progress-bar-percent {
position: absolute;
top: -3px;
left: 140px;
}

.progress-bar-speed {
position: absolute;
top: -3px;
right: 1em;
}

aside#error-notice {
position: absolute;
Expand Down
76 changes: 60 additions & 16 deletions data/gemserver/public/js/gemserver.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,6 @@ if (!("console" in window) || !("groupEnd" in console)) {
window.console[names[i]] = function() {};
}

function on_upload_dragenter( event ) {
EnterCounter.drag += 1;
console.debug( "DragEnter event (%d): %o", EnterCounter.drag, event );
$('#dropzone').addClass('targeted');
}

function on_upload_dragleave( event ) {
EnterCounter.drag -= 1;
console.debug( "DragLeave event (%d): %o", EnterCounter.drag, event );
if ( EnterCounter.drag == 0 )
$('#dropzone').removeClass('targeted');
}

function on_upload_docenter( event ) {
EnterCounter.doc += 1;
console.debug( "DocEnter event (%d): %o", EnterCounter.doc, event );
Expand All @@ -54,6 +41,19 @@ function on_upload_docleave( event ) {
$('#upload').removeClass('dragging');
}

function on_upload_dragenter( event ) {
EnterCounter.drag += 1;
console.debug( "DragEnter event (%d): %o", EnterCounter.drag, event );
$('#dropzone').addClass('targeted');
}

function on_upload_dragleave( event ) {
EnterCounter.drag -= 1;
console.debug( "DragLeave event (%d): %o", EnterCounter.drag, event );
if ( EnterCounter.drag == 0 )
$('#dropzone').removeClass('targeted');
}

function on_upload_drop( event ) {
console.debug( "Drop event: %o", event );
$('#upload').addClass('uploading');
Expand All @@ -62,9 +62,11 @@ function on_upload_drop( event ) {
function build_upload_row( files, index ) {
var file = files[ index ];
var tmpl = Templates.upload_row.clone();
console.debug( "Building an upload row for file %d of %d: %d", files.length, index, file.name );
console.debug( "Building an upload row for file %d of %d: %s",
index + 1, files.length, file.name );

tmpl.find( '.filename' ).html( file.name );
console.debug( "Returning row: %o", tmpl );

return tmpl;
}
Expand All @@ -76,6 +78,43 @@ function hasFileAPI() {
return typeof FileReader != 'undefined';
}


/**
* Callback for 'beforeSend' event.
*/
function on_before_send( event, files, index, xhr, handler, callBack ) {
var file = files[ index ];

if ( UploadCounter === 0 )
console.group( "Upload (%d files)", files.length );

console.debug( "Upload started for %s (%d of %d dropped)", file.name, index+1, files.length );
UploadCounter++;

$('#upload').addClass( 'uploading' );

return callBack();
}


/**
* Callback for the 'onComplete' event.
*/
function on_complete( event, files, index, xhr, handler ) {
var file = files[ index ];

console.debug( "Finished uploading %s", file.name );
UploadCounter--;

handler.progressbar.fadeOut( function() {$(this).remove();} );
if ( UploadCounter === 0 ) {
console.groupEnd();
$( '#main' ).load( '/gems' );
$('#upload').removeClass( 'uploading' );
}
}


function hook_fileupload() {
console.debug( "hooking fileupload" );

Expand All @@ -89,17 +128,20 @@ function hook_fileupload() {
onDocumentDragLeave: on_upload_docleave,
onDragEnter: on_upload_dragenter,
onDragLeave: on_upload_dragleave,
onDrop: on_upload_drop
beforeSend: on_before_send,
onComplete: on_complete
});

}

function set_upload_instructions() {
if ( hasDragAndDrop() && hasFileAPI() ) {
console.debug( " has drag-and-drop and the File API" );
$('#upload p').
html( "Select one or more gems to upload, or drag and drop them into this window.");
}
}


function handle_ajax_error( event, xhr, opts, err ) {
console.error( "AJAX error: %o", err );
$('#error-notice').
Expand All @@ -109,11 +151,13 @@ function handle_ajax_error( event, xhr, opts, err ) {

function extract_templates() {
Templates.upload_row = $('#upload table.uploads tr.upload-row').remove();
// Templates.upload_row = $('#upload table.uploads tr.upload-row').clone();
}

$(document).ready( function() {
extract_templates();
hook_fileupload();
set_upload_instructions();
$('#error-notice').ajaxError( handle_ajax_error );
});

13 changes: 11 additions & 2 deletions data/gemserver/views/index.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,16 @@
<input type="submit" value="Upload &rarr;" id="gem-upload-button" />
</form>

<div id="upload-progress">
</div>
<p>Select one or more gems to upload.</p>

<table class="uploads">
<tbody>
<tr class="upload-row">
<td class="filename">filename-1.0.8.gem</td>
<td class="progress"></td>
<td class="cancel">Cancel</td>
</tr>
</tbody>
</table>
</section>

2 changes: 1 addition & 1 deletion data/gemserver/views/layout.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

<footer>
<p>
<span class="name">Gemserver</span>
<span class="name"><%= Gemserver.version_string %></span>
<span class="vcsrev">$Revision$</span>
</p>
</footer>
Expand Down
Loading

0 comments on commit b586325

Please sign in to comment.