As an OC user I want clear badges in my list of files so that they are easy to understand #1218
Comments
|
Sync states
Sync modifiers
The icons with [WIP] are not release yet, and may be changed if needed. They are in included in the branch sync_full_folder. The kept-in-sync folders are to be done. Maybe not all the states in the table need a separate icon. Maybe some states should be split even more. Maybe merging sync states and sync modifiers is a good idea. Maybe I forgot something. Feel free to complete incrementally or imagine a totally different approach. But let's try to make it really clear. Call for @MTRichards, @cmonteroluque, @rperezb, @jancborchardt, @masensio, @javiergonzper, @ggdiez, @nasli, @tobiasKaminsky, @AndyScherzinger, @LukeOwncloud , @Kernald, and anybody who wants to contribute. |
|
Just to be clear: the former table is what we have now, not what we need to have. That's what we need to define in this issue, reusing part of what we have or not. |
|
Updated reference to images after merging sync_full_folder in master. The icons shown will be in the next release. Any thought to improve them? Other icons to replace them (specially the stars)? Proposals to add icons to states currently without icon? Any other change? |
|
Well, getting back to the discussion we had here with @jancborchardt the pinned icon (https://materialdesignicons.com/icon/pin) might be a good one to replace the star and could color code it as in:
|
|
Currently there’s too many states. The circular vs the download arrow is a bit confusing. I would say the icons should be exactly the same as for the desktop client, no matter if file or folder:
If we try to get across a bunch of states via icons it will just result in confusion. The desktop client uses the tried and true set of icons which is also used by other apps, and we should do the same for the mobile apps. This will also ensure consistency. |
|
Is there a complete list of all states and their respective icons used by the desktop client plus a list of theses icons in a vector format? |
|
All the icons are in https://github.com/owncloud/client/tree/master/theme/colored (where are the vector versions though @danimo @guruz? Can we have the source files in the repo as well?) |
No. There's the states the app needs. Maybe there are two many icons, but the states are there, and will keep there. A different issue is if we want to distingish them with different icons or not to the users eyes. Coordinating icons with the desktop client is nice to create a consistent experience, but we can't just copy the desktop because our sync model is not the same. In the mobile apps, having a file in the list but not its contents is a valid and not temporary state. That's not true in the desktop client. |
|
@jancborchardt can someone provide the icons (whenever this implementation gets done) in the right sizes and probably also redesign them. I am aware that is is a CI/CD topic but the icons neather really fit a badge character (cloud+indicator and that then being on top of a folder icon or file(preview)) nor do they feel very material 😞 |
|
@davivel yeah, I meant to say there are too many icons. We do not need to differentiate all the states with individual icons. @AndyScherzinger yeah, I’ll take care of getting the icons. Only the badges, right? @davivel @AndyScherzinger which sizes are needed and which format? |
|
@jancborchardt the format has to be png, the pixels keeping the same size as the ones we have right now would then be:
If you provide the badges in the sizes in folders with names as shown above (drawable-...) than @davivel cann just copy paste this to the code base and everything is in the right place. Each badge has a unique name (obviously) but has the same name in the respective size folder (this is where the naming theme differs from desktop, due to the way Android handles resolution depending images :) |
|
While I agree with Jan, we should consolidate on the desktop for synced files. there is 1 different state on mobile that a user needs to know: if the file is selected to sync. On desktop the sync folder that is unselected disappears...this doesn't work on mobile. AND, won't work on desktop with whole filesystem view in the future...when we get there. Since desktop assumes all files will be synced, this is easy - no state needed they are all assumed. On Mobile you have to choose the files to sync. How do we represent that selection (I like pins)? If we use pins, then a file is pinned, and gets a pin icon and one of the following:
And the warning or error should boil up to the top folder Someday we may want a pause option too like on desktop... But that SHOULD cover it. thoughts? |
Android doesn't have an exclude list, and given the fact that nothing syncs by default, it really shouldn't. |
|
@MTRichards yeah, good summary. One exception though:
When you are offline, the icons should stay exactly like they were. Just like we do on the desktop client and like any other tool does it. Offline is not a special state. |
|
I must have installed too many overlay icons, mine are now blank for competitive solutions. oh well. |
True, on the client side there is currently no such list. On the server side, though, there is such a list and you can prevent certain files from being synced. For example, you can set a rule to reject .mp3 files in the file firewall. If you do that, should it be a red x, which suggests something is wrong that you can fix, or should it be a yellow x which is something you can't fix because the file will never be allowed to upload. Or, the rule can be about accessing a certain folder from outside of the network, which is again a failure. BUT, these are returned as temporary failures. Still, I think these should just be RED x, since they are not syncing (up or down). |
|
---------- added by @jabarros
---------- end Proposal:
|
|
Sounds good. As icon for available offline, the »download.svg« icon from the web interface is what you describe. |
|
@MTRichards , perfect summary of changes to be done. Let me edit your comment to add checkboxes. @jancborchardt , thanks for the pointer :) |
|
Important note: let's keep the star icon in the app , though unused . It will be the icon to use when the favorite property now in the server side is brought to mobile apps. |
|
Hi!
|
|
@jabarros looks good to me :) Only thing that we could optimize is the shade of yellow to have a better contrast - any inout on this @jancborchardt ? |
Would you know how to do that, @AndyScherzinger? ;) The previous icon (star) had a white border around to bee seen easily over thumbnails / icons. Do you think that could be good enough? |
|
Nice @jabarros |
|
@dragotin are familiar the icons to you? |
|
@davivel in theory I do, yes. Unfortunately I can't contribute anything before the end of next week :( Is this available on any branch to play around? The icons are slightly blurred, probably due to the fact that for now we only shipped one size which got resized for the different solutions. So maybe simply having them in all the resolution targeting sizes might already help :) |
|
@AndyScherzinger , check it in #1685 |
|
Thanks! :) |
|
For now I just replaced the available offline icon with the standard 18dp sizes for all resolutions. It doesn't make a big difference but it is now using a standard material size and with the xxhdpi variant the top level resolution should be sharper. |
|
Grid view is bad without a white border I guess: |
|
Yes @AndyScherzinger, the available offline icon in grid view mode is slightly blurred in some of yours photos. We will add a white border to improve the appearance. |
|
Sounds perfect @jabarros ! 👍 |
|
Added white border. It looks like this: List view mode Grid view mode |
|
Very nice! looking forward to the iOS one |
|
Looking good @jabarros 👍 |
|
Approved!! cc @jabarros |
UPDATE 2016/05/18: Remaining tasks to finish implementation of this topic are in comment #1218 (comment)
As seen in #1136, we need to find a new icon to mark files as "to-be-kept-in-sync" (1). The current icon, the star, is the same icon used in the recent versions of the web UI to bookmark files (favorites). In some moment we will probably want to read the favorite property in the mobile apps, so we should reserve the star icon for that purpose.
In the former issue @MTRichards suggests an icon with two arrows in a circle to replace the star icon. Some contributors pointed that may be confused with an icon meaning "synchronizing", this is, an sync state of the file instead of a sync modifier set by the user. This seems reasonable, since this kind of icon is often used by synchronization clients with this meaning.
We need to choose an icon as clear as possible. To do so, I think we should review globally what sync states and sync modifier we want to consider to draw as badges in the list of files, and be sure that they all combine clearly.
Check the next table with sync states we could consider. States show how is the file now, in terms of synchronization. I'm trying to match similar states in files and folders.
About sync modifier, right now we only handle "kept-in-sync" on or off, and we don't expect to add new ones, as far as I know.
Right now the Android app already shows separated icons for sync states (top badge) and sync modifiers (bottom badge - star shown or not shown). The iOS app in some cases mixes state and modifier in a single badge (colored stars). My bet is continuing with the approach in the Android app, but the discussion is open.
In the next comment I'll summarize what icons the Android app currently uses, placed in the table.
(1) Please, let's not discuss here what should be the naming convention for file "kept-in-sync", "synchronized", or "favorites". Icons may be complex enough for an issue. We all should understand that, whatever the naming is, these files receive a more aggresive synchronization policy - the app tries to push any local change automatically to the server and dowload any remote change as soon as detects it, without a user request to sync.
The text was updated successfully, but these errors were encountered: