Updated language menu.

- improved header menu style
- define new Languages factory
- make it easier to define new languages

openslides/core/static/css/app.css

@@ -82,6 +82,16 @@ img {
     color: #999;
 }
 
+#header a.headerlink {
+    text-decoration: none;
+}
+#header a.headerlink {
+    color: #999;
+}
+#header a.headerlink:hover, #header a.headerlink:active, #header a.headerlink.active {
+    color: #e8eaed;
+}
+
 #header .title {
     float: left;
     margin: 2px 0 0 -5px;
@@ -716,4 +726,9 @@ tr.selected td {
     #nav .navbar .button i { padding-top: 15px;}
     #nav .searchbar { margin-top: 15px; }
     .searchbar .input-medium { width: 150px; }
+
+    #chatbox { width: 100%; top: 130px; }
+    .optional { /* hide optional column */
+        display: none;
+    }
 }

openslides/core/static/js/core/site.js

@@ -66,19 +66,11 @@ angular.module('OpenSlidesApp.core.site', [
 // set browser language as default language for OpenSlides
 .run([
     'gettextCatalog',
-    function(gettextCatalog) {
+    'Languages',
-        // detect browser language
+    function(gettextCatalog, Languages) {
-        var lang = navigator.language || navigator.userLanguage;
+        // set detected browser language as default language (fallback: 'en')
-        if (lang.indexOf('-') !== -1)
+        Languages.setCurrentLanguage(Languages.getBrowserLanguage());
-            lang = lang.split('-')[0];
+
-        if (lang.indexOf('_') !== -1)
-            lang = lang.split('_')[0];
-        // set default language
-        gettextCatalog.setCurrentLanguage(lang);
-        // load language file
-        if (lang != 'en') {
-            gettextCatalog.loadRemote("static/i18n/" + lang + ".json");
-        }
         //TODO: for debug only! (helps to find untranslated strings by adding "[MISSING]:")
         gettextCatalog.debug = false;
     }
@@ -361,13 +353,62 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
-.controller("LanguageCtrl", function ($scope, gettextCatalog) {
+// gets all in OpenSlides available languages
+.factory('Languages', [
+    'gettext',
+    'gettextCatalog',
+    function (gettext, gettextCatalog) {
+        return {
+            // get all available languages
+            getLanguages: function () {
+                var current = gettextCatalog.getCurrentLanguage();
+                // Define here new languages...
+                var languages = [
+                    { code: 'en', name: gettext('English') },
+                    { code: 'de', name: gettext('German') },
+                    { code: 'fr', name: gettext('French') }
+                ];
+                angular.forEach(languages, function (language) {
+                    if (language.code == current)
+                        language.selected = true;
+                });
+                return languages
+            },
+            // get detected browser language code
+            getBrowserLanguage: function () {
+                var lang = navigator.language || navigator.userLanguage;
+                if (lang.indexOf('-') !== -1)
+                    lang = lang.split('-')[0];
+                if (lang.indexOf('_') !== -1)
+                    lang = lang.split('_')[0];
+                return lang;
+            },
+            // set current language and return updated languages object array
+            setCurrentLanguage: function (lang) {
+                var languages = this.getLanguages();
+                angular.forEach(languages, function (language) {
+                    language.selected = false;
+                    if (language.code == lang) {
+                        language.selected = true;
+                        gettextCatalog.setCurrentLanguage(lang);
+                        if (lang != 'en') {
+                            gettextCatalog.loadRemote("static/i18n/" + lang + ".json");
+                        }
+                    }
+                });
+                return languages;
+            }
+        }
+    }
+])
+
+.controller("LanguageCtrl", function ($scope, gettextCatalog, Languages, filterFilter) {
+    $scope.languages = Languages.getLanguages();
+    $scope.selectedLanguage = filterFilter($scope.languages, {selected: true});
     // controller to switch app language
     $scope.switchLanguage = function (lang) {
-        gettextCatalog.setCurrentLanguage(lang);
+        $scope.languages = Languages.setCurrentLanguage(lang);
-        if (lang != 'en') {
+        $scope.selectedLanguage = filterFilter($scope.languages, {selected: true});
-            gettextCatalog.loadRemote("static/i18n/" + lang + ".json");
-        }
     };
 })
 

openslides/core/static/templates/index.html

@@ -31,13 +31,14 @@
 
           <!-- chatbox -->
           <div ng-controller="ChatMessageCtrl" os-perms="core.can_use_chat" class="inline">
-            <button ng-click="openChatbox()" class="btn btn-sm btn-default">
+            <a href ng-click="openChatbox()" class="headerlink"
+                ng-class="{ 'active': !chatboxIsCollapsed }" uib-dropdown-toggle>
               <i class="fa fa-comment"></i>
               <translate>Chat</translate>
               <span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
                 {{ unreadMessages }}
               </span>
-            </button>
+            </a> |
             <div id="chatbox" class="well" uib-collapse="chatboxIsCollapsed">
               <div id="chatbox-text" scroll-glue>
                 <ul class="list-unstyled">
@@ -63,13 +64,12 @@
           </div>
 
           <!-- user settings / logout button -->
-          <div class="btn-group" uib-dropdown>
+          <span uib-dropdown>
-            <button type="button" class="btn btn-sm btn-default" uib-dropdown-toggle>
+            <a href class="headerlink" uib-dropdown-toggle>
               <i class="fa fa-user"></i>
-              <span class="optional-small">{{ operator.user.get_short_name() }}</span>
+              <span>{{ operator.user.get_short_name() }}</span>
-              <span class="caret"></span>
+            </a>
-            </button>
+            <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
-            <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="single-button">
               <li>
                 <a ui-sref="users.user.detail.profile({ id: operator.user.id })">
                   <i class="fa fa-cog"></i>
@@ -87,41 +87,30 @@
                   <translate>Logout</translate>
                 </a>
             </ul>
-          </div>
+          </span>
         </div>
         <!-- Login button -->
         <div ng-if="!operator.isAuthenticated()">
-          <button class="btn btn-sm btn-default" ng-click="openLoginForm()">
+          <a href  ng-click="openLoginForm()" class="headerlink" uib-dropdown-toggle>
             <i class="fa fa-sign-in"></i>
             <translate>Login</translate>
-          </button>
+          </a>
         </div>
       </div>
 
       <!-- language switcher -->
-      <div class="btn-group" ng-controller="LanguageCtrl" uib-dropdown>
+      <span ng-controller="LanguageCtrl" uib-dropdown>
-        <button class="btn btn-sm btn-default" uib-dropdown-toggle>
+        | <a href class="headerlink" uib-dropdown-toggle>
           <i class="fa fa-flag"></i>
-          <span class="caret"></span>
+          {{ selectedLanguage[0].name | translate }}
-        </button>
+        </a>
-        <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="single-button">
+        <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="simple-dropdown">
-          <li>
+          <li ng-repeat="language in languages">
-            <a href="" ng-click="switchLanguage('en')">
+            <a href="" ng-click="switchLanguage(language.code)">
-              <i class="fa fa-flag"></i>
+              <i ng-if="language.selected" class="fa fa-check"></i>
-              <translate>English</translate> (EN)
+              {{ language.name | translate }}
             </a>
-          <li>
+      </span>
-            <a href="" ng-click="switchLanguage('de')">
-              <i class="fa fa-flag"></i>
-              <translate>German</translate> (DE)
-            </a>
-          <li>
-            <a href="" ng-click="switchLanguage('fr')">
-              <i class="fa fa-flag"></i>
-              <translate>French</translate> (FR)
-            </a>
-        </ul>
-      </div>
 
     </div>
   </div>