chaas/debshots
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Use modal for image upload.

Browse source 
This way there's more space to display the hints on how screenshots
should be taken.
This commit is contained in:
Christoph Haas 2015-04-19 11:12:59 +02:00
parent 0efe3ba176
commit 8c3de4c142
1 changed files with 54 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

63
app/views/packages/details.slim
View file

@ -24,12 +24,6 @@
onclick="return confirm('Really delete the screenshot?');" onclick="return confirm('Really delete the screenshot?');"
] Delete 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 // TODO: Enable comments in a later version
// = partial '/package/comments' // = partial '/package/comments'
@ -47,7 +41,52 @@
' The goal of Icedove is to produce a cross platform standalone mail ' The goal of Icedove is to produce a cross platform standalone mail
' application using the XUL user interface language. ' 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: //javascript:
// $(function () { // $(function () {
@ -70,16 +109,22 @@
javascript: javascript:
$(function () { $(function () {
var upload_enabled = true;
// If the image button is clicked then imitate a click on the file // If the image button is clicked then imitate a click on the file
// select button that is hidden. // select button that is hidden.
$("#upload-image").click( function () { $("#upload-image").click( function () {
$("#fileupload").click(); if (upload_enabled) {
$("#fileupload").click();
}
}); });
// Files have been selected. Tell the user what's going on and // Files have been selected. Tell the user what's going on and
// submit the upload form. // submit the upload form.
$('#fileupload').change( function () { $('#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(); $('form').submit();
}); });
}); });