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

First design
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.

Here is a simple design I created. https://github.com/kunalgrover05/MediaWiki-language-bar/tree/old-design

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.

Current progress
Here is the current implementation based on Pau Giner's design. http://kunalgrover05.github.io/MediaWiki-language-bar/

First implementation
First implementation patch is here


 * Things done
 * First implementation with working links
 * Using available and priority languages for selection
 * Translation not started leads user to Special:Translate
 * Removed translation page header hooks


 * TODO
 * Add system messages for all links which are hardcoded
 * Select languages using Geo data/number of times a page is accessed
 * Change CSS class names according to MediaWiki standards
 * Better RTL support
 * When user doesn't have necessary permissions to translate and is on a translation page, the translation unit only has the translation percentage, maybe shift it to a dropdown

Design changes suggested by Pau
Language bar design on translatable pages (bug 51533) Current situation example:
 * https://meta.wikimedia.org/wiki/Wikimedia_Highlights,_June_2014
 * http://bugzilla.wikimedia.org/51533
 * https://www.mediawiki.org/wiki/User:Kunalgrover05/GSoc_Proposal#Redesign_of_interface_on_translatable_pages_and_language_bar

Proposed designs Designs have been updated: https://commons.wikimedia.org/wiki/File:Designs_for_translated_wiki_pages.pdf Mainly to make main actions to be on the right, and remove the "view diff" action (Niklas mentioned that it didnt made sense).
 * The current designs don't seem to have got rid of the View Changes button, does it need to be removed?

Based on http://kunalgrover05.github.io/MediaWiki-language-bar/, some comments: Don't display the ISO codes, just language names. The triangle used to separate the source language from the rest can be improved: Make the angle less sharpy Support it using CSS: http://codepen.io/anon/pen/fBlkh
 * Review of the existing implementation:
 * Thanks a lot, was looking for this

Reduce the number of names initially exposed (a total of 4 languages: source + 3 more seems enough). The goal is that the total width is approximately similar to those of infoboxes, so that it does not feel strange when infoboxes are present, or when they are lacking. A language indicator indicates the number of languages and allows to collapse/expand the language bar ("120 languages"). Icon is available at https://dl.dropboxusercontent.com/u/30377416/i18n/foreign_characters_lightgray.svg Options should be presented only when needed: The "..." option is only shown when there are more languages to the ones displayed initially in the language bar.
 * Currently, it does this as well, in case a language doesn't have translation started, go to Special:Translate on selecting it. Should we remove it?

The selected language should use different colours: Selected elements should have a gray background with a darker text (see CSS notes below). Completion status should be simple (I don't mind even if we removed completely): If the completion is less than 25% we can show a yellow (#ffb50d) dot below the language name (see Catalan in the designs) If the completion is less than 50% we can show a gray (#DDD) dot below the language name.

I created an updated version of the example with SOME of the changes described above: http://pauginer.github.io/prototypes/lang-bar/lang-bar.html
 * CSS update
 * Thanks a lot for this help, i am really slow at implementing designs. This gives a lot of help

The CSS I added is http://pauginer.github.io/prototypes/lang-bar/changes.css The CSS needs to be refactored with the existing one since I've been just overriding properties for the sake of speed.

New designs
Designs finished as per suggestions


 * Implemented
 * Using available and priority languages for selection
 * Local storage to keep bar hidden across pages
 * RTL support
 * Added system messages
 * Checked design for smaller translate bar(when enough languages aren't available)
 * JS fallback
 * Fixed tooltips for all links

Notes from August 18

 * High priority
 * The language indicator should include "languages" next to the number: "5 languages" instead of just "5".
 * The language indicator background color should be #EEE
 * On hover it can be #DDD to convey interactivity.
 * The translate action colors:
 * On hover, the "translate" label color should become #79a8ff
 * The background should not change on hover.
 * When the window becomes small, the layout breaks. Several options are possible:
 * Reduce the number of options shown as the space reduces.
 * Guarantee a minimum width
 * The selected element needs a bottom-border. Currently the bottom border is lacking for the selected element


 * Medium priority:
 * The percentage indicator should apear at the left of the translate action. Currently is on the right.
 * The percentage indicator should remain inactive on hover: text should be gray and the cursor should not be a hand.
 * The background of .mw-translate-langbar-row should be #fbfbfb instead of white.
 * The separation between translate and the percentage should be subtler.


 * Low priority (future improvements that depend on improvements to ULS)
 * Once the user access the extended list of languages:
 * Clicking on a language should open the translation of the current page. Currently it navigates to a different page.
 * Ideally, when the extended language list (ULS list) is shown the following should occur:
 * the short list becomes hidden
 * The extended list is shown connected to the language indicator (a triangle pointing up from the extended list)
 * The extended list should provide a way to go back.