Merge pull request #1680 from opf/fix/edit-comments-styling-and-validation

app/assets/javascripts/angular/directives/components/activity-comment-directive.js

@@ -33,14 +33,18 @@ angular.module('openproject.uiComponents')
   return {
     restrict: 'E',
     replace: true,
+    require: '^?exclusiveEdit',
     scope: {
       workPackage: '=',
       activities: '='
     },
     templateUrl: '/templates/components/activity_comment.html',
-    link: function(scope, element, attrs) {
+    link: function(scope, element, attrs, exclusiveEditController) {
+      exclusiveEditController.setCreator(scope);
+
       scope.title = I18n.t('js.label_add_comment_title');
       scope.buttonTitle = I18n.t('js.label_add_comment');
+      scope.buttonCancel = I18n.t('js.button_cancel');
       scope.canAddComment = !!scope.workPackage.links.addComment;
       scope.activity = { comment: '' };
 
@@ -52,7 +56,11 @@ angular.module('openproject.uiComponents')
             scope.$emit('workPackageRefreshRequired', '');
             return response;
           });
-      }
+      };
+
+      scope.clearComment = function() {
+        scope.activity.comment = '';
+      };
     }
   };
 }]);

app/assets/javascripts/angular/work_packages/tabs/exclusive-edit-directive.js

@@ -36,15 +36,25 @@ angular.module('openproject.workPackages.tabs')
     template: '<div class="exclusive-edit" ng-transclude></div>',
     controller: function() {
       var editors = [];
+      var creator;
+
       this.gotEditable = function(selectedEditor) {
         angular.forEach(editors, function(editor) {
-          if (selectedEditor != editor) {
+          editor.inEdit = selectedEditor == editor;
-            editor.inEdit = false; }
+        });
-          });
       };
+
       this.addEditable = function(editor) {
         editors.push(editor);
       };
+
+      this.setCreator = function(newCreator) {
+        creator = newCreator;
+      };
+
+      this.setQuoted = function(text) {
+        creator.activity.comment = text;
+      };
     }
   };
 })

app/assets/javascripts/angular/work_packages/tabs/user-activity-directive.js

@@ -35,18 +35,25 @@ angular.module('openproject.workPackages.tabs')
     require: '^?exclusiveEdit',
     templateUrl: '/templates/work_packages/tabs/_user_activity.html',
     scope: {
+      workPackage: '=',
       activity: '=',
       activityNo: '=',
       inputElementId: '='
     },
     link: function(scope, element, attrs, exclusiveEditController) {
       exclusiveEditController.addEditable(scope);
+      scope.$watch('inEdit', function(newVal, oldVal) {
+        if(newVal) {
+          angular.element('#edit-comment-text').focus();
+        }
+      })
 
       scope.I18n = I18n;
       scope.userPath = PathHelper.staticUserPath;
       scope.inEdit = false;
       scope.inFocus = false;
       scope.userCanEdit = !!scope.activity.links.update;
+      scope.userCanQuote = !!scope.workPackage.links.addComment;
 
       scope.activity.links.user.fetch().then(function(user) {
         scope.userId = user.props.id;
@@ -55,7 +62,6 @@ angular.module('openproject.workPackages.tabs')
       });
 
       scope.editComment = function() {
-        scope.inEdit = true;
         exclusiveEditController.gotEditable(scope);
       };
 
@@ -64,9 +70,10 @@ angular.module('openproject.workPackages.tabs')
       };
 
       scope.quoteComment = function() {
+        exclusiveEditController.setQuoted(quotedText(scope.activity.props.rawComment));
         var elem = angular.element('#' + scope.inputElementId);
-        elem.val(quotedText(scope.activity.props.rawComment));
         $uiViewScroll(elem);
+        elem.focus();
       };
 
       scope.updateComment = function(comment) {

config/locales/js-de.yml

@@ -32,6 +32,7 @@ de:
       hide: "Verbergen"
       loading: "Lädt ..."
     button_add_watcher: "Beobachter hinzufügen"
+    button_cancel: "Abbrechen"
     button_check_all: "Alles auswählen"
     button_copy: "Kopieren"
     button_delete: "Löschen"
@@ -41,6 +42,7 @@ de:
     button_log_time: "Aufwand buchen"
     button_move: "Verschieben"
     button_quote: "Zitieren"
+    button_save: "Speichern"
     button_uncheck_all: "Alles abwählen"
     button_update: "Bearbeiten"
     description_available_columns: "Verfügbare Spalten"

config/locales/js-en.yml

@@ -32,6 +32,7 @@ en:
       hide: "Hide"
       loading: "Loading ..."
     button_add_watcher: "Add watcher"
+    button_cancel: "Cancel"
     button_check_all: "Check all"
     button_copy: "Copy"
     button_delete: "Delete"
@@ -41,6 +42,7 @@ en:
     button_log_time: "Log time"
     button_move: "Move"
     button_quote: "Quote"
+    button_save: "Save"
     button_uncheck_all: "Uncheck all"
     button_update: "Update"
     description_available_columns: "Available Columns"

public/templates/components/activity_comment.html

@@ -3,12 +3,18 @@
     <label>
       <h3>{{ title }}</h3>
       <textarea id="add-comment-text"
+                class="add-comment-text"
                 name="add_comment_text"
                 ng-model="activity.comment"
-                required></textarea>
+                required
+                placeholder="Add your comments here">
+      </textarea>
       <button class="button"
               ng-click="createComment()"
-              ng-disabled="commentForm.$invalid">{{ buttonTitle }}</button>
+              ng-disabled="commentForm.$invalid"><i class="icon-yes icon-left"></i>{{ buttonTitle }}
+      </button>
+      <button class="button" ng-disabled="commentForm.$invalid" ng-click="clearComment()">
+        <i class="icon-close icon-left"></i>{{ buttonCancel }}</button>
     </label>
   </form>
 </div>

public/templates/work_packages/tabs/_user_activity.html

@@ -4,7 +4,9 @@
   <div class="comments-number"><a ng-href="#{{ currentAnchor }}" ng-bind="'#' + activityNo"></a>
     <div class="comments-icons"
          ng-show="activity.props._type == 'Activity::Comment' && inFocus">
-      <i class="icon-quote action-icon" ng-click="quoteComment()"></i>
+      <i class="icon-quote action-icon"
+         ng-if="userCanQuote"
+         ng-click="quoteComment()"></i>
       <i class="icon-edit action-icon"
          ng-if="userCanEdit"
          ng-click="editComment()"></i>
@@ -15,15 +17,24 @@
   <span class="date">{{ I18n.t('js.label_commented_on') }} <date-time date-time-value="activity.props.createdAt"/></date-time>
   <span class="comment wiki">
     <div ng-if="inEdit">
-      <div>
+      <form name="editCommentForm">
-        <textarea id="edit-comment-text"
+        <div>
-                  ng-bind-html="activity.props.rawComment"
+          <textarea id="edit-comment-text"
-                  rows="5"></textarea>
+                    name="edit_comment_text"
-      </div>
+                    class="add-comment-text"
-      <div>
+                    ng-model="activity.props.rawComment"
-        <button class="button" ng-click="updateComment()">{{ I18n.t('js.button_update') }}</button>
+                    ng-bind-html="activity.props.rawComment"
-        <span><a href="" ng-click="cancelEdit()">cancel</a></span>
+                    rows="4"
-      </div>
+                    required></textarea>
+        </div>
+        <div>
+          <button class="button"
+                  ng-click="updateComment()"
+                  ng-disabled="editCommentForm.$invalid"><i class="icon-yes icon-left"></i>{{ I18n.t('js.button_save') }}
+          </button>
+          <button class="button" ng-disabled="commentForm.$invalid" ng-click="cancelEdit()"><i class="icon-close icon-left"></i>{{ I18n.t('js.button_cancel') }}</button>
+        </div>
+      </form>
     </div>
     <span ng-if="!inEdit"
           class="message"

public/templates/work_packages/tabs/activity.html

@@ -1,6 +1,6 @@
 <div class="detail-panel-content" >
-  <div class="detail-activity">
+  <exclusive-edit>
-    <exclusive-edit>
+    <div class="detail-activity">
       <ul class="work-package-details-activities-list">
         <li ng-repeat="activity in activities"
             class="work-package-details-activities-activity"
@@ -10,15 +10,16 @@
           <h3 class="activity-date"
               ng-if="currentDate !== (activities[$index-1].props.createdAt | date:'longDate')"
               ng-bind="currentDate"/>
-          <user-activity activity="activity"
+          <user-activity work-package="workPackage"
+                         activity="activity"
                          activity-no="activityNo"
                          input-element-id="'add-comment-text'">
           </user-activity>
         </li>
       </ul>
-    </exclusive-edit>
+    </div>
-  </div>
+    <activity-comment work-package="workPackage"
-  <activity-comment work-package="workPackage"
+                      activities="activities">
-                    activities="activities">
+    </activity-comment>
-  </activity-comment>
+  </exclusive-edit>
 </div>

public/templates/work_packages/tabs/overview.html

@@ -43,13 +43,14 @@
           class="work-package-details-activities-activity"
           ng-init="currentAnchor = 'note-' + ($index+1);
                    activityNo = activities.length - $index;">
-        <user-activity activity="activity"
+        <user-activity work-package="workPackage"
+                       activity="activity"
                        activity-no="activityNo"
                        input-element-id="'add-comment-text'">
       </li>
     </ul>
+    <activity-comment work-package="workPackage"
+                      activities="activities">
+    </activity-comment>
   </exclusive-edit>
-  <activity-comment work-package="workPackage"
-                    activities="activities">
-  </activity-comment>
 </div>