PR Feedback fixes

civicrm · May 15, 2018 · ec3fc22 · ec3fc22
1 parent 6b92759
commit ec3fc22
Show file tree

Hide file tree

Showing 4 changed files with 323 additions and 97 deletions.
diff --git a/ang/crmCaseType.css b/ang/crmCaseType.css
@@ -2,10 +2,14 @@
     vertical-align: middle;
     cursor: move;
 }
-.crmCaseType .fa-trash,
-.crmCaseType .fa-pencil,
-.crmCaseType .fa-save {
-    margin: 0.4em 0.2em 0 0;
+
+.crmCaseType .fa-pencil {
+    margin: 0.2em 0.2em 0 0;
+    cursor: pointer;
+}
+
+.crmCaseType .fa-trash {
+    margin: 0.56em 0.2em 0 0;
     cursor: pointer;
 }
 
@@ -17,11 +21,6 @@
     float: right;
 }
 
-.crmCaseType .ui-tabs-nav li a > span {
-  display: block;
-  padding: 2px 0;
-}
-
 .crmCaseType tr.addRow td {
     background: #ddddff;
     padding: 0.5em 1em;
@@ -39,9 +38,26 @@
     width: 10em;
 }
 
-.crmCaseType-edit-activity-set {
-    border: 0 !important;
-    border-bottom: 1px solid #666 !important;
+.crmCaseType-editable-check {
+    bottom: -24px;
+    cursor: pointer;
+    height: 24px;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    width: 30px;
+    z-index: 1;
+}
+
+.crmCaseType-editable-times {
+    bottom: -24px;
+    cursor: pointer;
+    height: 24px;
+    left: 30px;
+    position: absolute;
+    text-align: center;
+    width: 30px;
+    z-index: 1;
 }
 
 tr.forked {

diff --git a/ang/crmCaseType.js b/ang/crmCaseType.js
@@ -122,6 +122,108 @@
     };
   });
 
+  crmCaseType.directive('crmEditableTabTitle', function($timeout) {
+    return {
+      restrict: 'AE',
+      link: function(scope, element, attrs) {
+        var titleLabel = $(element).find('span');
+        var penIcon = $(element).find('i.fa-pencil');
+        var saveButton = $(element).find('.crmCaseType-editable-check');
+        var cancelButton = $(element).find('.crmCaseType-editable-times');
+
+        saveButton.hide();
+        cancelButton.hide();
+        titleLabel.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 () {
+          stopEditMode();
+          penIcon.hide();
+          saveButton.show();
+          cancelButton.show();
+
+          saveButton.click(function () {
+            updateTextValue();
+            stopEditMode();
+          });
+
+          cancelButton.click(function () {
+            revertTextValue();
+            stopEditMode();
+          });
+
+          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");
+
+          penIcon.show();
+          saveButton.hide();
+          cancelButton.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,
@@ -171,7 +273,6 @@
       activitySet.label = (offset == 1  ) ? $scope.workflows[workflow] : ($scope.workflows[workflow] + ' #' + offset);
 
       $scope.caseType.definition.activitySets.push(activitySet);
-      $scope.startEditModeForActivitySet(activitySet);
       _.defer(function() {
         $('.crmCaseType-acttab').tabs('refresh').tabs({active: -1});
       });
@@ -260,20 +361,6 @@
       }
     };
 
-    /// Starts the edit mode for the provided activity set
-    $scope.startEditModeForActivitySet = function (activitySet) {
-      $scope.stopEditModeForAllActivitySets();
-
-      activitySet.isInEditMode = true;
-    };
-
-    /// Stops the edit mode for all activity sets
-    $scope.stopEditModeForAllActivitySets = function () {
-      _.forEach($scope.caseType.definition.activitySets, function (activitySet) {
-        activitySet.isInEditMode = false;
-      });
-    };
-
     $scope.isForkable = function() {
       return !$scope.caseType.id || $scope.caseType.is_forkable;
     };

diff --git a/ang/crmCaseType/edit.html b/ang/crmCaseType/edit.html
@@ -15,28 +15,21 @@ <h1 crm-page-title>{{caseType.title || ts('New Case Type')}}</h1>
 
   <div ng-show="isForkable()" class="crmCaseType-acttab" ui-jq="tabs" ui-options="{show: true, hide: true}">
     <ul>
-      <li><a href="#acttab-roles" ng-click="stopEditModeForAllActivitySets()"><span>{{ts('Case Roles')}}</span></a></li>
-      <li><a href="#acttab-statuses" ng-click="stopEditModeForAllActivitySets()"><span>{{ts('Case Statuses')}}</span></a></li>
-      <li><a href="#acttab-actType" ng-click="stopEditModeForAllActivitySets()"><span>{{ts('Activity Types')}}</span></a></li>
+      <li><a href="#acttab-roles">{{ts('Case Roles')}}</a></li>
+      <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}}" class="crmCaseType-editable">
-          <div class="crm-editable crm-editable-enabled">
-            <div ng-if="!activitySet.isInEditMode" title="Click to edit" ng-click="startEditModeForActivitySet(activitySet)">
-              <i class="crm-i fa-pencil crm-editable-placeholder"></i>
-              <span>{{ activitySet.label }}</span>
-            </div>
-            <div ng-if="activitySet.isInEditMode">
-              <input
-                class="crmCaseType-edit-activity-set"
-                autocomplete="off"
-                ng-keydown="$event.stopImmediatePropagation()"
-                ng-model="activitySet.label" />
-              <button ng-click="activitySet.isInEditMode = false">
-                <i class="crm-i fa-check"></i>
-              </button>
-            </div>
+          <div crm-editable-tab-title title="Click to edit" class="crm-editable crm-editable-enabled">
+            <i class="crm-i fa-pencil crm-editable-placeholder"></i>
+            <span>{{ activitySet.label }}</span>
+            <button class="crmCaseType-editable-check"><i class="crm-i fa-check"></i></button>
+            <button class="crmCaseType-editable-times"><i class="crm-i fa-times"></i></button>
           </div>
         </a>
+        <span class="crm-i fa-trash" title="{{ts('Remove')}}"
+          ng-hide="activitySet.name == 'standard_timeline'"
+          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>