search

CyberCRI / learn-ext

WeLearn Browser Extension
https://welearn.cri-paris.org
MIT License
11 stars 1 forks source link

Extension UI #3

Closed prashnts closed 5 years ago

prashnts commented 5 years ago

F I N A L L Y !

This PR is the beginning of the layout fixes for ilearn extension.

Currently, it renders the cards correctly. Major milestones in this would be added further on.

Current status:

Note that this is still very very early stage for the UI. Also, I do not plan to have the dark backdrop -- i added it for emphasis.

snip 2018-12-06 at 17 00 46

Todo

These are required before I can continue work for getting the extension at an acceptable UI. Fortunately, it's not super difficult to do so. Just more configuration changes!

Remarks

I'd be working on the todo, and getting the layout better now, and estimate around a day of work is required.

CC: @jmsevin @eric-cri

eric-cri commented 5 years ago

got it. Thx!

Eric Cherel

Chief Information Officer http://www.cri-paris.org/ +33 (0)1 86 95 96 88

On Thu, Dec 6, 2018 at 5:02 PM Prashant Sinha notifications@github.com wrote:

F I N A L L Y !

This PR is the beginning of the layout fixes for ilearn extension.

Currently, it renders the cards correctly. Major milestones in this would be added further on. Current status:

  • Attached event handlers and two-way communication between page-script and background process.
  • Fixed the layout of ilearn card.

Note that this is still very very early stage for the UI. Also, I do not plan to have the dark backdrop -- i added it for emphasis.

[image: snip 2018-12-06 at 17 00 46] https://user-images.githubusercontent.com/5663391/49595563-8a827f80-f978-11e8-8819-c63f136f2ed6.png Todo

These are required before I can continue work for getting the extension at an acceptable UI. Fortunately, it's not super difficult to do so. Just more configuration changes!

  • Put all the injected css under a "namespace" so to not modify the actual page.
  • Use css-transition-groups for controlling the element styles at each stage of its lifecycle.

Remarks

  • I think this PR really demonstrates the power of using react components and splitting everything into respective modules, since I was able to reuse the old work for quickly getting the content as shown in the screenshot above.
  • Additionally, the build pipeline is very useful to automate steps that are too repetitive during development:
    • It copies and ensures correct manifest file is provided to the extension.
    • Whenever a source file changes, the webpack process rebuilds the js+css files and issues a "reload in browser" event.
    • The built files trigger the web-ext cli tool to also reload firefox.
  • Without the dev automation, I'd have to manually do each of the above steps. It's painful!

I'd be working on the todo, and getting the layout better now, and estimate around a day of work is required.

CC: @jmsevin https://github.com/jmsevin @eric-cri https://github.com/eric-cri

You can view, comment on, or merge this pull request online at:

https://github.com/CyberCRI/learn-ext/pull/3 Commit Summary

  • Remove useless boilerplate codes from extension and intialise a cleaner manifest file
  • Add config for web-ext cli tool
  • Do not track ext dir anymore
  • Split entrypoints for various processes
  • Move manifest to src as well
  • Bump npm packages
  • Update docz rc file
  • Add background script for extension process
  • Implement crude popover layout

File Changes

Patch Links:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CyberCRI/learn-ext/pull/3, or mute the thread https://github.com/notifications/unsubscribe-auth/AXZ9tS3jGH13gA6w6bZoTDnWvFYfuqaiks5u2T-pgaJpZM4ZGzOJ .

prashnts commented 5 years ago

Since this Pull Request is getting way too long (84 commits...), I'm merging it and start new branch from here.

A lot has been implemented since last comment here. This gif below shows it.

I've added a few documentations as well, particularly:

@jmsevin We miss you! Seems you're enjoying Californian weather a LOT!

cards and extension ui ext in action

tags tags usage