CrmUI - Improve crmUiEditable to support placeholders, and use its ow…

…n css

Now this widget supports having a `placeholder`.
Also gave it its own css instead of piggybacking off crm-editable classes,
as that was a bit messy and Shoreditch was applying some extra stuff which
then had to be undone.

ang/crmUI.css

@@ -0,0 +1,24 @@
+/* CSS rules for Angular module "crmUI" */
+
+/* In-place edit  */
+.crm-container [crm-ui-editable] {
+  padding-left: 2px;
+  border: 2px dashed transparent;
+}
+.crm-container [crm-ui-editable]:hover,
+.crm-container [crm-ui-editable]:focus {
+  border: 2px dashed #d1d1d1;
+  cursor: pointer;
+  background-color: white !important;
+  color: initial !important;
+}
+.crm-container span[crm-ui-editable] {
+  display: inline-block !important;
+  padding-right: 2px;
+  min-height: 1em;
+  min-width: 3em;
+}
+.crm-container [crm-ui-editable]:empty:before {
+  content: attr(placeholder);
+  color: #9a9a9a;
+}

ang/crmUi.ang.php

@@ -6,6 +6,7 @@
   'ext' => 'civicrm',
   'js' => ['ang/crmUi.js'],
   'partials' => ['ang/crmUi'],
+  'css' => ['ang/crmUI.css'],
   'requires' => array_merge(
     [
       'crmResource',

ang/crmUi.js

@@ -1107,8 +1107,10 @@
       };
     })
 
-    // Editable text using ngModel & html5 contenteditable
-    // Usage: <span crm-ui-editable ng-model="my.data">{{ my.data }}</span>
+    // Single-line editable text using ngModel & html5 contenteditable
+    // Supports a `placeholder` attribute which shows up if empty and no `default-value`.
+    // The `default-value` attribute will force a value if empty (mutually-exclusive with `placeholder`).
+    // Usage: <span crm-ui-editable ng-model="model.text" placeholder="Enter text"></span>
     .directive("crmUiEditable", function() {
       return {
         restrict: "A",
@@ -1150,7 +1152,7 @@
             scope.$apply(read);
           });
 
-          element.attr('contenteditable', 'true').addClass('crm-editable-enabled');
+          element.attr('contenteditable', 'true');
         }
       };
     })

ext/afform/admin/ang/afGuiEditor.css

@@ -96,6 +96,7 @@
 #afGuiEditor .crm-editable-enabled:hover:not(:focus) {
   border: 2px dashed grey !important;
 }
+/* Undo Shoreditch add-ons */
 #afGuiEditor .crm-editable-enabled:before,
 #afGuiEditor .crm-editable-enabled:after {
   content: '';

ext/search_kit/css/crmSearchAdmin.css

@@ -201,6 +201,7 @@
 #bootstrap-theme.crm-search .crm-editable-enabled:hover:not(:focus) {
   border: 2px dashed grey !important;
 }
+/* Undo Shoreditch add-ons */
 #bootstrap-theme.crm-search .crm-editable-enabled:before,
 #bootstrap-theme.crm-search .crm-editable-enabled:after {
   content: '';