Less markup in template, reuse css

civicrm · May 15, 2018 · ffdd363 · ffdd363
1 parent 4e3a451
commit ffdd363
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 36 deletions.
diff --git a/ang/crmCaseType.css b/ang/crmCaseType.css
@@ -38,28 +38,6 @@
     width: 10em;
 }
 
-.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 {
     font-weight: bold;
 }
diff --git a/ang/crmCaseType.js b/ang/crmCaseType.js
@@ -126,13 +126,13 @@
     return {
       restrict: 'AE',
       link: function(scope, element, attrs) {
+        element.addClass('crm-editable crm-editable-enabled');
         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();
+        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);
 
@@ -166,8 +166,7 @@
           }
 
           penIcon.hide();
-          saveButton.show();
-          cancelButton.show();
+          buttons.show();
 
           saveButton.click(function () {
             updateTextValue();
@@ -212,8 +211,7 @@
           $(element).removeClass('crm-editable-editing');
 
           penIcon.show();
-          saveButton.hide();
-          cancelButton.hide();
+          buttons.hide();
         }
 
         function revertTextValue () {

diff --git a/ang/crmCaseType/edit.html b/ang/crmCaseType/edit.html
@@ -20,11 +20,8 @@ <h1 crm-page-title>{{caseType.title || ts('New Case Type')}}</h1>
       <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 crm-editable-tab-title title="Click to edit" class="crm-editable crm-editable-enabled">
-            <i class="crm-i fa-pencil crm-editable-placeholder"></i>
+          <div crm-editable-tab-title title="{{ts('Click to edit')}}">
             <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')}}"