instructions title

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

@@ -236,6 +236,7 @@ dashboardDirectives.directive('droppableadd', function() {
     }
     }
   }
   }
 });
 });
+
 dashboardDirectives.directive('popoveraddpicto', function() {
 dashboardDirectives.directive('popoveraddpicto', function() {
   var y=99999;
   var y=99999;
   return {
   return {
@@ -249,3 +250,30 @@ dashboardDirectives.directive('popoveraddpicto', function() {
       }
       }
     }
     }
 });
 });
+
+dashboardDirectives.directive("contenteditable", function() {
+  return {
+    restrict: "A",
+    require: "ngModel",
+    link: function(scope, element, attrs, ngModel) {
+
+      function read() {
+        var html = element.html();
+        html = html.replace(/<br\s*\/?>/gi,'');
+        ngModel.$setViewValue(html);
+      }
+
+      ngModel.$render = function() {
+        element.html(ngModel.$viewValue || "");
+      };
+
+      element.bind("blur keyup change keydown", function(evt) {
+        if (evt.which === 13) {
+          evt.preventDefault();
+          return;
+        }
+        scope.$apply(read);
+      });
+    }
+  };
+});

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

@@ -92,8 +92,11 @@
                   </td>
                   </td>
                   <td class="td-beige">
                   <td class="td-beige">
                     <dl>
                     <dl>
-                      <dt translate>instruction</dt>
-                      <dd><div class="instruction-data"><input class="editable" type="text" ng-model="i.name" ng-blur="update_instruction(i)" placeholder="{{ 'instruction_name' | translate }}"></div></dd>
+                      <dt>
+                         <span contenteditable ng-model="i.name" ng-blur="update_instruction(i)"></span> <i class="fa fa-pencil-square-o color_grey" aria-hidden="true"></i>
+                      </dt>
+                      <!--<dt><div class="instruction-data"><input class="editable" type="text" ng-model="i.name" ng-blur="update_instruction(i)" placeholder="{{ 'instruction_name' | translate }}"></div></dt>-->
+                      <br>
                       <dt ng-if="!minimalMode" translate>objetive</dt>
                       <dt ng-if="!minimalMode" translate>objetive</dt>
                       <dd ng-if="!minimalMode"><div class="instruction-data"><textarea class="elipsis editable" type="text" ng-model="i.objective" ng-blur="update_instruction(i)" rows="3" placeholder="{{ 'instruction_objetive' | translate }}"></textarea></div></dd>
                       <dd ng-if="!minimalMode"><div class="instruction-data"><textarea class="elipsis editable" type="text" ng-model="i.objective" ng-blur="update_instruction(i)" rows="3" placeholder="{{ 'instruction_objetive' | translate }}"></textarea></div></dd>
                     </dl>
                     </dl>

sails/src/assets/styles/main.css

@@ -26,6 +26,9 @@
 .color_orange{
 .color_orange{
 	color: #FF8901;
 	color: #FF8901;
 }
 }
+.color_grey {
+    color: #cccccc;
+}
 
 
 .backgroundcolor_blue{
 .backgroundcolor_blue{
 	background-color: #D2DFFF;
 	background-color: #D2DFFF;