Translate extension language bar Part 2
Here is the first part of this post- https://crondev.wordpress.com/2014/08/16/translate-extension-language-bar-part-1/
GSoC’s over and I am here ready with the final version of the language bar after a lot of suggestions and iterations. I am really excited about it as it is the first piece of front end that has come out of me. The experience was great, working with Pau Giner from the design team whose suggestions and help made it happen.
Here is what it looks like on a page:
Language bar on page
How did I do the positioning and sizing?
CSS position rules. The outer Language bar div is assigned and the inner elements can be given position: . Basically it allows to freely set the inner content anywhere that we would like.
Sizing was a bit complex. As the Translate and Mark for Translation tabs have size depending on the size of the language bar itself. One good way that I figured out was using min-width property which allowed me to take care of borderline cases such as no language in the language bar, one language etc.
Looks like this when minimized. The minimized look is sticky across different pages.
Minimal language bar
How I did this?
Hiding is easy enough use JQuery .hide() method to hide the Language bar div.
For making it sticky, I used jquery.jStorage plugin. It allows you to store data in the browser. So, I added an entry to ensure that the language bar stays hidden across pages.
A close look at the language bar. It lists the top 4 languages with respect to completion of translations here. There are buttons to allow user to Translate, Mark a page for translation or View changes from the last marked revision.
Language bar
Here is how it looks on a Translated page. You can’t mark a page for translation using a Translated page but notice the percentage indication showing the percentage of translation completed.
Language bar on translated page
Clicking on … opens up the Universal language selector which allows user to select a language and also has an input field.
ULS language selection
The ULS completely depends on availability of JS, so a fallback for JS not available has been provided as a dropdown.
JS fallback
CSS RTL native support is provided in MediaWiki using CSSJanus
RTL support
How did I make the Caret?
This is something that was completely new to me. I was amazed by the power of CSS.
You can get an idea here- http://css-tricks.com/snippets/css/css-triangle/
Hoping to get a positive review for my patch, and hopefully will be implemented soon.
