dat-ecosystem-archive / design

Design Resources and Assets [ DEPRECATED - More info on active projects and modules at https://dat-ecosystem.org/ ]
https://dat-ecosystem-archive.github.io/design/
Other
43 stars 27 forks source link

previewing a file in a dat #17

Closed okdistribute closed 8 years ago

okdistribute commented 8 years ago

What does the user see when they preview a file from dat in the browser or on the desktop app?

This could be useful on the desktop app because you might want to see the file before downloading it, or only download one of 100 files (some repos/files could be very large).

Right now, dat viewer supports many different kinds of files (including video, photo, audio, geojson, txt, json, etc).

If the file can't be rendered by http://github.com/karissa/render-data, it appends a div with class render-error that looks like this

screen shot 2016-07-14 at 12 33 25 am

Features

When file is too big, it won't render. (need example)

When a file is using git large file storage (dat competitor), it displays some jargon nonsense:

screen shot 2016-07-14 at 12 35 00 am

.csv file searching:

screen shot 2016-07-14 at 12 28 29 am screen shot 2016-07-14 at 12 28 41 am

clicking 'raw' opens up raw file data into a new screen, no chrome.

screen shot 2016-07-14 at 12 29 40 am

'open file in github desktop button' seems a bit off to the side and hidden. they don't like their desktop app.

screen shot 2016-07-14 at 12 30 22 am

Can also edit and remove file with small buttons. Right now in dat, only the owner can edit or remove a file.

.yml file with syntax highlighting:

screen shot 2016-07-14 at 12 27 43 am

geojson example:

screen shot 2016-07-14 at 12 27 06 am

DropBox:

viewing a csv:

screen shot 2016-07-14 at 12 38 22 am

clicking 'open' on upper right opens it in the desktop app/finder on local machine.

clicking the 'more options' gives you

screen shot 2016-07-14 at 12 39 08 am
Kriesse commented 8 years ago

I like the dropbox way of showing the file preview full-screen. Allows the user to see a lot of the file content at once, and leaves a lot of space to display metadata or actions on the file.

Fullscreen Preview Dropbox-style

See video: https://cl.ly/3E1Y46470M2F

dat-file-preview-fullscreen 2x

Slide-in preview

For the use case of just wanting to browse and preview a lot of files quickly, a split-screen or slide-in layout would be more convenient (no need to close and open a fullscreen view for each file).

See video: https://cl.ly/3Z1H2L430M3b

dat-preview-slide-in 2x

Kriesse commented 8 years ago

Updated mockups. Not sure if we still need (file size related) error states like this? Attaching for reference anyway.

Single File Preview

03a-dat land - single dat view preview file - full screen

Single File Preview - can't load more

03b-dat land - single dat view preview file - full screen - done loading

Single File Preview - can't preview

03c-dat land - single dat view preview file - full screen - can t display file type