edit-in-place: set ng-class inside directive

hailocab · Jan 15, 2014 · 9230a77 · 9230a77
1 parent f8cc78e
commit 9230a77
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 13 deletions.
diff --git a/rd_ui/app/scripts/directives.js b/rd_ui/app/scripts/directives.js
@@ -166,8 +166,8 @@ directives.directive('editInPlace', function () {
         template: function(tElement, tAttrs) {
             var elType = tAttrs.editor || 'input';
             var placeholder = tAttrs.placeholder || 'Click to edit';
-            return '<span ng-click="editable && edit()" ng-bind="value"></span>' +
-                   '<span ng-click="editable && edit()" ng-show="!value">' + placeholder + '</span>' +
+            return '<span ng-click="editable && edit()" ng-bind="value" ng-class="{editable: editable}"></span>' +
+                   '<span ng-click="editable && edit()" ng-show="editable && !value" ng-class="{editable: editable}">' + placeholder + '</span>' +
                    '<{elType} ng-model="value" class="form-control" rows="2"></{elType}>'.replace('{elType}', elType);
         },
         link: function ($scope, element, attrs) {

diff --git a/rd_ui/app/styles/redash.css b/rd_ui/app/styles/redash.css
@@ -22,11 +22,11 @@ a.navbar-brand {
     margin-bottom: 5px;
 }
 
-.edit-in-place.editable span {
+.edit-in-place span.editable {
     cursor: pointer;
 }
 
-.edit-in-place.editable span:hover {
+.edit-in-place span.editable:hover {
     background: #FCFCA2;
 }
 

diff --git a/rd_ui/app/views/queryfiddle.html b/rd_ui/app/views/queryfiddle.html
@@ -4,17 +4,11 @@
             <div class="panel-heading">
                 <h3 class="panel-title">
                     <p>
-                        <edit-in-place editable="currentUser.canEdit(query)" ignore-blanks='true'
-                                       value="query.name"
-                                       ng-class="{editable: currentUser.canEdit(query)}"></edit-in-place>
-                    </p>
+                     <edit-in-place editable="currentUser.canEdit(query)" ignore-blanks='true' value="query.name"></edit-in-place>
+                 </p>
                 </h3>
                 <p>
-                    <edit-in-place editable="currentUser.canEdit(query)" editor="textarea"
-                                   placeholder="No description" ignore-blanks='false'
-                                   value="query.description"
-                                   ng-class="{editable: currentUser.canEdit(query)}"
-                                   class="text-muted"></edit-in-place>
+                    <edit-in-place editable="currentUser.canEdit(query)" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description" class="text-muted"></edit-in-place>
                 </p>
             </div>
             <div class="panel-body">