Ticket #3399 - Forms.

modules/boonex/artificer/data/template/system/css/forms.css

@@ -27,6 +27,75 @@ import url(../../../../../../../template/css/forms.css);
     position: relative;
 }
 
+
+/*-- Section Toggler ---*/
+.bx-form-section-wrapper {
+    position: relative;
+}
+
+.bx-form-section {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
+.bx-form-section-header legend {
+    position: relative;
+
+    line-height: 1.125rem;
+    text-transform: uppercase;
+}
+
+.bx-form-section-header legend u {
+    cursor: pointer;
+}
+
+.bx-form-section-header span {
+    white-space: nowrap;
+    text-transform: none;
+    font-size: 0.75rem;
+}
+
+.bx-form-section-hidden .bx-form-section-content {
+    display:none;
+}
+
+.bx-form-collapsable .bx-form-section-toggler {
+    position:absolute;
+    left: -2px;
+    top: 2px;
+
+    width:20px;
+    height:20px;
+
+    text-decoration:none;
+
+    -moz-transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -ms-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+}
+
+.bx-form-collapsed .bx-form-section-toggler {
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+}
+
+.bx-form-section-toggler .sys-icon {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 0 0 5px;
+    font-size:0.875rem;
+    line-height:1.2rem;
+}
+
 /*--- One Line fields ---*/
 .bx-form-element-wrapper-oneline .bx-form-element {
     display: -webkit-flex;
@@ -40,6 +109,50 @@ import url(../../../../../../../template/css/forms.css);
 }
 
 
+/*-- Form field: Password --*/
+.bx-form-input-wrapper-password {
+    padding: 0 2.125rem 0 0;
+}
+.bx-form-input-wrapper-password > a {
+    position: absolute;
+    z-index: 1000;
+    
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+
+    top: 0;
+    right: 0;    
+    height: 100%;
+
+    margin: 0 0.5rem;
+}
+.bx-form-input-password {
+    position: relative;
+
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    width: 100%;
+    height: 100%;
+
+    margin: 0;
+    padding: 0.2rem 0.4rem;
+
+    border: 0;
+    background-color: transparent;
+}
+.bx-form-input-password:focus {
+    border-color: transparent;
+    outline: none;
+    box-shadow: none;
+}
+
 /*-- Form field: Switcher --*/
 .bx-switcher-cont {
     position: relative;

modules/boonex/artificer/data/template/system/scripts/BxTemplFormView.php

@@ -14,12 +14,35 @@ class BxTemplFormView extends BxBaseFormView
         parent::__construct($aInfo, $oTemplate);
     }
 
+    protected function _genWrapperInputAttrs(&$aInput)
+    {
+        $aAttrs = parent::_genWrapperInputAttrs($aInput);
+
+        if(in_array($aInput['type'], ['password']))
+            $this->_genWrapperInputAttrsPassword($aAttrs);
+
+        return $aAttrs;
+    }
+
+    protected function _genWrapperInputAttrsPassword(&$aAttrs)
+    {
+        if(!isset($aAttrs['class']))
+            $aAttrs['class'] = '';
+
+        $aAttrs['class'] .= 'relative block w-full py-1.5 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 rounded leading-5 bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm';
+
+        return $aAttrs;
+    }
+
     protected function _genInputStandardAttrs(&$aInput)
     {
         $aAttrs = parent::_genInputStandardAttrs($aInput);
-        if(in_array($aInput['type'], ['hidden']))
+        if(in_array($aInput['type'], ['hidden', 'password']))
             return $aAttrs;
 
+        if(in_array($aInput['type'], ['checkbox', 'radio']))
+            return $this->_updateInputAttrsCheckbox($aAttrs);
+
         return $this->_updateInputAttrs($aAttrs);
     }
 
@@ -78,6 +101,16 @@ class BxTemplFormView extends BxBaseFormView
 
         return $aAttrs;
     }
+
+    protected function _updateInputAttrsCheckbox(&$aAttrs)
+    {
+        if(!isset($aAttrs['class']))
+            $aAttrs['class'] = '';
+
+        $aAttrs['class'] .= ' block px-3 py-1.5 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 rounded leading-5 bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm';
+
+        return $aAttrs;
+    }
 }
 
 /** @} */

modules/boonex/lucid/data/template/system/scripts/BxTemplFormView.php

@@ -13,19 +13,6 @@ class BxTemplFormView extends BxBaseFormView
     {
         parent::__construct($aInfo, $oTemplate);
     }
-
-    //TODO: genWrapperInput and isHtmlEditor methods can be removed after RC9 is released. 
-    function genWrapperInput($aInput, $sContent)
-    {
-    	$sAttr = isset($aInput['attrs_wrapper']) && is_array($aInput['attrs_wrapper']) ? bx_convert_array2attrs($aInput['attrs_wrapper']) : '';
-    
-    	return "<div class=\"bx-form-input-wrapper bx-form-input-wrapper-{$aInput['type']}" . ((isset($aInput['html']) && $aInput['html'] && $this->isHtmlEditor($aInput['html'], $aInput)) ? ' bx-form-input-wrapper-html' : '') . "\" $sAttr>$sContent</div>";
-    }
-
-    function isHtmlEditor($iViewMode, &$aInput)
-    {
-    	return BxDolEditor::getObjectInstance(false, $this->oTemplate) !== false;
-    }
 }
 
 /** @} */

studio/template/form_input_wrapper.html

@@ -1 +1 @@
-<div class="bx-form-input-wrapper bx-form-input-wrapper-__type____class__" __attrs__>__content__</div>
+<div __attrs__>__content__</div>

template/form_input_wrapper.html

@@ -1 +1 @@
-<div class="bx-form-input-wrapper bx-form-input-wrapper-__type____class__" __attrs__>__content__</div>
+<div __attrs__>__content__</div>

template/scripts/BxBaseFormView.php

@@ -879,29 +879,23 @@ BLAH;
 
     function genWrapperInput($aInput, $sContent)
     {
-        $sClass = "";
+        $aAttrs = $this->_genWrapperInputAttrs($aInput);
+
+        $sClass = "bx-form-input-wrapper bx-form-input-wrapper-{$aInput['type']}";
         if(isset($aInput['html']) && $aInput['html'] && $this->isHtmlEditor($aInput['html'], $aInput))
             $sClass .= ' bx-form-input-wrapper-html';
 
-        $sAttrs = "";
-        if(isset($aInput['attrs_wrapper']) && is_array($aInput['attrs_wrapper'])) {
-            if(!empty($aInput['attrs_wrapper']['class'])) {
-                $sClass .= ' ' . trim($aInput['attrs_wrapper']['class']);
-
-                unset($aInput['attrs_wrapper']['class']);
-            }
-
-            $sAttrs = bx_convert_array2attrs($aInput['attrs_wrapper']);
-        }
-
         return $this->oTemplate->parseHtmlByName('form_input_wrapper.html', array(
-            'type' => $aInput['type'],
-            'class' => $sClass,
-            'attrs' => $sAttrs,
+            'attrs' =>  bx_convert_array2attrs($aAttrs, $sClass),
             'content' => $sContent
         ));
     }
 
+    protected function _genWrapperInputAttrs(&$aInput)
+    {
+        return isset($aInput['attrs_wrapper']) && is_array($aInput['attrs_wrapper']) ? $aInput['attrs_wrapper'] : [];
+    }
+
     /**
      * Generate custom row
      *

template/scripts/BxBaseGrid.php

@@ -609,7 +609,7 @@ class BxBaseGrid extends BxDolGrid
 
     protected function _getFilterControls ()
     {
-        $oForm = new BxTemplStudioFormView(array());
+        $oForm = new BxTemplFormView(array());
 
         $aInput = array(
             'type' => 'text',