pm-discussify icon indicating copy to clipboard operation
pm-discussify copied to clipboard

Design "Web-annotations"

Open ghost opened this issue 7 years ago • 2 comments

Design web-annotations feature, where sections of any page could be highlighted and annotated using markdown syntax.

This should require a text toolbar and ability to preview annotation before publishing.

The thread system applied to comments could be replicated here as well.

ghost avatar Jul 12 '18 09:07 ghost

@andreforsousa will post here some screens as well as commit the designs for this feature

satazor avatar Aug 13 '18 09:08 satazor

Hey, here's the first approach regarding this. The user flow starts with creating the 1st annotation on the page:

  • Click on any element (text or image);
  • Tooltip with "New Annotation" is displayed and actionable;
  • Start the annotations threads on the sidebar.

I'm reusing components created for the threads, the only detail that might be to be revised with @marcooliveira is the way that we're creating the top of the sidebar, now with "Discussions"; "Annotations" and "Invite to the page (discussion or annotation)".

Thanks. discussify-extension_flow-annotations-01.jpg

discussify-extension_flow-annotations-02.jpg

discussify-extension_flow-annotations-03.jpg

discussify-extension_flow-annotations-04.jpg

discussify-extension_flow-annotations-05.jpg

discussify-extension_flow-annotations-06.jpg

discussify-extension_flow-annotations-07.jpg

discussify-extension_flow-annotations-08.jpg

discussify-extension_flow-annotations-09.jpg

discussify-extension_flow-annotations-10.jpg

ghost avatar Aug 13 '18 16:08 ghost