Add inplace edit for timeline name

ang/crmCaseType.css

@@ -2,8 +2,14 @@
     vertical-align: middle;
     cursor: move;
 }
+
+.crmCaseType .fa-pencil {
+    margin: 0.2em 0.2em 0 0;
+    cursor: pointer;
+}
+
 .crmCaseType .fa-trash {
-    margin: 0.4em 0.2em 0 0;
+    margin: 0.56em 0.2em 0 0;
     cursor: pointer;
 }
 

ang/crmCaseType.js

@@ -122,6 +122,113 @@
     };
   });
 
+  crmCaseType.directive('crmEditableTabTitle', function($timeout) {
+    return {
+      restrict: 'AE',
+      link: function(scope, element, attrs) {
+        element.addClass('crm-editable crm-editable-enabled');
+        var titleLabel = $(element).find('span');
+        var penIcon = $('<i class="crm-i fa-pencil crm-editable-placeholder"></i>').prependTo(element);
+        var saveButton = $('<button type="button"><i class="crm-i fa-check"></i></button>').appendTo(element);
+        var cancelButton = $('<button type="cancel"><i class="crm-i fa-times"></i></button>').appendTo(element);
+        $('button', element).wrapAll('<div class="crm-editable-form" style="display:none" />');
+        var buttons = $('.crm-editable-form', element);
+        titleLabel.on('click', startEditMode);
+        penIcon.on('click', startEditMode);
+
+        function detectEscapeKeyPress (event) {
+          var isEscape = false;
+
+          if ("key" in event) {
+              isEscape = (event.key == "Escape" || event.key == "Esc");
+          } else {
+              isEscape = (event.keyCode == 27);
+          }
+
+          return isEscape;
+        }
+
+        function detectEnterKeyPress (event) {
+          var isEnter = false;
+
+          if ("key" in event) {
+            isEnter = (event.key == "Enter");
+          } else {
+            isEnter = (event.keyCode == 13);
+          }
+
+          return isEnter;
+        }
+
+        function startEditMode () {
+          if (titleLabel.is(":focus")) {
+            return;
+          }
+
+          penIcon.hide();
+          buttons.show();
+
+          saveButton.click(function () {
+            updateTextValue();
+            stopEditMode();
+          });
+
+          cancelButton.click(function () {
+            revertTextValue();
+            stopEditMode();
+          });
+
+          $(element).addClass('crm-editable-editing');
+
+          titleLabel
+            .attr("contenteditable", "true")
+            .focus()
+            .focusout(function (event) {
+              $timeout(function () {
+                revertTextValue();
+                stopEditMode();
+              }, 500);
+            })
+            .keydown(function(event) {
+              event.stopImmediatePropagation();
+
+              if(detectEscapeKeyPress(event)) {
+                revertTextValue();
+                stopEditMode();
+              } else if(detectEnterKeyPress(event)) {
+                event.preventDefault();
+                updateTextValue();
+                stopEditMode();
+              }
+            });
+        }
+
+        function stopEditMode () {
+          titleLabel.removeAttr("contenteditable").off("focusout");
+          titleLabel.off("keydown");
+          saveButton.off("click");
+          cancelButton.off("click");
+          $(element).removeClass('crm-editable-editing');
+
+          penIcon.show();
+          buttons.hide();
+        }
+
+        function revertTextValue () {
+          titleLabel.text(scope.activitySet.label);
+        }
+
+        function updateTextValue () {
+          var updatedTitle = titleLabel.text();
+
+          scope.$evalAsync(function () {
+            scope.activitySet.label = updatedTitle;
+          });
+        }
+      }
+    };
+  });
+
   crmCaseType.controller('CaseTypeCtrl', function($scope, crmApi, apiCalls) {
     // CRM_Case_XMLProcessor::REL_TYPE_CNAME
     var REL_TYPE_CNAME = CRM.crmCaseType.REL_TYPE_CNAME,

ang/crmCaseType/edit.html

@@ -19,10 +19,14 @@ <h1 crm-page-title>{{caseType.title || ts('New Case Type')}}</h1>
       <li><a href="#acttab-statuses">{{ts('Case Statuses')}}</a></li>
       <li><a href="#acttab-actType">{{ts('Activity Types')}}</a></li>
       <li ng-repeat="activitySet in caseType.definition.activitySets">
-        <a href="#acttab-{{$index}}">{{ activitySet.label }}</a>
+        <a href="#acttab-{{$index}}" class="crmCaseType-editable">
+          <div crm-editable-tab-title title="{{ts('Click to edit')}}">
+            <span>{{ activitySet.label }}</span>
+          </div>
+        </a>
         <span class="crm-i fa-trash" title="{{ts('Remove')}}"
           ng-hide="activitySet.name == 'standard_timeline'"
-          ng-click="removeItem(caseType.definition.activitySets, activitySet)">{{ts('Remove')}}</span>
+          ng-click="removeItem(caseType.definition.activitySets, activitySet)"></span>
         <!-- Weird spacing:
         <a class="crm-hover-button" ng-click="removeItem(caseType.definition.activitySets, activitySet)">
           <span class="crm-i fa-trash" title="Remove">Remove</span>
@@ -44,11 +48,6 @@ <h1 crm-page-title>{{caseType.title || ts('New Case Type')}}</h1>
 
     <div ng-repeat="activitySet in caseType.definition.activitySets" id="acttab-{{$index}}">
       <div ng-include="activityTableTemplate(activitySet)"></div>
-
-      <div class="crm-accordion-wrapper collapsed">
-        <div class="crm-accordion-header">{{ts('Advanced')}}</div>
-        <div class="crm-accordion-body" ng-include="'~/crmCaseType/activitySetDetails.html'"></div>
-      </div>
     </div>
   </div>