Browse Source

merge groups styles change with latest code in 1.11.x

Yannick Warnier 8 years ago
parent
commit
fc74aff02d

+ 34 - 202
app/Resources/public/css/base.css

@@ -708,7 +708,6 @@ a.personal_agenda:hover, a.personal_agenda:hover {
 .social-home-anonymous-online {
     width: 200px;
 }
-
 .menulist {
     margin: 0px;
     list-style: none;
@@ -717,38 +716,15 @@ a.personal_agenda:hover, a.personal_agenda:hover {
     list-style-position:outside;
     list-style-type:none;
 }
-
 .menulist li {
     /* float:left; */
     /* margin-left:10px; */
     margin-bottom:10px;
     display:list-item;
 }
-
 .menulist li {
     margin-top: 10px;
 }
-
-.group_social_item {
-    float:left;
-    width:95%;
-}
-
-.group_social_sub_item {
-    float:left;
-    /* width:600px; */
-    background-color: #E9F4FA;
-    background-repeat: repeat-x;
-
-    margin: 8px;
-    padding:5px;
-    width:100%;
-}
-
-.group_social_sub_item_highlight {
-    background-color: #FFFFDD;
-}
-
 #profile .control-group .controls .files-production{
   padding: 5px 25px;
     -webkit-border-radius: 10px;
@@ -766,129 +742,17 @@ a.personal_agenda:hover, a.personal_agenda:hover {
   padding-bottom: 3px;
 }
 
-.message-group-content {
-    float:right;
-    width:90%;
-    line-height: 100%;
-}
-
-.message-group-date  {
-    font-style:italic;
-    text-align:left;
-    margin-top:4px;
-}
-.message-reply-link {
-    float:right;
-}
-
-.group_social_main_item  {
-    float:left;
-    width:600px;
-    background-color: #fff;
-    background-repeat: repeat-x;
-    margin: 8px;
-    padding:5px;
-}
-
-.group_discussions_replies  {
-    background-color: #E9F4FA;
-    background-repeat: repeat-x;
-    border: 1px solid #D0E2EC;
-    border-radius: 3px 3px 3px 3px;
-    color: #999999;
-    float: left;
-    font-size: 0.8em;
-    margin-right: 10px;
-    overflow: hidden;
-    padding: 13px;
-    text-align: center;
-    width: 47px;
-    margin-bottom: 65px;
-}
-
-.group_discussions_replies span {
-    display: block;
-    font-size: 2em;
-}
-
-.group_discussions_info {
-    width:400px;
-    height: 80px;
-    overflow: hidden;
-    width: 400px;
-}
-
-.group_social_grid {
-    float:left;
-    width:100%;
-}
-
-.message-attach {
-    float:left;
-}
 #sn-extra-information .list-group-item{
     padding: 5px 10px;
     border: none;
 }
-
 /** BUTTONS **/
-
 .left {
     float:left !important;
 }
-
 .right {
     text-align: right;
 }
-
-/* Nice buttons v2 */
-
-button.next.disabled {
-    cursor: default;
-    opacity: 0.65;
-}
-
-.round {
-    -webkit-border-radius: 1em;
-    -moz-border-radius: 1em;
-    border-radius: 1em;
-}
-
-.bigger {
-    font-size: 16px;
-    font-weight: bold;
-    padding: .8em 2em .62em;
-}
-
-.big {
-    font-size: 14px;
-    font-weight: bold;
-    padding: .8em 2em .62em;
-}
-.medium {
-    font-size: 12px;
-    padding: .4em 1.5em .42em;
-}
-.small {
-    font-size: 11px;
-    padding: .2em 1em .275em;
-}
-
-.no_link {
-    cursor:default;
-
-}
-
-.no_link:hover {
-    cursor:default;
-}
-.no_link:active {
-    cursor:default;
-
-}
-.content-chat{
-    height: 200px;
-}
 /* Note */
 .note {
     margin: 6px;
@@ -1040,10 +904,6 @@ div.attendance-calendar-add div.row div.formw,div.attendance-calendar-edit div.r
 #inbox-menu ul li {
     padding:2px 0px;
 }
-
-#message-reply-link {
-    float:right;
-}
 .message-item {
     -moz-background-clip:border;
     -moz-background-inline-policy:continuous;
@@ -1057,43 +917,26 @@ div.attendance-calendar-add div.row div.formw,div.attendance-calendar-edit div.r
     padding:10px;
 }
 .message-topic {
-    -moz-background-clip:border;
-    -moz-background-inline-policy:continuous;
-    -moz-background-origin:padding;
-    -moz-border-radius-bottomleft:8px;
-    -moz-border-radius-bottomright:8px;
-    -moz-border-radius-topleft:8px;
-    -moz-border-radius-topright:8px;
-    background:#E6EEFB  none repeat scroll 0 0;
-    margin:0 0 5px;
-    padding:10px;
-
-}
-.message-group-title-topic {
-    font-size:180%;
-    margin:5px 0px 5px 0px;
-}
-.message-group-title {
-    font-size:120%;
-}
-.message-group-author {
-    margin:0px 5px 5px 0px;
-    float:left;
+    padding: 15px;
+    border-radius: 5px;
+    display: inline-block;
+    border: 1px solid #DDD;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
 }
-
-.message-group-content {
-    margin: 5px 0px 8px 0px;
+.message-topic .avatar-author{
+    float: right;
 }
-.message-group-date {
-    color:#999;
-    width:100%;
-    font-size:98%;
+.thread-body{
+    padding-bottom: 20px;
+    padding-top: 20px;
 }
-.view-message-content {
-    line-height:150%;
-    font-size:110%;
+.message-post{
+    border: 1px solid #DDD;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    padding: 15px;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
 }
-
 .message_view_table {
     cellspacing:0;
     cellpadding:0;
@@ -1114,15 +957,7 @@ div.attendance-calendar-add div.row div.formw,div.attendance-calendar-edit div.r
     margin-top:23px;
     margin-left:20px;
 }
-
 /* styles from the my.profile.php file */
-.message-content {
-    /*  float:right;
-        background:#FFF;
-        padding: 10px 0 0 5px;
-        width:125px;
-        position:relative;*/
-}
 .message-content .message-delete {
     position: absolute;
     top: 10px;
@@ -1241,8 +1076,6 @@ div.attendance-calendar-add div.row div.formw,div.attendance-calendar-edit div.r
     outline-style:none;
     background:#ffffff;
 }
-.message-content-body-right:hover {
-}
 
 a.unread {
     font-weight:bold;
@@ -1483,10 +1316,7 @@ div.admin_section h4 {
 .toolbar-groups{
     margin-bottom: 30px;
 }
-#group_edit .form-group label span{
-    display: block;
-    font-size: 12px;
-}
+
 .group_invitation_grid_container { width:100%;}
 .group_invitation_grid_item {
     border:1px dotted #CCCCCC;
@@ -2175,18 +2005,11 @@ div.admin_section h4 {
     border-bottom: 1px solid #CCCCCC;
     margin-bottom: 20px;
 }
-
 #div_content_table {
     border-bottom:1px solid #EAEAEA;
     margin-bottom:20px;
     padding-bottom:10px;
 }
-
-.group_description {
-    word-wrap: break-word;
-    font-size:11px;
-}
-
 /* Forms */
 div.row div.form_header {
     white-space: nowrap;
@@ -3961,7 +3784,12 @@ i.size-32.icon-new-work{
 }
 .sm-groups .social-profile .img-responsive{
   display: inline-block;
-  width: 100px;
+}
+.sm-groups-content .groups-messages{
+    padding-top: 10px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 .social-post .mediaPost{
   padding-top:10px;
@@ -4066,7 +3894,7 @@ i.size-32.icon-new-work{
   vertical-align: bottom;
   margin-right: 5px;
 }
-.social-network-menu .nav li a{
+.social-network-menu .nav li a, #groups-acordeon .nav li a{
   padding: 5px;
   font-size: 12px;
 }
@@ -5435,15 +5263,22 @@ div#chat-remote-video video {
 #toolbar-agenda .show-tick{
     width: 420px;
 }
-.tab-wrapper .tab-content{
-    padding: 25px 0px 25px 0px;
-}
 .description-upload{
     margin-bottom: 10px;
 }
 .files-table{
     padding-top: 20px;
 }
+.user-list{
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.items-user{
+  text-align: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  min-height: 170px;
+}
 #whoisonline .items-user{
   text-align: center;
   /*border:1px solid #dddddd; */
@@ -5991,9 +5826,6 @@ a.sessionView {
         padding: 5px;
         min-height: 300px;
     }
-    .col-xs-6{
-        width: 100%;
-    }
     .gallery .canvas-two{
         width: 100%;
     }

BIN
main/img/icons/128/group_leave.png


BIN
main/img/icons/128/group_na.png


BIN
main/img/icons/128/invitation_friend.png


BIN
main/img/icons/128/waiting_list.png


BIN
main/img/icons/22/group_edit.png


BIN
main/img/icons/22/group_leave.png


BIN
main/img/icons/22/invitation_friend.png


BIN
main/img/icons/22/waiting_list.png


BIN
main/img/icons/32/group_edit.png


BIN
main/img/icons/32/group_leave.png


BIN
main/img/icons/32/invitation_friend.png


BIN
main/img/icons/32/waiting_list.png


BIN
main/img/icons/48/group_edit.png


BIN
main/img/icons/48/group_leave.png


BIN
main/img/icons/48/invitation_friend.png


BIN
main/img/icons/48/waiting_list.png


BIN
main/img/icons/64/group_edit.png


BIN
main/img/icons/64/group_leave.png


BIN
main/img/icons/64/group_na.png


BIN
main/img/icons/64/invitation_friend.png


BIN
main/img/icons/64/waiting_list.png


File diff suppressed because it is too large
+ 20 - 892
main/img/icons/svg/group_na.svg


+ 65 - 68
main/inc/lib/message.lib.php

@@ -1188,25 +1188,25 @@ class MessageManager
                 // topics
                 $user_sender_info = api_get_user_info($topic['user_sender_id']);
                 $name = $user_sender_info['complete_name'];
-
+                $html .= '<div class="groups-messages">';
                 $html .= '<div class="row">';
 
                 $items = $topic['count'];
                 $reply_label = ($items == 1) ? get_lang('GroupReply') : get_lang('GroupReplies');
-                $label =  Display::label($items.' '.$reply_label);
+                $label =  '<i class="fa fa-envelope"></i> ' . $items . ' ' . $reply_label;
                 $topic['title'] = trim($topic['title']);
 
                 if (empty($topic['title'])) {
                     $topic['title'] = get_lang('Untitled');
                 }
 
-                $html .= '<div class="col-md-8">';
+                $html .= '<div class="col-xs-8 col-md-10">';
                 $html .= Display::tag(
                     'h4',
                     Display::url(
                         Security::remove_XSS($topic['title'], STUDENT, true),
                         api_get_path(WEB_CODE_PATH).'social/group_topics.php?id='.$group_id.'&topic_id='.$topic['id']
-                    )
+                    ), array('class'=>'title')
                 );
                 $actions = '';
                 if ($my_group_role == GROUP_USER_PERMISSION_ADMIN ||
@@ -1218,25 +1218,24 @@ class MessageManager
                 $date = '';
                 if ($topic['send_date'] != $topic['update_date']) {
                     if (!empty($topic['update_date'])) {
-                        $date .= '<div class="message-group-date" >
-                            <i>'.get_lang('LastUpdate').' '.date_to_str_ago($topic['update_date']).'</i></div>';
+                        $date .= '<i class="fa fa-calendar"></i> '.get_lang('LastUpdate').' '.date_to_str_ago($topic['update_date']);
                     }
                 } else {
-                    $date .= '<div class="message-group-date"> <i>'.get_lang('Created').' '.date_to_str_ago($topic['send_date']).'</i></div>';
+                    $date .= '<i class="fa fa-calendar"></i> '.get_lang('Created').' '.date_to_str_ago($topic['send_date']);
                 }
-                $html .= $date.$label.$actions;
+                $html .= '<div class="date">'. $label.' - '.$date.$actions . '</div>';
                 $html .= '</div>';
 
                 $image = $user_sender_info['avatar'];
 
-                $user_info = '<td valign="top"><a href="'.api_get_path(WEB_PATH).'main/social/profile.php?u='.$topic['user_sender_id'].'">'.$name.'&nbsp;</a>';
-                $user_info .= '<div class="message-group-author"><img src="'.$image.'" alt="'.$name.'"  width="32" height="32" title="'.$name.'" /></div>';
-                $user_info .= '</td>';
+                $user_info = '<div class="author"><img class="img-responsive img-circle" src="'.$image.'" alt="'.$name.'"  width="64" height="64" title="'.$name.'" /></div>';
+                $user_info .= '<div class="name"><a href="'.api_get_path(WEB_PATH).'main/social/profile.php?u='.$topic['user_sender_id'].'">'.$name.'&nbsp;</a></div>';
 
-                $html .= '<div class="col-md-2">';
+                $html .= '<div class="col-xs-4 col-md-2">';
                 $html .= $user_info;
                 $html .= '</div>';
                 $html .= '</div>';
+                $html .= '</div>';
 
                 $array_html[] = array($html);
             }
@@ -1280,29 +1279,23 @@ class MessageManager
         $current_user_id = api_get_user_id();
 
         $items_per_page = 50;
-
         $query_vars = array('id' => $group_id, 'topic_id' => $topic_id, 'topics_page_nr' => 0);
 
         // Main message
         $links = '';
         $main_content = '';
-
-        $items_page_nr = null;
-
         $html = '';
-
-        $delete_button = '';
-        if (api_is_platform_admin()) {
-            $delete_button = Display::url(Display::return_icon('delete.png', get_lang('Delete'), array(), ICON_SIZE_SMALL), 'group_topics.php?action=delete&id='.$group_id.'&topic_id='.$topic_id);
-        }
-        $html .= Display::page_subheader(Security::remove_XSS($main_message['title'].$delete_button, STUDENT, true));
+        $items_page_nr = null;
 
         $user_sender_info = api_get_user_info($main_message['user_sender_id']);
         $files_attachments = self::get_links_message_attachment_files($main_message['id']);
         $name = $user_sender_info['complete_name'];
 
         $topic_page_nr = isset($_GET['topics_page_nr']) ? intval($_GET['topics_page_nr']) : null;
-        $links.= '<div id="message-reply-link">';
+        
+        $links.= '<div class="pull-right">';
+        $links.= '<div class="btn-group">';
+        
         if (($my_group_role == GROUP_USER_PERMISSION_ADMIN ||
             $my_group_role == GROUP_USER_PERMISSION_MODERATOR) ||
             $main_message['user_sender_id'] == $current_user_id
@@ -1319,22 +1312,25 @@ class MessageManager
                 'items_page_nr' => $items_page_nr,
                 'topic_id' => $main_message['id']
             ]);
-
+            if (api_is_platform_admin()) {
+                $links .= Display::url(
+                        Display::returnFontAwesomeIcon('trash'),
+                        'group_topics.php?action=delete&id='.$group_id.'&topic_id='.$topic_id,
+                        [
+                            'class' => 'btn btn-default'
+                        ]
+                        );
+            }            
             $links .= Display::url(
-                Display::return_icon(
-                    'edit.png',
-                    get_lang('Edit'),
-                    array(),
-                    ICON_SIZE_SMALL
-                ),
-                $urlEdit,
-                [
-                    'class' => 'ajax btn btn-default',
-                    'title' => get_lang('Edit'),
-                    'data-title' => get_lang('Edit'),
-                    'data-size' => 'lg'
-                ]
-            );
+                        Display::returnFontAwesomeIcon('pencil'),
+                        $urlEdit,
+                        [
+                            'class' => 'btn btn-default ajax',
+                            'title' => get_lang('Edit'),
+                            'data-title' => get_lang('Edit'),
+                            'data-size' => 'lg'
+                        ]
+                    );
         }
 
         $urlReply = api_get_path(WEB_CODE_PATH);
@@ -1350,36 +1346,39 @@ class MessageManager
         ]);
 
         $links .= Display::url(
-            Display::return_icon('talk.png', get_lang('Reply')),
+            Display::returnFontAwesomeIcon('commenting'),
             $urlReply,
             [
-                'class' => 'ajax btn btn-default',
+                'class' => 'btn btn-default ajax',
                 'title' => get_lang('Reply'),
                 'data-title' => get_lang('Reply'),
                 'data-size' => 'lg'
             ]
         );
-
         $links.= '</div>';
-
+        $links.= '</div>';
+        
+        $title = '<h4>'.Security::remove_XSS($main_message['title'].$delete_button, STUDENT, true).$links.'</h4>';
+        
         $userPicture = $user_sender_info['avatar'];
-        $main_content.= '<div class="message-group-author">
-                         <img src="'.$userPicture.'" alt="'.$name.'"  width="32" height="32" title="'.$name.'" /></div>';
-        $user_link = '<a href="'.api_get_path(WEB_PATH).'main/social/profile.php?u='.$main_message['user_sender_id'].'">'.$name.'&nbsp;</a>';
+        $main_content .= '<div class="avatar-author">';
+        $main_content .= '<img src="'.$userPicture.'" alt="'.$name.'" class="img-responsive img-circle" width="64" height="64" title="'.$name.'" />';
+        $main_content .= '<a href="'.api_get_path(WEB_PATH).'main/social/profile.php?u='.$main_message['user_sender_id'].'">'.$name.'</a>';
+        $main_content .= '</div>';
 
         $date = '';
         if ($main_message['send_date'] != $main_message['update_date']) {
             if (!empty($main_message['update_date'])) {
-                $date = '<div class="message-group-date"> '.get_lang('LastUpdate').' '.date_to_str_ago($main_message['update_date']).'</div>';
+                $date = '<div class="message-date"> '.get_lang('LastUpdate').' '.date_to_str_ago($main_message['update_date']).'</div>';
             }
         } else {
-            $date = '<div class="message-group-date"> '.get_lang('Created').' '.date_to_str_ago($main_message['send_date']).'</div>';
+            $date = '<div class="message-date"> '.get_lang('Created').' '.date_to_str_ago($main_message['send_date']).'</div>';
         }
         $attachment = '<div class="message-attach">'.(!empty($files_attachments) ? implode('<br />', $files_attachments) : '').'</div>';
-        $main_content.= '<div class="message-group-content">'.$links.$user_link.' '.$date.$main_message['content'].$attachment.'</div>';
-        $main_content = Security::remove_XSS($main_content, STUDENT, true);
+        $main_content.= '<div class="message-content"> '.$date.$main_message['content'].$attachment.'</div>';
+        //$main_content = Security::remove_XSS($main_content, STUDENT, true);
 
-        $html .= Display::div(Display::div(Display::div($main_content, array('class' => 'group_social_sub_item', 'style' => 'background-color:#fff;')), array('class' => 'group_social_item')), array('class' => 'group_social_grid'));
+        $html .= Display::div(Display::div($title . $main_content, array('class' => 'message-topic')), array('class' => 'sm-groups-message'));
 
         $topic_id = $main_message['id'];
 
@@ -1392,35 +1391,37 @@ class MessageManager
                 }
                 $items_page_nr = isset($_GET['items_'.$topic['id'].'_page_nr']) ? intval($_GET['items_'.$topic['id'].'_page_nr']) : null;
                 $links = '';
+                $links.= '<div class="pull-right">';
                 $html_items = '';
                 $user_sender_info = api_get_user_info($topic['user_sender_id']);
                 $files_attachments = self::get_links_message_attachment_files($topic['id']);
                 $name = $user_sender_info['complete_name'];
 
-                $links.= '<div id="message-reply-link">';
+                $links.= '<div class="btn-group">';
                 if (($my_group_role == GROUP_USER_PERMISSION_ADMIN || $my_group_role == GROUP_USER_PERMISSION_MODERATOR) || $topic['user_sender_id'] == $current_user_id) {
-                    $links.= '<a href="'.api_get_path(WEB_CODE_PATH).'social/message_for_group_form.inc.php?height=400&width=800&&user_friend='.$current_user_id.'&group_id='.$group_id.'&message_id='.$topic['id'].'&action=edit_message_group&anchor_topic=topic_'.$topic_id.'&topics_page_nr='.$topic_page_nr.'&items_page_nr='.$items_page_nr.'&topic_id='.$topic_id.'" class="ajax btn" data-size="lg" data-title="'.get_lang('Edit').'" title="'.get_lang('Edit').'">'.
-                        Display :: return_icon('edit.png', get_lang('Edit'), array(), ICON_SIZE_SMALL).'</a>';
+                    $links.= '<a href="'.api_get_path(WEB_CODE_PATH).'social/message_for_group_form.inc.php?height=400&width=800&&user_friend='.$current_user_id.'&group_id='.$group_id.'&message_id='.$topic['id'].'&action=edit_message_group&anchor_topic=topic_'.$topic_id.'&topics_page_nr='.$topic_page_nr.'&items_page_nr='.$items_page_nr.'&topic_id='.$topic_id.'" class="ajax btn btn-default" data-size="lg" data-title="'.get_lang('Edit').'" title="'.get_lang('Edit').'">'.
+                    Display::returnFontAwesomeIcon('pencil') . '</a>';
                 }
-                $links.= '&nbsp;&nbsp;<a href="'.api_get_path(WEB_CODE_PATH).'social/message_for_group_form.inc.php?height=400&width=800&&user_friend='.api_get_user_id().'&group_id='.$group_id.'&message_id='.$topic['id'].'&action=reply_message_group&anchor_topic=topic_'.$topic_id.'&topics_page_nr='.$topic_page_nr.'&items_page_nr='.$items_page_nr.'&topic_id='.$topic_id.'" class="ajax btn" data-size="lg" data-title="'.get_lang('Reply').'" title="'.get_lang('Reply').'">';
-                $links.= Display :: return_icon('talk.png', get_lang('Reply')).'</a>';
+                $links.= '<a href="'.api_get_path(WEB_CODE_PATH).'social/message_for_group_form.inc.php?height=400&width=800&&user_friend='.api_get_user_id().'&group_id='.$group_id.'&message_id='.$topic['id'].'&action=reply_message_group&anchor_topic=topic_'.$topic_id.'&topics_page_nr='.$topic_page_nr.'&items_page_nr='.$items_page_nr.'&topic_id='.$topic_id.'" class="ajax btn btn-default" data-size="lg" data-title="'.get_lang('Reply').'" title="'.get_lang('Reply').'">';
+                $links.= Display::returnFontAwesomeIcon('commenting') . '</a>';
+                $links.= '</div>';
                 $links.= '</div>';
 
                 $userPicture = $user_sender_info['avatar'];
-
-                $html_items.= '<div class="message-group-author"><img src="'.$userPicture.'" alt="'.$name.'"  width="32" height="32" title="'.$name.'" /></div>';
-                $user_link = '<a href="'.api_get_path(WEB_PATH).'main/social/profile.php?u='.$topic['user_sender_id'].'">'.$name.'&nbsp;</a>';
+                $user_link = '<a href="'.api_get_path(WEB_PATH).'main/social/profile.php?u='.$topic['user_sender_id'].'">'.$name.'&nbsp</a>';
+                $html_items.= '<div class="avatar-author"><img src="'.$userPicture.'" alt="'.$name.'" class="img-responsive img-circle"  width="64" height="64" title="'.$name.'" />'.$user_link.'</div>';
+                
 
                 $date = '';
                 if ($topic['send_date'] != $topic['update_date']) {
                     if (!empty($topic['update_date'])) {
-                        $date = '<div class="message-group-date"> '.get_lang('LastUpdate').' '.date_to_str_ago($topic['update_date']).'</div>';
+                        $date = '<div class="message-date"> '.get_lang('LastUpdate').' '.date_to_str_ago($topic['update_date']).'</div>';
                     }
                 } else {
-                    $date = '<div class="message-group-date"> '.get_lang('Created').' '.date_to_str_ago($topic['send_date']).'</div>';
+                    $date = '<div class="message-date"> '.get_lang('Created').' '.date_to_str_ago($topic['send_date']).'</div>';
                 }
                 $attachment = '<div class="message-attach">'.(!empty($files_attachments) ? implode('<br />', $files_attachments) : '').'</div>';
-                $html_items.= '<div class="message-group-content">'.$links.$user_link.' '.$date.Security::remove_XSS($topic['content'], STUDENT, true).$attachment.'</div>';
+                $html_items.= '<div class="message-content">'.$links.' '.$date.Security::remove_XSS($topic['content'], STUDENT, true).$attachment.'</div>';
 
                 $base_padding = 20;
 
@@ -1429,12 +1430,8 @@ class MessageManager
                 } else {
                     $indent = intval($topic['indent_cnt']) * $base_padding + $base_padding;
                 }
-                $class = 'group_social_sub_item';
-                if (isset($message_id) && $message_id == $topic['id']) {
-                    $class .= ' group_social_sub_item_highlight';
-                }
 
-                $html_items = Display::div($html_items, array('class' => $class, 'id' => 'msg_'.$topic['id']));
+                $html_items = Display::div($html_items, array('class' => 'message-post', 'id' => 'msg_'.$topic['id']));
                 $html_items = Display::div($html_items, array('class' => '', 'style' => 'margin-left:'.$indent.'px'));
                 $array_html_items[] = array($html_items);
             }
@@ -1443,8 +1440,8 @@ class MessageManager
             $visibility = array(true, true, true, false);
 
             $style_class = array(
-                'item' => array('class' => 'group_social_item'),
-                'main' => array('class' => 'group_social_grid'),
+                'item' => array('class' => 'user-post'),
+                'main' => array('class' => 'user-list'),
             );
             if (!empty($array_html_items)) {
                 $html .= Display::return_sortable_grid(

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

@@ -612,14 +612,14 @@ class SocialManager extends UserManager
             $userGroupImage = $userGroup->get_picture_group(
                 $group_id,
                 $group_info['picture'],
-                160,
+                128,
                 GROUP_IMAGE_SIZE_BIG
             );
 
             $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('user_group', $group_info);
             $template->assign(
                 'user_is_group_admin',
                 $userGroup->is_group_admin(

+ 25 - 42
main/inc/lib/usergroup.lib.php

@@ -1415,7 +1415,7 @@ class UserGroup extends Model
             if (file_exists($file) && !is_dir($file)) {
                 $picture['file'] = $image_array['dir'].$picture_file;
             } else {
-                $picture['file'] = Display::returnIconPath('unknown_group.png');
+                $picture['file'] = Display::returnIconPath('group_na.png',64);
             }
         }
         return $picture;
@@ -1998,34 +1998,26 @@ class UserGroup extends Model
             case GROUP_USER_PERMISSION_READER:
                 // I'm just a reader
                 $relation_group_title = get_lang('IAmAReader');
-                $links .=  '<li><a href="group_invitation.php?id='.$group_id.'">'.
-                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends'), array('hspace'=>'6')).
-                    '<span class="'.($show=='invite_friends'?'social-menu-text-active':'social-menu-text4').'" >'.
-                    get_lang('InviteFriends').'</span></a></li>';
-
+                $links .=  '<li class="'. ($show == 'invite_friends' ? 'active' : '') .'"><a href="group_invitation.php?id='.$group_id.'">'.
+                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends')) . get_lang('InviteFriends') . '</a></li>';
+                $links .=  '<li><a href="group_view.php?id='.$group_id.'&action=leave&u='.api_get_user_id().'">'.
+                            Display::return_icon('group_leave.png', get_lang('LeaveGroup')) . get_lang('LeaveGroup') . '</a></li>';
                 if (UserGroup::canLeave($group_info)) {
                     $links .=  '<li><a href="group_view.php?id='.$group_id.'&action=leave&u='.api_get_user_id().'">'.
-                        Display::return_icon('group_leave.png', get_lang('LeaveGroup'), array('hspace'=>'6')).
-                        '<span class="social-menu-text4" >'.get_lang('LeaveGroup').'</span></a></li>';
+                        Display::return_icon('group_leave.png', get_lang('LeaveGroup')) . get_lang('LeaveGroup') . '</a></li>';
                 }
-
                 break;
             case GROUP_USER_PERMISSION_ADMIN:
                 $relation_group_title = get_lang('IAmAnAdmin');
-                $links .=  '<li><a href="group_edit.php?id='.$group_id.'">'.
-                            Display::return_icon('group_edit.png', get_lang('EditGroup'), array('hspace'=>'6')).'<span class="'.($show=='group_edit'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('EditGroup').'</span></a></li>';
-                $links .=  '<li><a href="group_waiting_list.php?id='.$group_id.'">'.
-                            Display::return_icon('waiting_list.png', get_lang('WaitingList'), array('hspace'=>'6')).'<span class="'.($show=='waiting_list'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('WaitingList').'</span></a></li>';
-                $links .=  '<li><a href="group_invitation.php?id='.$group_id.'">'.
-                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends'), array('hspace'=>'6')).'<span class="'.($show=='invite_friends'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('InviteFriends').'</span></a></li>';
-
+                $links .=  '<li class="'. ($show == 'group_edit' ? 'active' : '') .'"><a href="group_edit.php?id='.$group_id.'">'.
+                            Display::return_icon('group_edit.png', get_lang('EditGroup')) . get_lang('EditGroup') . '</a></li>';
+                $links .=  '<li class="'. ($show == 'member_list' ? 'active' : '') .'"><a href="group_waiting_list.php?id='.$group_id.'">'.
+                            Display::return_icon('waiting_list.png', get_lang('WaitingList')) . get_lang('WaitingList') . '</a></li>';
+                $links .=  '<li class="'. ($show == 'invite_friends' ? 'active' : '') .'"><a href="group_invitation.php?id='.$group_id.'">'.
+                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends')) . get_lang('InviteFriends') . '</a></li>';
                 if (UserGroup::canLeave($group_info)) {
                     $links .= '<li><a href="group_view.php?id='.$group_id.'&action=leave&u='.api_get_user_id().'">'.
-                        Display::return_icon(
-                            'group_leave.png',
-                            get_lang('LeaveGroup'),
-                            array('hspace' => '6')
-                        ).'<span class="social-menu-text4" >'.get_lang('LeaveGroup').'</span></a></li>';
+                        Display::return_icon('group_leave.png', get_lang('LeaveGroup')) . get_lang('LeaveGroup') . '</a></li>';
                 }
                 break;
             case GROUP_USER_PERMISSION_PENDING_INVITATION:
@@ -2041,47 +2033,38 @@ class UserGroup extends Model
                 //$links .=  '<li><a href="group_members.php?id='.$group_id.'">'.		Display::return_icon('member_list.png', get_lang('MemberList'), array('hspace'=>'6')).'<span class="'.($show=='member_list'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('MemberList').'</span></a></li>';
                 if ($group_info['visibility'] == GROUP_PERMISSION_CLOSED) {
                     $links .=  '<li><a href="group_waiting_list.php?id='.$group_id.'">'.
-                                Display::return_icon('waiting_list.png', get_lang('WaitingList'), array('hspace'=>'6')).'<span class="'.($show=='waiting_list'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('WaitingList').'</span></a></li>';
+                                Display::return_icon('waiting_list.png', get_lang('WaitingList')) . get_lang('WaitingList') . '</a></li>';
                 }
                 $links .=  '<li><a href="group_invitation.php?id='.$group_id.'">'.
-                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends'), array('hspace'=>'6')).'<span class="'.($show=='invite_friends'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('InviteFriends').'</span></a></li>';
+                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends')) . get_lang('InviteFriends') . '</a></li>';
                 if (UserGroup::canLeave($group_info)) {
                     $links .=  '<li><a href="group_view.php?id='.$group_id.'&action=leave&u='.api_get_user_id().'">'.
-                        Display::return_icon(
-                            'group_leave.png',
-                            get_lang('LeaveGroup'),
-                            array('hspace' => '6')
-                        ).'<span class="social-menu-text4" >'.get_lang('LeaveGroup').'</span></a></li>';
+                        Display::return_icon('group_leave.png', get_lang('LeaveGroup')) . get_lang('LeaveGroup') . '</a></li>';
                 }
                 break;
             case GROUP_USER_PERMISSION_HRM:
                 $relation_group_title = get_lang('IAmAHRM');
                 $links .= '<li><a href="'.api_get_path(WEB_CODE_PATH).'social/message_for_group_form.inc.php?view_panel=1&height=400&width=610&&user_friend='.api_get_user_id().'&group_id='.$group_id.'&action=add_message_group" class="ajax" title="'.get_lang('ComposeMessage').'" data-size="lg" data-title="'.get_lang('ComposeMessage').'">'.
-                            Display::return_icon('new-message.png', get_lang('NewTopic'), array('hspace'=>'6')).'<span class="social-menu-text4" >'.get_lang('NewTopic').'</span></a></li>';
+                            Display::return_icon('new-message.png', get_lang('NewTopic')) . get_lang('NewTopic') . '</a></li>';
                 $links .=  '<li><a href="group_view.php?id='.$group_id.'">'.
-                            Display::return_icon('message_list.png', get_lang('MessageList'), array('hspace'=>'6')).'<span class="'.($show=='messages_list'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('MessageList').'</span></a></li>';
+                            Display::return_icon('message_list.png', get_lang('MessageList')) . get_lang('MessageList') . '</a></li>';
                 $links .=  '<li><a href="group_invitation.php?id='.$group_id.'">'.
-                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends'), array('hspace'=>'6')).'<span class="'.($show=='invite_friends'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('InviteFriends').'</span></a></li>';
+                            Display::return_icon('invitation_friend.png', get_lang('InviteFriends')) . get_lang('InviteFriends') . '</a></li>';
                 $links .=  '<li><a href="group_members.php?id='.$group_id.'">'.
-                            Display::return_icon('member_list.png', get_lang('MemberList'), array('hspace'=>'6')).'<span class="'.($show=='member_list'?'social-menu-text-active':'social-menu-text4').'" >'.get_lang('MemberList').'</span></a></li>';
+                            Display::return_icon('member_list.png', get_lang('MemberList')) . get_lang('MemberList') . '</a></li>';
                 $links .=  '<li><a href="group_view.php?id='.$group_id.'&action=leave&u='.api_get_user_id().'">'.
-                            Display::return_icon('delete_data.gif', get_lang('LeaveGroup'), array('hspace'=>'6')).'<span class="social-menu-text4" >'.get_lang('LeaveGroup').'</span></a></li>';
+                            Display::return_icon('delete_data.gif', get_lang('LeaveGroup')) . get_lang('LeaveGroup') . '</a></li>';
                 break;
             default:
                 //$links .=  '<li><a href="groups.php?id='.$group_id.'&action=join&u='.api_get_user_id().'">'.Display::return_icon('addd.gif', get_lang('JoinGroup'), array('hspace'=>'6')).'<span class="social-menu-text4" >'.get_lang('JoinGroup').'</a></span></li>';
                 break;
         }
-
         if (!empty($links)) {
-            $html .= '<div class="panel panel-default">';
-            $html .= '<div class="panel-body">';
-            $html .= '<ul class="nav nav-pills nav-stacked">';
-            $html .= $links;
-            $html .= '</ul>';
-            $html .= '</div>';
-            $html .= '</div>';
+            $list .= '<ul class="nav nav-pills">';
+            $list .= $links;
+            $list .= '</ul>';
+            $html .= Display::panelCollapse(get_lang('SocialGroups'), $list, 'sm-groups', array(), 'groups-acordeon', 'groups-collapse');    
         }
-
         return $html;
     }
 

+ 11 - 4
main/social/group_topics.php

@@ -49,7 +49,12 @@ if (isset($_REQUEST['action']) && $_REQUEST['action'] == 'delete') {
         exit;
     }
 }
-
+// My friends
+$friend_html = SocialManager::listMyFriendsBlock(
+    $user_id,
+    $link_shared,
+    $show_full_profile
+);
 $content = null;
 $social_right_content = '';
 
@@ -134,7 +139,7 @@ function add_image_form() {
 	filepaths.appendChild(elem1);
 	id_elem1 = "filepath_"+counter_image;
 	id_elem1 = "\'"+id_elem1+"\'";
-	document.getElementById("filepath_"+counter_image).innerHTML = "<input type=\"file\" name=\"attach_"+counter_image+"\"  size=\"20\" />&nbsp;<a href=\"javascript:remove_image_form("+id_elem1+")\"><img src=\"'.Display::returnIconPath('delete.gif').'\"></a>";
+	document.getElementById("filepath_"+counter_image).innerHTML = "<input type=\"file\" name=\"attach_"+counter_image+"\"  size=\"20\" />&nbsp;<a href=\"javascript:remove_image_form("+id_elem1+")\"><img src=\"'.Display::returnIconPath('delete.png').'\"></a>";
 
 	if (filepaths.childNodes.length == 3) {
 		var link_attach = document.getElementById("link-more-attach");
@@ -203,7 +208,7 @@ $show_message = null;
 if (!empty($show_message)) {
     $social_right_content .= Display::return_message($show_message, 'confirmation');
 }
-$social_right_content .= MessageManager::display_message_for_group(
+$group_message = MessageManager::display_message_for_group(
     $group_id,
     $topic_id,
     $is_member,
@@ -217,7 +222,9 @@ $tpl->setHelp('Groups');
 // Block Social Avatar
 SocialManager::setSocialUserBlock($tpl, $user_id, 'groups', $group_id);
 $tpl->assign('social_menu_block', $social_menu_block);
+$tpl->assign('social_friend_block', $friend_html);
+$tpl->assign('group_message', $group_message);
 $tpl->assign('social_right_content', $social_right_content);
 $tpl->assign('content', $content);
-$social_layout = $tpl->get_template('social/home.tpl');
+$social_layout = $tpl->get_template('social/groups_topics.tpl');
 $tpl->display($social_layout);

+ 24 - 6
main/social/group_view.php

@@ -119,6 +119,7 @@ $usergroup = new UserGroup();
 
 if ($group_id != 0) {
     $group_info = $usergroup->get($group_id);
+    
 
     $interbreadcrumb[]= array ('url' =>'#','name' => $group_info['name']);
 
@@ -160,6 +161,7 @@ if ($group_id != 0) {
 }
 $create_thread_link = '';
 $social_right_content = null;
+$socialForum = '';
 
 $group_info = $usergroup->get($group_id);
 
@@ -188,7 +190,7 @@ if ($is_group_member || $group_info['visibility'] == GROUP_PERMISSION_OPEN) {
             $social_right_content .=  '<a class="btn" href="group_view.php?id='.$group_id.'&action=join&u='.api_get_user_id().'">'.
                 get_lang('YouHaveBeenInvitedJoinNow').'</a>';
         }
-        $social_right_content .=  '<br /><br />';
+        $social_right_content .=  '<br />';
     }
     $content = MessageManager::display_messages_for_group($group_id);
     if ($is_group_member) {
@@ -234,9 +236,15 @@ if ($is_group_member || $group_info['visibility'] == GROUP_PERMISSION_OPEN) {
     }
     $members = $usergroup->get_users_by_group($group_id, true);
     $member_content = '';
-
+    
+    // My friends
+    $friend_html = SocialManager::listMyFriendsBlock(
+        $user_id,
+        $link_shared,
+        $show_full_profile
+    );
+    
     // Members
-
     if (count($members) > 0) {
         if ($role == GROUP_USER_PERMISSION_ADMIN) {
             $member_content .= Display::url(
@@ -244,6 +252,8 @@ if ($is_group_member || $group_info['visibility'] == GROUP_PERMISSION_OPEN) {
                 'group_members.php?id='.$group_id
             );
         }
+        $member_content .= '<div class="user-list">';
+        $member_content .= '<div class="row">';
         foreach ($members as $member) {
             // if is a member
             if (in_array($member['relation_type'],
@@ -260,19 +270,25 @@ if ($is_group_member || $group_info['visibility'] == GROUP_PERMISSION_OPEN) {
 
                 $userPicture = UserManager::getUserPicture($member['id']);
 
-                $member_content .= '<div class="">';
+                $member_content .= '<div class="col-md-2">';
+                $member_content .= '<div class="items-user">';
                 $member_name = Display::url(api_get_person_name(cut($member['firstname'],15),cut($member['lastname'],15)).'&nbsp;'.$icon, $member['user_info']['profile_url']);
-                $member_content .= Display::div('<img class="social-groups-image img-circle" src="'.$userPicture.'"/>&nbsp'.$member_name);
+                $member_content .= Display::div('<img class="img-circle" src="'.$userPicture.'"/>', array('class' => 'avatar'));
+                $member_content .= Display::div($member_name, array('class' => 'name'));
+                $member_content .= '</div>';
                 $member_content .= '</div>';
             }
         }
+        $member_content .= '</div>';
+        $member_content .= '</div>';
     }
 
     if (!empty($create_thread_link)) {
         $create_thread_link =  Display::div($create_thread_link, array('class'=>'pull-right'));
     }
     $headers = array(get_lang('Discussions'), get_lang('Members'));
-    $social_right_content .= Display::tabs($headers, array($content, $member_content),'tabs');
+    $socialForum = Display::tabs($headers, array($content, $member_content),'tabs');
+    
 } else {
     // if I already sent an invitation message
     if (!in_array(
@@ -299,7 +315,9 @@ $tpl->setHelp('Groups');
 $tpl->assign('create_link', $create_thread_link);
 $tpl->assign('is_group_member', $is_group_member);
 $tpl->assign('group_info', $group_info);
+$tpl->assign('social_friend_block', $friend_html);
 $tpl->assign('social_menu_block', $social_menu_block);
+$tpl->assign('social_forum', $socialForum);
 $tpl->assign('social_right_content', $social_right_content);
 $social_layout = $tpl->get_template('social/group_view.tpl');
 $tpl->display($social_layout);

+ 1 - 1
main/template/default/social/avatar_block.tpl

@@ -1,6 +1,6 @@
 <div class="social-profile text-center">
     {% if show_group %}
-        <img src="{{ user_group_image.file }}" class="img-profile img-responsive img-circle">
+        <img src="{{ user_group_image.file }}" class="img-responsive">
         <div class="caption">
             <h4 class="group-title">
                 <a href="{{ _p.web_main ~ 'social/group_view.php?id=' ~ group_id }}">{{ user_group.name }}</a>

+ 33 - 2
main/template/default/social/group_view.tpl

@@ -6,10 +6,33 @@
         <div class="sm-groups">
             {{ social_avatar_block }}
             {{ social_menu_block }}
+            
+            <!-- Block chat list -->    
+            <div class="chat-friends">
+                <div class="panel-group" id="blocklistFriends" role="tablist" aria-multiselectable="true">
+                    <div class="panel panel-default">
+                        <div class="panel-heading" role="tab" id="headingOne">
+                            <h4 class="panel-title">
+                                <a role="button" data-toggle="collapse" data-parent="#blocklistFriends" href="#listFriends" aria-expanded="true" aria-controls="listFriends">
+                                    {{ "SocialFriend" | get_lang }}
+                                </a>
+                            </h4>
+                        </div>
+                        <div id="listFriends" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+                            <div class="panel-body">
+                                {{ social_friend_block }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
         </div>
     </div>
     <div class="col-md-9">
+        <div class="sm-groups-content">
         {{ create_link }}
+        
         {% if is_group_member == false %}
             <div class="social-group-details-info">
                 {{ 'Privacy' | get_lang }}
@@ -21,12 +44,20 @@
                 {% endif %}
             </div>
         {% endif %}
-
+        
+        <div class="group-info">
+            <h2 class="title">{{ group_info.name }}</h2>
+            <p class="description">{{ group_info.description }}</p>
+        </div>
+        <div class="group-list">
+            {{ social_forum }}
+        </div>
+        
         {{ social_right_content }}
 
         <div id="display_response_id" class="col-md-5"></div>
         {{ social_auto_extend_link }}
+        </div>
     </div>
-
 </div>
 {% endblock %}

+ 37 - 0
main/template/default/social/groups_topics.tpl

@@ -0,0 +1,37 @@
+{% extends template ~ "/layout/layout_1_col.tpl" %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-md-3">
+            <div class="sm-groups">
+            {{ social_avatar_block }}
+            {{ social_menu_block }}
+            
+            <!-- Block chat list -->    
+            <div class="chat-friends">
+                <div class="panel-group" id="blocklistFriends" role="tablist" aria-multiselectable="true">
+                    <div class="panel panel-default">
+                        <div class="panel-heading" role="tab" id="headingOne">
+                            <h4 class="panel-title">
+                                <a role="button" data-toggle="collapse" data-parent="#blocklistFriends" href="#listFriends" aria-expanded="true" aria-controls="listFriends">
+                                    {{ "SocialFriend" | get_lang }}
+                                </a>
+                            </h4>
+                        </div>
+                        <div id="listFriends" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+                            <div class="panel-body">
+                                {{ social_friend_block }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+            
+        </div>
+        <div class="col-md-9">
+            {{ group_message }}
+            {{ social_right_content }}
+        </div>
+    </div>
+{% endblock %}

Some files were not shown because too many files changed in this diff