Giters

lepo-project / lepo

LePo: Learning Management System with Note & Sticky

Home Page:https://lepo.app/en/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Implement an easier UI for adding or deleting highlights

kyoshizaki opened this issue · comments

commented

Implement an easier UI for adding or deleting highlights, like Medium.

  • Add highlight

2018-01-18 16 13 57

  • Delete highlight

2018-01-18 16 14 05

commented
  • Implementing balloon menu like Medium for PDF.js document is rather difficult, it's better to implement highlight button on the top bar.
  • In order to save the space of the top bar, only icons are placed.
  • Display tooltips explaining the meaning of buttons

Current top bar UI (LePo v0.2.1)

For content page in course

2018-02-06 12 31 58

For lesson note in course

2018-02-06 12 32 13

Updated top bar UI (LePo v0.2.2)

For content page in course

2018-02-06 15 12 04

For lesson note in course

2018-02-06 15 22 54

commented
  • Balloon menu like Medium for PDF.js document has Implemented.

Menu for highlight creation

  • Condition for showing menu: text selection
  • Condition hiding menu: cancel button click / outside of menu click

img1

Menu for highlight deletion

  • Condition for showing menu: highlight hover
  • Condition hiding menu: cancel button click / outside of menu click / Auto hide after 2 seconds

img2