Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement an easier UI for adding or deleting highlights #126

Closed
kyoshizaki opened this issue Jan 18, 2018 · 2 comments
Closed

Implement an easier UI for adding or deleting highlights #126

kyoshizaki opened this issue Jan 18, 2018 · 2 comments
Milestone
v0.2.2

Comments

@kyoshizaki
Copy link
Member

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
@kyoshizaki kyoshizaki added this to the v0.2.2 milestone Jan 18, 2018
@kyoshizaki
Copy link
Member Author

kyoshizaki commented Feb 6, 2018 •
edited
Loading

  • 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

kyoshizaki added a commit that referenced this issue Feb 6, 2018
@kyoshizaki
✨ Set topbar button for adding highlight, #126
7eacb06
kyoshizaki added a commit that referenced this issue Feb 6, 2018
@kyoshizaki
✨ Set balloon menu for adding highlight, #126
0d64dfb 
Topbar button for adding highlight has Removed.
kyoshizaki added a commit that referenced this issue Feb 9, 2018
@kyoshizaki
✨ Set balloon menu for deleting highlight, #126
1f0ecc7
@kyoshizaki
Copy link
Member Author

kyoshizaki commented Feb 9, 2018 •
edited
Loading

  • 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

kyoshizaki added a commit that referenced this issue Feb 10, 2018
@kyoshizaki
✨ Release v0.2.2
2b06264 
- Remove message info bar
- Set balloon menu for deleting highlight, #126
- Set balloon menu for adding highlight, #126
- Set topbar button for adding highlight, #126
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v0.2.2
Development

No branches or pull requests
1 participant
@kyoshizaki