Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Make avatar round and center/resize image properly.

Browse Source
This commit is contained in:
JC Brand 2015-10-30 17:10:09 +00:00
parent 4619d886ad
commit c647783281
3 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
converse.js
View File

@ -2074,7 +2074,12 @@
var img = new Image(); // Create new Image object var img = new Image(); // Create new Image object
img.onload = function () { img.onload = function () {
var ratio = img.width/img.height; var ratio = img.width/img.height;
ctx.drawImage(img, 0,0, 35*ratio, 35); if (ratio < 1) {
ctx.drawImage(img, 0,0, 32, 32*(1/ratio));
} else {
ctx.drawImage(img, 0,0, 32, 32*ratio);
}
}; };
img.src = img_src; img.src = img_src;
this.$el.find('.chat-title').before(canvas); this.$el.find('.chat-title').before(canvas);

1
css/converse.css
View File

@ -1241,6 +1241,7 @@
padding: 5px; padding: 5px;
position: relative; } position: relative; }
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
border-radius: 50%;
float: left; } float: left; }
#conversejs .chat-head.chat-head-chatbox { #conversejs .chat-head.chat-head-chatbox {
background-color: #F4A261; } background-color: #F4A261; }

1
sass/_chatbox.scss
View File

@ -15,6 +15,7 @@
padding: 5px; padding: 5px;
position: relative; position: relative;
.avatar { .avatar {
border-radius: 50%;
float: left; float: left;
} }
&.chat-head-chatbox { &.chat-head-chatbox {