Merge pull request #1570 from ralder/select-language-webgui

Add language select menu in webgui (fixes #981)
2015-04-04 09:47:08 +02:00 · 2015-04-04 09:47:08 +02:00 · 7ea00bcb78
parent 7fd1047832 0ab56ffde8
commit 7ea00bcb78
6 changed files with 117 additions and 11 deletions
--- a/1
+++ b/1
@ -41,6 +41,7 @@ Philippe Schommers <philippe@schommers.be>
 Phill Luby <phill.luby@newredo.com>
 Piotr Bejda <piotrb10@gmail.com>
 Ryan Sullivan <kayoticsully@gmail.com>
+Sergey Mishin <ralder@yandex.ru>
 Stefan Tatschner <stefan@sevenbyte.org>
 Tim Abell <tim@timwise.co.uk>
 Tobias Nygren <tnn@nygren.pp.se>
--- a/gui/assets/css/overrides.css
+++ b/gui/assets/css/overrides.css
@ -153,6 +153,45 @@ table.table-condensed td {
    padding-right: 15px;
 }

+
+/**
+ * Menu for select language
+ */
+
+@media (min-width:480px) {
+    *[language-select] > .dropdown-menu > li {
+        width: 50%;
+        float: left;
+    }
+    *[language-select] > .dropdown-menu {
+        width: 400px;
+    }
+}
+
+@media (max-width:479px) {
+    .dropdown-menu {
+        padding-top: 55px;
+    }
+
+    *[language-select] > .dropdown-toggle {
+        font-size: 14px;
+    }
+
+    .dropdown-toggle {
+        float: left;
+    }
+
+    .navbar-brand {
+        padding-left: 0;
+        padding-top: 16px;
+    }
+
+    .navbar-nav .open .dropdown-menu > li > a {
+        padding: 12px 15px 12px 25px;
+    }
+}
+
+
 .panel-body .table-condensed {
    margin-bottom: 0;
 }
--- a/gui/index.html
+++ b/gui/index.html
@ -30,7 +30,7 @@
  <nav class="navbar navbar-top navbar-default" role="navigation">
    <div class="container">
      <span class="navbar-brand"><img class="logo" src="assets/img/logo-horizontal.svg" height="32" width="117"/></span>
-      <p class="navbar-text hidden-xs">{{thisDeviceName()}}</p>
+      <p class="navbar-text hidden-xs" ng-class="{'hidden-sm':upgradeInfo && upgradeInfo.newer}">{{thisDeviceName()}}</p>
      <ul class="nav navbar-nav navbar-right">
        <li ng-if="upgradeInfo && upgradeInfo.newer">
          <button type="button" class="btn navbar-btn btn-primary btn-sm" href="" ng-click="upgrade()">
@ -38,6 +38,7 @@
            <span translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
          </button>
        </li>
+        <li class="dropdown" language-select></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog" aria-label="Edit"></span></a>
          <ul class="dropdown-menu">
@ -1026,6 +1027,7 @@
  <script src="scripts/syncthing/core/controllers/eventController.js"></script>
  <script src="scripts/syncthing/core/controllers/syncthingController.js"></script>
  <script src="scripts/syncthing/core/directives/identiconDirective.js"></script>
+  <script src="scripts/syncthing/core/directives/languageSelectDirective.js"></script>
  <script src="scripts/syncthing/core/directives/modalDirective.js"></script>
  <script src="scripts/syncthing/core/directives/uniqueFolderDirective.js"></script>
  <script src="scripts/syncthing/core/directives/validDeviceidDirective.js"></script>
--- a/gui/scripts/syncthing/core/directives/languageSelectDirective.js
+++ b/gui/scripts/syncthing/core/directives/languageSelectDirective.js
@ -0,0 +1,45 @@
+angular.module('syncthing.core')
+    .directive('languageSelect', function (LocaleService) {
+        'use strict';
+        return {
+            restrict: 'EA',
+            template:
+                    '<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">{{localesNames[currentLocale] || "English"}} <span class="caret"></span></a>'+ 
+                    '<ul ng-if="visible" class="dropdown-menu">'+
+                        '<li ng-repeat="(i,name) in localesNames" ng-class="{active: i==currentLocale}">'+
+                            '<a href="#" data-ng-click="changeLanguage(i)">{{name}}</a>'+
+                        '</li>'+
+                    '</ul>',
+
+            link: function ($scope) {
+                var availableLocales = LocaleService.getAvailableLocales();
+                var localeNames = LocaleService.getLocalesDisplayNames();
+                var availableLocaleNames = {};
+
+                // get only locale names that present in available locales
+                for (var i = 0; i < availableLocales.length; i++) {
+                    var a = availableLocales[i];
+                    if (localeNames[a]) {
+                        availableLocaleNames[a] = localeNames[a];
+                    }
+                }
+
+                $scope.localesNames = availableLocaleNames;
+                $scope.visible = $scope.localesNames && $scope.localesNames['en'];
+                
+                // using $watch cause LocaleService.currentLocale will be change after recive async query accpeted-languages
+                // in LocaleService.readBrowserLocales
+                var remove_watch = $scope.$watch(LocaleService.getCurrentLocale, function (newValue) {
+                    if (newValue) {
+                        $scope.currentLocale = newValue;
+                        remove_watch();
+                    }
+                });
+
+                $scope.changeLanguage = function (locale) {
+                    LocaleService.useLocale(locale, true);
+                    $scope.currentLocale = locale;
+                };
+            }
+        };
+    });
--- a/gui/scripts/syncthing/core/services/localeService.js
+++ b/gui/scripts/syncthing/core/services/localeService.js
@ -1,9 +1,15 @@
 angular.module('syncthing.core')
    .provider('LocaleService', function () {
+        'use strict';

        var _defaultLocale,
            _availableLocales;

+        var _SYNLANG = "SYN_LANG"; // const key for localStorage
+
+        // native names of locales javascript escaped
+        var _LOCALES_NAMES = { "af": "Afrikaans", "am": "\u12A0\u121B\u122D\u129B", "ar": "\u0627\u0644\u0639\u0631\u0628\u064A\u0629", "as": "\u0985\u09B8\u09AE\u09C0\u09AF\u09BC\u09BE", "ast": "Asturianu", "be": "\u0411\u0435\u043B\u0430\u0440\u0443\u0441\u043A\u0430\u044F", "bg": "\u0411\u044A\u043B\u0433\u0430\u0440\u0441\u043A\u0438", "bn": "\u09AC\u09BE\u0982\u09B2\u09BE", "bn-IN": "\u09AC\u09BE\u0982\u09B2\u09BE (\u09AD\u09BE\u09B0\u09A4)", "bo": "\u0F56\u0F7C\u0F51\u0F0B\u0F61\u0F72\u0F42", "br": "Brezhoneg", "brx": "\u092C\u094B\u0921\u094B", "bs": "Bosanski", "ca": "Catal\u00E0", "ca-valencia": "Catal\u00E0 (valenci\xE0)", "cs": "\u010De\u0161tina", "cy": "Welsh/Cymraeg", "da": "Dansk", "de": "Deutsch", "dgo": "\u0921\u094B\u0917\u0930\u0940", "dz": "\u0F62\u0FAB\u0F7C\u0F44\u0F0B\u0F41", "el": "\u0395\u03BB\u03BB\u03B7\u03BD\u03B9\u03BA\u03AC", "en-GB": "English (GB)", "en": "English", "en-ZA": "English (ZA)", "eo": "Esperanto", "es_ES": "Espa\u00F1ol (Espa\u00F1a)", "et": "Eesti keel", "eu": "Euskara", "fa": "\u0641\u0627\u0631\u0633\u0649", "fi": "Suomi", "fr": "Fran\xE7ais", "ga": "Gaeilge", "gd": "G\xE0idhlig", "gl": "Galego", "gu": "\u0A97\u0AC1\u0A9C\u0AB0\u0ABE\u0AA4\u0AC0", "he": "\u05E2\u05D1\u05E8\u05D9\u05EA", "hi": "\u0939\u093F\u0928\u094D\u0926\u0940", "hr": "Hrvatski", "hu": "Magyar", "id": "Bahasa Indonesia", "is": "\xCDslenska", "it": "Italiano", "ja": "\u65E5\u672C\u8A9E", "ka": "\u10E5\u10D0\u10E0\u10D7\u10E3\u10DA\u10D8", "kk": "\u049A\u0430\u0437\u0430\u049B\u0448\u0430", "km": "\u1781\u17D2\u1798\u17C2\u179A", "kmr-Latn": "Kurdish (latin script)", "kn": "\u0C95\u0CA8\u0CCD\u0CA8\u0CA1", "ko_KR": "\uD55C\uAD6D\uC5B4", "kok": "\u0915\u094B\u0902\u0915\u0923\u0940", "ks": "\uFEDA\uFEB8\uFEE4\uFEF3\uFEAE\uFEF3", "lb": "L\xEBtzebuergesch", "lo": "\u0E9E\u0EB2\u0EAA\u0EB2\u0EA5\u0EB2\u0EA7", "lt": "Lietuvi\u0173 kalba", "lv": "Latvie\u0161u", "mai": "\u092E\u0948\u0925\u093F\u0932\u0940", "mk": "\u043C\u0430\u043A\u0435\u0434\u043E\u043D\u0441\u043A\u0438", "ml": "\u0D2E\u0D32\u0D2F\u0D3E\u0D33\u0D02", "mn": "\u043C\u043E\u043D\u0433\u043E\u043B", "mni": "\u09AE\u09C8\u0987\u09A4\u09C8\u0987\u09B2\u09CB\u09A8", "mr": "\u092E\u0930\u093E\u0920\u0940", "my": "\u1019\u1014\u1039\u1019\u102C\u1005\u102C", "nb": "Bokm\u00E5l", "ne": "\u0928\u0947\u092A\u093E\u0932\u0940", "nl": "Nederlands", "nn": "Nynorsk", "nr": "Nd\xE9b\xE9l\xE9", "nso": "Sesotho sa Leboa", "oc": "Occitan", "om": "Afaan Oromo", "or": "\u0B13\u0B21\u0B3C\u0B3F\u0B06", "pa-IN": "\u0A2A\u0A70\u0A1C\u0A3E\u0A2C\u0A40", "pl": "Polski", "pt": "Portugu\xEAs", "pt-BR": "Portugu\xEAs (Brasil)", "pt-PT": "Portugu\xEAs (Portugal)", "ro_RO": "Rom\u00E2n\u0103 (Rom\u00E2nia)", "ru": "\u0420\u0443\u0441\u0441\u043A\u0438\u0439", "rw": "KinyaRwanda", "sa-IN": "\u0938\u0902\u0938\u094D\u0915\u0943\u0924\u092E\u094D", "sat": "\u0938\u0902\u0925\u093E\u0932\u0940", "sd": "\uFEB2\uFEE7\uFEA9\u06BE\u06CC", "si": "\u0DC3\u0DD2\u0D82\u0DC4\u0DBD", "sid": "Sidama", "sk": "Sloven\u010Dina", "sl": "Sloven\u0161\u010Dina", "sq": "Shqip", "sr": "\u0441\u0440\u043F\u0441\u043A\u0438", "sr-Latn": "Srpski latinicom", "ss": "SiSwati", "st": "Sesotho", "sv": "Svenska", "sw-TZ": "Kiswahili", "ta": "\u0BA4\u0BAE\u0BBF\u0BB4\u0BCD", "te": "\u0C24\u0C46\u0C32\u0C41\u0C17\u0C41", "tg": "\u0442\u043E\u04B7\u0438\u043A\u04E3", "th": "\u0E20\u0E32\u0E29\u0E32\u0E44\u0E17\u0E22", "tn": "Setswana", "tr": "T\xFCrk\xE7e", "ts": "Xitsonga", "tt": "\u0442\u0430\u0442\u0430\u0440 \u0442\u0435\u043B\u0435", "ug": "\uFE89\u06C7\uFEF2\uFECF\u06C7\uFEAD\u0686\u06D5", "uk": "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430", "uz": "\u045E\u0437\u0431\u0435\u043A", "ve": "Tshiven\u1E13a", "vi": "Ti\u1EBFng vi\u1EC7t", "xh": "IsiXhosa", "zh-CN": "\u4E2D\u6587 (\u7B80\u4F53)", "zh-TW": "\u4E2D\u6587 (\u6B63\u9AD4)", "zu": "IsiZulu" };
+
        this.setDefaultLocale = function (locale) {
            _defaultLocale = locale;
        };
@ -27,9 +33,12 @@ angular.module('syncthing.core')

            function autoConfigLocale() {
                var params = $location.search();
+                var savedLang = typeof(localStorage) != 'undefined' && localStorage[_SYNLANG];

                if(params.lang) {
-                    $translate.use(params.lang);
+                    useLocale(params.lang, true);
+                } else if (savedLang) {
+                    useLocale(savedLang);
                } else {
                    readBrowserLocales().success(function (langs) {
                        // Find the first language in the list provided by the user's browser
@ -67,21 +76,26 @@ angular.module('syncthing.core')
                            }
                        }
                        // Fallback if nothing matched
-                        $translate.use(locale);
+                        useLocale(locale);
                    });
                }
            }

-            function useLocale(language) {
-                // @TODO: eventually check for valid locale format
+            function useLocale(language, save2Storage) {
                if (language) {
-                    $translate.use(language);
+                   $translate.use(language).then(function () {
+                       if (save2Storage && typeof(localStorage) != 'undefined') 
+                            localStorage[_SYNLANG] = language;
+                    });
                }
            }

            return {
                autoConfigLocale: autoConfigLocale,
-                useLocale: useLocale
+                useLocale: useLocale,
+                getCurrentLocale: function() { return $translate.use() },
+                getAvailableLocales: function() { return _availableLocales },
+                getLocalesDisplayNames: function() { return _LOCALES_NAMES }
            }
        }];

--- a/internal/auto/gui.files.go
+++ b/internal/auto/gui.files.go