diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 9b2247c..c60af6a 100644 --- a/app/assets/javascripts/application.js +++ b/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'); + } +}; diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index bc4c134..f55b409 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/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 */ +} \ No newline at end of file diff --git a/app/views/packages/_details_rightbox.slim b/app/views/packages/_details_rightbox.slim index 069a93a..10e4579 100644 --- a/app/views/packages/_details_rightbox.slim +++ b/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? diff --git a/app/views/packages/details.slim b/app/views/packages/details.slim index 155d1a0..d583eae 100644 --- a/app/views/packages/details.slim +++ b/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() { diff --git a/app/views/packages/upload.slim b/app/views/packages/upload.slim index cdf5372..08674ce 100644 --- a/app/views/packages/upload.slim +++ b/app/views/packages/upload.slim @@ -1,85 +1,71 @@ -.row.packagepage - .small-12.columns - h1 = "Upload a new screenshot for #{@package.name}>" +.row + h1 = "Upload a 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-12.medium-7.large-8.columns - // First row contains the upload form - .row - .small-6.columns - //input id="fileupload" type="file" name="files[]" data-url=upload_image_path(name: @package.name) multiple=true + .small-up-1.medium-up-3.large-up-4.grid-thumbnails + - @package.screenshots.all.each do |ss| + a.black.fancybox href=ss.image.url(:large, timestamp: false) rel='fancybox-thumb' title=ss.caption + = image_tag(ss.image.url(:thumb, timestamp: false), alt: ss.caption, class: 'thumbnail') - //= form_for @new_screenshot, :url => upload_image_path, :html => { :multipart => true } do |form| - // = form.file_field :image - // = form.submit 'Save' - = form_tag(upload_image_path, multipart: true) - = file_field_tag('image') - = submit_tag + // = render partial: 'packages/grid_thumbnail', locals: { pkg: pkg } - //a.button.radius.expand href=upload_package_by_name_path(name: @package.name) - //' Click or drag a PNG screenshot file here - .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?');" + - else + ' There are no screenshots yet for #{@package.name}. -// - @package.screenshots.each do |screenshot| -// .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 -// | ) + = form_tag(upload_image_path, multipart: true) - .small-12.medium-5.large-4.columns - .bigpanel - p Thanks for uploading more screenshots. Please note: - ul - li - ' Screenshots are made public and can freely be used by anyone. - 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. + input.hidden-inputfile type="file" name="file" id="file" multiple=true + label for="file" + a.button id="file-select-button" + = fa_stacked_icon "image", base: "circle-thin" + span id="file-label" + ' Select screenshot files - //ul.small-block-grid-1.medium-block-grid-2.large-block-grid-2 - // - for screenshot in @package.screenshots - // li - // a.black.fancybox href=screenshot.url('large') rel='fancybox-thumb' title=screenshot.caption - // img src=screenshot.url('large') - // .imgcaption =screenshot.caption - // + button.button type="submit" id="file-submit" + = fa_stacked_icon "upload", base: "circle-thin" + ' Start upload -//javascript: -// $('#fileupload').fileupload({ -// dataType: 'json', -// done: function (e, data) { -// $.each(data.result.files, function (index, file) { -// $('
').text(file.name).appendTo(document.body); -// }); -// } -// }); + + .small-5.columns.bigpanel + p.subtitle Your upload… + ul + li + ' 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... diff --git a/config/routes.rb b/config/routes.rb index 5eafc3d..c3a8fc9 100644 --- a/config/routes.rb +++ b/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