CRM-16415 - Replace editable icons

diff --git a/css/civicrm.css b/css/civicrm.css
index 5593d274eabe846a559688abad31093e0626a42a..7d9dc2ab5dbc762c7ee52c6702eb66c6816be785 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3445,10 +3445,11 @@ div.m ul#civicrm-menu,
 }
 
 .crm-container .replace-plain:before {
-  content: "";
+  content: "\f040";
   position: absolute;
   top: .4em;
   right: .5em;
+  opacity: .5;
 }
 
 /* in place edit  */
@@ -3478,21 +3479,14 @@ div.m ul#civicrm-menu,
   display: inline-block !important;
 }
 
-.crm-container .crm-editable-placeholder,
-.crm-container .replace-plain:before {
-  background: url("../i/icons/jquery-ui-3E3E3E.png") -66px -114px no-repeat;
-  text-indent: -10000px;
-  display: block;
-  height: 16px;
-  width: 16px;
+.crm-container .crm-editable-enabled .crm-i {
   opacity: .5;
 }
 
 .crm-container .replace-plain a:active:before,
 .crm-container .replace-plain:focus:before,
 .crm-container .replace-plain:hover:before,
-.crm-container .crm-editable-enabled:hover .crm-editable-placeholder {
-  background-image: url("../i/icons/jquery-ui-2786C2.png");
+.crm-container .crm-editable-enabled:hover .crm-i {
   opacity: 1;
 }
 

diff --git a/css/crm-i.css b/css/crm-i.css
index 6dccf199960237eb8c9f0eb27e923e7be571f7c7..c8ec92a346b8b13915439920946eaeca8e7f3a51 100644 (file)
--- a/css/crm-i.css
+++ b/css/crm-i.css
@@ -3,6 +3,7 @@ This is separate to avoid conflict with a site theme's implementation of FA.  It
 is loaded before font-awesome.css so that .fa-XXX classes can modify it. */
 .ui-icon[class*=" fa-"],
 .crm-container a.helpicon,
+.crm-container .replace-plain:before,
 .crm-i {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;

diff --git a/js/jquery/jquery.crmeditable.js b/js/jquery/jquery.crmeditable.js
index 92440ebf0d8e56fe611c05bbb4fd21ae4f53a491..453c4969320ff3e64d3c9e7acefd13ba394795c7 100644 (file)
--- a/js/jquery/jquery.crmeditable.js
+++ b/js/jquery/jquery.crmeditable.js
@@ -107,7 +107,7 @@
 
       var settings = {
         tooltip: $i.data('tooltip') || ts('Click to edit'),
-        placeholder: $i.data('placeholder') || '<span class="crm-editable-placeholder">' + ts('Click to edit') + '</span>',
+        placeholder: $i.data('placeholder') || '<i class="crm-i fa-pencil crm-editable-placeholder"></i>',
         onblur: 'cancel',
         cancel: '<button type="cancel"><i class="crm-i fa-times"></i></button>',
         submit: '<button type="submit"><i class="crm-i fa-check"></i></button>',