Просмотр исходного кода

Ticket #3629 - Artificer (Part 2): Forms.

AntonLV 4 лет назад
Родитель
Сommit
a95dd643bd

+ 2 - 2
modules/boonex/artificer/data/template/mod_text/form_ghost_template.html

@@ -1,4 +1,4 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
     <input type="hidden" name="__name__[]" value="{file_id}" />
     <div class="bx-base-general-icon-wrapper mr-2">
         <img src="{file_icon}" class="bx-base-general-icon rounded bx-base-general-icon-{file_id}" />
@@ -6,7 +6,7 @@
     <span class="bx-base-general-uploader-ghost">
         <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
         <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm 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 text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
+            <input class="bx-def-font-inputs bx-form-input-text" type="text" value="{file_url}" readonly="1" />
         </div>
         <div class="mt-2">
             <span id="bx-base-general-intert-to-post-link-{file_id}" class="inline-block" style="display:none;">

+ 16 - 0
modules/boonex/artificer/data/template/mod_text/form_ghost_template_cover.html

@@ -0,0 +1,16 @@
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
+    <input type="hidden" name="__name__[]" value="{file_id}" />
+    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
+    <div class="bx-base-general-icon-wrapper mr-2">
+        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
+    </div>
+    <span class="bx-base-general-uploader-ghost">
+        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+    </span>
+</div>
+<script>
+    // disable images drag&drop, because resized images address can be reset after some time
+    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
+        return false; 
+    });
+</script>

+ 23 - 0
modules/boonex/artificer/data/template/mod_text/form_ghost_template_file.html

@@ -0,0 +1,23 @@
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
+    <input type="hidden" name="__name__[]" value="{file_id}" />
+    <div class="bx-base-general-icon-wrapper mr-2">
+        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
+    </div>
+    <span class="bx-base-general-uploader-ghost">
+        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
+        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
+            <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" />
+        </div>
+        <div class="mt-2">
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        </div>
+    </span>
+</div>
+<script>
+    $('#bx-base-general-intert-to-post-link-{file_id}').show();
+
+    // disable images drag&drop, because resized images address can be reset after some time
+    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
+        return false; 
+    });
+</script>

+ 26 - 0
modules/boonex/artificer/data/template/mod_text/form_ghost_template_sound.html

@@ -0,0 +1,26 @@
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
+    <input type="hidden" name="__name__[]" value="{file_id}" />
+    <div class="bx-base-general-icon-wrapper mr-2">
+        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
+    </div>
+    <span class="bx-base-general-uploader-ghost">
+        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
+        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
+            <input class="bx-def-font-inputs bx-form-input-text" type="text" value="{file_url}" readonly="1" />
+        </div>
+        <div class="mt-2">
+            <span id="bx-base-general-insert-to-post-link-{file_id}" style="display:none;">
+                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
+            </span>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        </div>
+    </span>
+</div>
+<script>
+    $('#bx-base-general-insert-to-post-link-{file_id}').show();
+
+    // disable images drag&drop, because resized images address can be reset after some time
+    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
+        return false; 
+    });
+</script>

+ 26 - 0
modules/boonex/artificer/data/template/mod_text/form_ghost_template_video.html

@@ -0,0 +1,26 @@
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
+    <input type="hidden" name="__name__[]" value="{file_id}" />
+    <div class="bx-base-general-icon-wrapper mr-2">
+        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
+    </div>
+    <span class="bx-base-general-uploader-ghost">
+        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
+        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
+            <input class="bx-def-font-inputs bx-form-input-text" type="text" value="{file_url}" readonly="1" />
+        </div>
+        <div class="mt-2">
+            <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
+                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
+            </span>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        </div>
+    </span>
+</div>
+<script>
+    $('#bx-base-general-intert-to-post-link-{file_id}').show();
+
+    // disable images drag&drop, because resized images address can be reset after some time
+    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
+        return false; 
+    });
+</script>

+ 18 - 18
modules/boonex/artificer/data/template/system/css/forms.css

@@ -110,10 +110,7 @@ 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 {
+.bx-artificer .bx-form-input-wrapper-password > a {
     position: absolute;
     z-index: 1000;
     
@@ -130,7 +127,7 @@ import url(../../../../../../../template/css/forms.css);
 
     margin: 0 0.5rem;
 }
-.bx-form-input-password {
+.bx-artificer .bx-form-input-password {
     position: relative;
 
     -moz-box-sizing: border-box;
@@ -142,12 +139,12 @@ import url(../../../../../../../template/css/forms.css);
     height: 100%;
 
     margin: 0;
-    padding: 0.5rem 2.125rem 0.5rem 0.75rem;
+    padding: 0.5rem 0;
 
     border: 0;
     background-color: transparent;
 }
-.bx-form-input-password:focus {
+.bx-artificer .bx-form-input-password:focus {
     border-color: transparent;
     outline: none;
     box-shadow: none;
@@ -190,6 +187,14 @@ import url(../../../../../../../template/css/forms.css);
 }
 
 
+/*-- Form field: Checkbox/Radio Set --*/
+.bx-form-input-wrapper-checkbox_set label,
+.bx-artificer .bx-form-input-wrapper-radio_set label {
+    margin-left: 0.5rem;
+    vertical-align: text-bottom;
+}
+
+
 /*--- Form field: File ---*/
 .bx-form-input-wrapper-file .bx-btn {
     display: inline-block;
@@ -298,18 +303,18 @@ import url(../../../../../../../template/css/forms.css);
     display: none;
 }
 .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) input {
-    border:0;
-    margin:0;
-    padding:0 0 0 5px;
-    width:auto;
-    float:left;
+    float: left;
+    width: auto;
+    margin: 0;
+    padding: 0 0 0 0.5rem;
+    border: 0;
     box-shadow: none;
+    line-height: 2.5rem;
 }
 .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) .bx-base-pofile-unit-wo-info {
     display: inline-block;
     vertical-align: middle;
 
-    margin-right: 8px;
     margin-right: 0.5rem;
 }
 .bx-form-value .bx-form-input-labels > a {
@@ -336,8 +341,3 @@ import url(../../../../../../../template/css/forms.css);
 .bx-form-input-wrapper-html .second-toolbar{
     border-bottom:none !important;
 }
-/* wrapper set */
-.bx-form-input-wrapper-set label{
-    margin-left: 0.5rem;
-    vertical-align: text-bottom;
-}

+ 2 - 101
modules/boonex/artificer/data/template/system/scripts/BxTemplFormView.php

@@ -9,111 +9,12 @@
 
 class BxTemplFormView extends BxBaseFormView
 {
-    function __construct($aInfo, $oTemplate = false)
+    public function __construct($aInfo, $oTemplate = false)
     {
         parent::__construct($aInfo, $oTemplate);
     }
 
-    protected function _genWrapperInputAttrs(&$aInput)
-    {
-        $aAttrs = parent::_genWrapperInputAttrs($aInput);
-
-        if(in_array($aInput['type'], ['password']))
-            $this->_genWrapperInputAttrsPassword($aAttrs);
-        
-        if(in_array($aInput['type'], ['checkbox_set', 'radio_set']))
-            $this->_genWrapperInputAttrsSet($aAttrs);
-
-        return $aAttrs;
-    }
-
-    protected function _genWrapperInputAttrsPassword(&$aAttrs)
-    {
-        if(!isset($aAttrs['class']))
-            $aAttrs['class'] = '';
-
-        $aAttrs['class'] .= 'relative block w-full py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm 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 text-gray-700 dark:text-gray-300';
-
-        return $aAttrs;
-    }
-    
-    protected function _genWrapperInputAttrsSet(&$aAttrs)
-    {
-        if(!isset($aAttrs['class']))
-            $aAttrs['class'] = '';
-
-        $aAttrs['class'] .= 'bx-form-input-wrapper-set relative block w-full py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400  dark:focus:text-gray-100 text-sm text-gray-700 dark:text-gray-300';
-
-        return $aAttrs;
-    }
-
-    protected function _genInputStandardAttrs(&$aInput)
-    {
-        $aAttrs = parent::_genInputStandardAttrs($aInput);
-        if(in_array($aInput['type'], ['hidden', 'password']))
-            return $aAttrs;
-
-        if(in_array($aInput['type'], ['checkbox', 'radio']))
-            return $this->_updateInputAttrsCheckbox($aAttrs);
-
-        return $this->_updateInputAttrs($aAttrs);
-    }
-
-    protected function _genInputSelectAttrs(&$aInput, $isMultiple)
-    {
-        $aAttrs = parent::_genInputSelectAttrs($aInput, $isMultiple);
-        return $this->_updateInputAttrs($aAttrs);
-    }
-
-    protected function _genInputTextareaAttrs(&$aInput)
-    {
-        $aAttrs = parent::_genInputTextareaAttrs($aInput);
-        return $this->_updateInputAttrs($aAttrs);
-    }
-
-    protected function _genCustomInputUsernamesSuggestionsAttrs (&$aInput, $bDisabled = false)
-    {
-        $aAttrs = parent::_genCustomInputUsernamesSuggestionsAttrs($aInput, $bDisabled);
-
-        $aAttrs = $this->_updateInputAttrs($aAttrs);
-        $aAttrs['class'] .= ' flex flex-wrap items-stretch';
-
-        return $aAttrs;
-    }
-
-    protected function _genCustomInputUsernamesSuggestionsTextAttrs (&$aInput, $bDisabled = false)
-    {
-        $aAttrs = parent::_genCustomInputUsernamesSuggestionsTextAttrs($aInput, $bDisabled);
-
-        if(!isset($aAttrs['class']))
-            $aAttrs['class'] = '';
-
-        $aAttrs['class'] .= ' leading-10';
-
-        return $aAttrs;
-    }
-
-    protected function _updateInputAttrs(&$aAttrs)
-    {
-        if(!isset($aAttrs['class']))
-            $aAttrs['class'] = '';
-
-        $aAttrs['class'] .= ' block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm 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 text-gray-700 dark:text-gray-300 appearance-none';
- 
-        return $aAttrs;
-    }
-
-    protected function _updateInputAttrsCheckbox(&$aAttrs)
-    {
-        if(!isset($aAttrs['class']))
-            $aAttrs['class'] = '';
-
-        $aAttrs['class'] .= ' block py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm 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 text-gray-700 dark:text-gray-300';
-
-        return $aAttrs;
-    }
-
-    function genInputSwitcher(&$aInput)
+    public function genInputSwitcher(&$aInput)
     {
         $aCheckbox = array_merge($aInput, ['type' => 'checkbox']);
         return $this->oTemplate->parseHtmlByName('form_field_switcher.html', [

+ 39 - 0
plugins_public/tailwind/css/tailwind.css

@@ -432,6 +432,41 @@
         @apply text-red-400;
     }
 
+    /* Common elements: Forms: Text Input */
+    .bx-artificer .bx-form-input-slider,
+    .bx-artificer .bx-form-input-doublerange,
+    .bx-artificer .bx-form-input-select_multiple,
+    .bx-artificer .bx-form-input-select,
+    .bx-artificer .bx-form-input-number,
+    .bx-artificer .bx-form-input-time,
+    .bx-artificer .bx-form-input-datepicker,
+    .bx-artificer .bx-form-input-datetime,
+    .bx-artificer .bx-form-input-textarea,
+    .bx-artificer .bx-form-input-text,
+    .bx-artificer .bx-form-input-price,
+    .bx-artificer .bx-form-input-wrapper-price span {
+        @apply block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 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 text-gray-700 dark:text-gray-300 rounded-md shadow-sm appearance-none;
+    }
+
+    /* Common elements: Forms: Password Input */
+    .bx-artificer .bx-form-input-wrapper-password {
+        @apply relative block w-full pl-3 pr-8 border border-gray-300 dark:border-gray-700 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 text-gray-700 dark:text-gray-300 rounded-md shadow-sm;
+    }
+
+    /* Common elements: Forms: Checkbox/Radio Set Input */
+    .bx-artificer .bx-form-input-wrapper-checkbox_set,
+    .bx-artificer .bx-form-input-wrapper-radio_set {
+        @apply relative block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 dark:focus:text-gray-100 text-sm text-gray-700 dark:text-gray-300 rounded-md shadow-sm;
+    }
+    
+    
+    /* Common elements: Forms: Checkbox Input */
+    .bx-artificer .bx-form-input-checkbox,
+    .bx-artificer .bx-form-input-radio {
+        @apply block py-2 px-3 border border-gray-300 dark:border-gray-700 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 text-gray-700 dark:text-gray-300 rounded-md shadow-sm;
+    }
+
+    /* Common elements: Forms: Switcher Input */
     .bx-artificer .bx-switcher-cont.on button {
         @apply bg-white dark:bg-gray-800;
     }
@@ -445,6 +480,10 @@
         @apply bg-white dark:bg-gray-500 translate-x-0;
     }
 
+    /* Common elements: Forms: Autosuggestion Input */
+    .bx-artificer .bx-form-input-text.bx-form-input-autotoken {
+        @apply flex flex-wrap items-stretch w-full py-2 px-3 border border-gray-300 dark:border-gray-700 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 text-gray-700 dark:text-gray-300 rounded-md shadow-sm appearance-none;
+    }
     .bx-artificer .bx-form-input-autotoken b.val {
         @apply bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600;
     }

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
plugins_public/tailwind/css/tailwind.min.css


+ 3 - 0
plugins_public/tailwind/js/tailwind.config.js

@@ -48,6 +48,9 @@ module.exports = {
     'bx-def-color-bg-box-active', 
 
     'bx-form-required', 'bx-form-warn', 'bx-switcher-cont', 
+    '.bx-form-input-wrapper-checkbox_set', 'bx-form-input-wrapper-radio_set',
+    'bx-form-input-slider', 'bx-form-input-doublerange', 'bx-form-input-select_multiple', 'bx-form-input-select', 'bx-form-input-radio_set', 'bx-form-input-checkbox_set', 'bx-form-input-number', 'bx-form-input-time', 'bx-form-input-datepicker', 'bx-form-input-datetime', 'bx-form-input-textarea', 'bx-form-input-text', 'bx-form-input-price', 'bx-form-input-checkbox', 'bx-form-input-radio', 
+
     'bx-popup-full-screen', 'bx-popup-fog',
     'bx-informer-msg-info', 'bx-informer-msg-alert', 'bx-informer-msg-error',
 

Некоторые файлы не были показаны из-за большого количества измененных файлов