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
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
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
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
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
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
JS fallback

CSS RTL native support is provided in MediaWiki using CSSJanus

RTL support
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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s