41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc...
Transcript of 41 of 115 WA Responsive Design Document 1 1 of 115xiu-guo.com/img/laserfiche/12.16.14 Update Doc...
![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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/1.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/3.jpg)
Options
Sign Out
Rename
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/5.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/9.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/10.jpg)
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
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/11.jpg)
![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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/12.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/14.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022080722/5f7bc727cb31ab243d422a3e/html5/thumbnails/15.jpg)
WA Responsive Design Document 1
2. Search (Overlay, scrollable for longer list)
He|
4 matches found41 of 115
Backup