diff options
| -rw-r--r-- | include/widgets.php | 8 | ||||
| -rw-r--r-- | mod/chatsvc.php | 3 | ||||
| -rw-r--r-- | view/css/mod_chat.css | 44 | ||||
| -rw-r--r-- | view/pdl/mod_chat.pdl | 1 | ||||
| -rw-r--r-- | view/pdl/mod_cloud.pdl | 2 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 9 | ||||
| -rw-r--r-- | view/tpl/bookmarkedchats.tpl | 4 | ||||
| -rw-r--r-- | view/tpl/chat.tpl | 49 | ||||
| -rw-r--r-- | view/tpl/chatroomlist.tpl | 7 | ||||
| -rwxr-xr-x | view/tpl/xchan_vcard.tpl | 2 |
10 files changed, 103 insertions, 26 deletions
diff --git a/include/widgets.php b/include/widgets.php index 014160867..50e4cb184 100644 --- a/include/widgets.php +++ b/include/widgets.php @@ -809,6 +809,14 @@ function widget_chatroom_list($arr) { } } +function widget_chatroom_members() { + $o = replace_macros(get_markup_template('chatroom_members.tpl'), array( + '$header' => t('Chatroom Members') + )); + + return $o; +} + function widget_bookmarkedchats($arr) { $h = get_observer_hash(); if(! $h) diff --git a/mod/chatsvc.php b/mod/chatsvc.php index 829fef6f8..bdf4a9f8c 100644 --- a/mod/chatsvc.php +++ b/mod/chatsvc.php @@ -137,7 +137,8 @@ function chatsvc_content(&$a) { 'name' => $rr['xchan_name'], 'isotime' => datetime_convert('UTC', date_default_timezone_get(), $rr['created'], 'c'), 'localtime' => datetime_convert('UTC', date_default_timezone_get(), $rr['created'], 'r'), - 'text' => smilies(bbcode($rr['chat_text'])) + 'text' => smilies(bbcode($rr['chat_text'])), + 'self' => ((get_observer_hash() == $rr['chat_xchan']) ? 'self' : '') ); } } diff --git a/view/css/mod_chat.css b/view/css/mod_chat.css index 69c2e1528..9d46d9860 100644 --- a/view/css/mod_chat.css +++ b/view/css/mod_chat.css @@ -1,4 +1,5 @@ -#chatroom-new { +#chatroom-new, +#inline { display: none; } @@ -25,14 +26,23 @@ aside { padding-bottom: 0px; } +#chat-destroy { + display: inline; +} + #chatTopBar { float: left; + width: 100%; height: 400px; overflow-y: auto; } +#chatroom_list, +#chatroom_members { + display: none; +} -#chatUsers img { +#chatMembers img { float: left; margin-right: 5px; } @@ -49,11 +59,16 @@ aside { .chat-item { display: table; - table-layout: fixed; + float: left; +} +.chat-item-self { + display: table; + float: right; } -.chat-item-photo { +.chat-item-photo, +.chat-item-photo-self { display: table-cell; height: 32px; width: 32px; @@ -66,7 +81,17 @@ aside { padding: 0px 0px 20px 10px; } -.chat-item-title { +.chat-body-self { + display: table-cell; + vertical-align: top; + padding: 0px 10px 20px 0px; + text-align: right; +} + + + +.chat-item-title, +.chat-item-title-self { display: inline-block; padding: 3px; margin-bottom: 3px; @@ -84,3 +109,12 @@ aside { color: red; } +.generic-content-wrapper.fullscreen { + position: fixed; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + z-index: 10000; +} + diff --git a/view/pdl/mod_chat.pdl b/view/pdl/mod_chat.pdl index 564199bed..664e77f53 100644 --- a/view/pdl/mod_chat.pdl +++ b/view/pdl/mod_chat.pdl @@ -3,4 +3,5 @@ [widget=chatroom_list][/widget] [widget=bookmarkedchats][/widget] [widget=suggestedchats][/widget] +[widget=chatroom_members][/widget] [/region] diff --git a/view/pdl/mod_cloud.pdl b/view/pdl/mod_cloud.pdl index 6b1d2a15e..d8f50ad7a 100644 --- a/view/pdl/mod_cloud.pdl +++ b/view/pdl/mod_cloud.pdl @@ -1,3 +1,3 @@ [region=aside] -[widget=profile][/widget] +[widget=vcard][/widget] [/region] diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 7f9f621a3..43607a95c 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -1264,7 +1264,8 @@ img.mail-conv-sender-photo { .wall-item-content, .mail-conv-body, .page-body, -.chat-item-text { +.chat-item-text, +.chat-item-text-self { font-size: $font_size; clear: both; } @@ -1363,11 +1364,13 @@ img.mail-conv-sender-photo { cursor: pointer; } -.chat-item-photo { +.chat-item-photo, +.chat-item-photo-self { border-radius: $radiuspx; } -.chat-item-title { +.chat-item-title, +.chat-item-title-self { border-radius: $radiuspx; background-color: $item_colour; } diff --git a/view/tpl/bookmarkedchats.tpl b/view/tpl/bookmarkedchats.tpl index ab4372c25..3aabf835a 100644 --- a/view/tpl/bookmarkedchats.tpl +++ b/view/tpl/bookmarkedchats.tpl @@ -1,5 +1,5 @@ {{if $rooms}} -<div class="widget"> +<div id="chatroom_bookmarks" class="widget"> <h3>{{$header}}</h3> <ul class="bookmarkchat nav nav-pills nav-stacked"> {{foreach $rooms as $room}} @@ -7,4 +7,4 @@ {{/foreach}} </ul> </div> -{{/if}}
\ No newline at end of file +{{/if}} diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl index a040cbd3f..b18318044 100644 --- a/view/tpl/chat.tpl +++ b/view/tpl/chat.tpl @@ -1,14 +1,16 @@ <div class="generic-content-wrapper"> <div class="section-title-wrapper"> - {{if $is_owner}} - <div id="chatDrop" class="pull-right"> + <div class="pull-right"> + <button id="fullscreen" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen();"><i class="icon-resize-full"></i></button> + <button id="inline" type="button" class="btn btn-default btn-xs" onclick="makeInline();"><i class="icon-resize-small"></i></button> + {{if $is_owner}} <form id="chat-destroy" method="post" action="chat"> <input type="hidden" name="room_name" value="{{$room_name}}" /> <input type="hidden" name="action" value="drop" /> <button class="btn btn-danger btn-xs" type="submit" name="submit" value="{{$drop}}" onclick="return confirmDelete();"><i class="icon-trash"></i> {{$drop}}</button> </form> + {{/if}} </div> - {{/if}} <h2>{{$room_name}}</h2> <div class="clear"></div> </div> @@ -103,10 +105,19 @@ var last_chat = 0; var chat_timer = null; $(document).ready(function() { + $('#chatTopBar').spin('small'); chat_timer = setTimeout(load_chats,300); + $('#chatroom_bookmarks, #vcard').hide(); + $('#chatroom_list, #chatroom_members').show(); + + $('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - $('nav').outerHeight(true) - 40 ); }); +$(window).resize(function () { + var navHeight = $('.generic-content-wrapper').hasClass('fullscreen') ? 0 : $('nav').outerHeight(true) + $('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - navHeight - 40 ); +}); $('#chat-form').submit(function(ev) { $('body').css('cursor','wait'); @@ -124,6 +135,7 @@ function load_chats() { if(data.success && (! stopped)) { update_inroom(data.inroom); update_chats(data.chats); + $('#chatTopBar').spin(false); } }); @@ -136,20 +148,27 @@ function update_inroom(inroom) { var count = inroom.length; $.each( inroom, function(index, item) { var newNode = document.createElement('div'); + newNode.setAttribute('class', 'member-item'); $(newNode).html('<img style="height: 32px; width: 32px;" src="' + item.img + '" alt="' + item.name + '" /> ' + '<span class="name">' + item.name + '</span><br /><span class="' + item.status_class + '">' + item.status + '</span>'); html.appendChild(newNode); }); - $('#chatUsers').html(html); + $('#chatMembers').html(html); } function update_chats(chats) { - var count = chats.length; $.each( chats, function(index, item) { last_chat = item.id; var newNode = document.createElement('div'); - newNode.setAttribute('class', 'chat-item'); - $(newNode).html('<img class="chat-item-photo" src="' + item.img + '" alt="' + item.name + '" /><div class="chat-body"><div class="chat-item-title"><span class="chat-item-name">' + item.name + ' </span><span class="autotime chat-item-time" title="' + item.isotime + '">' + item.localtime + '</span></div><div class="chat-item-text">' + item.text + '</div></div><div class="chat-item-end"></div>'); + + if(item.self) { + newNode.setAttribute('class', 'chat-item-self clear'); + $(newNode).html('<div class="chat-body-self"><div class="chat-item-title-self"><span class="chat-item-name-self">' + item.name + ' </span><span class="autotime chat-item-time-self" title="' + item.isotime + '">' + item.localtime + '</span></div><div class="chat-item-text-self">' + item.text + '</div></div><img class="chat-item-photo-self" src="' + item.img + '" alt="' + item.name + '" />'); + } + else { + newNode.setAttribute('class', 'chat-item clear'); + $(newNode).html('<img class="chat-item-photo" src="' + item.img + '" alt="' + item.name + '" /><div class="chat-body"><div class="chat-item-title"><span class="chat-item-name">' + item.name + ' </span><span class="autotime chat-item-time" title="' + item.isotime + '">' + item.localtime + '</span></div><div class="chat-item-text">' + item.text + '</div></div>'); + } $('#chatLineHolder').append(newNode); $(".autotime").timeago(); @@ -175,6 +194,22 @@ function addmailtext(data) { var currentText = $("#chatText").val(); $("#chatText").val(currentText + data); } + +function makeFullScreen() { + $('#fullscreen').hide(); + $('#inline').show(); + $('.generic-content-wrapper').addClass('fullscreen'); + $('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - 20); + +} + +function makeInline() { + $('#fullscreen').show(); + $('#inline').hide(); + $('.generic-content-wrapper').removeClass('fullscreen'); + $('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - $('nav').outerHeight(true) - 40 ); +} + </script> <script> function isMobile() { diff --git a/view/tpl/chatroomlist.tpl b/view/tpl/chatroomlist.tpl index 542ff9a0c..ff4b79a4b 100644 --- a/view/tpl/chatroomlist.tpl +++ b/view/tpl/chatroomlist.tpl @@ -1,15 +1,10 @@ -<div class="widget"> +<div id="chatroom_list" class="widget"> <h3>{{$header}}</h3> - {{if $items}} <ul class="nav nav-pills nav-stacked"> <li><a href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li> {{foreach $items as $item}} <li><a href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge pull-right">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li> {{/foreach}} </ul> - {{/if}} - <div id="chatSide"> - <div id="chatUsers"></div> - </div> </div> diff --git a/view/tpl/xchan_vcard.tpl b/view/tpl/xchan_vcard.tpl index ad409d75b..52bf6ab47 100755 --- a/view/tpl/xchan_vcard.tpl +++ b/view/tpl/xchan_vcard.tpl @@ -1,4 +1,4 @@ -<div class="vcard"> +<div id="vcard" class="vcard"> <div id="profile-photo-wrapper"><a href="{{$link}}"><img class="vcard-photo photo" src="{{$photo}}" alt="{{$name}}" /></a></div> {{if $connect}} <div class="connect-btn-wrapper"><a href="follow?f=&url={{$follow}}" class="btn btn-block btn-success btn-sm"><i class="icon-plus"></i> {{$connect}}</a></div> |