Create a nice default language modal.

Fixes: #1396.

frontend_tests/casper_tests/06-settings.js

@@ -143,11 +143,15 @@ casper.waitForSelector('#create_alert_word_form', function () {
 
 casper.then(function change_default_language() {
     casper.test.info('Changing the default language');
-    casper.evaluate(function () {
+    casper.waitForSelector('#default_language');
-        $('#default_language').val('zh_CN').change();
-    });
 });
 
+casper.thenClick('#default_language');
+
+casper.waitUntilVisible('#default_language_modal');
+
+casper.thenClick('a[data-code="zh_CN"]');
+
 casper.waitUntilVisible('#display-settings-status', function () {
     casper.test.assertSelectorHasText('#display-settings-status', '简体中文 is now the default language');
     casper.test.info("Reloading the page.");
@@ -157,8 +161,8 @@ casper.waitUntilVisible('#display-settings-status', function () {
 casper.waitForSelector("#default_language", function () {
     casper.test.info("Checking if we are on Chinese page.");
     casper.test.assertEvalEquals(function () {
-        return $('#default_language').val();
+        return $('#default_language_name').text();
-    }, 'zh_CN');
+    }, '简体中文');
     casper.test.info("Opening German page through i18n url.");
 });
 
@@ -170,11 +174,14 @@ casper.waitForSelector("#settings-change-box", function check_url_preference() {
         return document.documentElement.lang;
     }, 'de');
     casper.test.info("Changing language back to English.");
-    casper.evaluate(function () {
-        $('#default_language').val('en').change();
-    });
 });
 
+casper.thenClick('#default_language');
+
+casper.waitUntilVisible('#default_language_modal');
+
+casper.thenClick('a[data-code="en"]');
+
 /*
  * Changing the language back to English so that subsequent tests pass.
  */

static/js/settings.js

@@ -161,8 +161,6 @@ function _setup_page() {
     $("#show_api_key_box").hide();
     $("#api_key_button_box").show();
 
-    $('#default_language').val(page_params.default_language);
-
     function clear_password_change() {
         // Clear the password boxes so that passwords don't linger in the DOM
         // for an XSS attacker to find.
@@ -419,12 +417,20 @@ function _setup_page() {
         });
     });
 
-    $("#default_language").change(function () {
+    $("#default_language_modal .language").click(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        $('#default_language_modal').modal('hide');
+
         var data = {};
-        var setting_value = $("#default_language").val();
+        var setting_value = $(e.target).attr('data-code');
         data.default_language = JSON.stringify(setting_value);
+
+        var new_language = $(e.target).attr('data-name');
+        $('#default_language_name').text(new_language);
+
         var context = {};
-        context.lang = $("#default_language option:selected").text();
+        context.lang = new_language;
 
         channel.patch({
             url: '/json/language_setting',
@@ -439,6 +445,11 @@ function _setup_page() {
         });
     });
 
+    $('#default_language').on('click', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        $('#default_language_modal').modal('show');
+    });
 
     $("#get_api_key_box").hide();
     $("#show_api_key_box").hide();

static/styles/zulip.css

@@ -2300,8 +2300,17 @@ div.floating_recipient {
 }
 
 .settings-section #default_language {
-    width: 150px;
+    text-decoration: none;
-    margin-left: 20px !important;
+    vertical-align: bottom;
+}
+
+.settings-section #default_language_modal table {
+    width: 90%;
+    margin-top: 20px;
+}
+
+.settings-section #default_language_modal td {
+    padding-left: 80px;
 }
 
 .settings-section .inline {

static/templates/settings_tab.handlebars

@@ -94,12 +94,58 @@
       <div class="display-settings-form">
 
         <div class="control-group">
-          <label for="default_language" class="control-label inline">{{t "Default Language" }}:</label>
+          <label for="default_language" class="control-label inline">{{t "Default Language" }}: <span id='default_language_name'>{{page_params.default_language_name}}</span></label>
-          <select name="default_language" id="default_language" class="controls">
+          <a id="default_language" href="#default_language" title='Change default language'>[Change]</a>
-            {{#each page_params.language_list}}
+
-            <option value='{{this.code}}'>{{this.name}}</option>
+          <div id="default_language_modal" class="modal hide" tabindex="-1" role="dialog"
+                aria-labelledby="default_language_modal_label" aria-hidden="true">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+              <h3 id="default_language_modal_label">{{t "Select Default Language" }}</h3>
+            </div>
+            <div class="modal-body">
+              <p>
+              The following is a few of the languages we have started to
+              support or are hoping to support in the near future. We would
+              love help translating; if you're interested in helping, make an
+              account at <a href='https://www.transifex.com/zulip/zulip/'>
+              https://www.transifex.com/zulip/zulip/</a>, and sign up for a
+              language! You can also request any language we don't currently
+              have. It only takes a few hours to translate the most important
+              parts of the app.
+              </p>
+              <div>
+                <table>
+                  {{#each page_params.language_list_dbl_col}}
+                    <tr>
+                      <td>
+                        <a class="language" data-code="{{this.first.code}}" data-name="{{this.first.name}}">
+                          {{#if this.first.selected}}
+                          <b>{{this.first.percent}}</b>
+                          {{else}}
+                          {{this.first.percent}}
+                          {{/if}}
+                        </a>
+                      </td>
+                      <td>
+                        <a class="language" data-code="{{this.second.code}}" data-name="{{this.second.name}}">
+                          {{#if this.second.selected}}
+                          <b>{{this.second.percent}}</b>
+                          {{else}}
+                          {{this.second.percent}}
+                          {{/if}}
+                        </a>
+                      </td>
+                    </tr>
                   {{/each}}
-          </select>
+                </table>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{t "Close" }}</button>
+            </div>
+          </div>
+
         </div>
 
         <div class="control-group">