41 of 115 wa responsive design document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 update doc...

15
T T 41 of 115 WA Responsive Design Document 1 1. Edit Fixed postion for Doc name. Doc name disappears as scrolling. long press for inplace editing Mobile Friendly: Adding Delete to the toolbar Adding the inplace action bar Tabbing on annotations shows the contextual menu 1 of 115 1. Edit 2. Search 3. Metadata 4.Overflow Landing View

Upload: others

Post on 28-Jul-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

T

T

41 of 115 WA Responsive Design Document 1

1. Edit

Fixed postion for Doc name. Doc name disappears as scrolling.

long press for inplace editing

Mobile Friendly:Adding Delete to the toolbar Adding the inplace action bar

Tabbing on annotations shows the contextual menu

1 of 115

1. Edit 2. Search 3. Metadata 4.Over�ow

Landing View

Page 2: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

Search in Document

SearchSearch

Pay|

Pg 1

Pg 44

Pg 47

Pg 48

Casey Doughparty iBooks Media ! TedO’Connection font size Relative you ...

Font-Relative Unitso Pay ...

Font-Relative UnitPay Hello Hello ...

Font-Relative UnitPay Pay hello ...

SearchSearch

4 matches found

2. Search

Pay|

1 of 4 matches

On tab collapses(similar to edit mode, toolbar change to search mode)

Search

Page 3: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

Options

Sign Out

Rename

Email

4. Over�ow

Previous Document

Next Document

3. Metadata

Annotation

Page 1

Stamp

Highlight

Sticky note

“Do not copy”

Unsaved annotations

Lorem ipsum dolor sit amet, elit. Mauris eu massa dui. Integer nisi felis...

FieldsMetadata

Display annotations

Document name

Page 4: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1Landing view

41 of 115

�oating icon, ontab trigger the thumbnail view

Page 5: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1

switching view

1 2 3

4 5 6

Thumbnail view

Page 6: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

T

T

1. Edit

Remind of saving if forgets

41 of 115Save

Do not save

Page 7: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

Stamp

Highlight

WA Responsive Design Document 1

2. Search

He|

Pg 1

Pg 44

Pg 47

Pg 48

Casey Dougherty iBooks Media ! TedO’Connection font size Relative you ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

4 matches found

41 of 115

(Search pane and metadata panes are exclusive, search result stays persistent, icon works as the toggle. When search pane collapse, it becomes an overlay)

Page 8: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1

2. Search (Search pane and metadata panes are exclusive, search result stays persistent, icon works as the toggle. When search pane collapse, it becomes an overlay)

41 of 115 He|

4 matches found

Page 9: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1

Page 1

Stamp

Highlight

Sticky note

“Do not copy”

Unsaved annotations

Lorem ipsum dolor sit amet, elit. Mauris eu massa dui. Integer nisi felis...

Page 2

Stamp

Highlight

Sticky note

“Do not copy”

Unsaved annotations

Lorem ipsum dolor sit amet, elit. Mauris eu massa dui. Integer nisi felis...

Page 3

Stamp

Highlight

“Do not copy”

Tab on a speci�c annotation,left doc change/jump to where the annotation located.

3. Metadata

Annotation FieldsMetadata41 of 115

Page 10: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1

He|

Pg 1

Pg 44

Pg 47

Pg 48

Casey Dougherty iBooks Media ! TedO’Connection font size Relative you ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

4 matches found

41 of 115

Options

Sign Out

Rename

Email

Previous Document

Next Document

4. Over�ow

Page 11: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed
Page 12: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1

T

41 of 115

Plan B, can get rid of edit toggle, �xed UI

landing viewBackup

Stamp

Highlight

Page 13: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

For Text Pane:

idea 1: give it an icon, will work like the iphone see in text button in safari or show it in the right pane.

Idea 2 hide it under the over�ow

[decided] Idea 3 do not have Text pane for tablet and phone

View Each Page

See in Text

Automatic Save

Display Annotations

Options

Sign Out

Backup

Page 14: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1Annotation

Page 1

Stamp

Highlight

Sticky note

“Do not copy”

Unsaved annotations

Lorem ipsum dolor sit amet, elit. Mauris eu massa dui. Integer nisi felis...

Page 2

Stamp

Highlight

Sticky note

“Do not copy”

Unsaved annotations

Lorem ipsum dolor sit amet, elit. Mauris eu massa dui. Integer nisi felis...

Page 3

Stamp

Highlight

“Do not copy”

2. Search (Overlay, scrollable for longer list)

He|

Pg 1

Pg 44

Pg 47

Pg 48

Casey Dougherty iBooks Media ! TedO’Connection font size Relative you ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

14 matches found41 of 115

Casey Dougherty iBooks Media ! TedO’Connection font size Relative you ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

Font-Relative UnitHello Hello ...

Pg 49

Pg 50

Pg 51

Pg 52

pg53Font-Relative UnitHello Hello ...

Backup

Page 15: 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc Viewer responsive.p… · 41 of 115 WA Responsive Design Document 1 1. Edit Fixed

WA Responsive Design Document 1

2. Search (Overlay, scrollable for longer list)

He|

4 matches found41 of 115

Backup