LMS: adding language selector to user dashboard (WIP)

lms/static/sass/base/_mixins.scss

@@ -97,6 +97,26 @@
 %ui-depth4 { z-index: 10000; }
 %ui-depth5 { z-index: 100000; }
 
+// extends - UI - utility - nth-type style clearing
+%wipe-first-child {
+
+  &:first-child {
+    margin-top: 0;
+    border-top: none;
+    padding-top: 0;
+  }
+}
+
+// extends - UI - utility - nth-type style clearing
+%wipe-last-child {
+
+  &:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
 // extends -hidden elems - screenreaders
 %text-sr {
   border: 0;

lms/static/sass/elements/_controls.scss

@@ -231,13 +231,37 @@
   cursor: default;
   pointer-events: none;
   box-shadow: none;
-  :hover, :focus {
+
+  &:hover, &:focus {
     pointer-events: none;
   }
 }
 
 // ====================
 
+%btn-reset {
+  background: none;
+  border: none;
+  font-size: inherit;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+// button that appears visually as a link
+%btn-link {
+  @extend %btn-reset;
+  color: $link-color;
+  text-decoration: none;
+  @include transition(all 0.1s linear 0s);
+
+  &:hover, &:focus {
+    color: $link-color;
+    text-decoration: underline;
+  }
+}
+
+// ====================
+
   // application: canned actions
   .btn {
     font-family: $f-sans-serif;

lms/static/sass/shared/_modal.scss

@@ -325,3 +325,42 @@
   @extend .modal;
 }
 
+// --------------------
+
+// CASE: language settings
+.modal-settings-language {
+
+  // general reset
+  .list-input, .list-actions {
+    @extend %ui-no-list;
+  }
+
+  .settings-language-select .select {
+    width: 100%;
+  }
+
+  .list-input {
+    margin-bottom: $baseline;
+  }
+
+  .list-actions {
+
+    .action-item {
+      @extend %wipe-last-child;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: ($baseline/4);
+    }
+
+    .action-submit {
+      color: $white;
+      padding-top: ($baseline/3);
+      padding-bottom: ($baseline/3);
+    }
+
+    .action-cancel {
+      @extend %btn-link;
+    }
+  }
+}
+

lms/templates/dashboard.html

@@ -193,6 +193,8 @@
           </span> <span class="data">${ user.email | h }</span>
         </li>
 
+        <%include file='dashboard/_dashboard_info_language.html' />
+
         % if external_auth_map is None or 'shib' not in external_auth_map.external_domain:
         <li class="controls--account">
           <span class="title"><div class="icon"></div><a href="#password_reset_complete" rel="leanModal" id="pwd_reset_button">${_("Reset Password")}</a></span>
@@ -329,6 +331,8 @@
   </div>
 </section>
 
+<%include file='modal/_modal-settings-language.html' />
+
 <section id="apply_name_change" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change-name-title">
     <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>

lms/templates/dashboard/_dashboard_info_language.html

+<%! from django.utils.translation import ugettext as _ %>
+<%!
+  from django.core.urlresolvers import reverse
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+<li class="status status-verification is-accepted">
+  <span class="title status-title">
+    ${_("Preferred Language")}
+    (<a href="#change_language" rel="leanModal" class="edit-email">${_("edit")}</a>)
+  </span>
+  <span class="data">English (US)</span>
+</li>
+
+
+

lms/templates/modal/_modal-settings-language.html

+<%! from django.utils.translation import ugettext as _ %>
+<%!
+  from django.core.urlresolvers import reverse
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+<section id="change_language" class="modal modal-settings-language" aria-hidden="true">
+  <div class="inner-wrapper" role="dialog" aria-labelledby="change_language_title">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
+    <header>
+      <h2><span id="change_language_title">${_("Change Preferred Language")}</span><span class="sr">, ${_("modal open")}</span></h2>
+      <hr/>
+    </header>
+    <div id="change_language_body">
+      <form action="" method="post" class="settings-language-form" id="settings-form">
+        <ol class="list-input">
+          <li class="field text settings-language-select" id="settings-language-select">
+            <label class="label sr" for="settings-language-value">${_("Please choose your preferred language")}</label>
+            <select class="input select" id="settings-language-value">
+              <option value="af_ZA">Afrikaans</option>
+              <option value="az_AZ">Azərbaycan dili</option>
+              <option value="id_ID">Bahasa Indonesia</option>
+              <option value="ms_MY">Bahasa Melayu</option>
+              <option value="cx_PH">Bisaya</option>
+              <option value="bs_BA">Bosanski</option>
+              <option value="ca_ES">Català</option>
+              <option value="cs_CZ">Čeština</option>
+              <option value="cy_GB">Cymraeg</option>
+              <option value="da_DK">Dansk</option>
+              <option value="de_DE">Deutsch</option>
+              <option value="et_EE">Eesti</option>
+              <option value="en_PI">English (Pirate)</option>
+              <option value="en_GB">English (UK)</option>
+              <option value="en_UD">English (Upside Down)</option>
+              <option value="en_US" selected="1">English (US)</option> <!-- Currently selected needs attr selected="1" -->
+              <option value="es_LA">Español</option>
+              <option value="es_ES">Español (España)</option>
+              <option value="eo_EO">Esperanto</option>
+              <option value="eu_ES">Euskara</option>
+              <option value="tl_PH">Filipino</option>
+              <option value="fo_FO">Føroyskt</option>
+              <option value="fr_CA">Français (Canada)</option>
+              <option value="fr_FR">Français (France)</option>
+              <option value="fy_NL">Frysk</option>
+              <option value="ga_IE">Gaeilge</option>
+              <option value="gl_ES">Galego</option>
+              <option value="gn_PY">Guarani</option>
+              <option value="hr_HR">Hrvatski</option>
+              <option value="is_IS">Íslenska</option>
+              <option value="it_IT">Italiano</option>
+              <option value="sw_KE">Kiswahili</option>
+              <option value="ku_TR">Kurdî</option>
+              <option value="lv_LV">Latviešu</option>
+              <option value="fb_LT">Leet Speak</option>
+              <option value="lt_LT">Lietuvių</option>
+              <option value="la_VA">lingua latina</option>
+              <option value="hu_HU">Magyar</option>
+              <option value="nl_NL">Nederlands</option>
+              <option value="nb_NO">Norsk (bokmål)</option>
+              <option value="nn_NO">Norsk (nynorsk)</option>
+              <option value="pl_PL">Polski</option>
+              <option value="pt_BR">Português (Brasil)</option>
+              <option value="pt_PT">Português (Portugal)</option>
+              <option value="ro_RO">Română</option>
+              <option value="sq_AL">Shqip</option>
+              <option value="sk_SK">Slovenčina</option>
+              <option value="sl_SI">Slovenščina</option>
+              <option value="fi_FI">Suomi</option>
+              <option value="sv_SE">Svenska</option>
+              <option value="vi_VN">Tiếng Việt</option>
+              <option value="tr_TR">Türkçe</option>
+              <option value="el_GR">Ελληνικά</option>
+              <option value="be_BY">Беларуская</option>
+              <option value="bg_BG">Български</option>
+              <option value="mk_MK">Македонски</option>
+              <option value="ru_RU">Русский</option>
+              <option value="sr_RS">Српски</option>
+              <option value="uk_UA">Українська</option>
+              <option value="ka_GE">ქართული</option>
+              <option value="hy_AM">Հայերեն</option>
+              <option value="he_IL">עברית</option>
+              <option value="ur_PK">اردو</option>
+              <option value="ar_AR">العربية</option>
+              <option value="ps_AF">پښتو</option>
+              <option value="fa_IR">فارسی</option>
+              <option value="ne_NP">नेपाली</option>
+              <option value="hi_IN">हिन्दी</option>
+              <option value="bn_IN">বাংলা</option>
+              <option value="pa_IN">ਪੰਜਾਬੀ</option>
+              <option value="ta_IN">தமிழ்</option>
+              <option value="te_IN">తెలుగు</option>
+              <option value="ml_IN">മലയാളം</option>
+              <option value="th_TH">ภาษาไทย</option>
+              <option value="km_KH">ភាសាខ្មែរ</option>
+              <option value="ko_KR">한국어</option>
+              <option value="zh_TW">中文(台灣)</option>
+              <option value="zh_CN">中文(简体)</option>
+              <option value="zh_HK">中文(香港)</option>
+              <option value="ja_JP">日本語</option>
+            </select>
+          </li>
+        </ol>
+
+        <ul class="list-actions">
+          <li class="action-item">
+            <button type="submit" class="action action-submit">Save Language</button>
+          </li>
+          <li class="action-item">
+            <button type="reset" class="action action-cancel">Cancel</button>
+          </li>
+        </ul>
+      </form>
+    </div>
+  </div>
+</section>