working on grid color

sails/src/CHANGES.md

@@ -10,3 +10,6 @@ ALTER TABLE `stu_picto` ADD `id_child_grid` int(11) NULL;
 
 -- Drop column 'categories'
 ALTER TABLE `grid` DROP COLUMN `categories`;
+
+-- Add color to grid column
+ALTER TABLE `grid`ADD `color` varchar(7) NULL;

sails/src/api/models/Grid.js

@@ -37,11 +37,15 @@ module.exports = {
       type: "integer",
       model: "student"
     },
-  // Relacion con Stu_picto
-    stuPictos:{
+    stuPictos:{ // Relacion con Stu_picto
       collection: "stupicto",
       via: "grid"
-     }
+    },
+    color:{
+      columnName: "color",
+      required: false,
+      type: "string"
+    }
  },
 
  //

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

@@ -46,12 +46,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
   $scope.newGridName = "";
 
   // function to make category colores brighter
-  /*$scope.shadeColor = function (color, percent) {
+  $scope.shadeColor = function (color, percent) {
     if (!color)
       return;
     var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
     return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
-  };*/
+  };
 
   /*
   * Generates the grid of pictos with empty ones
@@ -100,7 +100,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
       $scope.viewingGrid = activeGrid;
       activeGrid.pictos.forEach(placePicto);
       $scope.loadingPictos = false;
+
+      $scope.mainGrid.color = activeGrid.color;
       //setTimeout(function () { $scope.$apply(); });
+      console.log("mostrando " , activeGrid);
     })
     .error(function () {
       $translate('error_loading_grid').then(function (translation) {
@@ -123,7 +126,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
 
       grid.pictos.forEach(placePicto);
       $scope.loadingPictos = false;
+
+      $scope.mainGrid.color = grid.color;
       //setTimeout(function () { $scope.$apply(); });
+      console.log("mostrando " , grid);
     })
     .error(function () {
       $translate('error_loading_grid').then(function (translation) {

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

@@ -2,113 +2,109 @@
 <div class="panel panel-default student_tab_panel">
   <div class="panel-body">
 
-    <!-- Switch panel body -->
-    <div class="" ng-switch="slide.state">
-
-      <!-- Slides -->
-      <div class="col-xs-10 switch-animation">
-        <div id="student_collection"
-          class="student-collection"
-          ng-class="{ 'student-collection-loading': loadingPictos }"
-          data-loading="{{ 'loading_pictos' | translate }}">
-          <!-- No categories grid -->
+    <!-- Grid -->
+    <div class="col-xs-10">
+      <div id="student_collection"
+        class="student-collection"
+        ng-style="{ 'background-color': shadeColor(mainGrid.color, 0.3) }"
+        ng-class="{ 'student-collection-loading': loadingPictos }"
+        data-loading="{{ 'loading_pictos' | translate }}">
+        <!-- Grid pictos -->
+        <div
+          class="picto-grid picto-free-grid">
           <div
-            class="picto-grid picto-free-grid">
+            ng-repeat="studentPictoRow in mainGrid"
+            ng-init="rowIndex = $index"
+            class="picto-grid__row">
             <div
-              ng-repeat="studentPictoRow in freeCategoryPictos"
-              ng-init="rowIndex = $index"
-              class="picto-grid__row">
+              ng-hide="studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)"
+              class="picto pull-left"
+              data-row="{{ rowIndex }}"
+              data-column="{{ colIndex }}"
+              id="student-picto-{{
+                studentPicto.id ||
+                ('empty-' + colIndex + '-' + rowIndex)
+              }}"
+              draggable droppable drop="handleDrop"
+              popover="{{studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
+              popover-trigger="mouseenter"
+              ng-init="colIndex = $index"
+              ng-repeat="studentPicto in studentPictoRow track by $index">
+              <!-- picto-legend -->
+              <div
+                class="picto-legend-normal"
+                ng-if="studentPicto.attributes.legend == 'normal'">
+                {{ studentPicto.attributes.expression }}
+              </div>
               <div
-                ng-hide="studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)"
-                class="picto pull-left"
-                data-row="{{ rowIndex }}"
-                data-column="{{ colIndex }}"
-                id="student-picto-{{
-                  studentPicto.id ||
-                  ('empty-' + colIndex + '-' + rowIndex)
-                }}"
-                draggable droppable drop="handleDrop"
-                popover="{{studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
-                popover-trigger="mouseenter"
-                ng-init="colIndex = $index"
-                ng-repeat="studentPicto in studentPictoRow track by $index">
-                <!-- picto-legend -->
-                <div
-                  class="picto-legend-normal"
-                  ng-if="studentPicto.attributes.legend == 'normal'">
-                  {{ studentPicto.attributes.expression }}
-                </div>
-                <div
-                  class="picto-legend-full"
-                  ng-if="studentPicto.attributes.legend == 'full'">
-                  {{ studentPicto.attributes.expression }}
-                </div>
-                <!-- /.picto-legend  -->
-                <img
-                  src="/app/img/redcross.png"
-                  class="red-cross-visibility disabled"
-                  ng-if="studentPicto.attributes.status == 'disabled'"/>
+                class="picto-legend-full"
+                ng-if="studentPicto.attributes.legend == 'full'">
+                {{ studentPicto.attributes.expression }}
+              </div>
+              <!-- /.picto-legend  -->
+              <img
+                src="/app/img/redcross.png"
+                class="red-cross-visibility disabled"
+                ng-if="studentPicto.attributes.status == 'disabled'"/>
 
-                <img
-                  ng-click="child_grid(studentPicto.id_child_grid)"
-                  ng-src="{{studentPicto.picto.uri}}"
-                  class="unselectable"
-                  ng-class="{
-                    'novisible': studentPicto.attributes.status == 'invisible',
-                    'deactivate': studentPicto.attributes.status == 'disabled'
-                  }"
-                  ng-style="{
-                    'background-color': studentPicto.attributes.color || '#ffffff'
-                  }"/>
+              <img
+                ng-click="child_grid(studentPicto.id_child_grid)"
+                ng-src="{{studentPicto.picto.uri}}"
+                class="unselectable"
+                ng-class="{
+                  'novisible': studentPicto.attributes.status == 'invisible',
+                  'deactivate': studentPicto.attributes.status == 'disabled'
+                }"
+                ng-style="{
+                  'background-color': studentPicto.attributes.color || '#ffffff'
+                }"/>
 
-                <div
-                    class="picto_options"
-                    ng-if="studentPicto == emptyStudentPicto">
-                    <a
-                      ng-click="open_add(rowIndex, colIndex, true)"
-                      class="picto_add"
-                      title="{{ 'add_picto' | translate}}">
-                      <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
-                    </a>
-                </div>
-                <div
+              <div
                   class="picto_options"
-                  ng-if="studentPicto !== emptyStudentPicto">
-                  <a
-                    ng-click="deletePicto(studentPicto)"
-                    class="picto_remove"
-                    title="{{ 'delete' | translate}}">
-                    <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
-                  </a>
-                  <a ng-click="view_picto(studentPicto)" class="picto_ok" >
-                    <i ng-class="{
-                        color_green: studentPicto.attributes.status == 'invisible',
-                        color_black: studentPicto.attributes.status == 'enabled'
-                      }"
-                      class="glyphicon glyphicon-eye-open"
-                      aria-hidden="true"
-                      title="{{ studentPicto.attributes.status | translate}}">
-                    </i>
-                  </a>
-                  <a
-                    class="picto_tags"
-                    ng-click="open_tags(studentPicto)">
-                    <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
-                  </a>
+                  ng-if="studentPicto == emptyStudentPicto">
                   <a
-                    class="picto_config"
-                    ng-click="open_config(studentPicto)">
-                    <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                    ng-click="open_add(rowIndex, colIndex, true)"
+                    class="picto_add"
+                    title="{{ 'add_picto' | translate}}">
+                    <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
                   </a>
-                </div>
               </div>
-              <div class="clearfix"></div>
+              <div
+                class="picto_options"
+                ng-if="studentPicto !== emptyStudentPicto">
+                <a
+                  ng-click="deletePicto(studentPicto)"
+                  class="picto_remove"
+                  title="{{ 'delete' | translate}}">
+                  <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
+                </a>
+                <a ng-click="view_picto(studentPicto)" class="picto_ok" >
+                  <i ng-class="{
+                      color_green: studentPicto.attributes.status == 'invisible',
+                      color_black: studentPicto.attributes.status == 'enabled'
+                    }"
+                    class="glyphicon glyphicon-eye-open"
+                    aria-hidden="true"
+                    title="{{ studentPicto.attributes.status | translate}}">
+                  </i>
+                </a>
+                <a
+                  class="picto_tags"
+                  ng-click="open_tags(studentPicto)">
+                  <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
+                </a>
+                <a
+                  class="picto_config"
+                  ng-click="open_config(studentPicto)">
+                  <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                </a>
+              </div>
             </div>
+            <div class="clearfix"></div>
           </div>
         </div>
-      </div><!--/. col-xs-10 -->
-
-    </div><!--/. Switch panel body -->
+      </div>
+    </div><!--/. col-xs-10 -->
 
     <div class="col-xs-2">
       <div class="text-center">

sails/src/assets/styles/main.css

@@ -1215,7 +1215,11 @@ input.editable.grid-name {
 }
 
 /* Estilos TPV */
-
 .tpv-price {
   font-size: xx-large;
 }
+
+/* Collections */
+.student-collection{
+  border-radius: 5px;
+}