From 8c3de4c14221110f4ed59c8651828dce70a2ac9a Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Sun, 19 Apr 2015 11:12:59 +0200 Subject: [PATCH] Use modal for image upload. This way there's more space to display the hints on how screenshots should be taken. --- app/views/packages/details.slim | 63 ++++++++++++++++++++++++++++----- 1 file changed, 54 insertions(+), 9 deletions(-) diff --git a/app/views/packages/details.slim b/app/views/packages/details.slim index 7aa9afe..d251824 100644 --- a/app/views/packages/details.slim +++ b/app/views/packages/details.slim @@ -24,12 +24,6 @@ onclick="return confirm('Really delete the screenshot?');" ] Delete screenshot - // Upload image - li - = form_for :screenshot, url: upload_image_path, html: { multipart: true } do |f| - = image_tag("/images/dummy/upload.svg", style: "width: 100%", id: 'upload-image') - = f.file_field :image, id: 'fileupload', multiple: true, style: 'display: none' - // TODO: Enable comments in a later version // = partial '/package/comments' @@ -47,7 +41,52 @@ ' The goal of Icedove is to produce a cross platform standalone mail ' application using the XUL user interface language. - //a.button.radius.expand href=upload_package_by_name_path(name: @package.name) Upload a new screenshot + + / a.button.round.expand href=upload_package_by_name_path(name: @package.name) Upload more screenshots for #{@package.name} + a.button.round.expand data-reveal-id="upload-modal" Upload more screenshots for #{@package.name} + + #upload-modal.reveal-modal data-reveal=true role='dialog' + h1 Upload new screenshots + .row + .small-4.columns + = form_for :screenshot, url: upload_image_path, html: { multipart: true } do |f| + / = image_tag("/images/dummy/upload.svg", style: "width: 100%", id: 'upload-image') + a.button id='upload-image' Start uploading + = f.file_field :image, id: 'fileupload', multiple: true, style: 'display: none' + + .small-8.columns + .bigpanel + p Thanks for uploading more screenshots. Please note: + ul + li + ' Your screenshot should contain a typical scene when working with it. + li + ' Take only a screenshot of the respective application and not of + ' your whole desktop (unless the screenshot is meant for a window manager). + li + ' Your screenshots must be in PNG format. + li + ' You can upload multiple images at once. + li + ' Your screenshot need to be approved by the moderators first. + ' You will already see your screenshot but it will not be visible to + ' others instantly. + li + ' Images larger than 800x600 pixels will automatically be reduced. + ' So don't try to capture too much detail in a screenshot. It may become + ' unreadable. Shrink the applications window if possible. + li + ' Screenshots are made public and can freely be used by anyone. + li + ' Useful programs for making 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". + //javascript: // $(function () { @@ -70,16 +109,22 @@ javascript: $(function () { + var upload_enabled = true; + // If the image button is clicked then imitate a click on the file // select button that is hidden. $("#upload-image").click( function () { - $("#fileupload").click(); + if (upload_enabled) { + $("#fileupload").click(); + } }); // Files have been selected. Tell the user what's going on and // submit the upload form. $('#fileupload').change( function () { - $('#upload-image').attr('src', '/images/dummy/please-wait.svg'); + // $('#upload-image').attr('src', '/images/dummy/please-wait.svg'); + upload_enabled = false; + $('#upload-image').html('Please wait...'); $('form').submit(); }); });