Upload page seperated, styled and Javscript-pimped

Actual upload is not yet working.

app/assets/javascripts/application.js

@@ -37,3 +37,21 @@ load_reviews = function() {
     }
   );
 };
+
+// Initialize the upload form.
+upload_form_init = function() {
+  // Disable the submit button until files are selected.
+  $('#file-submit').hide();
+
+  // Install event handler to notice when files were selected.
+  $('#file').on('change', upload_form_files_selected);
+};
+
+upload_form_files_selected = function() {
+  no_files = this.files.length;
+  if (no_files > 0) {
+    $('#file-label').html(no_files+" files selected");
+    $('#file-select-button').addClass('success');
+    $('#file-submit').fadeIn('slow');
+  }
+};

app/assets/stylesheets/_settings.scss

@@ -804,6 +804,20 @@ a.black
   color: #808080;
 }
 
+.bigpanel
+{
+  background-color: $light-gray;
+  border-radius: 10px;
+  padding: 1em 1em 0.1em 1em;
+  margin-bottom: 1em;
+}
+
+.subtitle
+{
+  font-size: 120%;
+  color: #808080;
+}
+
 .packagepage
 {
   h1
@@ -811,11 +825,6 @@ a.black
     margin-bottom: 0;
   }
 
-  .subtitle
-  {
-    font-size: 120%;
-    color: #808080;
-  }
 
   /* Description of a screenshot (e.g. the situation when the screenshot was taken) */
   .imgcaption
@@ -832,13 +841,6 @@ a.black
     color: #808080;
   }
 
-  .bigpanel
-  {
-    background-color: $light-gray;
-    border-radius: 10px;
-    padding: 1em 1em 0.1em 1em;
-    margin-bottom: 1em;
-  }
 
   .comment
   {
@@ -897,3 +899,17 @@ a.black
 {
   line-height: 120%;
 }
+
+/* Hide the file upload button to just show the styleable label */
+/* display: none will not work - this is the workaround */
+.hidden-inputfile {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+.inputfile + label {
+  cursor: pointer; /* "hand" cursor */
+}

app/views/packages/_details_rightbox.slim

@@ -20,7 +20,7 @@
       ' Please help extend the collection of screenshots.
       ' Just make a screenshot and upload it here. You don't
       ' need to register or anything.
-    a.button.small.expand data-open="upload-modal" Upload now
+    a.button.small.expand href=upload_path(pkg.name) Upload now
 
   // homepage
   - if pkg.homepage.present?

app/views/packages/details.slim

@@ -63,7 +63,7 @@
   .small-5.medium-5.columns
     = render(partial: 'details_rightbox', locals: {pkg: @package})
 
-  = render(partial: 'details_uploadmodal')
+  / = render(partial: 'details_uploadmodal')
 
 javascript:
   $( function() {

app/views/packages/upload.slim

@@ -1,85 +1,71 @@
-.row.packagepage
+.row
-  .small-12.columns
+  h1 = "Upload a screenshot for #{@package.name}"
-    h1 = "Upload a new screenshot for #{@package.name}>"
+
+.row
+  .small-7.columns
     p.subtitle = @package.description
+    p
+      ' You are about to upload a screenshot for the #{@package.name}
+      ' package. Thanks for your contribution.
+    - if @package.screenshots.any?
+      p
+        ' Just for your information - these screenshots have already been uploaded.
 
-.row.packagepage
+      .small-up-1.medium-up-3.large-up-4.grid-thumbnails
-  .small-12.medium-7.large-8.columns
+        - @package.screenshots.all.each do |ss|
-    // First row contains the upload form
+          a.black.fancybox href=ss.image.url(:large, timestamp: false) rel='fancybox-thumb' title=ss.caption
-    .row
+            = image_tag(ss.image.url(:thumb, timestamp: false), alt: ss.caption, class: 'thumbnail')
-      .small-6.columns
-        //input id="fileupload" type="file" name="files[]" data-url=upload_image_path(name: @package.name) multiple=true
 
-        //= form_for @new_screenshot, :url => upload_image_path, :html => { :multipart => true } do |form|
+          // = render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
-        //  = form.file_field :image
-        //  = form.submit 'Save'
-        = form_tag(upload_image_path, multipart: true)
-          = file_field_tag('image')
-          = submit_tag
 
-        //a.button.radius.expand href=upload_package_by_name_path(name: @package.name)
+    - else
-          //' Click or drag a PNG screenshot file here
+      ' There are no screenshots yet for #{@package.name}.
-      .small-6.columns
-        ' Form
-    - @package.screenshots.each do |screenshot|
-      .row
-        img src=screenshot.image.url(:large, timestamp: false, alt: screenshot.caption)
-        = link_to "Delete screenshot", delete_screenshot_path(@package.name, screenshot.id), onclick: "return confirm('Really delete the screenshot?');"
 
-//    - @package.screenshots.each do |screenshot|
+    = form_tag(upload_image_path, multipart: true)
-//      .listview
-//        a.black.fancybox href=screenshot.image.url(:large, timestamp: false) rel='fancybox-thumb' title=screenshot.caption
-//          = image_tag(screenshot.image.url(:large, timestamp: false), alt: screenshot.caption)
-//          .imgcaption
-//            => screenshot.caption
-//            - if screenshot.uploader
-//              | (Uploaded by
-//              =< screenshot.uploader
-//              | )
 
-  .small-12.medium-5.large-4.columns
+      input.hidden-inputfile type="file" name="file" id="file" multiple=true
-    .bigpanel
+      label for="file"
-      p Thanks for uploading more screenshots. Please note:
+        a.button id="file-select-button"
-      ul
+          = fa_stacked_icon "image", base: "circle-thin"
-        li
+          span id="file-label"
-          ' Screenshots are made public and can freely be used by anyone.
+            '  Select screenshot files
-        li
-          ' Your screenshots must be in PNG format.
-        li
-          ' Images larger than 800x600 pixels will automatically be reduced.
-          ' So don't try to put too much detail on a screenshot.
-        li
-          ' Your screenshot should contain a typical scene when working with it.
-        li
-          ' Nice tools for taking screenshots are shutter, ksnapshot (KDE),
-          ' gimp, xwd or scrot. See the
-          a href='http://wiki.debian.org/ScreenShots' Debian wiki
-          '  for more information on how to make screenshots under Debian.
-        li
-          ' Please set your language to english so that everybody understands it.
-          ' If you don't use english by default please start your application
-          ' from a shell using after setting "export LANG=C".
-        li
-          ' Please only take a screenshot of the respective application and not of
-          ' your whole desktop (unless the screenshot is meant for a window manager).
-        li
-          ' If you are not logged in or lack the reputation then your screenshot
-          ' may need to be approved by the moderators first.
 
-    //ul.small-block-grid-1.medium-block-grid-2.large-block-grid-2
+      button.button type="submit" id="file-submit"
-    //  - for screenshot in @package.screenshots
+        = fa_stacked_icon "upload", base: "circle-thin"
-    //    li
+        '  Start upload
-    //      a.black.fancybox href=screenshot.url('large') rel='fancybox-thumb' title=screenshot.caption
-    //        img src=screenshot.url('large')
-    //        .imgcaption =screenshot.caption
-    //
 
-//javascript:
+
-//  $('#fileupload').fileupload({
+  .small-5.columns.bigpanel
-//    dataType: 'json',
+    p.subtitle Your upload…
-//    done: function (e, data) {
+    ul
-//      $.each(data.result.files, function (index, file) {
+      li
-//        $('<p/>').text(file.name).appendTo(document.body);
+        ' should contain a typical scene when working with it.
-//      });
+      li
-//    }
+        ' should show the actual application and not just
-//  });
+        ' your whole desktop (unless the screenshot is meant for a window manager).
+      li
+        ' must be in PNG format.
+      li
+        ' can be multiple images at once.
+      li
+        ' needs to be approved by the moderators first before it is publicly visible.
+      li
+        ' will be reduced if it is lager than 800x600 pixels.
+        ' So don't try to capture too much detail in a screenshot. It may become
+        ' unreadable. Shrink the applications window if possible.
+      li
+        ' will be made public and can freely be used by anyone.
+      li
+        ' can be taken by screenshot tools like shutter, ksnapshot (KDE),
+        ' gimp, xwd or scrot. See the
+        a href='http://wiki.debian.org/ScreenShots' Debian wiki
+        '  for more information on how to make screenshots under Debian.
+      li
+        ' should preferably show the application in english.
+        ' If you don't use english by default please start your application
+        ' from a shell using after setting "export LANG=C".
+
+javascript:
+  // Hide the submit button unless images are selected for upload
+  $(document).ready(upload_form_init);
+  // TODO: Move into javascripts/packages/upload...

config/routes.rb

@@ -18,9 +18,9 @@ Debshots::Application.routes.draw do
   get 'logs' => 'logs#index'
   get 'package/:name' => 'packages#details', as: :package, name: /[^\/]+/
   get 'package_reviews/:name' => 'packages#reviews', as: :package_reviews, name: /[^\/]+/
-  get 'upload', to: redirect('/packages') # legacy upload form
+  get 'upload', to: redirect('/packages'), as: :upload_legacy # legacy upload form
   post 'uploadfile' => 'packages#legacy_uploadfile'
-  get 'upload/:name' => 'packages#upload', as: :upload_package_by_name
+  get 'upload/:name' => 'packages#upload', as: :upload
   post 'upload_image/:name' => 'packages#upload_image', as: :upload_image, name: /[^\/]+/
   # TODO: "get" is probably the wrong method to delete a screenshot
   get 'delete_screenshot/:id' => 'packages#delete_screenshot', as: :delete_screenshot