[enh] Home: Allow to change locale

www/js/controllers/app-controllers.js

@@ -503,10 +503,11 @@ function AppController($scope, $rootScope, $state, $ionicSideMenuDelegate, $q, $
 }
 
 
-function HomeController($scope, $state, $timeout, $ionicHistory, csPlatform, csCurrency) {
+function HomeController($scope, $state, $timeout, $ionicHistory, $translate, UIUtils, csPlatform, csCurrency, csSettings) {
   'ngInject';
 
   $scope.loading = true;
+  $scope.locales = angular.copy(csSettings.locales);
 
   $scope.enter = function(e, state) {
     if (state && state.stateParams && state.stateParams.error) { // Error query parameter
@@ -558,6 +559,32 @@ function HomeController($scope, $state, $timeout, $ionicHistory, csPlatform, csC
     }
   };
 
+  $scope.changeLanguage = function(langKey) {
+    $translate.use(langKey);
+    $scope.hideLocalesPopover();
+    csSettings.data.locale = _.findWhere($scope.locales, {id: langKey});
+  };
+
+  /* -- show/hide locales popup -- */
+
+  $scope.showLocalesPopover = function(event) {
+    UIUtils.popover.show(event, {
+      templateUrl: 'templates/api/locales_popover.html',
+      scope: $scope,
+      autoremove: true,
+      afterShow: function(popover) {
+        $scope.localesPopover = popover;
+      }
+    });
+  };
+
+  $scope.hideLocalesPopover = function() {
+    if ($scope.localesPopover) {
+      $scope.localesPopover.hide();
+      $scope.localesPopover = null;
+    }
+  };
+
   // For DEV ONLY
   /*$timeout(function() {
    $scope.loginAndGo();

www/templates/api/home.html

@@ -5,15 +5,11 @@
 
   <ion-nav-buttons side="right">
     <!-- locales  -->
-    <img ng-if="$root.settings.locale.country"
-         ng-src="https://www.countryflags.io/{{$root.settings.locale.country}}/shiny/32.png"
-         style="padding: 5px 0"
-         ng-click="showLocalesPopover($event)">
-
     <button class="button button-clear hidden-xs hidden-sm gray"
-            style="max-width: 450px !important"
-            ng-click="showLocalesPopover($event)">
-      {{$root.settings.locale.label}}&nbsp;
+            ng-click="showLocalesPopover($event)" style="align-content: center">
+      <img ng-if="$root.settings.locale.country"
+           ng-src="https://www.countryflags.io/{{$root.settings.locale.country}}/shiny/32.png">
+      <span ng-if="!$root.settings.locale.country">{{$root.settings.locale.label}}&nbsp;</span>
       <small class="ion-arrow-down-b"></small>
     </button>
   </ion-nav-buttons>

www/templates/api/locales_popover.html

@@ -6,7 +6,7 @@
         class="item item-icon-left ink"
          ng-click="changeLanguage(l.id)">
         <i class="item-image avatar"
-           style="background-image: url(https://www.countryflags.io/{{l.country}}/flat/32.png)"></i>
+           style="border-radius: 0; background-image: url(https://www.countryflags.io/{{l.country}}/shiny/64.png)"></i>
         {{l.label | translate}}
       </a>
 

www/templates/api/transfer.html

@@ -12,15 +12,11 @@
   <ion-nav-buttons side="right">
 
     <!-- locales  -->
-    <img ng-if="$root.settings.locale.country"
-         ng-src="https://www.countryflags.io/{{$root.settings.locale.country}}/shiny/32.png"
-         style="padding: 5px 0"
-         ng-click="showLocalesPopover($event)">
-
     <button class="button button-clear hidden-xs hidden-sm gray"
-            style="max-width: 450px !important"
-            ng-click="showLocalesPopover($event)">
-      {{$root.settings.locale.label}}&nbsp;
+            ng-click="showLocalesPopover($event)" style="align-content: center">
+      <img ng-hide="!$root.settings.locale.country"
+           ng-src="https://www.countryflags.io/{{$root.settings.locale.country}}/shiny/32.png">
+      <span ng-hide="$root.settings.locale.country">{{$root.settings.locale.label}}&nbsp;</span>
       <small class="ion-arrow-down-b"></small>
     </button>
 

www/templates/home/home.html

@@ -2,6 +2,17 @@
   <!-- no title -->
   <ion-nav-title></ion-nav-title>
 
+  <ion-nav-buttons side="secondary" >
+    <!-- locales  -->
+    <button class="button button-clear hidden-xs hidden-sm gray"
+            ng-click="showLocalesPopover($event)" style="align-content: center">
+      <img ng-if=":locale:$root.settings.locale.country"
+           ng-src="https://www.countryflags.io/{{:locale:$root.settings.locale.country}}/shiny/32.png">
+      <span ng-if=":locale:!$root.settings.locale.country">{{:locale:$root.settings.locale.label}}&nbsp;</span>
+      <small class="ion-arrow-down-b"></small>
+    </button>
+  </ion-nav-buttons>
+
   <ion-content
     class="has-header text-center no-padding-xs positive-900-bg circle-bg-dark">