Difference between revisions of "Multilingual files uploader"

From PKP Wiki
Jump to: navigation, search
(Removed unnecessary title)
(added multilingual grid suggestion)
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
We need a widget that allows the upload of files in a multilingual scenario. Here we spec out only a multilingual uploader for image files, though it can be extended later to handle other file types.  
+
We need a widget that allows the upload of files in a multilingual scenario. Here we spec out only a multilingual uploader for image files, though it can be extended later to handle other file types.
  
= Image files =
+
We used grids and added a multilingual row to them.
  
We try to use the same logic of our multilingual fields because the requirements are the same: user needs to be able to see and edit all localized data for the field at once, without any modification in the user interface language and also no other control outside the field itself.
+
 +
[[File:Multilingual grid.png]]
  
== Use cases ==
+
The first image, at the top to the bottom, is the common grid with a file already uploaded.
  
Users trying to upload multiple issue covers or uploading website homepage image.
+
The second one is the multilingual popover visible. This will happen when users mouse over the grid row or (if we are concerned about mobile devices) when they click on the multilingual icon. We can add a help text inside a notification and present to users after their first upload to tell them about those details. Note the multilingual popover action (delete all), so users can delete an item and it's localized versions with just one click.
  
== Mockup ==
+
The third one is the state of the grid if any localized data is missing. Note the exclamation icon at the side of the multilingual one. This is a suggestion that we can use or not. If we use we can use to all other multilingual widgets.
[[File:Multilingual image uploader.png]]
+
  
This is a proposal. State 1 is the default one. We can use a bigger thumbnail, but it must be always a fixed size, so we can make sure that the page layout will not break depending on the size of the original image.
+
The grid add action will first add an item into the primary locale (the required one). This is a little different from the other multilingual controls, but it's necessary so we can avoid validating user actions after something it's done. I think that's important to keep the feeling that actions inside the grid are saved in real time, so anything that's not possible to be done should be forbidden. This will also avoid a lot of extra work, like deleting files already uploaded if user cancelled the action instead of saving, etc.
  
After user tabbed or mouse hover the image controller, the second state is shown.  
+
After adding an item for the primary locale, users can add multilingual versions by clicking the grid add action again and choosing to add a localized version of the existing item inside the grid. If they don't want to upload a localized version of an existing item, they can just do the normal upload.
  
If user mouse out with no clicking inside any link of the multilingual controller, than it will disappear.
+
Users can add localized versions of existing items also interacting directly with the localized rows, what I think it will be a lot easier. Once they upload an item for the primary locale, a multilingual row will be visible and they can mouse over and interact with the other localized rows.
  
If user clicked in any link (info or delete), it can perform those actions and the multilingual will still be opened. It will only close if user clicks outside, just like the default multilingual (maybe we can add a close icon at the top right of the multilingual controllers to make it obvious).
+
If there is no item to show for the interface locale, then we can present the item for the primary locale but with a different background, so this and the flag of the primary locale will make it clear to users that the data for the current locale is missing.
 
+
The actions will open a modal (info and upload) and a confirmation modal (delete). The upload action can directly open a file browse to add a file if no other data is required for the file (like alternate text). If alternate text is required, than it should open a modal with both fields.
+
 
+
The info modal can show the filename, size, dimensions, a real image size, etc. But that can be secondary. The primary goal is to present to users a quickly visualization of each file, so they can decide what to do.
+
 
+
== Implementation details ==
+
 
+
I think that we can still use plupload widget to implement this. The only modification will be the case where we want to upload a file directly without any other actions, like add and after upload. I think that's not too complicated to make the plupload trigger itself the upload action after a file is added. Then we can just use the add action, rename it to upload and hide anything else from the plupload widget.
+
 
+
Anyway, if we want we can also change the plupload to another widget and make sure it works for this multilingual file upload.
+
 
+
= Other file types =
+
 
+
Actually we don't have any use case for this. If it appears, we should follow the same logic from the image uploader.
+

Latest revision as of 12:15, 29 July 2013

We need a widget that allows the upload of files in a multilingual scenario. Here we spec out only a multilingual uploader for image files, though it can be extended later to handle other file types.

We used grids and added a multilingual row to them.


Multilingual grid.png

The first image, at the top to the bottom, is the common grid with a file already uploaded.

The second one is the multilingual popover visible. This will happen when users mouse over the grid row or (if we are concerned about mobile devices) when they click on the multilingual icon. We can add a help text inside a notification and present to users after their first upload to tell them about those details. Note the multilingual popover action (delete all), so users can delete an item and it's localized versions with just one click.

The third one is the state of the grid if any localized data is missing. Note the exclamation icon at the side of the multilingual one. This is a suggestion that we can use or not. If we use we can use to all other multilingual widgets.

The grid add action will first add an item into the primary locale (the required one). This is a little different from the other multilingual controls, but it's necessary so we can avoid validating user actions after something it's done. I think that's important to keep the feeling that actions inside the grid are saved in real time, so anything that's not possible to be done should be forbidden. This will also avoid a lot of extra work, like deleting files already uploaded if user cancelled the action instead of saving, etc.

After adding an item for the primary locale, users can add multilingual versions by clicking the grid add action again and choosing to add a localized version of the existing item inside the grid. If they don't want to upload a localized version of an existing item, they can just do the normal upload.

Users can add localized versions of existing items also interacting directly with the localized rows, what I think it will be a lot easier. Once they upload an item for the primary locale, a multilingual row will be visible and they can mouse over and interact with the other localized rows.

If there is no item to show for the interface locale, then we can present the item for the primary locale but with a different background, so this and the flag of the primary locale will make it clear to users that the data for the current locale is missing.