Add command form helper for buttons with icons or labels

refs #4869

modules/monitoring/application/views/helpers/CommandForm.php

@@ -4,7 +4,6 @@
 // {{{ICINGA_LICENSE_HEADER}}}
 // {{{ICINGA_LICENSE_HEADER}}}
 
-use Icinga\Application\Icinga;
 use Icinga\Web\Form;
 
 /**
@@ -16,12 +15,11 @@ class Zend_View_Helper_CommandForm extends Zend_View_Helper_Abstract
      * Creates a simple form without additional input fields
      *
      * @param   string  $commandName    Name of command (icinga 2 web name)
-     * @param   string  $submitLabel    Label of submit button
      * @param   array   $arguments      Add parameter as hidden fields
      *
-     * @return  string                  Html form content
+     * @return  Form                    Form to modify
      */
-    public function simpleForm($commandName, $submitLabel, array $arguments = array())
+    private function simpleForm($commandName, array $arguments = array())
     {
         $form = new Form();
 
@@ -29,7 +27,6 @@ class Zend_View_Helper_CommandForm extends Zend_View_Helper_Abstract
         $form->setAttrib('data-icinga-component', 'app/ajaxPostSubmitForm');
 
         $form->setRequest(Zend_Controller_Front::getInstance()->getRequest());
-        $form->setSubmitLabel($submitLabel !== null ? $submitLabel : 'Submit');
         $form->setAction($this->view->href('monitoring/command/' . $commandName));
 
         foreach ($arguments as $elementName => $elementValue) {
@@ -38,7 +35,80 @@ class Zend_View_Helper_CommandForm extends Zend_View_Helper_Abstract
             $form->addElement($hiddenField);
         }
 
-        return $form->render();
+        return $form;
+    }
+
+    /**
+     * Creates an iconized submit form
+     *
+     * @param string    $iconCls        Css class of icon
+     * @param string    $submitTitle   Title of submit button
+     * @param string    $cls           Css class names
+     * @param string    $commandName   Name of command
+     * @param array     $arguments     Additional arguments
+     *
+     * @return Form
+     */
+    public function iconSubmitForm($iconCls, $submitTitle, $cls, $commandName, array $arguments = array())
+    {
+        $form = $this->labelSubmitForm('', $submitTitle, $cls, $commandName, $arguments);
+        $submit = $form->getElement('btn_submit');
+        $submit->setLabel(sprintf('<i class="%s"></i>', $iconCls));
+
+        return $form;
+    }
+
+    /**
+     * Renders a simple for with a labeled submit button
+     *
+     * @param string $submitLabel   Label of submit button
+     * @param string $submitTitle   Title of submit button
+     * @param string $cls           Css class names
+     * @param string $commandName   Name of command
+     * @param array  $arguments     Additional arguments
+     *
+     * @return Form
+     */
+    public function labelSubmitForm($submitLabel, $submitTitle, $cls, $commandName, array $arguments = array())
+    {
+        $form = $this->simpleForm($commandName, $arguments);
+
+        $button = new Zend_Form_Element_Button(
+            array(
+                'name'      => 'btn_submit',
+                'class'     => $this->mergeClass('button btn-common', $cls),
+                'escape'    => false,
+                'value'     => '1',
+                'type'      => 'submit',
+                'label'     => $submitLabel,
+                'title'     => $submitTitle
+            )
+        );
+
+        $button->setDecorators(array('ViewHelper'));
+
+        $form->addElement($button);
+
+        return $form;
+    }
+
+    /**
+     * Merges css class names together
+     *
+     * @param   string $base
+     * @param   string $additional
+     * @param   string ...
+     *
+     * @return  string
+     */
+    private function mergeClass($base, $additional)
+    {
+        $args = func_get_args();
+        $base = explode(' ', array_shift($args));
+        while (($additional = array_shift($args))) {
+            $base = array_merge($base, explode(' ', $additional));
+        }
+        return implode(' ', $base);
     }
 }
 

modules/monitoring/application/views/scripts/list/comments.phtml

@@ -1,5 +1,7 @@
 <?php
     $dateHelper = $this->getHelper('DateFormat');
+
+    /** @var Zend_View_Helper_CommandForm $commandHelper */
     $commandHelper = $this->getHelper('CommandForm');
 ?>
 <?= $this->tabs->render($this); ?>
@@ -114,10 +116,12 @@ $viewHelper = $this->getHelper('MonitoringState');
               $data['service'] = $comment->service_name;
             }
 
-            echo $commandHelper->simpleForm(
+            echo $commandHelper->iconSubmitForm(
-              'removecomment',
+                'icinga-icon-remove',
-              'Remove Comment',
+                'Remove comment',
-              $data
+                'btn-small',
+                'removecomment',
+                $data
             );
           ?>
         </td>

public/js/icinga/components/ajaxPostSubmitForm.js

@@ -70,13 +70,13 @@ define(['components/app/container', 'jquery'], function(Container, $) {
             type: 'POST',
             data: data,
             beforeSend: function() {
-                submit.prop('disabled', true);
+                submit.attr('disabled', true);
             }
         }).done(function() {
             var container = getOwnerContainer(form);
             container.replaceDomFromUrl(container.getContainerHref());
         }).error(function() {
-            submit.removeProp('disabled');
+            submit.removeAttr('disabled');
         });
     };
 

public/js/icinga/components/mainDetailGrid.js

@@ -125,13 +125,17 @@ function(Container, $, logger, URI) {
                 var targetEl = ev.target || ev.toElement || ev.relatedTarget,
                     a = $(targetEl).closest('a');
 
+                var nodeNames = [];
+                nodeNames.push($(targetEl).prop('nodeName').toLowerCase());
+                nodeNames.push($(targetEl).parent().prop('nodeName').toLowerCase());
+
                 if (a.length) {
                     // test if the URL is on the current server, if not open it directly
                     if (true || Container.isExternalLink(a.attr('href'))) {
                         return true;
                     }
-                } else if (targetEl.nodeName.toLowerCase() === 'input') {
+                } else if ($.inArray('input', nodeNames) > -1 || $.inArray('button', nodeNames) > -1) {
-                    var type = $(targetEl).attr('type');
+                    var type = $(targetEl).attr('type') || $(targetEl).parent().attr('type');
                     if (type === 'submit') {
                         return true;
                     }