Implement user avatars into the embed

This commit is contained in:
Jeremy Zhang
2017-09-24 04:17:06 +00:00
parent ad833434dd
commit e30171a8de
7 changed files with 55 additions and 13 deletions

View File

@ -172,11 +172,14 @@ nav .brand-logo {
#chatcontent > p {
display: table;
width: 90%;
border-top: solid 1px rgba(0, 0, 0, 0.1);
padding-top: 10px;
margin-bottom: 11px;
}
#chatcontent > p > span {
display: table-row
}
/*#chatcontent > p > span {*/
/* display: table-row*/
/*}*/
::-webkit-input-placeholder {
color: var(--placeholder);
@ -224,14 +227,25 @@ nav .brand-logo {
.chatusername {
font-weight: bold;
color: #eceff1;
margin-right: 10px;
vertical-align: middle;
font-size: 110%;
}
.chattimestamp {
font-size: 10px;
font-size: 11px;
color: #90a4ae;
margin-right: 3px;
}
.authoravatar {
width: 100%;
max-width: 30px;
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
}
.footercontainer {
width: 100%;
position: relative;
@ -413,12 +427,13 @@ a {
height: 30px;
}
.chatusername {
display: table-header-group;
}
/*.chatusername {*/
/* display: table-header-group;*/
/*}*/
.chatmessage {
display: inline;
display: block;
color: var(--chatmessage);
margin-top: 5px;
}
p.mentioned {
@ -443,6 +458,7 @@ p.mentioned span.chatmessage {
white-space: pre-wrap;
line-height: 15px;
padding: 5px;
margin-bottom: 3px;
}
#emoji-picker {

View File

@ -35,6 +35,7 @@
var guild_channels_list = []; // guild channels, but as a list of them
var message_users_cache = {}; // {"name#discrim": {"data": {}, "msgs": []} Cache of the users fetched from websockets to paint the messages
var shift_pressed = false; // Track down if shift pressed on messagebox
var global_guest_icon = null; // Guest icon
function element_in_view(element, fullyInView) {
var pageTop = $(window).scrollTop();
@ -809,6 +810,14 @@
}
}
}
function generate_avatar_url(user_id, avatar_hash, message_contents=null) {
if (user_id == bot_client_id && (message_contents.includes("**") && ( (message_contents.includes("<")&&message_contents.includes(">")) || (message_contents.includes("[") && message_contents.includes("]")) ))) {
return global_guest_icon;
} else {
return "https://cdn.discordapp.com/avatars/" + user_id + "/" + avatar_hash + ".png";
}
}
function fill_discord_messages(messages, jumpscroll, replace=null) {
if (messages.length == 0) {
@ -833,7 +842,8 @@
if (message.author.nickname) {
username = message.author.nickname;
}
var rendered = Mustache.render(template, {"id": message.id, "full_timestamp": message.formatted_timestamp, "time": message.formatted_time, "username": username, "discriminator": message.author.discriminator, "content": nl2br(message.content)});
var avatar = generate_avatar_url(message.author.id, message.author.avatar, message.content);
var rendered = Mustache.render(template, {"id": message.id, "full_timestamp": message.formatted_timestamp, "time": message.formatted_time, "username": username, "discriminator": message.author.discriminator, "avatar": avatar, "content": nl2br(message.content)});
if (replace == null) {
$("#chatcontent").append(rendered);
handle_last_message_mention();
@ -951,7 +961,10 @@
} else {
parent.find(".chatusername").css("color", null);
}
parent.attr("discord_userid", usr.id);
if (usr.avatar_url) {
parent.attr("discord_userid", usr.id);
parent.find(".authoravatar").prop("src", usr.avatar_url);
}
}
}
@ -1319,6 +1332,10 @@
cache["data"] = usr;
process_message_users_cache_helper(key, usr);
});
socket.on("guest_icon_change", function (icon) {
global_guest_icon = icon.guest_icon;
});
}
function update_socket_channels() {

View File

@ -76,7 +76,7 @@ margin-right:4px
#chatcontent > p { display: table; }
#chatcontent > p > span { display: table-row }
/*#chatcontent > p > span:nth-child(1):before { content:"Today at " }*/
#chatcontent > p > span.chatusername { display: table-header-group }
/*#chatcontent > p > span.chatusername { display: table-header-group }*/
#chatcontent > p > span.chatmessage { display: table-footer-group;display:inline-block!important;color:var(--chatmessage) }
#chatcontent {
background:var(--main)