issues #432 and #408 fixed

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

@@ -273,6 +273,7 @@
     "new_instruction": "New instruction",
     "new_instruction": "New instruction",
     "new_method": "New method",
     "new_method": "New method",
     "new_objective": "New objective",
     "new_objective": "New objective",
+    "new_grid": "New grid",
     "new_grid_with_categories": "Create grid with categories",
     "new_grid_with_categories": "Create grid with categories",
     "new_grid_without_categories": "Create grid without categories",
     "new_grid_without_categories": "Create grid without categories",
     "new_session": "New session",
     "new_session": "New session",

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

@@ -272,6 +272,7 @@
     "new_instruction": "Nueva instrucción",
     "new_instruction": "Nueva instrucción",
     "new_method": "Nuevo método",
     "new_method": "Nuevo método",
     "new_objective": "Nuevo objetivo",
     "new_objective": "Nuevo objetivo",
+    "new_grid": "Nuevo tablero",
     "new_grid_with_categories": "Crear escena con categorías",
     "new_grid_with_categories": "Crear escena con categorías",
     "new_grid_without_categories": "Crear escena sin categorías",
     "new_grid_without_categories": "Crear escena sin categorías",
     "new_session": "Nueva sesión",
     "new_session": "Nueva sesión",

sails/src/assets/scripts/directives/directives.js

@@ -250,3 +250,42 @@ dashboardDirectives.directive('popoveraddpicto', function() {
       }
       }
     }
     }
 });
 });
+
+// for assigning a class within ng-options
+dashboardDirectives.directive('optionsClass', function ($parse) {
+  return {
+    require: 'select',
+    link: function(scope, elem, attrs, ngSelect) {
+      // get the source for the items array that populates the select.
+      var pattern = /.* in ([\w]+) .*/g;
+      var optionsSourceStr = pattern.exec(attrs.ngOptions)[1],
+      // use $parse to get a function from the options-class attribute
+      // that you can use to evaluate later.
+          getOptionsClass = $parse(attrs.optionsClass);
+
+      scope.$watch(optionsSourceStr, function(items) {
+        // when the options source changes loop through its items.
+        angular.forEach(items, function(item, index) {
+          // evaluate against the item to get a mapping object for
+          // for your classes.
+          var classes = getOptionsClass(item),
+          // also get the option you're going to need. This can be found
+          // by looking for the option with the appropriate index in the
+          // value attribute.
+              option = elem.find('option[value=' + item.id + ']');
+
+          // now loop through the key/value pairs in the mapping object
+          // and apply the classes that evaluated to be truthy.
+          angular.forEach(classes, function(add, className) {
+            if (add) {
+              angular.element(option).addClass(className);
+            } else {
+              angular.element(option).removeClass(className);
+            }
+
+          });
+        });
+      });
+    }
+  };
+});

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

@@ -122,11 +122,7 @@
       </div>
       </div>
 
 
       <div class="form-group row">
       <div class="form-group row">
-        <button type="button" class="btn btn-default" ng-click="open_grid_color(viewingGrid)" style="min-width:9.25em;">{{ 'setup' | translate }}</button>
-      </div>
-
-      <div class="form-group row">
-        <button type="button" class="btn btn-success" ng-click="open_new_grid()" aria-expanded="false"><i class="fa fa-plus" aria-hidden="true"></i></button>
+        <button type="button" class="btn btn-primary" ng-click="open_grid_color(viewingGrid)" aria-expanded="false" title="{{ 'setup' | translate }}"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></button>
         <button type="button" class="btn btn-primary" ng-click="copy_grid()" title="{{ 'duplicate' | translate }}"><i class="fa fa-files-o" aria-hidden="true"></i></button>
         <button type="button" class="btn btn-primary" ng-click="copy_grid()" title="{{ 'duplicate' | translate }}"><i class="fa fa-files-o" aria-hidden="true"></i></button>
         <button type="button" class="btn btn-danger" ng-click="delete_grid(viewingGrid)" title="{{ 'delete' | translate }}"><i class="fa fa-trash" aria-hidden="true"></i></button>
         <button type="button" class="btn btn-danger" ng-click="delete_grid(viewingGrid)" title="{{ 'delete' | translate }}"><i class="fa fa-trash" aria-hidden="true"></i></button>
       </div>
       </div>
@@ -135,19 +131,12 @@
 
 
       <label class="grid-panel-head">{{ 'show_grids' | translate }}</label>
       <label class="grid-panel-head">{{ 'show_grids' | translate }}</label>
       <div class="form-group row">
       <div class="form-group row">
-        <select class="grid-panel-select" ng-model="viewingGrid.id" ng-change="showGrid(viewingGrid.id,'menu')" size="7">
-          <option value="{{grid.id}}" ng-repeat="grid in gridsList | orderBy: 'name' track by $index" ng-selected="grid.id == viewingGrid.id" ng-class="{'grid-panel-select-optionactive': grid.active}">
-            {{ grid.name }}
-          </option>
-        </select>
+        <select ng-options="grid as grid.name for grid in gridsList | orderBy: 'name' track by grid.id" ng-model="viewingGrid" ng-change="showGrid(viewingGrid.id,'menu')" size="7" options-class="{'grid-panel-select-optionactive': active, 'grid-panel-select-optioninactive': !active}"></select>
       </div>
       </div>
 
 
-
-      <!--<div class="list-group">
-        <a class="list-group-item" ng-repeat="grid in gridsList track by $index" ng-click="showGrid(grid.id,false)" ng-class="(grid.id == viewingGrid.id) ? 'active' : ''">
-          <i class="fa fa-star" aria-hidden="true" ng-if="grid.active"></i> {{ grid.name }}
-        </a>
-      </div>-->
+      <div class="form-group row">
+        <button type="button" class="btn btn-success" ng-click="open_new_grid()" style="min-width:9.25em;"><i class="fa fa-plus" aria-hidden="true"></i> {{ 'new_grid' | translate }}</button>
+      </div>
 
 
     </div>
     </div>
 
 

sails/src/assets/styles/main.css

@@ -1151,6 +1151,9 @@ input.editable.grid-name {
 .grid-panel-select-optionactive{
 .grid-panel-select-optionactive{
     background-color:#c5e4c5;
     background-color:#c5e4c5;
 }
 }
+.grid-panel-select-optioninactive{
+    background-color: #eeffee;/*transparent;*/
+}
 .grid-panel-select-optionselected{
 .grid-panel-select-optionselected{
     background-color:#c5e4c5;
     background-color:#c5e4c5;
 }
 }