Browse Source

add input custom

Alex Aragón 6 years ago
parent
commit
33c5324943

+ 50 - 6
app/Resources/public/css/base.css

@@ -2836,16 +2836,60 @@ form .formw .freeze {
     margin: auto;
     text-align: center;
 }
-/*.email-overflow:hover {
-    width: auto;
-    white-space: initial;
-    overflow:visible;
-    cursor: pointer;
-}*/
+
 .show_element {
     display: block !important;
 }
+/*** ***/
+
+.input-file-container {
+    position: relative;
+    width: 225px;
+}
+.js .input-file-trigger {
+    display: block;
+    padding: 14px 45px;
+    background: #39D2B4;
+    color: #fff;
+    font-size: 1em;
+    transition: all .4s;
+    cursor: pointer;
+}
+.js .input-file {
+    position: absolute;
+    top: 0; left: 0;
+    width: 225px;
+    opacity: 0;
+    padding: 14px 0;
+    cursor: pointer;
+}
+.js .input-file:hover + .input-file-trigger,
+.js .input-file:focus + .input-file-trigger,
+.js .input-file-trigger:hover,
+.js .input-file-trigger:focus {
+    background: #34495E;
+    color: #39D2B4;
+}
+
+.file-return {
+    margin: 0;
+}
+.file-return:not(:empty) {
+    margin: 1em 0;
+}
+.js .file-return {
+    font-style: italic;
+    font-size: .9em;
+    font-weight: bold;
+}
+.js .file-return:not(:empty):before {
+    content: "Selected file: ";
+    font-style: normal;
+    font-weight: normal;
+}
+
 
+/*** ***/
 .tag {
     background-color: #D3E6EF;
     border-radius: 3px 3px 3px 3px;

+ 1 - 1
main/inc/lib/formvalidator/FormValidator.class.php

@@ -133,7 +133,7 @@ EOT;
     public function getDefaultElementTemplate()
     {
         return '
-            <div class="form-group {error_class}">
+            <div  class="form-group {error_class}">
                 <label {label-for} class="col-sm-2 control-label {extra_label_class}" >
                     <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                     {label}

+ 90 - 1
main/inc/lib/pear/HTML/QuickForm/file.php

@@ -367,7 +367,96 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
         if ($this->_flagFrozen) {
             return $this->getFrozenHtml();
         } else {
-            return $js.$this->_getTabs() . '<input' . $this->_getAttrString($this->_attributes) . ' />';
+            return $js.$this->_getTabs() . '<input class="input-file" ' . $this->_getAttrString($this->_attributes) . ' />';
         }
     }
+
+    /**
+     * @param string $layout
+     *
+     * @return string
+     */
+    public function getTemplate($layout)
+    {
+        $name = $this->getName();
+        $attributes = $this->getAttributes();
+
+        switch ($layout) {
+            case FormValidator::LAYOUT_INLINE:
+                return '
+                <div class="form-group {error_class}">
+                    <label {label-for} >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+                    {element}
+                </div>';
+                break;
+            case FormValidator::LAYOUT_HORIZONTAL:
+                if($attributes['custom']){
+                    $template = '
+                        <script type="text/javascript">
+                            document.querySelector("html").classList.add(\'js\');
+                            var fileInput  = document.querySelector( ".input-file" ),  
+                                button     = document.querySelector( ".input-file-trigger" ),
+                                the_return = document.querySelector(".file-return");
+                                  
+                            button.addEventListener("keydown", function(event) {  
+                                if ( event.keyCode == 13 || event.keyCode == 32 ) {  
+                                    fileInput.focus();  
+                                }  
+                            });
+                            button.addEventListener("click", function(event) {
+                               fileInput.focus();
+                               return false;
+                            });  
+                            fileInput.addEventListener("change", function(event) {  
+                                the_return.innerHTML = this.value;  
+                            });
+                            
+                        </script>
+                        <div class="input-file-container">  
+                            {element}
+                            <label tabindex="0" {label-for} class="input-file-trigger">{label}</label>
+                        </div>
+                        <p class="file-return"></p>
+                    ';
+                } else {
+                    $template = '
+                <div  id="file_'.$name.'" class="form-group {error_class}">
+                    <label {label-for} class="col-sm-3 control-label" >
+                        <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
+                        {label}
+                    </label>
+                    <div class="col-sm-7">
+                        {icon}
+                        {element}
+                        <!-- BEGIN label_2 -->
+                            <p class="help-block">{label_2}</p>
+                        <!-- END label_2 -->
+                        <!-- BEGIN error -->
+                            <span class="help-inline help-block">{error}</span>
+                        <!-- END error -->
+                    </div>
+                    <div class="col-sm-2">
+                        <!-- BEGIN label_3 -->
+                            {label_3}
+                        <!-- END label_3 -->
+                    </div>
+                </div>';
+                }
+                return $template;
+                break;
+            case FormValidator::LAYOUT_BOX_NO_LABEL:
+                return '
+                        <label {label-for}>{label}</label>
+                        <div class="input-group">
+                            
+                            {icon}
+                            {element}
+                        </div>';
+                break;
+        }
+    }
+
 }

+ 1 - 1
main/inc/lib/social.lib.php

@@ -2399,7 +2399,7 @@ class SocialManager extends UserManager
             ]
         );
 
-        $form->addFile('picture', get_lang('UploadFile'));
+        $form->addFile('picture', get_lang('UploadFile'),['custom'=> true]);
         $form->addHidden('url_content', '');
         $form->addButtonSend(
             get_lang('Post'),