Skip to content

yotta / pictogram

Go to a project
Commit 5df925fa by Sebastián Collado Montañez
Options

instructions interface

parent a0493780
Inline Side-by-side
Showing with 32 additions and 46 deletions
sails/src/assets/scripts/directives/directives.js
...@@ -250,30 +250,3 @@ dashboardDirectives.directive('popoveraddpicto', function() { ...@@ -250,30 +250,3 @@ 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
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<!-- Method header --> <!-- Method header -->
<div class="method-header"> <div class="method-header">
<div class="col-sm-6"> <div class="col-sm-6">
<input type="text" class="editable lead" ng-model="m.name" ng-blur="update_method(m)" placeholder="{{ 'method_name' | translate }}"> <input type="text" class="editable lead method-title" ng-model="m.name" ng-blur="update_method(m)" placeholder="{{ 'method_name' | translate }}" size="{{ m.name.length }}">
</div> </div>
<div class="col-sm-1 col-sm-offset-5 text-center"> <div class="col-sm-1 col-sm-offset-5 text-center">
<div class="options"> <div class="options">
...@@ -65,8 +65,8 @@ ...@@ -65,8 +65,8 @@
<!-- Method description --> <!-- Method description -->
<div class="container-fluid" ng-if="!minimalMode"> <div class="container-fluid" ng-if="!minimalMode">
<div class="instruction-data"> <div class="method-description">
<textarea class="editable" ng-model="m.description " placeholder="{{ 'method_description' | translate }}" ng-blur="update_method(m)" rows="3"></textarea> <textarea class="editable-border" ng-model="m.description " placeholder="{{ 'method_description' | translate }}" ng-blur="update_method(m)" rows="3"></textarea>
</div> </div>
</div> </div>
<!--END Method description --> <!--END Method description -->
...@@ -93,12 +93,11 @@ ...@@ -93,12 +93,11 @@
<td class="td-beige"> <td class="td-beige">
<dl> <dl>
<dt> <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> <div class="instruction-data"><input class="editable" type="text" ng-model="i.name" ng-blur="update_instruction(i)" placeholder="{{ 'instruction_name' | translate }}"></div>
</dt> </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> <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-border" type="text" ng-model="i.objective" ng-blur="update_instruction(i)" rows="3" placeholder="{{ 'instruction_objetive' | translate }}"></textarea></div></dd>
</dl> </dl>
</td> </td>
<td class="td-beige"> <td class="td-beige">
......
sails/src/assets/scripts/modules/supervisor/views/instructions.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<!-- Method header --> <!-- Method header -->
<div class="method-header"> <div class="method-header">
<div class="col-sm-6"> <div class="col-sm-6">
<input type="text" class="editable lead" ng-model="m.name " ng-blur="update_method(m)"/> <input type="text" class="editable lead method-title" ng-model="m.name " ng-blur="update_method(m)"/>
</div> </div>
<div class="col-sm-1 col-sm-offset-5 text-center"> <div class="col-sm-1 col-sm-offset-5 text-center">
<div class="options"> <div class="options">
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
<!-- Method description --> <!-- Method description -->
<div class="container-fluid" ng-if="!minimalMode"> <div class="container-fluid" ng-if="!minimalMode">
<div class="instruction-data"> <div class="method-description">
<textarea class="editable" ng-model="m.description " placeholder="{{'description' | translate }}" ng-blur="update_method(m)"></textarea> <textarea class="editable-border" ng-model="m.description " placeholder="{{'description' | translate }}" ng-blur="update_method(m)"></textarea>
</div> </div>
</div> </div>
<!--END Method description --> <!--END Method description -->
...@@ -64,10 +64,12 @@ ...@@ -64,10 +64,12 @@
<tr ng-repeat="i in m.metainstructions"> <tr ng-repeat="i in m.metainstructions">
<td class="td-beige"> <td class="td-beige">
<dl> <dl>
<dt translate>instruction</dt> <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> <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-border" type="text" ng-model="i.objective" ng-blur="update_instruction(i)" rows="3" placeholder="{{ 'instruction_objetive' | translate }}"></textarea></div></dd>
</dl> </dl>
</td> </td>
<td class="td-beige"> <td class="td-beige">
......
sails/src/assets/styles/main.css
...@@ -281,6 +281,15 @@ tr:hover .ops a{ ...@@ -281,6 +281,15 @@ tr:hover .ops a{
border-bottom: 3px solid #eaeac7; border-bottom: 3px solid #eaeac7;
} }
.method-title{
margin-top: 6px;
}
.method-description{
width: 700px;
padding-top: 20px;
}
.thead-default { .thead-default {
background-color: rgba(245, 245, 220, 0.3); background-color: rgba(245, 245, 220, 0.3);
border-bottom: 3px solid rgba(234, 234, 199, 0.3); border-bottom: 3px solid rgba(234, 234, 199, 0.3);
...@@ -323,6 +332,13 @@ tr:hover .ops a{ ...@@ -323,6 +332,13 @@ tr:hover .ops a{
} }
.editable{ .editable{
border: none;
border-radius: 5px;
background: transparent;
width: 100%;
}
.editable-border{
border: 1px solid #f5f5f3; border: 1px solid #f5f5f3;
border-radius: 5px; border-radius: 5px;
background: transparent; background: transparent;
...@@ -330,24 +346,20 @@ tr:hover .ops a{ ...@@ -330,24 +346,20 @@ tr:hover .ops a{
padding: 6px; padding: 6px;
} }
.editable:focus { .editable-border:focus {
border-color: #9ecaed; border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed; box-shadow: 0 0 10px #9ecaed;
} }
.editable:hover { .editable-border:hover {
border-color: #9ecaed; border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed; box-shadow: 0 0 10px #9ecaed;
} }
textarea.editable{ textarea.editable-border{
max-width: 100%; max-width: 100%;
} }
.editable.lead{
border: 1px solid transparent !important;
}
/* Panel Colecciones */ /* Panel Colecciones */
.drag { opacity: 0.5; } .drag { opacity: 0.5; }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment