Ticket #3941 - Artificer template (part 4): Fields, Menus, etc.

modules/boonex/artificer/data/template/system/designbox_menu_popup.html

@@ -1 +0,0 @@
-<div class="bx-db-menu-popup py-2">__content__</div>  

modules/boonex/artificer/data/template/system/designbox_share_popup.html

@@ -1,15 +0,0 @@
-<div class="bx-db-share-popup">
-    <div class="bx-db-share-popup-cnt">
-         <div class="mb-4">
-             __menu__
-         </div>
-         <div class="mb-4">
-             <bx_text:_sys_txt_share_popup_url />       
-             <div 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 p-2 rounded relative flex items-center justify-between" onClick="bx_copy_to_clipboard('__url__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />">__url__<a href="javascript:" onClick="bx_copy_to_clipboard('__url__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />"><i class="sys-icon copy"></i></a></div>
-         </div>
-         <div class="mb-4">
-             <bx_text:_sys_txt_share_popup_embeded_code />        
-             <div 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 p-2 rounded relative flex items-center justify-between" onClick="bx_copy_to_clipboard('__code__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />">__code__<a href="javascript:" onClick="bx_copy_to_clipboard('__code__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />"><i class="sys-icon copy"></i></a></div> 
-         </div>
-    </div>
-</div>

modules/boonex/artificer/data/template/system/form_field_price.html

@@ -1,4 +0,0 @@
-<bx_if:show_currency>
-    <span 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">__currency__</span>
-</bx_if:show_currency>
-__input__

modules/boonex/artificer/data/template/system/form_field_privacy.html

@@ -1,5 +0,0 @@
-<div id="__html_id__" class="bx-form-input-pgc absolute flex align-center justify-center w-4 h-4 -top-6 right-0">
-    <div class="bx-form-input-pgc-current">
-        <a class="bx-form-input-pgc-current" href="javascript:void(0)" onclick="javascript:__js_object__.pgcTogglePopup(this, __id__, '__privacy_object__')"><i class="sys-icon __icon__"></i></a>
-    </div>
-</div>

modules/boonex/artificer/data/template/system/menu_buttons_hor.html

@@ -1,6 +0,0 @@
-<ul class="bx-menu-btns-hor bx-menu-object-__object__ flex flex-row">
-    <bx_repeat:menu_items><li class="bx-menu-item __name__ __class_add__ my-1 mr-4 last:mr-0"><a class="bx-btn __name__" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-        <bx_include_auto:menu_icon.html />
-        <bx_if:title><u>__title__</u></bx_if:title>
-    </a></li></bx_repeat:menu_items>
-</ul>

modules/boonex/artificer/data/template/system/menu_buttons_icon_hor.html

@@ -1,5 +0,0 @@
-<ul class="bx-menu-btns-icon-hor bx-menu-object-__object__ flex flex-row flex-wrap">
-    <bx_repeat:menu_items><li class="bx-menu-item __name__ my-1 __class_add__"><a class="bx-btn __name__ mr-4" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-        <bx_include_auto:menu_icon.html />
-    </a></li></bx_repeat:menu_items>
-</ul>

modules/boonex/artificer/data/template/system/menu_custom_hor.html

@@ -1,6 +0,0 @@
-<ul id="__html_id__" class="bx-menu-custom bx-menu-custom-hor bx-menu-hor-inline<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex justify-start items-start">
-    <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name____class__ flex">__item__</li>
-    </bx_repeat:menu_items>
-</ul>
-__js_code__

modules/boonex/artificer/data/template/system/menu_item_addon.html

@@ -1 +0,0 @@
-<span class="bx-menu-item-addon bx-def-unit-alert block px-1.5 py-0 rounded-full ring-1 ring-white dark:ring-gray-800 bg-red-400 text-xs text-white">__content__</span>

modules/boonex/artificer/data/template/system/menu_item_addon_middle.html

@@ -1 +0,0 @@
-<span class="bx-menu-item-addon bx-def-unit-alert-middle block px-1.5 py-0 rounded-full ring-1 ring-white dark:ring-gray-800 bg-red-400 text-xs text-white">__content__</span>

modules/boonex/artificer/data/template/system/menu_item_addon_small.html

@@ -1 +0,0 @@
-<span class="bx-menu-item-addon bx-def-unit-alert-small block px-1.5 py-0 rounded-full ring-1 ring-white dark:ring-gray-800 bg-red-400 text-xs text-white">__content__</span>

modules/boonex/artificer/data/template/system/menu_item_more_popup.html

@@ -1,3 +0,0 @@
-<div class="bx-menu-item-more-popup w-full md:w-56 box-border">
-    <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-submenu-more-auto bx-clearfix">__content__</ul>
-</div>

modules/boonex/artificer/data/template/system/menu_loading.html

@@ -1,9 +0,0 @@
-<div id="bx-sliding-menu-loading" class="bx-sliding-menu bx-sliding-menu-fullheight bx-def-z-index-nav border-l border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 shadow-sm rounded-bl" style="display:none; opacity:1;">
-    <div class="bx-def-centered">
-        <a class="bx-sliding-menu-close mt-2 mr-4 text-3xl" href="javascript:void(0);" onclick="bx_menu_slide_inline($(this).parents('.bx-sliding-menu:visible:first'))"><i class="sys-icon times"></i></a>
-        <div class="bx-sliding-menu-cnt p-4">
-            <div class="bx-sliding-menu-content"></div>
-            <div class="bx-sliding-menu-loading"></div>
-        </div>
-    </div>
-</div>

modules/boonex/artificer/data/template/system/messageBox.html

@@ -1,8 +0,0 @@
-<div class="bx-msg-box-container my-4 px-4 text-center" id="__id__">
-    <div class="bx-msg-box inline-block mx-auto p-4 bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 uppercase rounded-md">__msgText__</div>
-    <bx_if:timer>
-        <script language="javascript">
-            setTimeout("$('#__id__').bx_anim('hide', 'fade', 'slow', function(){$(this).remove();})", __time__);
-        </script>
-    </bx_if:timer>
-</div>

modules/boonex/artificer/data/template/system/profile_membership_stats.html

@@ -1,14 +0,0 @@
-<div class="bx-profile-membership-stats">
-    <div class="bx-pms-membership">__membership__</div>
-    <div class="bx-pms-stats bx-def-box bx-def-box-round-corners bx-def-color-bg-box mt-4 p-4">
-        <bx_repeat:stat_items>
-            <div class="bx-pms-stat-item mt-4 first:mt-0">
-                <div class="bx-pms-si-title">__title__</div>
-                <div class="bx-pms-si-graph mt-1">
-                    <div class="bx-pms-sig-bar rounded-md" style="width:__width__">&nbsp;</div>
-                    <div class="bx-pms-sig-text pl-4 text-sm text-gray-500 dark:text-gray-400">__value__ (__percent__)</div>
-                </div>
-            </div>
-        </bx_repeat:stat_items>
-    </div>
-</div>

modules/boonex/artificer/data/template/system/uploader_form_crop.html

@@ -1,38 +0,0 @@
-<div id="__form_container_id__" class="bx-uploader-form-cont bx-popup-width">
-    __file_field__
-    <div class="bx-uploader-loading"></div>
-    <div class="bx-croppie-msg pb-2"></div>
-    <div class="bx-croppie-err pb-2" id="__errors_container_id__"></div>
-    <div class="bx-croppie-element my-4"></div>
-    <div class="flex pt-4 bx-clearfix">
-        <button class="bx-crop-action bx-crop-upload bx-btn bx-btn-disabled bx-btn-primary mt-2 mr-2"><bx_text:_sys_uploader_crop_submit_button /></button>
-        <button class="bx-crop-action bx-crop-rotate bx-btn bx-btn-disabled mt-2 mr-2" data-deg="-90"><bx_text:_sys_uploader_crop_rotate_left /></button>
-        <button class="bx-crop-action bx-crop-rotate bx-btn bx-btn-disabled mt-2 mr-2" data-deg="90"><bx_text:_sys_uploader_crop_rotate_right /></button>
-        <div class="bx-btn mt-2" onclick="__uploader_instance_name__.onClickCancel()"><bx_text:_sys_uploader_close /></div>
-    </div>
-</div>
-<script>
-setTimeout(function () {    
-    __uploader_instance_name__.initUploader({
-        bx_form: {
-            uo: "__engine__",
-            so: "__storage_object__",
-            uid: "__uniq_id__",
-            m: "__multiple__",
-            c: "__content_id__",
-            p: "__storage_private__",
-            a: "upload"
-        },
-        viewport: {
-            width: 240,
-            height: 240,
-            // type: 'circle'
-        },
-        boundary: {
-            width: 280,
-            height: 280
-        },
-        enableOrientation: true
-    });
-}, 100);
-</script>

template/designbox_menu_popup.html

@@ -1 +1 @@
-<div class="bx-db-menu-popup">__content__</div>  
+<div class="bx-db-menu-popup py-2">__content__</div>

template/designbox_share_popup.html

@@ -1,15 +1,15 @@
 <div class="bx-db-share-popup">
     <div class="bx-db-share-popup-cnt">
-         <div class="bx-def-margin-sec-bottom">
-             <bx_menu:sys_social_sharing />
+         <div class="mb-4">
+             __menu__
          </div>
-         <div class="bx-def-margin-sec-bottom">
+         <div class="mb-4">
              <bx_text:_sys_txt_share_popup_url />       
-             <div class="bx-def-border bx-def-padding-sec rounded bx-def-font-small relative flex items-center justify-between">__url__<a href="javascript:" onClick="bx_copy_to_clipboard('__url__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />"><i class="sys-icon copy"></i></a></div>
+             <div 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 p-2 rounded relative flex items-center justify-between" onClick="bx_copy_to_clipboard('__url__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />">__url__<a href="javascript:" onClick="bx_copy_to_clipboard('__url__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />"><i class="sys-icon copy"></i></a></div>
          </div>
-         <div class="bx-def-margin-sec-bottom">
+         <div class="mb-4">
              <bx_text:_sys_txt_share_popup_embeded_code />        
-             <div class="bx-def-border bx-def-padding-sec rounded bx-def-font-small relative flex items-center justify-between">__code__<a href="javascript:" onClick="bx_copy_to_clipboard('__code__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />"><i class="sys-icon copy"></i></a></div> 
+             <div 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 p-2 rounded relative flex items-center justify-between" onClick="bx_copy_to_clipboard('__code__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />">__code__<a href="javascript:" onClick="bx_copy_to_clipboard('__code__')" title="<bx_text:_sys_txt_share_popup_copy_to_clipboard_text />"><i class="sys-icon copy"></i></a></div> 
          </div>
     </div>
 </div>

template/form_field_price.html

@@ -1,4 +1,4 @@
 <bx_if:show_currency>
-    <span>__currency__</span>
+    <span 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">__currency__</span>
 </bx_if:show_currency>
 __input__

template/form_field_privacy.html

@@ -1,4 +1,4 @@
-<div id="__html_id__" class="bx-form-input-pgc">
+<div id="__html_id__" class="bx-form-input-pgc absolute flex align-center justify-center w-4 h-4 -top-6 right-0">
     <div class="bx-form-input-pgc-current">
         <a class="bx-form-input-pgc-current" href="javascript:void(0)" onclick="javascript:__js_object__.pgcTogglePopup(this, __id__, '__privacy_object__')"><i class="sys-icon __icon__"></i></a>
     </div>

template/menu_buttons_hor.html

@@ -1,6 +1,6 @@
-<ul class="bx-menu-btns-hor bx-menu-object-__object__ bx-clearfix">
-    <bx_repeat:menu_items><li class="bx-menu-item __name__ bx-def-margin-thd-topbottom __class_add__"><a class="bx-btn __name__ bx-def-margin-right" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-		<bx_include_auto:menu_icon.html />
+<ul class="bx-menu-btns-hor bx-menu-object-__object__ flex flex-row">
+    <bx_repeat:menu_items><li class="bx-menu-item __name__ __class_add__ my-1 mr-4 last:mr-0"><a class="bx-btn __name__" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
+        <bx_include_auto:menu_icon.html />
         <bx_if:title><u>__title__</u></bx_if:title>
     </a></li></bx_repeat:menu_items>
-</ul>
+</ul>

template/menu_buttons_icon_hor.html

@@ -1,5 +1,5 @@
-<ul class="bx-menu-btns-icon-hor bx-menu-object-__object__ bx-clearfix">
-    <bx_repeat:menu_items><li class="bx-menu-item __name__ bx-def-margin-thd-topbottom __class_add__"><a class="bx-btn __name__ bx-def-margin-right" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
+<ul class="bx-menu-btns-icon-hor bx-menu-object-__object__ flex flex-row flex-wrap">
+    <bx_repeat:menu_items><li class="bx-menu-item __name__ my-1 __class_add__"><a class="bx-btn __name__ mr-4" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
         <bx_include_auto:menu_icon.html />
     </a></li></bx_repeat:menu_items>
-</ul>
+</ul>

template/menu_custom_hor.html

@@ -1,6 +1,6 @@
-<ul id="__html_id__" class="bx-menu-custom bx-menu-custom-hor bx-menu-hor-inline<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__">
+<ul id="__html_id__" class="bx-menu-custom bx-menu-custom-hor bx-menu-hor-inline<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex justify-start items-start">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name____class__">__item__</li>
+        <li class="bx-menu-item bx-menu-item-__name____class__ flex">__item__</li>
     </bx_repeat:menu_items>
 </ul>
 __js_code__

template/menu_item_addon.html

@@ -1 +1 @@
-<span class="bx-menu-item-addon bx-def-unit-alert bg-col-red2">__content__</span>
+<span class="bx-menu-item-addon bx-def-unit-alert block px-1.5 py-0 rounded-full ring-1 ring-white dark:ring-gray-800 bg-red-400 text-xs text-white">__content__</span>

template/menu_item_addon_middle.html

@@ -1 +1 @@
-<span class="bx-menu-item-addon bx-def-unit-alert-middle bg-col-red2">__content__</span>
+<span class="bx-menu-item-addon bx-def-unit-alert-middle block px-1.5 py-0 rounded-full ring-1 ring-white dark:ring-gray-800 bg-red-400 text-xs text-white">__content__</span>

template/menu_item_addon_small.html

@@ -1 +1 @@
-<span class="bx-menu-item-addon bx-def-unit-alert-small bg-col-red2">__content__</span>
+<span class="bx-menu-item-addon bx-def-unit-alert-small block px-1.5 py-0 rounded-full ring-1 ring-white dark:ring-gray-800 bg-red-400 text-xs text-white">__content__</span>

template/menu_item_more_popup.html

@@ -1,3 +1,3 @@
-<div class="bx-menu-item-more-popup bx-def-padding">
+<div class="bx-menu-item-more-popup w-full md:w-56 box-border">
     <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-submenu-more-auto bx-clearfix">__content__</ul>
 </div>

template/menu_loading.html

@@ -1,9 +1,9 @@
-<div id="bx-sliding-menu-loading" class="bx-sliding-menu bx-sliding-menu-fullheight bx-def-z-index-nav bx-def-color-bg-block" style="display:none; opacity:1;">
-    <div class="bx-def-page-width bx-def-centered">
-        <a class="bx-sliding-menu-close bx-def-margin-sec-top bx-def-margin-right bx-def-font-h1" href="javascript:void(0);" onclick="bx_menu_slide_inline($(this).parents('.bx-sliding-menu:visible:first'))"><i class="sys-icon times"></i></a>
-        <div class="bx-sliding-menu-cnt bx-def-padding">
-			<div class="bx-sliding-menu-content"></div>
-			<div class="bx-sliding-menu-loading"></div>
+<div id="bx-sliding-menu-loading" class="bx-sliding-menu bx-sliding-menu-fullheight bx-def-z-index-nav bx-def-color-bg-block border-l border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 shadow-sm rounded-bl" style="display:none; opacity:1;">
+    <div class="bx-def-centered">
+        <a class="bx-sliding-menu-close mt-2 mr-4 text-3xl" href="javascript:void(0);" onclick="bx_menu_slide_inline($(this).parents('.bx-sliding-menu:visible:first'))"><i class="sys-icon times"></i></a>
+        <div class="bx-sliding-menu-cnt p-4">
+            <div class="bx-sliding-menu-content"></div>
+            <div class="bx-sliding-menu-loading"></div>
         </div>
     </div>
-</div>
+</div>

template/messageBox.html

@@ -1,10 +1,8 @@
-<div class="bx-msg-box-container bx-def-margin-top bx-def-margin-bottom" id="__id__">
-    <div class="bx-msg-box bx-def-padding bx-def-round-corners bx-def-color-bg-hl">
-        __msgText__
-    </div>
+<div class="bx-msg-box-container my-4 px-4 text-center" id="__id__">
+    <div class="bx-msg-box inline-block mx-auto p-4 bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 uppercase rounded-md">__msgText__</div>
     <bx_if:timer>
         <script language="javascript">
             setTimeout("$('#__id__').bx_anim('hide', 'fade', 'slow', function(){$(this).remove();})", __time__);
         </script>
     </bx_if:timer>
-</div>
+</div>

template/profile_membership_stats.html

@@ -1,12 +1,12 @@
 <div class="bx-profile-membership-stats">
     <div class="bx-pms-membership">__membership__</div>
-    <div class="bx-pms-stats bx-def-box bx-def-round-corners bx-def-color-bg-box bx-def-padding">
+    <div class="bx-pms-stats bx-def-box bx-def-box-round-corners bx-def-color-bg-box mt-4 p-4">
         <bx_repeat:stat_items>
-            <div class="bx-pms-stat-item bx-def-margin-top-auto">
+            <div class="bx-pms-stat-item mt-4 first:mt-0">
                 <div class="bx-pms-si-title">__title__</div>
-                <div class="bx-pms-si-graph bx-def-margin-thd-top">
-                    <div class="bx-pms-sig-bar bx-def-round-corners" style="width:__width__">&nbsp;</div>
-                    <div class="bx-pms-sig-text bx-def-padding-left bx-def-font-middle bx-def-font-grayed">__value__ (__percent__)</div>
+                <div class="bx-pms-si-graph mt-1">
+                    <div class="bx-pms-sig-bar rounded-md" style="width:__width__">&nbsp;</div>
+                    <div class="bx-pms-sig-text pl-4 text-sm text-gray-500 dark:text-gray-400">__value__ (__percent__)</div>
                 </div>
             </div>
         </bx_repeat:stat_items>

template/uploader_form_crop.html

@@ -1,21 +1,16 @@
 <div id="__form_container_id__" class="bx-uploader-form-cont bx-popup-width">
-	__file_field__
-
+    __file_field__
     <div class="bx-uploader-loading"></div>
-    <div class="bx-def-padding-sec-bottom bx-croppie-msg"></div>
-    <div class="bx-def-padding-sec-bottom" id="__errors_container_id__"></div>
-
-    <div class="bx-croppie-element bx-def-margin-topbottom"></div>
-
-    <div class="bx-def-padding-top bx-clearfix">
-        <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-upload bx-btn-primary"><bx_text:_sys_uploader_crop_submit_button /></button>
-        <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-rotate" data-deg="-90"><bx_text:_sys_uploader_crop_rotate_left /></button>
-        <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-rotate" data-deg="90"><bx_text:_sys_uploader_crop_rotate_right /></button>
-        <div class="bx-btn bx-def-margin-sec-top" onclick="__uploader_instance_name__.onClickCancel()"><bx_text:_sys_uploader_close /></div>
+    <div class="bx-croppie-msg pb-2"></div>
+    <div class="bx-croppie-err pb-2" id="__errors_container_id__"></div>
+    <div class="bx-croppie-element my-4"></div>
+    <div class="flex pt-4 bx-clearfix">
+        <button class="bx-crop-action bx-crop-upload bx-btn bx-btn-disabled bx-btn-primary mt-2 mr-2"><bx_text:_sys_uploader_crop_submit_button /></button>
+        <button class="bx-crop-action bx-crop-rotate bx-btn bx-btn-disabled mt-2 mr-2" data-deg="-90"><bx_text:_sys_uploader_crop_rotate_left /></button>
+        <button class="bx-crop-action bx-crop-rotate bx-btn bx-btn-disabled mt-2 mr-2" data-deg="90"><bx_text:_sys_uploader_crop_rotate_right /></button>
+        <div class="bx-btn mt-2" onclick="__uploader_instance_name__.onClickCancel()"><bx_text:_sys_uploader_close /></div>
     </div>
-
 </div>
-
 <script>
 setTimeout(function () {    
     __uploader_instance_name__.initUploader({
@@ -40,4 +35,4 @@ setTimeout(function () {
         enableOrientation: true
     });
 }, 100);
-</script>
+</script>