changed operator on search screen to be hidden and editable after a click

templates/CRM/Dataprocessor/Form/Filter/GenericFilter.tpl

+{crmScope extensionKey='dataprocessor'}
 {assign var=fieldOp     value=$filter.alias|cat:"_op"}
 {assign var=filterVal   value=$filter.alias|cat:"_value"}
 {assign var=filterMin   value=$filter.alias|cat:"_min"}
@@ -11,10 +12,15 @@
 {elseif $form.$fieldOp.html}
     <tr>
         <td class="label">{$filter.title}</td>
-        <td>{$form.$fieldOp.html}</td>
+        <td>
+          <span class="filter-processor-element {$filter.alias}">{$form.$fieldOp.html}</span>
+          <span class="filter-processor-show-close {$filter.alias}">&nbsp;</span>
+        </td>
         <td>
             <span id="{$filterVal}_cell">{$form.$filterVal.label}&nbsp;{$form.$filterVal.html}</span>
             <span id="{$filterMin}_max_cell">{$form.$filterMin.label}&nbsp;{$form.$filterMin.html}&nbsp;&nbsp;{$form.$filterMax.label}&nbsp;{$form.$filterMax.html}</span>
         </td>
     </tr>
 {/if}
+
+{/crmScope}

templates/CRM/Dataprocessor/Form/Output/UIOutput/CriteriaForm.tpl

@@ -14,7 +14,7 @@
                         <th>{ts}Value{/ts}</th>
                     </tr>
                     {foreach from=$filters key=filterName item=filter}
-                        {include file=$filter.template filterName=filter.alias filter=$filter.filter}
+                        {include file=$filter.template filterName=$filter.alias filter=$filter.filter}
                     {/foreach}
                 </table>
                 <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="botton"}</div>
@@ -33,6 +33,7 @@
             {literal}var val = document.getElementById("{/literal}{$fieldOp}{literal}").value;{/literal}
     {/if}
     {literal}showHideMaxMinVal( "{/literal}{$filterName}{literal}", val );{/literal}
+    {literal}initializeOperator( "{/literal}{$filterName}{literal}");{/literal}
     {/foreach}
 
     {literal}
@@ -52,6 +53,19 @@
       }
     }
 
+    function initializeOperator(filterName) {
+      var currentOp = cj('.filter-processor-element.'+filterName+' select option:selected');
+      cj('.filter-processor-element.'+filterName).addClass('hiddenElement');
+      cj('.filter-processor-show-close.'+filterName).html(currentOp.html() + '&nbsp;<i class="crm-i fa-pencil">&nbsp;</i>');
+      cj('.filter-processor-show-close.'+filterName).attr('title', '{/literal}{ts}Change{/ts}{literal}');
+      cj('.filter-processor-show-close.'+filterName).addClass('crm-editable-enabled');
+      cj('.filter-processor-show-close.'+filterName).click(function () {
+        cj('.filter-processor-element.'+filterName).removeClass('hiddenElement');
+        cj('.filter-processor-show-close.'+filterName).removeClass('crm-editable-enabled');
+        cj('.filter-processor-show-close.'+filterName).addClass('hiddenElement');
+      });
+    }
+
 </script>
 {/literal}
 {/crmScope}