#4145 - Uploader's enhancement (fix)

inc/js/classes/BxDolUploader.js

@@ -487,6 +487,8 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
             },
             onprocessfiles: (files) => { 
                 $this.onUploadCompleted(''); 
+                oProgress.hide();
+                $this._aFiles = [];
             },
             onprocessfileprogress(file, progress) {
                 $this._aFiles[file.source.lastModified+'-'+file.source.size+'-'+file.source.name] = progress * file.source.size;
@@ -504,17 +506,12 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
 
                 oProgress =  $('#' + $this._sProgressContainerId);
 
-                if (oProgress.parents('form').find('.uploader_progress').length > 0){
+                if (oProgress.parents('.bx-db-container').find('.uploader_progress').length > 0){
                     oProgress = oProgress.parents('.bx-db-container').find('.uploader_progress');
                 }
-                if (iProgress == 100){
-                    oProgress.hide();
-                    $this._aFiles = [];
-                }
-                else{
-                    oProgress.show();
-                    oProgress.find('.progress_line').css('width', iProgress + '%');
-                }
+
+                oProgress.show();
+                oProgress.find('.progress_line').css('width', iProgress + '%');
             },
             server: {
 				process: (fieldName, file, metadata, load, error, progress, abort) => {
@@ -544,7 +541,6 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
                             catch (e) {}
                             if (o && 'undefined' !== typeof(o.error)) {
                                 $this._showError(o.error, true);
-                                error('error');
                             }
 
                             load(request.responseText);

modules/base/groups/template/cover_block.html

@@ -8,8 +8,8 @@
                         <div class="absolute top-6 -right-1/4 w-2/3 h-2/3 bg-green-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
                     </div>
                     <div class="bx-base-pofile-cover-image relative h-64 lg:h-40 max-w-7xl mx-auto opacity-100 __add_class__">
-                        <a class="bx-base-pofile-cover-image box-border absolute h-full w-full" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">
-                            <img class="bx-base-pofile-cover-image h-64 mx-auto w-full object-cover bg-cover lg:h-40 rounded-t z-10 __img_class__" style="background-image:url(__cover_url__)" src="<bx_icon_url:spacer.gif />" />
+                        <a class="bx-base-pofile-cover-image box-border absolute h-full w-full" href="__cover_href__" >
+                            <img class="bx-base-pofile-cover-image h-64 mx-auto w-full object-cover bg-cover lg:h-40 rounded-t z-10 __img_class__ bx-image-edit-source-__unique_id__" style="background-image:url(__cover_url__);__cover_settins__" src="<bx_icon_url:spacer.gif />" />
                         </a>
                     </div>
                 </div>

modules/base/profile/classes/BxBaseModProfileTemplate.php

@@ -287,7 +287,6 @@ function prepareCover($aData, $aParams = [])
         $sShowData = isset($aParams['show_data']) ? $aParams['show_data'] : '';
         $bShowCover = !isset($aParams['show_cover']) || $aParams['show_cover'] === true;
         $bShowAvatar = !isset($aParams['show_avatar']) || $aParams['show_avatar'] === true;
-        $bShowClickable = !isset($aParams['show_clickable']) || $aParams['show_clickable'] === true; //--- Is available for UseAsBlock appearance only.
         $sAddCode = "";
 
 
@@ -299,9 +298,6 @@ function prepareCover($aData, $aParams = [])
         else
             BxDolTemplate::getInstance()->addInjection('injection_main_class', 'text', 'bx-base-profile-view');
 
-        if($bUseAsBlock && $bShowClickable)
-            $sClass .= ' bx-clickable';
-
         $bProfileViewAllowed = $oModule->checkAllowedView($aData) === CHECK_ACTION_RESULT_ALLOWED;
 
         if($oModule->checkAllowedViewProfileImage($aData) !== CHECK_ACTION_RESULT_ALLOWED)
@@ -388,6 +384,7 @@ function prepareCover($aData, $aParams = [])
 
         $bTmplVarsShowAvatar = $bShowAvatar && ($bUrlAvatar || $this->_bLetterAvatar);
         $aTmplVarsShowAvatar = [];
+        $sPicturePopup = '';
 
         if($bTmplVarsShowAvatar) {
             $sPicturePopupId = $this->MODULE . '-popup-picture';
@@ -447,6 +444,18 @@ function prepareCover($aData, $aParams = [])
                 'picture_url' => $sUrlPicture,
                 'picture_href' => !$aData[$CNF['FIELD_PICTURE']] && CHECK_ACTION_RESULT_ALLOWED === $oModule->checkAllowedEdit($aData) ? $sUrlPictureChange : 'javascript:void(0);',
             );
+
+            if($bProfileViewAllowed && $aData[$CNF['FIELD_PICTURE']]) {
+                $sPicturePopup = BxTemplFunctions::getInstance()->transBox($sPicturePopupId, $this->parseHtmlByName('image_popup.html', array (
+                    'image_url' => $sUrlPicture,
+                    'bx_if:owner' => array (
+                        'condition' => false,
+                        'content' => array (
+                            'change_image_url' => $sUrlPictureChange,
+                        ),
+                    ),
+                )), true, true);
+            }
         }
 
         //--- Process Actions menu
@@ -499,9 +508,17 @@ function prepareCover($aData, $aParams = [])
             'action_menu' => $sActionsMenu,
             'meta' => $sMetaMenu,
             'show_data' => $sShowData,
+            'picture_popup' => $sPicturePopup,
             'additional_code' => $sAddCode,
             'cover_tweak' => $sCoverTweak,
         ];
+
+        $bShowClickable = !isset($aParams['show_clickable']) || $aParams['show_clickable'] === true; //--- Is available for UseAsBlock appearance only.
+        if ($sCoverTweak != '')
+            $bShowClickable = false;
+
+        if($bUseAsBlock && $bShowClickable)
+            $sClass .= ' bx-clickable';
 
         if($bUseAsBlock)
             $aTmplVars = array_merge($aTmplVars, [

modules/base/profile/template/cover.html

@@ -11,7 +11,7 @@
                 <div class="bx-base-pofile-ci-cnt bx-def-padding-leftright">
                     <bx_if:show_avatar>
                         <div class="bx-base-pofile-cover-thumb __add_class__">
-                            <a class="bx-base-pofile-cover-thumb" href="__picture_href__">
+                            <a class="bx-base-pofile-cover-thumb" href="__picture_href__"  onclick="$('#__picture_popup_id__').dolPopupImage('__picture_url__', $(this).parent()); event.stopPropagation();">
                                 <img class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size rounded-full ring-4 mx-auto ring-white dark:ring-gray-900 __img_class__ bx-image-edit-source-__unique_id__" src="__ava_url__" <bx_if:show_ava_letter> style="display:none" </bx_if:show_ava_letter> />
                                 <p class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size flex items-center justify-center box-border m-0 rounded-full ring-4 mx-auto ring-white dark:ring-gray-900 text-white font-bold text-5xl __img_class__-placeholder" style="background-color:rgba(__color__);<bx_if:show_ava_image>display:none</bx_if:show_ava_image>">__letter__</p>
                             </a>
@@ -33,5 +33,6 @@ <h1 class="bx-def-unit-info">__title__ </h1>
             __cover_tweak__
         </div>
     </div>
+    __picture_popup__
 </div>
 __additional_code__

modules/base/profile/template/cover_block.html

@@ -3,10 +3,10 @@
         <div class="bx-base-pofile-cover bx-def-cover-color-bg bx-def-box-sizing"<bx_if:show_clickable> onclick="bx_click_area('__content_url__', event)"</bx_if:show_clickable>>
             <bx_if:show_cover>
                 <div class="bx-base-pofile-cover-image __add_class__">
-                    <a class="bx-base-pofile-cover-image bx-def-box-sizing" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">
-                        <img class="bx-base-pofile-cover-image __img_class__" style="background-image:url(__cover_url__)" src="<bx_icon_url:spacer.gif />"/>
+                    <a class="bx-base-pofile-cover-image bx-def-box-sizing flex justify-center items-center">
+                        <img class="bx-base-pofile-cover-image h-full object-cover bg-cover w-full __img_class__ bx-image-edit-source-__unique_id__" style="background-image:url(__cover_url__);__cover_settins__" src="<bx_icon_url:spacer.gif />"/>
                     </a>
-                    <div class="bx-cover-gradient"></div>
+
                 </div>
             </bx_if:show_cover>
             <div class="bx-base-pofile-cover-info">
@@ -40,7 +40,9 @@ <h1 class="bx-def-unit-info">__title__</h1>
                 </div>
                 __show_data__
             </div>
+            __cover_tweak__
         </div>
     </div>
+    __picture_popup__
 </div>
 __additional_code__

modules/boonex/artificer/data/template/mod_profile/cover.html

@@ -13,7 +13,7 @@
                 <div class="bx-base-pofile-ci-cnt relative flex flex-col -mt-24 lg:-mt-16 lg:flex-row lg:items-center">
                     <bx_if:show_avatar>
                         <div class="bx-base-pofile-cover-thumb bx-def-ava-big-size relative lg:absolute flex self-center lg:flex-none z-10 __add_class__">
-                            <a class="bx-base-pofile-cover-thumb hover:no-underline" href="__picture_href__">
+                            <a class="bx-base-pofile-cover-thumb hover:no-underline" href="__picture_href__" onclick="$('#__picture_popup_id__').dolPopupImage('__picture_url__', $(this).parent()); event.stopPropagation();">
                                 <img class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size rounded-full ring-4 mx-auto ring-white dark:ring-gray-900 h-48 w-48 __img_class__ bx-image-edit-source-__unique_id__" src="__ava_url__"  <bx_if:show_ava_letter> style="display:none" </bx_if:show_ava_letter> />
                                 <p class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size flex items-center justify-center box-border m-0 rounded-full ring-4 mx-auto ring-white dark:ring-gray-900 h-48 w-48 text-white font-bold text-5xl __img_class__-placeholder" style="background-color:rgba(__color__);<bx_if:show_ava_image>display:none</bx_if:show_ava_image>" >__letter__</p>
                             </a>
@@ -40,5 +40,6 @@ <h1 class="bx-def-unit-info pl-1 text-gray-900 dark:text-gray-50 text-center lg:
         </div>
         <div class="bx-def-page-width mx-auto pt-5 px-4 sm:px-6 lg:px-8 border-b border-gray-200 dark:border-gray-800 box-border"></div>
     </div>
+    __picture_popup__
 </div>
 __additional_code__

modules/boonex/artificer/data/template/mod_profile/cover_block.html

@@ -4,8 +4,8 @@
             <bx_if:show_cover>
                 <div class="bx-base-pofile-cover-image-wrp relative overflow-hidden">
                     <div class="bx-base-pofile-cover-image relative h-64 lg:h-40 max-w-7xl mx-auto opacity-100 bg-gradient-to-b from-blue-400 to-blue-500 rounded-t-md __add_class__">
-                        <a class="bx-base-pofile-cover-image box-border absolute h-full w-full" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">
-                            <img class="bx-base-pofile-cover-image h-64 mx-auto w-full object-cover bg-cover lg:h-40 rounded-t-md z-10 __img_class__" style="background-image:url(__cover_url__)" src="<bx_icon_url:spacer.gif />" />
+                        <a class="bx-base-pofile-cover-image box-border absolute h-full w-full" href="__cover_href__" >
+                            <img class="bx-base-pofile-cover-image h-64 mx-auto w-full object-cover bg-cover lg:h-40 rounded-t-md z-10 __img_class__ bx-image-edit-source-__unique_id__" style="background-image:url(__cover_url__);__cover_settins__" src="<bx_icon_url:spacer.gif />" />
                         </a>
                     </div>
                 </div>
@@ -48,7 +48,9 @@ <h1 class="bx-def-unit-info text-4xl font-bold text-gray-900 dark:text-gray-50 t
                 </div>
                 __show_data__
             </div>
+            __cover_tweak__
         </div>
     </div>
+    __picture_popup__
 </div>
 __additional_code__

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

@@ -14,12 +14,14 @@ import url(../../../../../../../template/css/cover.css);
 .dark .bx-cover-wrapper {
     background-image: url(../images/cover-default-dark.svg);
 }
-
 .bx-image-edit-buttons{
     position: absolute;
     left:1rem;
     top:1rem;
 }
+.bx-image-edit-buttons .bx-btn.bx-btn-small{
+    padding: 0.375rem 0.5rem;
+}
 .bx-base-pofile-cover-thumb .bx-image-edit-buttons{
     display: flex;
     width: 100%;

modules/boonex/decorous/data/template/bx_organizations/cover.html

@@ -33,4 +33,5 @@ <h1 class="bx-def-unit-info">__title__ </h1>
         __cover_tweak__
         </div>
     </div>
+    __picture_popup__
 </div>

modules/boonex/decorous/data/template/bx_persons/cover.html

@@ -35,4 +35,5 @@ <h1 class="bx-def-unit-info">__title__ </h1>
             __cover_tweak__
         </div>
     </div>
+    __picture_popup__
 </div>

modules/boonex/files/template/files_browser_toolbar.html

@@ -58,7 +58,7 @@
         </bx_repeat:bulk_actions>
     </div>
 </div>
-<div class="hidden uploader_progress bx-def-padding-top">
+<div class="hidden uploader_progress bx-def-padding-sec-leftright" style="width: 100%">
     <div class="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
         <div class="bg-blue-600 h-1 rounded-full progress_line" style="width: 0%"></div>
     </div>

template/css/cover.css

@@ -24,6 +24,9 @@
     left:1rem;
     top:1rem;
 }
+.bx-image-edit-buttons .bx-btn.bx-btn-small{
+    padding: 0.375rem 0.5rem;
+}
 .bx-base-pofile-cover-thumb .bx-image-edit-buttons{
     display: flex;
     width: 100%;