From 666a68e22a9afaa6b189b7fe7f42111bcb78fc51 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 18 Mar 2022 08:24:46 -0400
Subject: [PATCH] CrmUI - Improve crmUiEditable to support placeholders, and
 use its own 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                         | 24 ++++++++++++++++++++++++
 ang/crmUi.ang.php                     |  1 +
 ang/crmUi.js                          |  8 +++++---
 ext/afform/admin/ang/afGuiEditor.css  |  1 +
 ext/search_kit/css/crmSearchAdmin.css |  1 +
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 ang/crmUI.css

diff --git a/ang/crmUI.css b/ang/crmUI.css
new file mode 100644
index 0000000000..a6e22781da
--- /dev/null
+++ b/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;
+}
diff --git a/ang/crmUi.ang.php b/ang/crmUi.ang.php
index c3cddd3466..2166302163 100644
--- a/ang/crmUi.ang.php
+++ b/ang/crmUi.ang.php
@@ -6,6 +6,7 @@ return [
   'ext' => 'civicrm',
   'js' => ['ang/crmUi.js'],
   'partials' => ['ang/crmUi'],
+  'css' => ['ang/crmUI.css'],
   'requires' => array_merge(
     [
       'crmResource',
diff --git a/ang/crmUi.js b/ang/crmUi.js
index 3f091914b2..c455951417 100644
--- a/ang/crmUi.js
+++ b/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');
         }
       };
     })
diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css
index a89d90afc3..35ff7e113d 100644
--- a/ext/afform/admin/ang/afGuiEditor.css
+++ b/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: '';
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index b5963b44d3..f422f42775 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/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: '';
-- 
2.25.1