CRM-15789 - Cleanup editable icons/styles
authorColeman Watts <coleman@civicrm.org>
Wed, 7 Jan 2015 16:42:10 +0000 (11:42 -0500)
committerColeman Watts <coleman@civicrm.org>
Thu, 8 Jan 2015 19:19:07 +0000 (14:19 -0500)
css/civicrm.css
i/edit.png [deleted file]
templates/CRM/Contact/Form/Edit/CommunicationPreferences.js.tpl [new file with mode: 0644]
templates/CRM/Contact/Form/Edit/CommunicationPreferences.tpl
templates/CRM/Contact/Form/Inline/CommunicationPreferences.tpl

index 340ffc20ab2304f3b4f7888ccd1bb08b0d2ad098..609ddf2afed36c4b94bc7b41e194ed336d6a1dcc 100644 (file)
@@ -217,38 +217,6 @@ input.crm-form-entityref {
   color: #3E3E3E;
 }
 
-.crm-container .replace-plain,
-.crm-container textarea,
-.crm-container select.crm-form-multiselect {
-  border: 1px solid #999;
-}
-
-.crm-container .replace-plain {
-  cursor: pointer;
-  background: rgba(255,255,255,0.6);
-  min-height: 2em;
-  position: relative;
-  padding: 2px;
-}
-
-.crm-container .replace-plain:focus,
-.crm-container .replace-plain:hover {
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-  background: rgba(255,255,255,0.8);
-}
-
-.crm-container .replace-plain .icon.ui-icon-pencil {
-  position: absolute;
-  top: .5em;
-  right: .5em;
-}
-
-.crm-container .replace-plain a:active .icon.ui-icon-pencil,
-.crm-container .replace-plain:focus .icon.ui-icon-pencil,
-.crm-container .replace-plain:hover .icon.ui-icon-pencil {
-  background-image: url("../i/icons/jquery-ui-2786C2.png");
-}
-
 /*
 ** class for hiding the text box;
   it is used in the OtherActivity template
@@ -715,13 +683,6 @@ input.crm-form-entityref {
   padding: 4px;
 }
 
-.crm-container div.view-data {
-  padding: .25em .5em .25em .5em;
-  border: 1px solid DimGray;
-  width: auto;
-  background-color: #ffffff;
-}
-
 .crm-container .crm-footer {
   font-size: 0.8em;
 }
@@ -3995,6 +3956,40 @@ div.m ul#civicrm-menu,
   width: 100%;
 }
 
+/* editable placeholder containers - share some styles with crm-editable below */
+
+.crm-container .replace-plain,
+.crm-container textarea,
+.crm-container select.crm-form-multiselect {
+  border: 1px solid #999;
+}
+
+.crm-container .replace-plain {
+  cursor: pointer;
+  background: rgba(255,255,255,0.6);
+  min-height: 1.4em;
+  position: relative;
+  padding: .4em 1.5em .3em .4em;
+}
+
+.crm-container .replace-plain p {
+  padding: .2em 0;
+  margin: 0;
+}
+
+.crm-container .replace-plain:focus,
+.crm-container .replace-plain:hover {
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+  background: rgba(255,255,255,0.8);
+}
+
+.crm-container .replace-plain:before {
+  content: "";
+  position: absolute;
+  top: .4em;
+  right: .5em;
+}
+
 /* in place edit  */
 .crm-container .crm-editable-enabled {
   white-space: nowrap;
@@ -4016,21 +4011,25 @@ div.m ul#civicrm-menu,
 }
 
 .crm-container span.crm-editable-textarea-enabled {
-  display: inline-block !important;
   width: 96%;
 }
 .crm-container span.crm-editable-enabled {
   display: inline-block !important;
 }
 
-.crm-container .crm-editable-placeholder {
+.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;
-  width: 12px;
+  height: 16px;
+  width: 16px;
   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");
   opacity: 1;
@@ -4041,12 +4040,6 @@ div.m ul#civicrm-menu,
   opacity: 0.8;
 }
 
-.crm-container .crm-editable-error,
-.crm-container .crm-editable-error input {
-  background: red!important;
-  opacity: 0.8;
-}
-
 .crm-container h2.crm-editable-enabled input {
   min-height: 1.4em;
 }
@@ -4071,15 +4064,12 @@ div.m ul#civicrm-menu,
 .crm-editable-form button {
   position: absolute;
   bottom: -22px;
+  left: 0;
   text-align: center;
   height: 23px;
   width: 32px;
 }
 
-.crm-editable-form button[type=submit] {
-  left: 0;
-}
-
 .crm-editable-form button[type=cancel] {
   left: 32px;
 }
diff --git a/i/edit.png b/i/edit.png
deleted file mode 100644 (file)
index a8b69f7..0000000
Binary files a/i/edit.png and /dev/null differ
diff --git a/templates/CRM/Contact/Form/Edit/CommunicationPreferences.js.tpl b/templates/CRM/Contact/Form/Edit/CommunicationPreferences.js.tpl
new file mode 100644 (file)
index 0000000..b28187e
--- /dev/null
@@ -0,0 +1,53 @@
+{*
+ +--------------------------------------------------------------------+
+ | CiviCRM version 4.6                                                |
+ +--------------------------------------------------------------------+
+ | Copyright CiviCRM LLC (c) 2004-2014                                |
+ +--------------------------------------------------------------------+
+ | This file is a part of CiviCRM.                                    |
+ |                                                                    |
+ | CiviCRM is free software; you can copy, modify, and distribute it  |
+ | under the terms of the GNU Affero General Public License           |
+ | Version 3, 19 November 2007 and the CiviCRM Licensing Exception.   |
+ |                                                                    |
+ | CiviCRM is distributed in the hope that it will be useful, but     |
+ | WITHOUT ANY WARRANTY; without even the implied warranty of         |
+ | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.               |
+ | See the GNU Affero General Public License for more details.        |
+ |                                                                    |
+ | You should have received a copy of the GNU Affero General Public   |
+ | License and the CiviCRM Licensing Exception along                  |
+ | with this program; if not, contact CiviCRM LLC                     |
+ | at info[AT]civicrm[DOT]org. If you have questions about the        |
+ | GNU Affero General Public License or the licensing of CiviCRM,     |
+ | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
+ +--------------------------------------------------------------------+
+*}
+{literal}
+  <script type="text/javascript">
+    CRM.$(function($) {
+      var $form = $('form.{/literal}{$form.formClass}{literal}');
+      $('#postal_greeting_id, #addressee_id, #email_greeting_id', $form).change(function() {
+        var fldName = $(this).attr('id');
+        if ($(this).val() == 4) {
+          $("#greetings1, #greetings2", $form).show();
+          $("#" + fldName + "_html, #" + fldName + "_label", $form).show();
+        } else {
+          $("#" + fldName + "_html, #" + fldName + "_label", $form).hide();
+          $("#" + fldName.slice(0, -3) + "_custom", $form).val('');
+        }
+      });
+      
+      $('.replace-plain[data-id]', $form).click(function() {
+        var element = $(this).data('id');
+        $(this).hide();
+        $('#' + element, $form).show();
+        var fldName = '#' + element + '_id';
+        if ($(fldName, $form).val() == 4) {
+          $("#greetings1, #greetings2", $form).show();
+          $(fldName + "_html, " + fldName + "_label", $form).show();
+        }
+      });
+    });
+  </script>
+{/literal}
index 07ddfcfdff6688c2a86b18db3a923e12864b7413..cb9c83ecc79929b1cb26b198e94ce4eb767e37e9 100644 (file)
@@ -57,7 +57,9 @@
                 <td>
                     <span id="email_greeting" {if !empty($email_greeting_display) and $action eq 2} class="hiddenElement"{/if}>{$form.email_greeting_id.html|crmAddClass:big}</span>
                     {if !empty($email_greeting_display) and $action eq 2}
-                        <div id="email_greeting_display" class="view-data">{$email_greeting_display}&nbsp;&nbsp;<a href="#" onclick="showGreeting('email_greeting');return false;"><img src="{$config->resourceBase}i/edit.png" border="0" title="{ts}Edit{/ts}"></a></div>
+                      <div data-id="email_greeting" class="replace-plain" title="{ts}Click to edit{/ts}">
+                        {$email_greeting_display}
+                      </div>
                     {/if}
                 </td>
             {/if}
@@ -65,7 +67,9 @@
                 <td>
                     <span id="postal_greeting" {if !empty($postal_greeting_display) and $action eq 2} class="hiddenElement"{/if}>{$form.postal_greeting_id.html|crmAddClass:big}</span>
                     {if !empty($postal_greeting_display) and $action eq 2}
-                        <div id="postal_greeting_display" class="view-data">{$postal_greeting_display}&nbsp;&nbsp;<a href="#" onclick="showGreeting('postal_greeting');return false;"><img src="{$config->resourceBase}i/edit.png" border="0" title="{ts}Edit{/ts}"></a></div>
+                      <div data-id="postal_greeting" class="replace-plain" title="{ts}Click to edit{/ts}">
+                        {$postal_greeting_display}
+                      </div>
                     {/if}
                 </td>
             {/if}
@@ -73,7 +77,9 @@
                 <td>
                     <span id="addressee" {if !empty($addressee_display) and $action eq 2} class="hiddenElement"{/if}>{$form.addressee_id.html|crmAddClass:big}</span>
                     {if !empty($addressee_display) and $action eq 2}
-                        <div id="addressee_display" class="view-data">{$addressee_display}&nbsp;&nbsp;<a href="#" onclick="showGreeting('addressee');return false;"><img src="{$config->resourceBase}i/edit.png" border="0" title="{ts}Edit{/ts}"></a></div>
+                      <div data-id="addressee" class="replace-plain" title="{ts}Click to edit{/ts}">
+                        {$addressee_display}
+                      </div>
                     {/if}
                 </td>
             {/if}
     </table>
  </div><!-- /.crm-accordion-body -->
 </div><!-- /.crm-accordion-wrapper -->
-
-
-{literal}
-<script type="text/javascript">
-CRM.$(function($) {
-    var fields = new Array( 'postal_greeting', 'addressee', 'email_greeting');
-    for ( var i = 0; i < 3; i++ ) {
-        $( "#" + fields[i] + "_id").change( function( ) {
-            var fldName = $(this).attr( 'id' );
-            if ( $(this).val( ) == 4 ) {
-                $("#greetings1").show( );
-                $("#greetings2").show( );
-                $( "#" + fldName + "_html").show( );
-                $( "#" + fldName + "_label").show( );
-            } else {
-                $( "#" + fldName + "_html").hide( );
-                $( "#" + fldName + "_label").hide( );
-                $( "#" + fldName.slice(0, -3) + "_custom" ).val('');
-            }
-        });
-    }
-});
-
-function showGreeting( element ) {
-    cj("#" + element ).show( );
-    cj("#" + element + '_display' ).hide( );
-
-    // TO DO fix for custom greeting
-    var fldName = '#' + element + '_id';
-    if ( cj( fldName ).val( ) == 4 ) {
-        cj("#greetings1").show( );
-        cj("#greetings2").show( );
-        cj( fldName + "_html").show( );
-        cj( fldName + "_label").show( );
-    }
-}
-
-
-</script>
-{/literal}
+{include file="CRM/Contact/Form/Edit/CommunicationPreferences.js.tpl"}
index 629a62e00a328ce0197108a2a1acac89baff2d69..66230db102c1ecd792467af6b733f43cf898d514 100644 (file)
       <div class="crm-summary-row">
         <div class="crm-label">
           {$form.preferred_mail_format.label}
+          {help id="id-emailFormat" file="CRM/Contact/Form/Contact.hlp"}
         </div>
         <div class="crm-content">
-          {$form.preferred_mail_format.html} {help id="id-emailFormat" file="CRM/Contact/Form/Contact.hlp"}
+          {$form.preferred_mail_format.html}
         </div>
       </div>
       {/if}
           <span id="email_greeting" {if !empty($email_greeting_display)} class="hiddenElement"{/if}>
             {$form.email_greeting_id.html|crmAddClass:big}
           </span>
-          <span id="email_greeting_display" class="view-data">
-            {$email_greeting_display}&nbsp;&nbsp;<a href="#" onclick="showGreeting('email_greeting');return false;"><img src="{$config->resourceBase}i/edit.png" border="0" title="{ts}Edit{/ts}"></a>
-          </span>
+          {if !empty($email_greeting_display)}
+            <div data-id="email_greeting" class="replace-plain big" title="{ts}Click to edit{/ts}">
+              {$email_greeting_display}
+            </div>
+          {/if}
           {if !empty($form.email_greeting_custom)}
             <span id="email_greeting_id_html" class="hiddenElement">
               <br/>{$form.email_greeting_custom.html|crmAddClass:big}
           <span id="postal_greeting" {if !empty($postal_greeting_display)} class="hiddenElement"{/if}>
             {$form.postal_greeting_id.html|crmAddClass:big}
           </span>
-          <span id="postal_greeting_display" class="view-data">
-            {$postal_greeting_display}&nbsp;&nbsp;<a href="#" onclick="showGreeting('postal_greeting');return false;"><img src="{$config->resourceBase}i/edit.png" border="0" title="{ts}Edit{/ts}"></a>
-          </span>
+          {if !empty($postal_greeting_display)}
+            <div data-id="postal_greeting" class="replace-plain big" title="{ts}Click to edit{/ts}">
+              {$postal_greeting_display}
+            </div>
+          {/if}
           {if !empty($form.postal_greeting_custom)}
             <span id="postal_greeting_id_html" class="hiddenElement">
               <br/>{$form.postal_greeting_custom.html|crmAddClass:big}
           <span id="addressee" {if !empty($addressee_display)} class="hiddenElement"{/if}>
             {$form.addressee_id.html|crmAddClass:big}
           </span>
-          <span id="addressee_display" class="view-data">
-            {$addressee_display}&nbsp;&nbsp;<a href="#" onclick="showGreeting('addressee');return false;"><img src="{$config->resourceBase}i/edit.png" border="0" title="{ts}Edit{/ts}"></a>
-          </span>
+          {if !empty($addressee_display)}
+            <div data-id="addressee" class="replace-plain big" title="{ts}Click to edit{/ts}">
+              {$addressee_display}
+            </div>
+          {/if}
           {if !empty($form.addressee_custom)}
             <span id="addressee_id_html" class="hiddenElement">
               <br/>{$form.addressee_custom.html|crmAddClass:big}
 
     </div>
  </div>
-
-{literal}
-<script type="text/javascript">
-CRM.$(function($) {
-    var fields = ['postal_greeting', 'addressee', 'email_greeting'];
-    for ( var i = 0; i < 3; i++ ) {
-      $( "#" + fields[i] + "_id").change( function( ) {
-        var fldName = $(this).attr( 'id' );
-        if ( $(this).val( ) == 4 ) {
-          $("#greetings1").show( );
-          $("#greetings2").show( );
-          $( "#" + fldName + "_html").show( );
-          $( "#" + fldName + "_label").show( );
-        } else {
-          $( "#" + fldName + "_html").hide( );
-          $( "#" + fldName + "_label").hide( );
-          $( "#" + fldName.slice(0, -3) + "_custom" ).val('');
-        }
-      });
-    }
-});
-
-function showGreeting( element ) {
-  cj("#" + element ).show( );
-  cj("#" + element + '_display' ).hide( );
-
-  // TO DO fix for custom greeting
-  var fldName = '#' + element + '_id';
-  if ( cj( fldName ).val( ) == 4 ) {
-    cj("#greetings1").show( );
-    cj("#greetings2").show( );
-    cj( fldName + "_html").show( );
-    cj( fldName + "_label").show( );
-  }
-}
-
-</script>
-{/literal}
+{include file="CRM/Contact/Form/Edit/CommunicationPreferences.js.tpl"}
\ No newline at end of file