Corregido el problema de carga de pictos en el dashboard

sails/src/assets/app/i18n/en-gb.json

@@ -121,6 +121,7 @@
     "licenses_left": "{{number}} licenses left",
     "licenses_left": "{{number}} licenses left",
     "light_up": "Light up",
     "light_up": "Light up",
     "link": "Link",
     "link": "Link",
+    "loading_pictos": "Loading pictos",
     "login": "Log In",
     "login": "Log In",
     "login_fail": "Invalid user or password",
     "login_fail": "Invalid user or password",
     "login_success": "Login succeed. Welcome {{name}}",
     "login_success": "Login succeed. Welcome {{name}}",

sails/src/assets/app/i18n/es-es.json

@@ -121,6 +121,7 @@
     "licenses_left": "{{number}} licencias disponibles",
     "licenses_left": "{{number}} licencias disponibles",
     "light_up": "Iluminar",
     "light_up": "Iluminar",
     "link": "Vincular",
     "link": "Vincular",
+    "loading_pictos": "Cargando pictos",
     "login": "Iniciar sesión",
     "login": "Iniciar sesión",
     "login_fail": "Usuario o contraseña incorrectos",
     "login_fail": "Usuario o contraseña incorrectos",
     "login_success": "Login correcto. Bienvenido {{name}}",
     "login_success": "Login correcto. Bienvenido {{name}}",

sails/src/assets/scripts/modules/student/controllers/collections.js

@@ -47,6 +47,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
   $scope.studentPictos = {};
   $scope.studentPictos = {};
   $scope.freeCategoryPictos = null;
   $scope.freeCategoryPictos = null;
   $scope.categories = [];
   $scope.categories = [];
+  $scope.loadingPictos = true;
 
 
   $scope.isCategory = function (studentPicto) {
   $scope.isCategory = function (studentPicto) {
     return studentPicto.attributes.id_cat === null &&
     return studentPicto.attributes.id_cat === null &&
@@ -82,6 +83,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
     $http.get(config.backend + '/stu/' + $scope.studentData.id + '/pictos')
     $http.get(config.backend + '/stu/' + $scope.studentData.id + '/pictos')
     .success(function (studentPictos) {
     .success(function (studentPictos) {
       $scope.categories = [];
       $scope.categories = [];
+      $scope.showFreeCategory = !$scope.studentData.attributes.categories;
       studentPictos.forEach(function (studentPicto) {
       studentPictos.forEach(function (studentPicto) {
         var positionX = studentPicto.attributes.coord_x;
         var positionX = studentPicto.attributes.coord_x;
         var positionY = studentPicto.attributes.coord_y;
         var positionY = studentPicto.attributes.coord_y;
@@ -106,6 +108,9 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
           $scope.studentPictos[category][positionX][positionY] = studentPicto;
           $scope.studentPictos[category][positionX][positionY] = studentPicto;
         }
         }
       });
       });
+
+      $scope.loadingPictos = false;
+      setTimeout(function () { $scope.$apply(); });
     })
     })
     .error(function () {});
     .error(function () {});
   };
   };

sails/src/assets/scripts/modules/student/views/collections.html

@@ -3,14 +3,18 @@
   <div class="panel-body">
   <div class="panel-body">
     <div class="row">
     <div class="row">
       <!-- Fin de columna vistas por categorías -->
       <!-- Fin de columna vistas por categorías -->
-      <div class="col-md-12">
+      <div class="col-md-6">
         <a class="btn btn-success btn-sm" role="button" ng-click="open()">
         <a class="btn btn-success btn-sm" role="button" ng-click="open()">
           <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
           <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
           <span translate>add_picto</span>
           <span translate>add_picto</span>
         </a>
         </a>
       </div>
       </div>
     </div>
     </div>
-    <div id="student_collection">
+    <div
+      id="student_collection"
+      class="student-collection"
+      ng-class="{ 'student-collection-loading': loadingPictos }"
+      data-loading="{{ 'loading_pictos' | translate }}">
       <div
       <div
         ng-if="showFreeCategory"
         ng-if="showFreeCategory"
         class="picto-grid picto-free-grid">
         class="picto-grid picto-free-grid">

sails/src/assets/styles/picto-grid.less

 @import 'variables.less';
 @import 'variables.less';
 
 
+@keyframes slightFadeIn {
+  from { opacity: 0; }
+  to { opacity: 0.25; }
+}
+
+/**
+ * Show "loading" while pictos haven't load
+ */
+.student-collection {
+  position: relative;
+
+
+  &-loading:before {
+    content: attr(data-loading);
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    font-size: 7.5vmin;
+    z-index: 1;
+    opacity: 0;
+    font-weight: lighter;
+    animation:
+      slightFadeIn linear
+      (@animationDuration * 2)
+      infinite alternate;
+  }
+}
+
 /**
 /**
  * Main group of pictos (a "main" row with all the categories to be shown)
  * Main group of pictos (a "main" row with all the categories to be shown)
  */
  */

sails/src/assets/styles/variables.less

 @dividerColor: #ddd;
 @dividerColor: #ddd;
 @spacingUnit: 1em;
 @spacingUnit: 1em;
 @roundness: 4px;
 @roundness: 4px;
+@animationDuration: 0.3s;