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.

diff --git a/ang/crmUI.css b/ang/crmUI.css
new file mode 100644 (file)
index 0000000..a6e2278
--- /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 c3cddd3466f2cd55d9cea4243ec7d6c27b5075ef..21663021634d89693d2ec4427dc745da628f1262 100644 (file)
--- 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 3f091914b2a88f6d874ba2faad6281b82b1b5ae0..c4559514175025e194d73f7d3a8d79767b0c751a 100644 (file)
--- 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 a89d90afc39ce6c927b4acc5eb8f53ead705de07..35ff7e113dd9b16a139dce51b33f15ff4439a62b 100644 (file)
--- 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 b5963b44d330913dbaef01846dd20acfd6079724..f422f42775e1494cb67fb300b12076e9741dc8aa 100644 (file)
--- 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: '';