issue #627: add button added to each empty icon in category grid

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

@@ -79,6 +79,8 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
         grid[i] = [];
         for (j = 0; j < gridWidth; j++) {
           grid[i][j] = $scope.emptyStudentPicto;
+          grid[i][j].attributes.coord_x = j;
+          grid[i][j].attributes.coord_y = i;
         }
       }
       return grid;
@@ -284,7 +286,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
   };
 
   // Modal window to add pictos
-  $scope.open = function () {
+  $scope.open_add = function (studentPicto) {
     var modalInstance = $modal.open({
       animation: true,
       templateUrl: 'modules/student/views/addpicto.html',
@@ -308,6 +310,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
         },
         emptyStudentPicto: function () {
           return $scope.emptyStudentPicto;
+        },
+        studentPicto: function () {
+          return studentPicto;
+        },
+        studentCategory: function () {
+          return $scope.selectedCategory;
         }
       }
     });

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

@@ -16,6 +16,7 @@
       class="student-collection"
       ng-class="{ 'student-collection-loading': loadingPictos }"
       data-loading="{{ 'loading_pictos' | translate }}">
+      <!-- No categories grid -->
       <div
         ng-if="showFreeCategory"
         class="picto-grid picto-free-grid">
@@ -82,6 +83,8 @@
           <div class="clearfix"></div>
         </div>
       </div>
+      <!-- / No categories grid -->
+      <!-- Main categories grid -->
       <div
         ng-if="!showFreeCategory"
         class="picto-grid picto-main-grid">
@@ -126,6 +129,8 @@
           <div class="clearfix"></div>
         </div>
       </div>
+      <!-- / Main categories grid -->
+      <!-- Category grid -->
       <a name="picto-category-grid"/>
       <div
         id="picto-category-grid"
@@ -164,6 +169,16 @@
               }"/>
             <div
               class="picto_options"
+              ng-if="studentPicto == emptyStudentPicto">
+              <a
+                ng-click="open_add(studentPicto)"
+                class="picto_add"
+                title="{{ 'add_picto' | translate}}">
+                <i class="color_white glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
+              </a>
+            </div>
+            <div
+              class="picto_options"
               ng-if="studentPicto !== emptyStudentPicto">
               <a
                 ng-click="delete_picto(studentPicto)"
@@ -196,6 +211,7 @@
           <div class="clearfix"></div>
         </div>
       </div>
+      <!-- / Category grid -->
     </div>
   </div>
 </div>

sails/src/assets/styles/main.css

@@ -438,6 +438,7 @@ textarea.editable{
 .picto_cat .picto_peq .picto_options .picto_remove{ position: absolute; top: 4px; left: 7px; }
 /* Picto options in student collection */
 .picto .picto_options .picto_remove{ position: absolute; top: 2px; left: 2px; }
+.picto .picto_options .picto_add{ position: absolute; top: 18px; left: 20px; }
 .picto .picto_options .picto_ok{ position: absolute; top: 2px; right: 2px; }
 .picto .picto_options .picto_tags{ position: absolute; bottom: 2px; left: 2px; }
 .picto .picto_options .picto_config{ position: absolute; bottom: 2px; right: 2px; }