Pārlūkot izejas kodu

fix block avatar social -ref #2681

Alex Aragón 6 gadi atpakaļ
vecāks
revīzija
1870737398

+ 0 - 7
assets/css/base.css

@@ -4315,13 +4315,6 @@ i.size-32.icon-new-work {
 
 /* Social Profile */
 
-.social-profile {
-    text-align: center;
-}
-
-.social-profile .expand-image {
-    display: inline-block;
-}
 
 .list-user-data {
     list-style: none;

+ 57 - 0
assets/css/scss/_base.scss

@@ -769,3 +769,60 @@ footer {
   }
 }
 
+/************* SOCIAL *************/
+.profile {
+  .profile-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100px;
+    width: 100%;
+    text-align: left;
+    overflow: hidden;
+    &.profile-bg-blur {
+      img {
+        filter: blur(10px) brightness(.85);
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .btn-toolbar{
+    margin-left: 17px;
+    a{
+      margin-right: 5px;
+    }
+  }
+}
+.user-panel{
+  position: relative;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  font-weight: 500;
+  z-index: 3;
+  &.user-panel-column{
+    flex-direction: column;
+    text-align: center;
+    .user-panel-image{
+      margin-right: 0;
+      margin-bottom: 8px;
+    }
+    .user-panel-info{
+      line-height: 23px;
+      p{
+        margin: 0;
+      }
+      small{
+        font-size: 14px;
+        display: block;
+        font-weight: 400;
+        line-height: 14px;
+      }
+    }
+  }
+
+}

+ 1 - 1
main/gamification/my_progress.php

@@ -76,7 +76,7 @@ $template = new Template($nameTools);
 $template->assign('user', $user);
 $template->assign(
     'user_avatar',
-    SocialManager::show_social_avatar_block('home', 0, $user->getId())
+    SocialManager::getAvatarBlock('home', 0, $user->getId())
 );
 $template->assign(
     'gamification_stars',

+ 4 - 1
main/inc/lib/pear/HTML/QuickForm/button.php

@@ -260,9 +260,12 @@ class HTML_QuickForm_button extends HTML_QuickForm_input
                 </div>';
                 break;
             case FormValidator::LAYOUT_BOX:
+                return '{element}';
+                break;
             case FormValidator::LAYOUT_BOX_NO_LABEL:
-                return '
+                return '<div class="input-group mt-3">
                         {element}
+                        </div>
                 ';
                 break;
         }

+ 34 - 16
main/inc/lib/social.lib.php

@@ -806,14 +806,24 @@ class SocialManager extends UserManager
      *                         friends,
      *                         groups search
      * @param int    $group_id
-     * @param int    $user_id
+     * @param int    $userId
      */
-    public static function show_social_avatar_block($show = '', $group_id = 0, $user_id = 0)
+    public static function getAvatarBlock($show = '', $group_id = 0, $userId = 0)
     {
-        if (empty($user_id)) {
-            $user_id = api_get_user_id();
+        if (empty($userId)) {
+            $userId = api_get_user_id();
         }
 
+        $userInfo = api_get_user_info($userId, true, false, true, true);
+
+        $user = [
+            'id' => $userInfo['user_id'],
+            'complete_name' => $userInfo['complete_name'],
+            'username' => $userInfo['username'],
+            'email' => $userInfo['email'],
+            'status' => $userInfo['status']
+        ];
+
         $show_groups = [
             'groups',
             'group_messages',
@@ -834,17 +844,24 @@ class SocialManager extends UserManager
             $userGroup = new UserGroup();
             $group_info = $userGroup->get($group_id);
 
-            $userGroupImage = $userGroup->get_picture_group(
-                $group_id,
-                $group_info['picture'],
-                128,
-                GROUP_IMAGE_SIZE_BIG
-            );
+            $userGroupImage = [
+                'big' => $userGroup->get_picture_group(
+                    $group_id,
+                    $group_info['picture'],
+                    128,
+                    GROUP_IMAGE_SIZE_BIG
+                ),
+                'normal' => $userGroup->get_picture_group(
+                    $group_id,
+                    $group_info['picture'],
+                    128,
+                    GROUP_IMAGE_SIZE_MEDIUM
+                )
+            ];
 
             $template->assign('show_group', true);
             $template->assign('group_id', $group_id);
-            $template->assign('user_group_image', $userGroupImage);
-            //$template->assign('user_group', $group_info);
+            $template->assign('avatar', $userGroupImage);
             $template->assign(
                 'user_is_group_admin',
                 $userGroup->is_group_admin(
@@ -855,15 +872,16 @@ class SocialManager extends UserManager
         } else {
             $template->assign('show_group', false);
             $template->assign('show_user', true);
+            $template->assign('user', $user);
             $template->assign(
-                'user_image',
+                'avatar',
                 [
                     'big' => UserManager::getUserPicture(
-                        $user_id,
+                        $userId,
                         USER_IMAGE_SIZE_BIG
                     ),
                     'normal' => UserManager::getUserPicture(
-                        $user_id,
+                        $userId,
                         USER_IMAGE_SIZE_MEDIUM
                     ),
                 ]
@@ -1840,7 +1858,7 @@ class SocialManager extends UserManager
         $userId = (int) $userId;
         $userRelationType = 0;
 
-        $socialAvatarBlock = self::show_social_avatar_block(
+        $socialAvatarBlock = self::getAvatarBlock(
             $groupBlock,
             $groupId,
             $userId

+ 6 - 6
main/inc/lib/usergroup.lib.php

@@ -1691,10 +1691,10 @@ class UserGroup extends Model
         $size_picture = GROUP_IMAGE_SIZE_MEDIUM,
         $style = ''
     ) {
-        $picture = [];
+        $picture = null;
         //$picture['style'] = $style;
         if ($picture_file === 'unknown.jpg') {
-            $picture['file'] = Display::returnIconPath($picture_file);
+            $picture = Display::returnIconPath($picture_file);
 
             return $picture;
         }
@@ -1720,19 +1720,19 @@ class UserGroup extends Model
         $image_array = $this->get_group_picture_path_by_id($id, 'web', false, true);
         $file = $image_array_sys['dir'].$size_picture.$picture_file;
         if (file_exists($file)) {
-            $picture['file'] = $image_array['dir'].$size_picture.$picture_file;
+            $picture = $image_array['dir'].$size_picture.$picture_file;
             //$picture['style'] = '';
             if ($height > 0) {
-                $dimension = api_getimagesize($picture['file']);
+                $dimension = api_getimagesize($picture);
                 $margin = ($height - $dimension['width']) / 2;
                 //@ todo the padding-top should not be here
             }
         } else {
             $file = $image_array_sys['dir'].$picture_file;
             if (file_exists($file) && !is_dir($file)) {
-                $picture['file'] = $image_array['dir'].$picture_file;
+                $picture = $image_array['dir'].$picture_file;
             } else {
-                $picture['file'] = Display::returnIconPath('group_na.png', 64);
+                $picture = Display::returnIconPath('group_na.png', 64);
             }
         }
 

+ 2 - 2
main/inc/lib/usermanager.lib.php

@@ -4460,7 +4460,7 @@ class UserManager
      *
      * @return string HTML form
      */
-    public static function get_search_form($query, $defaultParams = [])
+    public static function getSearchForm($query, $defaultParams = [])
     {
         $searchType = isset($_GET['search_type']) ? $_GET['search_type'] : null;
         $form = new FormValidator(
@@ -4469,7 +4469,7 @@ class UserManager
             api_get_path(WEB_PATH).'main/social/search.php',
             '',
             [],
-            FormValidator::LAYOUT_HORIZONTAL
+            'box-no-label'
         );
 
         $form->addText('q', get_lang('UsersGroups'), false, [

+ 1 - 1
main/social/group_add.php

@@ -42,7 +42,7 @@ $interbreadcrumb[] = ['url' => 'home.php', 'name' => get_lang('Social')];
 $interbreadcrumb[] = ['url' => 'groups.php', 'name' => get_lang('Groups')];
 $interbreadcrumb[] = ['url' => '#', 'name' => $nameTools];
 
-$social_avatar_block = SocialManager::show_social_avatar_block('group_add');
+$social_avatar_block = SocialManager::getAvatarBlock('group_add');
 $social_menu_block = SocialManager::getMenuSocial('group_add');
 $social_right_content = $form->returnForm();
 

+ 1 - 1
main/social/group_members.php

@@ -112,7 +112,7 @@ $users = $userGroup->get_users_by_group(
 );
 $new_member_list = [];
 
-$social_avatar_block = SocialManager::show_social_avatar_block(
+$social_avatar_block = SocialManager::getAvatarBlock(
     'member_list',
     $group_id
 );

+ 5 - 8
main/social/home.php

@@ -80,10 +80,7 @@ if (api_get_setting('profile', 'picture') == 'true') {
 //Block Menu
 //$MenuSocial = SocialManager::getMenuSocial('home');
 
-$social_search_block = Display::panel(
-    UserManager::get_search_form(''),
-    get_lang('SearchUsers')
-);
+$socialSearch = UserManager::getSearchForm('');
 
 $results = $userGroup->get_groups_by_age(1, false);
 
@@ -118,7 +115,7 @@ if (!empty($results)) {
             GROUP_IMAGE_SIZE_BIG
         );
 
-        $result['picture'] = '<img class="img-responsive" src="'.$picture['file'].'" />';
+        $result['picture'] = '<img class="img-responsive" src="'.$picture.'" />';
         $group_actions = '<div class="group-more"><a class="btn btn-default" href="groups.php?#tab_browse-2">'.
             get_lang('SeeMore').'</a></div>';
         $group_info = '<div class="description"><p>'.cut($result['description'], 120, true)."</p></div>";
@@ -166,7 +163,7 @@ foreach ($results as $result) {
         null,
         GROUP_IMAGE_SIZE_BIG
     );
-    $result['picture_uri'] = '<img class="img-responsive" src="'.$picture['file'].'" />';
+    $result['picture_uri'] = '<img class="img-responsive" src="'.$picture.'" />';
     $group_actions = '<div class="group-more"><a class="btn btn-default" href="groups.php?#tab_browse-3">'.
         get_lang('SeeMore').'</a></div>';
     $group_info = '<div class="description"><p>'.cut($result['description'], 120, true)."</p></div>";
@@ -232,10 +229,10 @@ $tpl = new Template(get_lang('SocialNetwork'));
 
 SocialManager::setSocialUserBlock($tpl, api_get_user_id(), 'home');
 
-/*$tpl->assign('social_menu_block', $MenuSocial);*/
+
 $tpl->assign('social_friend_block', $friend_html);
 $tpl->assign('session_list', $social_session_block);
-$tpl->assign('social_search_block', $social_search_block);
+$tpl->assign('social_search', $socialSearch);
 $tpl->assign('social_skill_block', SocialManager::getSkillBlock($user_id));
 $tpl->assign('social_group_block', $social_group_block);
 $social_layout = $tpl->get_template('social/home.tpl');

+ 1 - 1
main/social/search.php

@@ -39,7 +39,7 @@ if (!empty($extra_fields)) {
 //Block Social Menu
 $social_menu_block = SocialManager::getMenuSocial('search');
 $block_search = '';
-$searchForm = UserManager::get_search_form($query);
+$searchForm = UserManager::getSearchForm($query);
 
 $groups = [];
 $totalGroups = [];

+ 17 - 6
main/template/default/social/avatar_block.html.twig

@@ -1,8 +1,14 @@
 {% autoescape false %}
-<div class="sm-groups">
-    <div class="social-profile text-center">
-        {% if show_group %}
-            <img src="{{ user_group_image.file }}" class="img-responsive">
+<div class="profile-bg profile-bg-blur">
+    <img src="{{ avatar.big }}">
+</div>
+<div class="user-panel user-panel-column">
+    <div class="user-panel-image">
+        <div class="avatar avatar-lg avatar-bordered">
+            {% if show_group %}
+            <a href="{{ avatar.big }}" class="expand-image">
+                <img src="{{ avatar.normal }}" class="img-fluid rounded-circle">
+            </a>
             <div class="caption">
                 <h4 class="group-title">
                     <a href="{{ _p.web_main ~ 'social/group_view.php?id=' ~ group_id }}">{{ user_group.name }}</a>
@@ -18,10 +24,15 @@
                 {% endif %}
             </div>
         {% elseif show_user %}
-            <a href="{{ user_image.big }}" class="expand-image">
-                <img class="img-fluid rounded-circle" src="{{ user_image.big }}" alt="{{ 'UserPicture'|get_lang }}">
+            <a href="{{ avatar.big }}" class="expand-image">
+                <img class="img-fluid rounded-circle" src="{{ avatar.normal }}" alt="{{ 'UserPicture'|get_lang }}">
             </a>
+            <div class="user-panel-info mb-10">
+                <p class="text-black">{{ user.complete_name }}</p>
+                <small class="text-secondary">{{ user.email }} ({{ user.username }})</small>
+            </div>
         {% endif %}
+        </div>
     </div>
 </div>
 {% endautoescape %}

+ 11 - 2
main/template/default/social/home.html.twig

@@ -5,10 +5,19 @@
 {% autoescape false %}
     <div class="row">
         <div class="col-md-4">
-            {% include '@ChamiloTheme/Social/user_block.html.twig' %}
+            <div class="card">
+                <div class="card-body">
+                    {% include '@ChamiloTheme/Social/user_block.html.twig' %}
+                </div>
+            </div>
+
+            {{ macro.panel("Search Users" | trans, social_search ) }}
+
+
+
         </div>
         <div class="col-md-8">
-            {{ social_search_block }}
+
             {{ social_skill_block }}
             {{ social_group_block }}
             {{ social_right_content }}

+ 15 - 31
src/ThemeBundle/Resources/views/Social/user_block.html.twig

@@ -1,36 +1,23 @@
 {% import '@ChamiloTheme/Macros/box.html.twig' as macro %}
 
 {% autoescape false %}
-<div class="sidebar-avatar">
-
-
+<div class="profile">
     {{ social_avatar_block }}
-
-    <ul class="list-user-data">
-        <li class="item">
-            {{ user.complete_name }}
-        </li>
+    <div class="btn-toolbar justify-content-center">
+        <a href="{{ _p.web }}main/messages/new_message.php" title="{{ "Message" | trans }}" class="btn btn-primary btn-sm">
+            <i class="fas fa-envelope"></i>
+        </a>
+        <a href="{{ vcard_user_link }}" title="{{ "BusinessCard" | trans }}" class="btn btn-success btn-sm">
+            <i class="fas fa-address-card"></i>
+        </a>
         {% if is_granted('ROLE_ADMIN') %}
-            <li class="item">
-                <a href="{{ _p.web }}main/admin/user_edit.php?user_id={{ user.id }}">
-                    <img src="{{ "edit.png" | icon }}" alt="{{ "Edit" | trans }}">
-                </a>
-            </li>
+            <a href="{{ _p.web }}main/admin/user_edit.php?user_id={{ user.id }}" title="{{ "Edit" | trans }}" class="btn btn-light btn-sm">
+                <i class="fas fa-pencil-alt"></i>
+            </a>
         {% endif %}
+    </div>
+    <ul class="list-user-data">
         {% if show_full_profile %}
-            <li class="item">
-                <a href="{{ _p.web }}main/messages/new_message.php">
-                    <img src="{{ "instant_message.png" | icon }}" alt="{{ "Email" | trans }}">
-                    {{ user.email}}
-                </a>
-            </li>
-            <li class="item">
-                <a href="{{ vcard_user_link }}">
-                    <img src="{{ "vcard.png" | icon(16) }}" alt="{{ "BusinessCard" | trans }}" width="16" height="16">
-                    {{ "BusinessCard" | trans }}
-                </a>
-            </li>
-
             {% set skype_account = '' %}
             {% set linkedin_url = '' %}
             {% for extra in user.extra %}
@@ -74,16 +61,13 @@
                 {% endif %}
             {% endif %}
         {% endif %}
-
-        {% if not profile_edition_link is empty %}
+        {#{% if not profile_edition_link is empty %}
             <li class="item">
                 <a class="btn btn-link btn-sm btn-block" href="{{ profile_edition_link }}">
                     <em class="fa fa-edit"></em>{{ "EditProfile" | trans }}
                 </a>
             </li>
-        {% endif %}
+        {% endif %}#}
     </ul>
-
-
 </div>
 {% endautoescape %}

+ 1 - 1
whoisonline.php

@@ -42,7 +42,7 @@ if ($user_list) {
         if (api_get_setting('allow_social_tool') == 'true') {
             if (!api_is_anonymous()) {
                 $query = isset($_GET['q']) ? $_GET['q'] : null;
-                $social_search = UserManager::get_search_form($query);
+                $social_search = UserManager::getSearchForm($query);
             }
         }
         $social_right_content .= SocialManager::display_user_list($user_list);