User:Kunalgrover05/Language bar UI design

I am working on redesigning the UI of the Translate extension with pages. It comprises of the language bar and the various messages shown by the translate extension on web pages.

This is the bug associated with the current UI- Bug 51533

Here is a detailed explanation of what is required. Redesign of interface on translatable pages and language bar

Current progress
Currently I am ready with a basic design and these are some important points to consider:


 * When the page is not marked for translation, the UI needs to be made for that. Otherwise, we can continue with the Mark For Translation link
 * Information such as percentage of completed translation/ source language are not very important for most of the users. Currently, I am using an info button in the language bar. But it is important to display a message if the translation is outdated. One of the ways to do that is having an info button in normal cases but in such cases display a warning icon.
 * Languages shown are priority languages/ or in other cases show the list of most used languages. But the list of languages for which can translated can get huge, so having something like universal language selector here will be good.
 * Translate button opens Special:Translate.
 * There is another button with a dropdown which allows the admins to do things such as Marking for translation, viewing logs etc.

The design
Here is a simple design I created. http://kunalgrover05.github.io/MediaWiki-language-bar/

Suggestions and design by Pau Giner
Designs at: https://commons.wikimedia.org/wiki/File:Designs_for_translated_wiki_pages.pdf

Some important points to consider:
 * Language indicator: The icon that appears at the top-right of the page allows to hide/show the whole thing. Initially the language panel will be shown, but this allows monolingual speakers to hide it if they want to.
 * Source language: The source language is shown as the first one and the separation line form a triangle to communicate that the next items are translations based on it.
 * Language list: The language list includes the 4-5 languages more relevant for the user (following the same criteria as the Compact Language Links feature).


 * Actions: i added actions in a second row. Most of the time there will be only the "translate" action, but other elements such as "mark changes for translation", "view changes" or the completion percentage can be displayed when needed.
 * Language selector: The compact version of the ULS can be used when the user wants to access "more" languages.
 * Completion indicator in the language list: I used a small dot. We can make use of colour to communicate completion, but I have not thought about the specific scale.