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() {
}
}
});
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 @@
<!-- Method header -->
<div class="method-header">
<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 class="col-sm-1 col-sm-offset-5 text-center">
<div class="options">
......@@ -65,8 +65,8 @@
<!-- Method description -->
<div class="container-fluid" ng-if="!minimalMode">
<div class="instruction-data">
<textarea class="editable" ng-model="m.description " placeholder="{{ 'method_description' | translate }}" ng-blur="update_method(m)" rows="3"></textarea>
<div class="method-description">
<textarea class="editable-border" ng-model="m.description " placeholder="{{ 'method_description' | translate }}" ng-blur="update_method(m)" rows="3"></textarea>
</div>
</div>
<!--END Method description -->
......@@ -93,12 +93,11 @@
<td class="td-beige">
<dl>
<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><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>
<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>
</td>
<td class="td-beige">
......
sails/src/assets/scripts/modules/supervisor/views/instructions.html
......@@ -30,7 +30,7 @@
<!-- Method header -->
<div class="method-header">
<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 class="col-sm-1 col-sm-offset-5 text-center">
<div class="options">
......@@ -44,8 +44,8 @@
<!-- Method description -->
<div class="container-fluid" ng-if="!minimalMode">
<div class="instruction-data">
<textarea class="editable" ng-model="m.description " placeholder="{{'description' | translate }}" ng-blur="update_method(m)"></textarea>
<div class="method-description">
<textarea class="editable-border" ng-model="m.description " placeholder="{{'description' | translate }}" ng-blur="update_method(m)"></textarea>
</div>
</div>
<!--END Method description -->
......@@ -64,10 +64,12 @@
<tr ng-repeat="i in m.metainstructions">
<td class="td-beige">
<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>
<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>
<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>
</td>
<td class="td-beige">
......
sails/src/assets/styles/main.css
......@@ -281,6 +281,15 @@ tr:hover .ops a{
border-bottom: 3px solid #eaeac7;
}
.method-title{
margin-top: 6px;
}
.method-description{
width: 700px;
padding-top: 20px;
}
.thead-default {
background-color: rgba(245, 245, 220, 0.3);
border-bottom: 3px solid rgba(234, 234, 199, 0.3);
......@@ -323,6 +332,13 @@ tr:hover .ops a{
}
.editable{
border: none;
border-radius: 5px;
background: transparent;
width: 100%;
}
.editable-border{
border: 1px solid #f5f5f3;
border-radius: 5px;
background: transparent;
......@@ -330,24 +346,20 @@ tr:hover .ops a{
padding: 6px;
}
.editable:focus {
.editable-border:focus {
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.editable:hover {
.editable-border:hover {
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
textarea.editable{
textarea.editable-border{
max-width: 100%;
}
.editable.lead{
border: 1px solid transparent !important;
}
/* Panel Colecciones */
.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