瀏覽代碼

fix update css tpl webRTC BT#7683

aragonc 9 年之前
父節點
當前提交
5f7770b026

+ 57 - 0
app/Resources/public/css/base.css

@@ -6273,6 +6273,63 @@ a.sessionView {
 #gradebook_list .centered .badge-group {
     width: auto;
 }
+/* video chat */
+#chat-local-video video,
+#chat-remote-video video{
+  border-radius: 5px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  box-shadow: 0 2px 3px #C8C8C8;
+  border: 1px solid #e6e6e6;
+  background-color:#fff;
+  padding: 5px;
+}
+#chat-local-video video,
+#chat-remote-video video{
+  width: 100%;
+  min-width: 100%;
+  display: block;
+}
+#chat-video-panel .username-local{
+  text-align: center;
+  padding-bottom: 5px;
+  padding-top:5px;
+  margin-top:10px;
+  margin-bottom:10px;
+  color: #666666;
+}
+#chat-video-panel .chat-user-remote{
+  text-align: center;
+  padding-bottom: 5px;
+  padding-top:5px;
+  color: #666666;
+}
+#chat-video-panel .title{
+  display: block;
+  color: #52606F;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  font-size: 20px;
+  border-bottom: 1px solid #E5E5E5;
+}
+#chat-video-panel #listFriends .list-group-item{
+  border: none;
+  padding: 6px;
+  font-size: 12px;
+}
+#chat-video-panel #listFriends a{
+  display: block;
+}
+#chat-video-panel #listFriends .status{
+  float: right;
+}
+#chat-video-panel #listFriends .user-image{
+  width: 32px;
+  height: 32px;
+  margin-right: 5px;
+}
 /* CSS NEW TOP ******************************************************************************/
 /* CSS Responsive */
 @media (min-width: 1025px) and (max-width: 1200px) {

+ 12 - 10
main/inc/lib/javascript/chat/css/chat.css

@@ -36,13 +36,11 @@
 	cursor:pointer;
 }
 .user_status_main {
-	width:30px;
+	width:18px;
 	display:inline;
 	float:left;
 	padding: 0px 4px 0px 4px;	
 }
-
-
 .chatbox {
 	position: fixed;
 	position:expression("absolute");
@@ -50,23 +48,27 @@
 	display:none;
 	z-index: 9000;
 }
-
 .user_status {
-	width:16px;
-	display:inline;
-	float:left;
+	width:8px;
+	display:inline-block;
+  margin-right: 5px;
+}
+.chatimage{
+  display: inline-block;
+  margin-right: 5px;
 }
 
 .chatboxtitle {
 	font-weight: normal;
-	float: left;
-	font-size: 12px;
-	width: 130px;
+	display: inline-block;
+	font-size: 10px;
+	width: 100px;
 	cursor:pointer;
   overflow: hidden;
   padding-left: 2px;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 10px;
 }
 
 .chatboxhead {

+ 12 - 5
main/inc/lib/javascript/chat/js/chat.js

@@ -325,8 +325,8 @@ function restructureChatBoxes() {
  * @param status
  *
  **/
-function chatWith(user_id, user_name, status) {
-	createChatBox(user_id, user_name, 0, status);
+function chatWith(user_id, user_name, status, userImage) {
+	createChatBox(user_id, user_name, 0, status, userImage);
 	$("#chatbox_"+user_id+" .chatboxtextarea").focus();
 }
 
@@ -340,7 +340,7 @@ function chatNotYetWith(message) {
 /**
  * Creates a div
  */
-function createChatBox(user_id, chatboxtitle, minimizeChatBox, online) {
+function createChatBox(user_id, chatboxtitle, minimizeChatBox, online, userImage) {
 	if ($("#chatbox_"+user_id).length > 0) {
 		if ($("#chatbox_"+user_id).css('display') == 'none') {
 			$("#chatbox_"+user_id).css('display','block');
@@ -350,7 +350,7 @@ function createChatBox(user_id, chatboxtitle, minimizeChatBox, online) {
 		return;
 	}
 
-	user_is_online = return_online_user(user_id, online);
+	user_is_online = return_online_user(user_id, online, userImage);
 
 	var chatbox = $('<div>')
 		.attr({
@@ -363,11 +363,18 @@ function createChatBox(user_id, chatboxtitle, minimizeChatBox, online) {
 		.addClass('chatboxhead')
 		.append(user_is_online);
 
+    $('<div>')
+        .addClass('chatimage')
+        .append('<img src="'+userImage+'"/>')
+        .appendTo(chatboxHead);
+
 	$('<div>')
 		.addClass('chatboxtitle')
 		.append(chatboxtitle)
 		.appendTo(chatboxHead);
 
+
+
 	var chatboxoptions = $('<div>')
 		.addClass('chatboxoptions')
 		.appendTo(chatboxHead);
@@ -508,7 +515,7 @@ function createChatBox(user_id, chatboxtitle, minimizeChatBox, online) {
  * @param int       user id
  * @param int       status  1 or 0
  */
-function return_online_user(user_id, status) {
+function return_online_user(user_id, status,userImage) {
 	var div_wrapper = $("<div />" );
 	var new_div = $("<div />" );
 

+ 13 - 3
main/inc/lib/javascript/chat/video.php

@@ -14,6 +14,12 @@ if ($room === false) {
     Header::location(api_get_path(WEB_PATH));
 }
 
+$friend_html = SocialManager::listMyFriendsBlock(
+    $user_id,
+    $link_shared,
+    $show_full_profile
+);
+
 $isSender = $room['from_user'] == api_get_user_id();
 $isReceiver = $room['to_user'] == api_get_user_id();
 
@@ -26,18 +32,22 @@ if ($isSender) {
 } elseif ($isReceiver) {
     $chatUser = api_get_user_info($room['from_user']);
 }
-
+$idUserLocal = api_get_user_id();
+$userLocal = api_get_user_info($idUserLocal,true);
 $htmlHeadXtra[] = '<script type="text/javascript" src="'
     . api_get_path(WEB_PATH) . 'web/assets/simplewebrtc/latest.js'
     . '"></script>' . "\n";
 
 $template = new Template();
-$template->assign('room_name', $room['room_name']);
+$template->assign('room', $room);
 $template->assign('chat_user', $chatUser);
+$template->assign('user_local', $userLocal);
+$template->assign('block_friends', $friend_html);
 
 $content = $template->fetch('default/chat/video.tpl');
 
-$template->assign('header', $room['room_name']);
+//$template->assign('header', $room['room_name']);
 $template->assign('content', $content);
 $template->assign('message', Display::return_message(get_lang('BroswerDoesNotSupportWebRTC'), 'warning'));
 $template->display_one_col_template();
+//$template->display_no_layout_template();

+ 57 - 0
main/inc/lib/social.lib.php

@@ -1615,6 +1615,63 @@ class SocialManager extends UserManager
         return $friendHtml;
     }
 
+    /**
+     * @param int $user_id
+     * @param $link_shared
+     * @param $show_full_profile
+     * @return string
+     */
+    public static function listMyFriendsBlock($user_id, $link_shared, $show_full_profile)
+    {
+        //SOCIALGOODFRIEND , USER_RELATION_TYPE_FRIEND, USER_RELATION_TYPE_PARENT
+        $friends = SocialManager::get_friends($user_id, USER_RELATION_TYPE_FRIEND);
+        $number_of_images = 30;
+        $number_friends = count($friends);
+        $friendHtml = '';
+
+        if ($number_friends != 0) {
+
+            $friendHtml.= '<ul class="list-group">';
+            $j = 1;
+            for ($k=0; $k < $number_friends; $k++) {
+                if ($j > $number_of_images) break;
+
+                if (isset($friends[$k])) {
+                    $friend = $friends[$k];
+                    $name_user = api_get_person_name($friend['firstName'], $friend['lastName']);
+                    $user_info_friend = api_get_user_info($friend['friend_user_id'], true);
+
+                    if ($user_info_friend['user_is_online']) {
+                        $statusIcon = Display::return_icon('statusonline.png',get_lang('Online'));
+                        $status=1;
+                    } else {
+                        $statusIcon = Display::return_icon('statusoffline.png',get_lang('Offline'));
+                        $status=0;
+                    }
+
+                    $friendHtml.= '<li class="list-group-item">';
+                    $friendAvatarMedium = UserManager::getUserPicture($friend['friend_user_id'], USER_IMAGE_SIZE_MEDIUM);
+                    $friendAvatarSmall = UserManager::getUserPicture($friend['friend_user_id'], USER_IMAGE_SIZE_SMALL);
+                    $friend_avatar = '<img src="'.$friendAvatarMedium.'" id="imgfriend_'.$friend['friend_user_id'].'" title="'.$name_user.'" class="user-image"/>';
+                    error_log($friendAvatarSmall);
+                    $friendHtml .= '<a onclick="javascript:chatWith(\''.$friend['friend_user_id'].'\', \''.$name_user.'\', \''.$status.'\',\''.$friendAvatarSmall.'\')" href="javascript:void(0);">';
+                    $link_shared = (empty($link_shared)) ? '' : '&'.$link_shared;
+                    $friendHtml .=  $friend_avatar.' '.$name_user;
+                    $friendHtml .= '<span class="status">' . $statusIcon . '</span>';
+                    $friendHtml .= '</a>';
+                    $friendHtml.= '</li>';
+                }
+                $j++;
+            }
+            $friendHtml.='</ul>';
+        } else {
+            $friendHtml.= '<div class="">'.get_lang('NoFriendsInYourContactList').'<br />'
+                .'<a class="btn btn-primary" href="'.api_get_path(WEB_PATH).'whoisonline.php"><i class="fa fa-search"></i> '. get_lang('TryAndFindSomeFriends').'</a></div>';
+        }
+
+        return $friendHtml;
+    }
+
     /**
      * @return string
      */

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

@@ -729,8 +729,8 @@ class Template
             }
         }
 
-        $this->assign('online_button', Display::return_icon('online.png'));
-        $this->assign('offline_button',Display::return_icon('offline.png'));
+        $this->assign('online_button', Display::return_icon('statusonline.png'));
+        $this->assign('offline_button',Display::return_icon('statusoffline.png'));
 
         // Get language iso-code for this page - ignore errors
         $this->assign('document_language', api_get_language_isocode());

+ 39 - 8
main/template/default/chat/video.tpl

@@ -1,15 +1,46 @@
-<p class="lead">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</p>
-<div class="row" id="chat-video-panel">
-    <div class="col-sm-3">
-        <div class="thumbnail">
-            <video id="chat-local-video" class="skip"></video>
+<div id="chat-video-panel">
+    <div class="row">
+        <div class="col-md-12">
+            <h3 class="title"><i class="fa fa-video-camera"></i> {{ room.room_name }} </h3>
         </div>
     </div>
-    <div class="col-sm-9">
-        <div class="thumbnail" id="chat-remote-video"></div>
+    <div class="row">
+        <div class="col-md-4">
+            <div id="chat-local-video"></div>
+            <div class="username-local">
+                {% if user_local.user_is_online_in_chat == 1 %}
+                    <img src="{{ 'online.png' | icon(16) }}" />
+                {% else %}
+                <img src="{{ 'offline.png' | icon(16) }}" />
+                {% endif %}
+                {{ user_local.complete_name }} ( {{ user_local.username }} )
+            </div>
+
+            <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">
+                                {{ block_friends }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-8">
+            <div class="user-from" id="chat-remote-video"></div>
+            <div class="chat-user-remote">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</div>
+        </div>
     </div>
 </div>
-
 <script>
     (function() {
         var VideoChat = {