1486510 - [Translate.Next] Add project info and status

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, enhancement, P3)

Description

[[DEACTIVATED] Adrian Gaudebert]

Add a small graph to show the current status of the project, a panel with the legend, and another panel to show the project's info.

Comment 1

[Hengyeow (:tanhengyeow)]

Hi :adrian

I'm a new contributor for pontoon and would like to attempt this issue to get acquainted with the community :)

I've setup the project successfully and would like some starting points/tips on how to approach this bug, appreciate it!

Comment 2

[[DEACTIVATED] Adrian Gaudebert]

Hey tanhengyeow, thanks for your interest! The specifications for this bug are simple: reproduce what appears in the Translate app into Translate.Next as closely as possible. The parts concerned are the two panels at the top, showing the completion graph and information about the current project. You can see these two parts in the following screen-shots: 

http://adrian.gaudebert.fr/downloads/mozilla/pontoon-completion-panel.png
http://adrian.gaudebert.fr/downloads/mozilla/pontoon-project-info-panel.png

The original code (running the current Translate app) can be found in this file: https://github.com/mozilla/pontoon/blob/master/pontoon/base/static/js/translate.js The django view that serves the current Translate app is `pontoon.base.views.translate`, see here: https://github.com/mozilla/pontoon/blob/master/pontoon/base/views.py#L57

All new code goes into frontend/src/. The documentation about Translate.Next can be found in the README in frontend/, see https://github.com/mozilla/pontoon/tree/master/frontend#translatenext--a-better-translate-app-for-pontoon

You will likely want to create at least one new module in `frontend/src/modules/` to hold your new components. Take a look at the documentation and the other modules to figure out how to do that.

Note that you might need to install new libraries for this work. To do that, you'll want to run the following commands:

cd frontend/
yarn add library@version
git status 
rm -rf node_modules
cd ..
make build

You have to rebuild every time you change the javascript or python dependencies in order to install them inside the docker image. The git status line is just to check that both package.json and yarn.lock have changed (as they should after adding a new package).

I hope that will help you getting started! If you have more questions, please do ask them, either in this bug or on IRC.

Comment 3

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1296

Comment 4

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1300

Comment 5

[Matjaz Horvat [:mathjazz]]

https://github.com/mozilla/pontoon/commit/c56005ccc3ac464b7cb1e25ba6fc43e7e8e7e065