Merge branch 'develop' of http://scm.ujaen.es/softuno/pictogram into develop

sails/src/api/models/StuPicto.js

@@ -68,6 +68,9 @@ module.exports = {
    *     free_category_coord_y: 0 .. 9 or null,
    *     status: '[invisible]/enabled/disabled',
    *     highlight: true/[false],
+   *     legend: true/[false],
+   *     legend_size: '[small]/large',
+   *     expression: 'custom expression',
    *     color: any valid HEX color or [null]
    *   }
    * @return {Object} Validated attributes that can be safetly stored.

sails/src/api/models/Student.js

@@ -138,7 +138,7 @@ module.exports = {
    *     }
    *     legend: true/[false] Show or hide picto's name on the grid
    *     legend_size: "small/[normal]/large" How big the legend should be respect to the picto
-   *     size: "[normal]/large"
+   *     size: "small/[large]" How big pictos are: 'small' -> a grid of 5x10, 'large' -> a grid of 4x8
    *     picto_background: [#0000ff] Can be any valid HEX color. May be overriden by the
    *       category color
    *     tape_background: [#ff0000] Can be any valid HEX color
@@ -157,8 +157,8 @@ module.exports = {
       categories: true,
       input_feedback: {
         vibration: true,
-        click: false,
         read: false,
+        beep: false,
         highlight: false,
       },
       input_selection: {
@@ -170,7 +170,7 @@ module.exports = {
       legend: false,
       legend_size: 'normal',
       pic: "defaultAvatar.jpg",
-      size: 'normal',
+      size: 'large',
       picto_background: '#0000ff',
       tape_background: '#00ffff',
     };
@@ -189,7 +189,7 @@ module.exports = {
       if (typeof validAttributes.input_feedback !== 'object') {
         delete validAttributes.input_feedback;
       } else {
-        ['vibration', 'click', 'read', 'highlight'].forEach((attribute) => {
+        ['vibration', 'read', 'highlight', 'beep'].forEach((attribute) => {
           if (typeof validAttributes.input_feedback[attribute] !== 'boolean') {
             delete validAttributes.input_feedback[attribute];
           }
@@ -213,7 +213,7 @@ module.exports = {
       if (!((/^(small|normal|large)$/).test(validAttributes.legend_size))) {
         delete validAttributes.legend_size;
       }
-      if (!((/^(normal|large)$/).test(validAttributes.size))) {
+      if (!((/^(small|large)$/).test(validAttributes.size))) {
         delete validAttributes.size;
       }
       if (!((/^#([0-9a-f]{3}){1,2}$/i).test(validAttributes.picto_background))) {

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

@@ -196,6 +196,7 @@
     "picto_behavior": "Behavior of a pictogram when it is selected (without phrase tape)",
     "picto_labels": "Pictogram labels",
     "picto_removed": "Picto has been removed from vocabulary",
+    "picto_size": "Pictograms size",
     "picto_style": "Pictogram style",
     "picto_upload_error": "Error uploading picto",
     "picto_upload_limit": "Image size is too large",

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

@@ -196,6 +196,7 @@
     "picto_behavior": "Comportamiento de un pictograma al seleccionarlo (sin cinta de frase)",
     "picto_labels": "Etiquetas del pictograma",
     "picto_removed": "El pictograma se ha eliminado del vocabulario",
+    "picto_size": "Tamaño pictogramas",
     "picto_style": "Aspecto de los pictogramas",
     "picto_upload_error": "Hubo un error al guardar el picto",
     "picto_upload_limit": "El tamaño del picto es demasiado grande",

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

@@ -25,7 +25,7 @@
           ng-init="rowIndex = $index"
           class="picto-grid__row">
           <div
-            class="picto pull-left"
+            class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
             data-row="{{ rowIndex }}"
             data-column="{{ colIndex }}"
             id="student-picto-{{
@@ -103,10 +103,12 @@
         class="picto-grid picto-main-grid">
         <div
           ng-repeat="studentPictoRow in studentPictos[getCategoryId(emptyStudentPicto)]"
+          ng-init="rowIndex = $index"
           class="picto-grid__row">
           <div
-            class="picto pull-left"
+            class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
             ng-repeat="studentPicto in studentPictoRow track by $index"
+            ng-init="colIndex = $index"
             popover="{{studentPicto.attributes.expression==null ? studentPicto.expression.text : studentPicto.attributes.expression}}"
             popover-trigger="mouseenter">
             <div class="picto-description"> {{ studentData.attributes.legend?studentPicto.expression.text:'' }} </div>
@@ -157,7 +159,7 @@
           ng-init="rowIndex = $index"
           class="picto-grid__row">
           <div
-            class="picto pull-left"
+            class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
             data-row="{{ rowIndex }}"
             data-column="{{ colIndex }}"
             id="student-picto-{{
@@ -167,8 +169,8 @@
             draggable droppable drop="handleDrop"
             popover="{{studentPicto.attributes.expression==null ? studentPicto.expression.text : studentPicto.attributes.expression}}"
             popover-trigger="mouseenter"
-            ng-init="colIndex = $index"
-            ng-repeat="studentPicto in studentPictoRow track by $index">
+            ng-repeat="studentPicto in studentPictoRow track by $index"
+            ng-init="colIndex = $index">
             <div class="picto-description"> {{ studentData.attributes.legend?studentPicto.expression.text:'' }} </div>
             <img
               src="/app/img/redcross.png"

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

@@ -184,8 +184,35 @@
                 </span>
                 <label class="form-control" for="studentSetupUseCategories">{{ 'use_categories' | translate }}</label>
               </div>
+              <legend>{{ 'picto_style' | translate }}</legend>
+              <div class="form-group">
+                <h4>{{ 'size' | translate }}</h4>
+                <div class="input-group">
+                  <span class="input-group-addon">
+                    <input type="radio"
+                      value="normal"
+                      id="studentSetupPictoSizeNormal"
+                      ng-model="studentData.attributes.size"
+                      ng-change="update_attributes()">
+                  </span>
+                  <label class="form-control" for="studentSetupPictoSizeNormal">
+                    {{ 'small' | translate }}
+                  </label>
+                </div>
+                <div class="input-group">
+                  <span class="input-group-addon">
+                    <input type="radio"
+                      value="large"
+                      id="studentSetupPictoSizeLarge"
+                      ng-model="studentData.attributes.size"
+                      ng-change="update_attributes()">
+                </span>
+                  <label class="form-control" for="studentSetupPictoSizeLarge">
+                    {{ 'large' | translate }}
+                  </label>
+                </div>
+              </div>
             </fieldset>
-            <!-- DISABLED, NOT IMPLEMENTED YET
             <fieldset>
               <legend>{{ 'feedback_picto' | translate }}</legend>
               <div class="input-group">
@@ -200,11 +227,11 @@
               <div class="input-group">
                 <span class="input-group-addon">
                   <input type="checkbox"
-                    id="studentSetupClickOnTouch"
-                    ng-model="studentData.attributes.input_feedback.click"
+                    id="studentSetupBeepOnTouch"
+                    ng-model="studentData.attributes.input_feedback.beep"
                     ng-change="update_attributes()">
                 </span>
-                <label class="form-control" for="studentSetupClickOnTouch">{{ 'click' | translate }}</label>
+                <label class="form-control" for="studentSetupBeepOnTouch">{{ 'beep' | translate }}</label>
               </div>
               <div class="input-group">
                 <span class="input-group-addon">
@@ -227,6 +254,7 @@
                 </label>
               </div>
             </fieldset>
+            <!-- DISABLED, NOT IMPLEMENTED YET
             <fieldset>
               <legend>{{ 'input_selection' | translate }}</legend>
               <div class="input-group">
@@ -275,46 +303,6 @@
               </div>
             </fieldset>
             <fieldset>
-              <legend>{{ 'picto_style' | translate }}</legend>
-              <div class="form-group">
-                <h4>{{ 'size' | translate }}</h4>
-                <div class="input-group">
-                  <span class="input-group-addon">
-                    <input type="radio"
-                      value="small"
-                      id="studentSetupPictoSizeSmall"
-                      ng-model="studentData.attributes.size"
-                      ng-change="update_attributes()">
-                </span>
-                  <label class="form-control" for="studentSetupPictoSizeSmall">
-                    {{ 'small' | translate }}
-                  </label>
-                </div>
-                <div class="input-group">
-                  <span class="input-group-addon">
-                    <input type="radio"
-                      value="normal"
-                      id="studentSetupPictoSizeNormal"
-                      ng-model="studentData.attributes.size"
-                      ng-change="update_attributes()">
-                </span>
-                  <label class="form-control" for="studentSetupPictoSizeNormal">
-                    {{ 'normal' | translate }}
-                  </label>
-                </div>
-                <div class="input-group">
-                  <span class="input-group-addon">
-                    <input type="radio"
-                      value="large"
-                      id="studentSetupPictoSizeLarge"
-                      ng-model="studentData.attributes.size"
-                      ng-change="update_attributes()">
-                </span>
-                  <label class="form-control" for="studentSetupPictoSizeLarge">
-                    {{ 'large' | translate }}
-                  </label>
-                </div>
-              </div>
               <div class="input-group">
                 <span class="input-group-addon">
                   <input type="color"

sails/src/assets/styles/main.css

@@ -310,7 +310,7 @@ textarea.editable{
 	margin: 0.4%;
 	width: 80px;
 	height: 80px;
-	border: 1px solid #bbb;
+	border: 1px solid #555;
 	border-radius: 4px;
 	padding: 2px;
 	position: relative; /* Para posicionar después las opciones de forma absoluta dentro de este div */
@@ -318,6 +318,10 @@ textarea.editable{
   transition: all 0.2s ease;
 }
 
+.picto-out { /* pictogram out of bounds */
+  border: 1px dotted #ccc;
+}
+
 
 .picto img,  .picto_peq img{
 	width: 100%;
@@ -369,6 +373,7 @@ textarea.editable{
 
 .picto_cat .panel-body{
 	padding: 0px;
+  margin: 0 auto;
 }
 
 .picto_cat .panel-body .picto_peq{

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

@@ -59,6 +59,7 @@
   margin-top: @spacingUnit * 2;
   border-radius: @roundness;
   transition: background-color ease 0.3s 0.25s;
+  width: 900px;
 
   &__title {
     margin-top: 0;