Add ability to edit query description (FED #22)

This commit is contained in:
Amir Nissim 2014-01-14 16:42:12 +02:00
parent 041d5da13b
commit e34021c0be
3 changed files with 35 additions and 9 deletions

View File

@ -162,10 +162,16 @@ directives.directive('editInPlace', function () {
value: '=',
ignoreBlanks: '='
},
template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>',
template: function(tElement, tAttrs) {
var elType = tAttrs.editor || 'input';
var placeholder = tAttrs.placeholder || 'Click to edit';
return '<span ng-click="edit()" ng-bind="value"></span>' +
'<span ng-click="edit()" ng-show="!value">' + placeholder + '</span>' +
'<{elType} ng-model="value"></{elType}>'.replace('{elType}', elType);
},
link: function ($scope, element, attrs) {
// Let's get a reference to the input element, as we'll want to reference it.
var inputElement = angular.element(element.children()[1]);
var inputElement = angular.element(element.children()[2]);
// This directive should have a set class so we can style it.
element.addClass('edit-in-place');

View File

@ -23,19 +23,26 @@ a.navbar-brand {
}
.edit-in-place span {
cursor: pointer;
cursor: pointer;
}
.edit-in-place input {
display: none;
.edit-in-place input,
.edit-in-place textarea {
display: none;
}
.edit-in-place textarea {
height: 80px;
width: 250px;
}
.edit-in-place.active span {
display: none;
display: none;
}
.edit-in-place.active input {
display: inline-block;
.edit-in-place.active input,
.edit-in-place.active textarea {
display: inline-block;
}
.delete-button {

View File

@ -3,7 +3,20 @@
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span class="glyphicon glyphicon-pencil"></span> <edit-in-place ignore-blanks='true' value="query.name"></edit-in-place>
<div class="row">
<div class="col-lg-6">
<p>
<edit-in-place ignore-blanks='true' value="query.name"></edit-in-place>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>
<edit-in-place class="text-muted" editor="textarea" placeholder="No description" ignore-blanks='true' value="query.description"></edit-in-place>
</p>
</div>
</div>
</h3>
</div>
<div class="panel-body">