harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod chat rework continued

Browse Source
This commit is contained in:
Mario Vavti 2016-03-31 13:21:48 +02:00
parent 1cd3b41825
commit 3fdd110e07
10 changed files with 104 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
include/widgets.php
View File

@ -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) { function widget_bookmarkedchats($arr) {
$h = get_observer_hash(); $h = get_observer_hash();
if(! $h) if(! $h)

3
mod/chatsvc.php
View File

@ -137,7 +137,8 @@ function chatsvc_content(&$a) {
'name' => $rr['xchan_name'], 'name' => $rr['xchan_name'],
'isotime' => datetime_convert('UTC', date_default_timezone_get(), $rr['created'], 'c'), 'isotime' => datetime_convert('UTC', date_default_timezone_get(), $rr['created'], 'c'),
'localtime' => datetime_convert('UTC', date_default_timezone_get(), $rr['created'], 'r'), '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' : '')
); );
} }
} }

46
view/css/mod_chat.css
View File

@ -1,4 +1,5 @@
#chatroom-new { #chatroom-new,
#inline {
display: none; display: none;
} }
@ -25,14 +26,23 @@ aside {
padding-bottom: 0px; padding-bottom: 0px;
} }
#chat-destroy {
display: inline;
}
#chatTopBar { #chatTopBar {
float: left; float: left;
width: 100%;
height: 400px; height: 400px;
overflow-y: auto; overflow-y: auto;
} }
#chatroom_list,
#chatroom_members {
display: none;
}
#chatUsers img { #chatMembers img {
float: left; float: left;
margin-right: 5px; margin-right: 5px;
} }
@ -49,11 +59,16 @@ aside {
.chat-item { .chat-item {
display: table; display: table;
table-layout: fixed; float: left;
} }
.chat-item-photo { .chat-item-self {
display: table;
float: right;
}
.chat-item-photo,
.chat-item-photo-self {
display: table-cell; display: table-cell;
height: 32px; height: 32px;
width: 32px; width: 32px;
@ -66,7 +81,17 @@ aside {
padding: 0px 0px 20px 10px; 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; display: inline-block;
padding: 3px; padding: 3px;
margin-bottom: 3px; margin-bottom: 3px;
@ -84,3 +109,12 @@ aside {
color: red; color: red;
} }
.generic-content-wrapper.fullscreen {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 10000;
}

1
view/pdl/mod_chat.pdl
View File

@ -3,4 +3,5 @@
[widget=chatroom_list][/widget] [widget=chatroom_list][/widget]
[widget=bookmarkedchats][/widget] [widget=bookmarkedchats][/widget]
[widget=suggestedchats][/widget] [widget=suggestedchats][/widget]
[widget=chatroom_members][/widget]
[/region] [/region]

2
view/pdl/mod_cloud.pdl
View File

@ -1,3 +1,3 @@
[region=aside] [region=aside]
[widget=profile][/widget] [widget=vcard][/widget]
[/region] [/region]

9
view/theme/redbasic/css/style.css
View File

@ -1264,7 +1264,8 @@ img.mail-conv-sender-photo {
.wall-item-content, .wall-item-content,
.mail-conv-body, .mail-conv-body,
.page-body, .page-body,
.chat-item-text { .chat-item-text,
.chat-item-text-self {
font-size: $font_size; font-size: $font_size;
clear: both; clear: both;
} }
@ -1363,11 +1364,13 @@ img.mail-conv-sender-photo {
cursor: pointer; cursor: pointer;
} }
.chat-item-photo { .chat-item-photo,
.chat-item-photo-self {
border-radius: $radiuspx; border-radius: $radiuspx;
} }
.chat-item-title { .chat-item-title,
.chat-item-title-self {
border-radius: $radiuspx; border-radius: $radiuspx;
background-color: $item_colour; background-color: $item_colour;
} }

2
view/tpl/bookmarkedchats.tpl
View File

@ -1,5 +1,5 @@
{{if $rooms}} {{if $rooms}}
<div class="widget"> <div id="chatroom_bookmarks" class="widget">
<h3>{{$header}}</h3> <h3>{{$header}}</h3>
<ul class="bookmarkchat nav nav-pills nav-stacked"> <ul class="bookmarkchat nav nav-pills nav-stacked">
{{foreach $rooms as $room}} {{foreach $rooms as $room}}

49
view/tpl/chat.tpl
View File

@ -1,14 +1,16 @@
<div class="generic-content-wrapper"> <div class="generic-content-wrapper">
<div class="section-title-wrapper"> <div class="section-title-wrapper">
{{if $is_owner}} <div class="pull-right">
<div id="chatDrop" 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"> <form id="chat-destroy" method="post" action="chat">
<input type="hidden" name="room_name" value="{{$room_name}}" /> <input type="hidden" name="room_name" value="{{$room_name}}" />
<input type="hidden" name="action" value="drop" /> <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>&nbsp;{{$drop}}</button> <button class="btn btn-danger btn-xs" type="submit" name="submit" value="{{$drop}}" onclick="return confirmDelete();"><i class="icon-trash"></i>&nbsp;{{$drop}}</button>
</form> </form>
{{/if}}
</div> </div>
{{/if}}
<h2>{{$room_name}}</h2> <h2>{{$room_name}}</h2>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
@ -103,10 +105,19 @@ var last_chat = 0;
var chat_timer = null; var chat_timer = null;
$(document).ready(function() { $(document).ready(function() {
$('#chatTopBar').spin('small');
chat_timer = setTimeout(load_chats,300); 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) { $('#chat-form').submit(function(ev) {
$('body').css('cursor','wait'); $('body').css('cursor','wait');
@ -124,6 +135,7 @@ function load_chats() {
if(data.success && (! stopped)) { if(data.success && (! stopped)) {
update_inroom(data.inroom); update_inroom(data.inroom);
update_chats(data.chats); update_chats(data.chats);
$('#chatTopBar').spin(false);
} }
}); });
@ -136,20 +148,27 @@ function update_inroom(inroom) {
var count = inroom.length; var count = inroom.length;
$.each( inroom, function(index, item) { $.each( inroom, function(index, item) {
var newNode = document.createElement('div'); 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>'); $(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); html.appendChild(newNode);
}); });
$('#chatUsers').html(html); $('#chatMembers').html(html);
} }
function update_chats(chats) { function update_chats(chats) {
var count = chats.length; var count = chats.length;
$.each( chats, function(index, item) { $.each( chats, function(index, item) {
last_chat = item.id; last_chat = item.id;
var newNode = document.createElement('div'); 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); $('#chatLineHolder').append(newNode);
$(".autotime").timeago(); $(".autotime").timeago();
@ -175,6 +194,22 @@ function addmailtext(data) {
var currentText = $("#chatText").val(); var currentText = $("#chatText").val();
$("#chatText").val(currentText + data); $("#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>
<script> <script>
function isMobile() { function isMobile() {

7
view/tpl/chatroomlist.tpl
View File

@ -1,15 +1,10 @@
<div class="widget"> <div id="chatroom_list" class="widget">
<h3>{{$header}}</h3> <h3>{{$header}}</h3>
{{if $items}}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li><a href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li> <li><a href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li>
{{foreach $items as $item}} {{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> <li><a href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge pull-right">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
{{/foreach}} {{/foreach}}
</ul> </ul>
{{/if}}
<div id="chatSide">
<div id="chatUsers"></div>
</div>
</div> </div>

2
view/tpl/xchan_vcard.tpl
View File

@ -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> <div id="profile-photo-wrapper"><a href="{{$link}}"><img class="vcard-photo photo" src="{{$photo}}" alt="{{$name}}" /></a></div>
{{if $connect}} {{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> <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>