iOS App File List - Githubissues

owncloud / ios-app

📱The all-new iOS app for ownCloud

https://owncloud.org/news/new-ios-app-ready-public-app-store/

GNU General Public License v3.0

214 stars 123 forks source link

iOS App File List #385

Open wuenschedesign opened 5 years ago

wuenschedesign commented 5 years ago

Steps to reproduce

Open ownCloud App
Go to File list

Actual behaviour

Status of shared files is indicated by icons aside the heading. With a long heading the icons move to the right, so they never have the same position. The file list shows few items due to a big height of item list element. Filetype Icons are very different in shape, size and color and distracting.

Expected behaviour

Status of shared files is indicated by icons before the subline. The subline just contains data of creation and file size. These data always need more or less the same space. Height of list items is reduced, thus more items can be shown and the user has a better overview. Filetype Icons are standardized in size and form and make the surface less distracting.

Client

iOS version: 12.3

ownCloud app version: 1.0 Build 119 (130a866)

Device model: iPhone 7

wuenschedesign commented 5 years ago

Hereby a suggestion for the solution:

current screen	suggested design	screen with annotations

Annotations:

[ ] (1) Swap position of »Add« and »Select« (Use new Add Icon)
[x] (2) ~~search font-color: #f2f4f7~~ ==> #251
[x] (3) ~~search background-color: #1A3F76~~ ==> #251
[ ] (4) Show total of data size on top of List. font-size: 13 (small)
[ ] (5) Move Filter Options to the right. use new action-color
[ ] (6) Use new Icons.
[ ] (7) Reduce height of list item: ≈60px
[x] (8) Options menu new Icon (Action-Secondary color)
[ ] (9) Progress Indicator must be at the same position as the download icon was before (Don’t swap position with the options)
[x] (10) ~~New color for download icon: #0066FF~~ ==> #251
[ ] (11) New position for the status of share files (participants, public share), use action primary color
[ ] (12) Preview of pictures should use the same max space like icons (32px x 32px), add border-radius: 1px)

michaelstingl commented 5 years ago

(8) Options menu new Icon (Action-Secondary color)

Seems a lot horizontal space is used. Maybe check a vertical 3-dot version?

michaelstingl commented 5 years ago

I'd discuss all color related stuff in #251

wuenschedesign commented 5 years ago

(8) Options menu new Icon (Action-Secondary color)

Seems a lot horizontal space is used. Maybe check a vertical 3-dot version?

Improved screen: the option/action icons in the item list element are moved more the right, to leave more space to the text.

Screen Layout	Screen with Annotations

hosy commented 5 years ago

Thank you for your drafts. I like the three dots in a vertical line. Would be cool to have a version with the iOS system font San Francisco and with our current main color ("dark").

michaelstingl commented 5 years ago

with our current main color ("dark").

@hosy Color should be not in scope of this issue. (use #251 or open new one)

michaelstingl commented 5 years ago

(8) Options menu new Icon (Action-Secondary color)

Seems a lot horizontal space is used. Maybe check a vertical 3-dot version?

Improved screen: the option/action icons in the item list element are moved more the right, to leave more space to the text.

@wuenschedesign Perfect solution for (8) 👍

(I added checkboxes to the list. @hosy @wuenschedesign works for you?)

wuenschedesign commented 5 years ago

Though colour will be discussed in #251 I want to show ownCloud-iOS-Filelist-v03 a recent draft here: