[prev in list] [next in list] [prev in thread] [next in thread]
List: kfm-devel
Subject: Re: Review Request 126622: GSoC 2016 Project Idea: File Trays for Dolphin GUI Mockup
From: "arnav dhamija" <arnav.dhamija () gmail ! com>
Date: 2016-01-07 7:00:33
Message-ID: 20160107070033.6499.76098 () mimi ! kde ! org
[Download RAW message or body]
--===============6882907988527879042==
MIME-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://git.reviewboard.kde.org/r/126622/
-----------------------------------------------------------
(Updated Jan. 7, 2016, 7 a.m.)
Review request for Dolphin and KDE Usability.
Changes
-------
Added a new mockup
Description (updated)
-------
**The idea**
Selecting multiple files in any file manager for copying and pasting has never been a \
pleasant experience, especially if the files are in a non-continuous order. Often, \
when copying files between devices we might find that we need to select only a subset \
of the required files we have selected and this leads to the unwieldy operation of \
removing files from our selection. Of course, the common workaround is to create a \
new folder and to put all the items in but this is a very inefficient process and \
can be very slow if large files need to be copied between devices.
My solution to this problem is to add a panel/view in Dolphin where the links to \
files and folders can be temporarily saved for a session. The files and folders are \
"staged" on this panel. Hence, the user can add folders and files from several \
different directories to this panel and can then collectively perform actions on all \
the items in the tray such as copy, paste, cut, upload images in selection to \
Facebook, upload files to Dropbox, etc. This makes complex file operations easy by \
staging the operation before performing it.
Files can be added to this tray by using a right-click context menu option or by \
using the mouse scroll click or drag and drop. As an additional option, the session \
for the File Tray Panel can be saved for later use.
My initial idea was to have another split view mode with its button in the toolbar in \
Dolphin. It will function similarly to the existing split view but with one half of \
the screen dedicated to the "Files tray". This would make it neatly integrated with \
Dolphin's existing toolset and it would make dragging and dropping easy. Dolphin \
maintainer Emmanuel Pescosta suggested using Plasmoids to make the project more \
cohesive with KDE and to make it usable with multiple applications (eg Gwenview).
**GUI Mockup**
Attached with this Review Request is a Balsamiq mockup for my project idea, building \
upon what already exists in Dolphin. The Tray panel is activated by a toggle button \
on the Dolphin toolbar and behaves very similarly to the Split feature. Dragging and \
dropping folders and files from the active directory on the left and pasting directly \
from the clipboard will be supported.
The File Tray gets its very own toolbar for implementing these functions on all the \
files placed in the Tray.
The "Destination Folder" dropdown has a list of recently accessed folders **and** an \
option to choose the active directory on the left of the File Tray.
"Cut" and "Copy" are self explanatory and will allow for files on the Tray to be \
transferred to the "Destination Folder".
The "Search in Files" button will use grep to find a certain string in the files \
located on the Tray. A search bar drops down when this is clicked.
The "Archive" button allows the user to compress and package the files in various \
archive formats.
The 3 dots menu hides more advanced features and prevents the toolbar from becoming \
too imposing.
"Create shortcuts" will create symbolic links for all the files in the Destination \
Folder the user has chosen.
"View Git version history" (I'm not sure if this will be useful) will display a GUI \
with the Git revisions along with the Git log if a .git folder is found in a \
directory.
The File Tray will use the same zoom and icon/details/compact settings as the main \
window of the file manager. While it may be technically possible to have a \
distinction, I feel it may be too complicated for many users as there will be many \
duplicate controls.
Also, as the toolbar for the File Tray is quite large, I'm not sure how to design the \
interaction when the window is scaled to a smaller size. Maybe the buttons \
overflowing can dynamically move into the 3 dots icon but I am not sure if this is a \
good practice.
I will be much obliged to hear feedback from the usability and dolphin teams on these \
GUI interactions : )
**EDIT**
After some more thought, I have decided to get rid of the File Tray toolbar. All \
these actions can either be integrated with Dolphin's existing context menus. There \
are some use cases I have thought of:
Jerry has a large music collection on his computer and he has many devices such as a \
tablet, smartphone, HTPC, and a USB drive for his car audio. He needs only a subset \
of files from his extensive collection which he wants to keep on all his devices. \
Hence, to avoid making the same selection over and over again for each device, it's \
much more efficient for him to just create his list on the File Tray and then copy \
the same list to each device.
George is a student at university and he has a lot of unorganised files on his \
computer from lots of different directories. By selecting these files and staging \
them on the File Tray in a split view mode, he can easily discern where each file \
should go. He can then easily move files by simply dragging and dropping them in the \
directory they belong in. This makes the File Tray a helpful tool for file \
organisation.
Cosmo keeps forgetting where he keeps his important files as they are often hidden \
deep within directories and sub-directories. The File Trays feature can come to the \
rescue here by letting him stash the files in the File Tray and hence it will save \
him time from drilling deep into directories for a file. Hence, the File Tray can \
also be used for making quick shortcuts for files. For this I plan to add a feature \
and user preference to allow the user to restore the Tray from the previous session \
and to have the option of making the Tray retain the files stored in it across \
sessions.
Furthermore, by default, the File Tray will **not** retain the files added in it \
across sessions, though I will add a button to restore files from the previous \
session. I also plan to add a Save button (not sure where it should go) to allow the \
user to save the selection of files they have made on the Tray.
Another important note about the interaction model I have thought about is that the \
File Tray should have its own shortcut such as ctrl+W (of course the keyboard \
shortcut is subject to change). Invoking this shortcut on a selected number of files \
in the Active Directory should immediately open the File Tray and add all the Files \
in the selection there. Moreover, the Split view will be disabled whenever the File \
Tray is active. If the split view is open when the File Tray keyboard shortcut is \
activated, the Split view of the inactive directory will close and will be replaced \
with the File Tray.
Also, the File Open dialog will undergo some modification so users can select items \
directly off the Tray for other programs.
Finally, I also want to create a Plasmoid which will sync the same links as the File \
Tray and will exist as a widget on the Desktop. This Plasmoid will benefit the KDE \
desktop as a whole as multiple applications will be able to interact with the \
Plasmoid for stashing files. However, the completion of this may or may not happen \
with the GSoC timeline as it is completely dependent on how much QML I can learn by \
the time the GSoC proposal period starts : )
Also, there are a few more features I want to add to make the File Tray more \
powerful. However, these features are probably a better fit for Dolphin in general, \
and then the File Tray can use these functions from Dolphin: 1) The ability to create \
symbolic links of a selection of files. Nautilus has been doing this for a while. 2) \
Automatically create a music playlist file by selecting music files.
**EDIT2**
I made a new mockup by butchering the mockup a bit :S But, the new one is at least \
indicative of what I want to achieve with this project.
Diffs
-----
Diff: https://git.reviewboard.kde.org/r/126622/diff/
Testing
-------
File Attachments (updated)
----------------
FileTray Mockup (OLD).png
https://git.reviewboard.kde.org/media/uploaded/files/2016/01/04/ec5ec185-0307-4579-afc4-567d2aafa220__FileTray_Mockup.png
FileTray Mockup.png
https://git.reviewboard.kde.org/media/uploaded/files/2016/01/07/e6e2accb-714f-45fc-a026-fd69574f6790__FileTray_Mockup.png
Thanks,
arnav dhamija
--===============6882907988527879042==
MIME-Version: 1.0
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit
<html>
<body>
<div style="font-family: Verdana, Arial, Helvetica, Sans-Serif;">
<table bgcolor="#f9f3c9" width="100%" cellpadding="12" style="border: 1px #c9c399 \
solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;"> \
<tr> <td>
This is an automatically generated e-mail. To reply, visit:
<a href="https://git.reviewboard.kde.org/r/126622/">https://git.reviewboard.kde.org/r/126622/</a>
</td>
</tr>
</table>
<br />
<table bgcolor="#fefadf" width="100%" cellspacing="0" cellpadding="12" style="border: \
1px #888a85 solid; border-radius: 6px; -moz-border-radius: 6px; \
-webkit-border-radius: 6px;"> <tr>
<td>
<div>Review request for Dolphin and KDE Usability.</div>
<div>By arnav dhamija.</div>
<p style="color: grey;"><i>Updated Jan. 7, 2016, 7 a.m.</i></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Changes</h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: \
1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;">Added a new mockup</pre> </td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Description \
(updated)</h1> <table width="100%" bgcolor="#ffffff" cellspacing="0" \
cellpadding="10" style="border: 1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;"><strong style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">The idea</strong> \
Selecting multiple files in any file manager for copying and pasting has never been a \
pleasant experience, especially if the files are in a non-continuous order. Often, \
when copying files between devices we might find that we need to select only a subset \
of the required files we have selected and this leads to the unwieldy operation of \
removing files from our selection. Of course, the common workaround is to create a \
new folder and to put all the items in but this is a very inefficient process and \
can be very slow if large files need to be copied between devices.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">My solution to this problem is to add a panel/view in Dolphin where the \
links to files and folders can be temporarily saved for a session. The files and \
folders are "staged" on this panel. Hence, the user can add folders and files from \
several different directories to this panel and can then collectively perform actions \
on all the items in the tray such as copy, paste, cut, upload images in selection to \
Facebook, upload files to Dropbox, etc. This makes complex file operations easy by \
staging the operation before performing it.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">Files can be added to \
this tray by using a right-click context menu option or by using the mouse scroll \
click or drag and drop. As an additional option, the session for the File Tray Panel \
can be saved for later use.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">My initial idea was to have another \
split view mode with its button in the toolbar in Dolphin. It will function similarly \
to the existing split view but with one half of the screen dedicated to the "Files \
tray". This would make it neatly integrated with Dolphin's existing toolset and it \
would make dragging and dropping easy. Dolphin maintainer Emmanuel Pescosta suggested \
using Plasmoids to make the project more cohesive with KDE and to make it usable with \
multiple applications (eg Gwenview).</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;"><strong style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">GUI \
Mockup</strong> Attached with this Review Request is a Balsamiq mockup for my project \
idea, building upon what already exists in Dolphin. The Tray panel is activated by a \
toggle button on the Dolphin toolbar and behaves very similarly to the Split feature. \
Dragging and dropping folders and files from the active directory on the left and \
pasting directly from the clipboard will be supported.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">The \
File Tray gets its very own toolbar for implementing these functions on all the files \
placed in the Tray.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">The "Destination Folder" dropdown has a \
list of recently accessed folders <strong style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">and</strong> an option \
to choose the active directory on the left of the File Tray. </p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">"Cut" \
and "Copy" are self explanatory and will allow for files on the Tray to be \
transferred to the "Destination Folder".</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">The "Search in Files" \
button will use grep to find a certain string in the files located on the Tray. A \
search bar drops down when this is clicked.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">The "Archive" button \
allows the user to compress and package the files in various archive formats.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">The 3 dots menu hides more advanced features and prevents the toolbar from \
becoming too imposing.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">"Create shortcuts" will create symbolic \
links for all the files in the Destination Folder the user has chosen.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">"View Git version history" (I'm not sure if this will be useful) will \
display a GUI with the Git revisions along with the Git log if a .git folder is found \
in a directory.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">The File Tray will use the same zoom \
and icon/details/compact settings as the main window of the file manager. While it \
may be technically possible to have a distinction, I feel it may be too complicated \
for many users as there will be many duplicate controls.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Also, \
as the toolbar for the File Tray is quite large, I'm not sure how to design the \
interaction when the window is scaled to a smaller size. Maybe the buttons \
overflowing can dynamically move into the 3 dots icon but I am not sure if this is a \
good practice. </p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">I will be much obliged to hear feedback \
from the usability and dolphin teams on these GUI interactions : )</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;"><strong style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: normal;">EDIT</strong> After some more thought, I have decided \
to get rid of the File Tray toolbar. All these actions can either be integrated with \
Dolphin's existing context menus. There are some use cases I have thought of:</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Jerry has a large music collection on his computer and he has many devices \
such as a tablet, smartphone, HTPC, and a USB drive for his car audio. He needs only \
a subset of files from his extensive collection which he wants to keep on all his \
devices. Hence, to avoid making the same selection over and over again for each \
device, it's much more efficient for him to just create his list on the File Tray and \
then copy the same list to each device.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">George is a student at \
university and he has a lot of unorganised files on his computer from lots of \
different directories. By selecting these files and staging them on the File Tray in \
a split view mode, he can easily discern where each file should go. He can then \
easily move files by simply dragging and dropping them in the directory they belong \
in. This makes the File Tray a helpful tool for file organisation.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Cosmo keeps forgetting where he keeps his important files as they are often \
hidden deep within directories and sub-directories. The File Trays feature can come \
to the rescue here by letting him stash the files in the File Tray and hence it will \
save him time from drilling deep into directories for a file. Hence, the File Tray \
can also be used for making quick shortcuts for files. For this I plan to add a \
feature and user preference to allow the user to restore the Tray from the previous \
session and to have the option of making the Tray retain the files stored in it \
across sessions.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Furthermore, by default, the File Tray \
will <strong style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: normal;">not</strong> retain the files added in it across \
sessions, though I will add a button to restore files from the previous session. I \
also plan to add a Save button (not sure where it should go) to allow the user to \
save the selection of files they have made on the Tray.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Another important note about the interaction model I have thought about is \
that the File Tray should have its own shortcut such as ctrl+W (of course the \
keyboard shortcut is subject to change). Invoking this shortcut on a selected number \
of files in the Active Directory should immediately open the File Tray and add all \
the Files in the selection there. Moreover, the Split view will be disabled whenever \
the File Tray is active. If the split view is open when the File Tray keyboard \
shortcut is activated, the Split view of the inactive directory will close and will \
be replaced with the File Tray.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">Also, the File Open \
dialog will undergo some modification so users can select items directly off the Tray \
for other programs.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Finally, I also want to create a \
Plasmoid which will sync the same links as the File Tray and will exist as a widget \
on the Desktop. This Plasmoid will benefit the KDE desktop as a whole as multiple \
applications will be able to interact with the Plasmoid for stashing files. However, \
the completion of this may or may not happen with the GSoC timeline as it is \
completely dependent on how much QML I can learn by the time the GSoC proposal period \
starts : )</p> <p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">Also, there are a few more features I want to add to \
make the File Tray more powerful. However, these features are probably a better fit \
for Dolphin in general, and then the File Tray can use these functions from Dolphin: \
1) The ability to create symbolic links of a selection of files. Nautilus has been \
doing this for a while. 2) Automatically create a music playlist file by selecting \
music files.</p> <p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;"><strong style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">EDIT2</strong> I made a \
new mockup by butchering the mockup a bit :S But, the new one is at least indicative \
of what I want to achieve with this project.</p></pre> </td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Diffs</b> </h1>
<ul style="margin-left: 3em; padding-left: 0;">
</ul>
<p><a href="https://git.reviewboard.kde.org/r/126622/diff/" style="margin-left: \
3em;">View Diff</a></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">File Attachments \
(updated)</h1>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/01/04/ec5ec185-0307-4579-afc4-567d2aafa220__FileTray_Mockup.png">FileTray \
Mockup (OLD).png</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/01/07/e6e2accb-714f-45fc-a026-fd69574f6790__FileTray_Mockup.png">FileTray \
Mockup.png</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
--===============6882907988527879042==--
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic