Skip to content

C
converse.js
Commit aa6a739c authored by JC Brand's avatar JC Brand
Browse files
Options

Initial work on showing avatars in messages. 

- Update the mockups to show avatars.
parent 2b5b2fae
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1157 additions and 574 deletions
Makefile
View file @ aa6a739c
......@@ -150,7 +150,7 @@ css/%.min.css:: css/%.css
.PHONY: watch
watch: dev
$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass/converse/converse.scss:css/converse.css sass/inverse/inverse.scss:css/inverse.css
$(SASS) --watch -I $(BOURBON) -I $(BOOTSTRAP) sass:css
.PHONY: watchjs
watchjs: dev
......
css/converse.css
View file @ aa6a739c
This diff is collapsed.
css/inverse.css
View file @ aa6a739c
This diff is collapsed.
mockup/chatbox.html
View file @ aa6a739c
This diff is collapsed.
mockup/chatroom.html
View file @ aa6a739c
This diff is collapsed.
mockup/index.html
View file @ aa6a739c
......@@ -21,7 +21,7 @@
<li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
<li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
<li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
<li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
<li><a href="/mockup/overlayed.html" class="btn btn-primary">4. Overlayed chats</a></li>
</ul>
</body>
</html>
mockup/user-panel.html
View file @ aa6a739c
<!-- <div id="users" class="controlbox-pane"> -->
<div class="userinfo">
<div class="profile d-flex">
<canvas height="40px" width="40px" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">Walter White</span>
<canvas data-avatar="/mockup/images/romeo.jpg" height="40px" width="40px" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">Romeo Montague</span>
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
<a class="chatbox-btn logout fa fa-sign-out align-self-center" title="Log out"></a>
......@@ -68,12 +68,12 @@
<span class="fa fa-caret-down"></span> Contact Requests</a>
<ul class="roster-group-contacts">
<li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Bob Skinstad</span>
<span class="req-contact-name w-100">The Nurse</span>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li>
<li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">André Vos</span>
<span class="req-contact-name w-100">Friar Laurence</span>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li>
......@@ -85,19 +85,14 @@
<span class="fa fa-caret-down"></span> Colleagues</a>
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
<span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
<span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</li>
......@@ -107,14 +102,19 @@
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a>
<ul>
<li class="away current-xmpp-contact d-flex">
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
<span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
<span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
......@@ -126,12 +126,7 @@
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
<span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
......@@ -143,7 +138,17 @@
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> James Small</a>
<span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Peter</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
......@@ -154,11 +159,11 @@
<span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul>
<li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Rassie Erasmus</span>
<span class="pending-contact-name w-100">An Apothecary</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Victor Matfield</span>
<span class="pending-contact-name w-100">Abram</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
......
mockup/user-panel.js
View file @ aa6a739c
......@@ -16,7 +16,33 @@ const UserPanel = Backbone.NativeView.extend({
backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
keyboard: true // we want to dismiss Modal on pressing Esc key
}));
this.renderAvatar();
}
xhr.send();
},
renderAvatar () {
const canvasses = document.querySelectorAll('canvas.avatar');
_.each(canvasses, (canvas_el) => {
const avatar_url = canvas_el.getAttribute('data-avatar');
if (!avatar_url) {
return;
}
const ctx = canvas_el.getContext('2d');
const img = new Image();
img.onload = function () {
const canvas = ctx.canvas ;
const hRatio = canvas.width / img.width ;
const vRatio = canvas.height / img.height ;
const ratio = Math.min ( hRatio, vRatio );
const centerShift_x = ( canvas.width - img.width*ratio ) / 2;
const centerShift_y = ( canvas.height - img.height*ratio ) / 2;
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.drawImage(img, 0,0, img.width, img.height, centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);
};
img.src = avatar_url;
});
}
});
sass/_chatbox.scss
View file @ aa6a739c
......@@ -159,6 +159,7 @@
background-color: $chat-head-color;
border-bottom-left-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius;
@media screen and (max-height: $mobile-landscape-height) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
......@@ -170,92 +171,13 @@
border-top: 0;
p {
color: $text-color;
font-size: $font-size;
font-size: $message-font-size;
margin: 0;
padding: 5px;
}
.message {
margin: 0.5em 0;
}
.chat-info {
line-height: $line-height-small;
color: $chat-head-color;
font-size: $font-size-small;
&.badge {
color: $chat-head-text-color;
}
&.chat-state-notification {
font-style: italic;
}
&.chat-event {
clear: left;
font-style: italic;
}
&.chat-error {
color: $warning-color;
font-weight: bold;
}
&.chat-date {
display: inline-block;
margin-top: 1em;
}
}
.chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%;
}
.chat-action {
font-style: italic;
}
.chat-message {
overflow: auto; // Ensures that content stays inside
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
canvas {
vertical-align: middle;
background: $gray-color;
}
.chat-msg-author {
font-weight: bold;
}
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
.chat-msg-content {
max-width: 100%;
word-wrap: break-word;
&.spoiler {
border-radius: $chatbox-border-radius;
padding: 0.5em;
}
.emojione {
margin-bottom: -6px;
}
}
}
.delayed {
.chat-msg-them {
color: lighten($message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
}
.new-msgs-indicator {
position: absolute;
position: relative;
width: 100%;
cursor: pointer;
background-color: $chat-head-color;
......@@ -265,11 +187,11 @@
text-align: center;
z-index: 20;
white-space: nowrap;
margin-bottom: 0.25em;
}
.chat-content {
height: 100%;
padding: 1em;
font-size: 13px;
font-size: $message-font-size;
color: $text-color;
overflow-y: auto;
border: 0;
......@@ -535,14 +457,6 @@
.chatbox {
width: calc(100% - 50px);
.chat-body {
.chat-message {
.chat-msg-author {
white-space: normal;
}
}
}
.row {
.box-flyout {
left: 50px;
......
sass/_chatrooms.scss
View file @ aa6a739c
......@@ -14,6 +14,7 @@
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis;
font-size: $font-size-large;
}
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
......@@ -102,23 +103,6 @@
.mentioned {
font-weight: bold;
}
.chat-message {
&.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s;
}
.chat-msg-them {
color: $chatroom-message-them-color;
canvas {
background: $red;
}
}
.chat-msg-me {
canvas {
background: $light-blue;
}
}
}
.disconnect-msg {
padding: 2em 2em 0 2em;
}
......@@ -129,17 +113,12 @@
min-width: $chat-width;
.new-msgs-indicator {
background-color: $chatroom-head-color;
max-width: 70%;
}
.chat-content {
height: 100%;
padding: 0.5em;
}
&.full {
min-width: 100%;
.new-msgs-indicator {
min-width: 100%;
}
}
}
.occupants {
......
sass/_controlbox.scss
View file @ aa6a739c
......@@ -228,7 +228,7 @@
#chatrooms {
padding: 0;
padding-bottom: 1em;
padding-bottom: 0.5em;
form.add-chatroom {
input[type=button],
......
sass/_messages.scss 0 → 100644
View file @ aa6a739c
#conversejs {
.message {
&.date-separator {
height: 2em;
margin: 0;
position: relative;
text-align: center;
z-index: 0;
.separator {
border: 0.5px solid $chat-head-color;
margin: 0 1em;
position: relative;
top: 1em;
z-index: 5;
}
.separator-text {
background: white;
bottom: 1px; // Offset needed due to .separator border size
color: #666;
display: inline-block;
line-height: 2em;
padding: 0 1em;
position: relative;
z-index: 5;
}
}
&.chat-info {
color: $chat-head-color;
font-size: $message-font-size;
line-height: $line-height-small;
padding: 0.5rem 1rem;
&.badge {
color: $chat-head-text-color;
}
&.chat-state-notification {
font-style: italic;
}
&.chat-event {
clear: left;
font-style: italic;
}
&.chat-error {
color: $warning-color;
font-weight: bold;
}
&.chat-date {
display: inline-block;
margin-top: 1em;
}
}
&.chat-image {
height: auto;
width: auto;
max-height: 24em;
max-width: 100%;
}
&.chat-action {
font-style: italic;
}
&.chat-msg {
display: flex;
flex-direction: row;
overflow: auto; // Ensures that content stays inside
padding: 0.5rem 1rem;
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.035);
}
.avatar {
background: $gray-color;
height: 36px;
vertical-align: middle;
width: 36px;
}
.chat-msg-content {
margin-left: 0.5rem;
}
.chat-msg-text {
padding: 0;
color: #666;
max-width: 100%;
word-wrap: break-word;
&.spoiler {
border-radius: $chatbox-border-radius;
padding: 0.5em;
}
.emojione {
margin-bottom: -6px;
}
}
.chat-msg-heading {
padding-bottom: 0.5rem;
display: block;
.chat-msg-author {
font-weight: bold;
}
.chat-msg-time {
padding-left: 0.5em;
}
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
}
&.chat-msg-followup {
.chat-msg-heading,
.avatar {
display: none;
}
.chat-msg-content {
margin-left: 2.75rem;
}
}
}
}
.chatroom-body .message {
&.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($chatroom-message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
.chat-msg-them {
color: $chatroom-message-them-color;
}
.separator {
border: 0.5px solid $chatroom-head-color;
}
}
}
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) {
.message {
&.chat-msg {
.chat-msg-author {
white-space: normal;
}
}
}
}
}
sass/converse/converse.scss → sass/converse.scss
View file @ aa6a739c
......@@ -5,9 +5,9 @@
* Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@import "../font-awesome";
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "converse/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
......@@ -37,19 +37,20 @@
@import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities";
}
@import "../core";
@import "core";
@import "../profile";
@import "../chatbox";
@import "converse/core";
@import "profile";
@import "chatbox";
@import "../controlbox";
@import "converse/chatbox";
@import "controlbox";
@import "../roomslist";
@import "../roster";
@import "../chatrooms";
@import "converse/controlbox";
@import "roomslist";
@import "roster";
@import "chatrooms";
@import "../headline";
@import "minimized_chats";
@import "../bookmarks";
@import "../awesomplete";
@import "../muc_embedded";
@import "converse/chatrooms";
@import "headline";
@import "messages";
@import "converse/minimized_chats";
@import "bookmarks";
@import "awesomplete";
@import "muc_embedded";
sass/converse/_variables.scss
View file @ aa6a739c
......@@ -93,6 +93,8 @@ $chatbox-hover-height: 1em !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$font-size-small: 12px !default;
$font-size: 14px !default;
......
sass/inverse/inverse.scss → sass/inverse.scss
View file @ aa6a739c
......@@ -5,9 +5,9 @@
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@import "../font-awesome";
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "inverse/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
......@@ -36,19 +36,20 @@
@import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities";
}
@import "../core";
@import "core";
@import "../profile";
@import "../chatbox";
@import "inverse/core";
@import "profile";
@import "chatbox";
@import "../controlbox";
@import "inverse/chatbox";
@import "controlbox";
@import "../roster";
@import "inverse/controlbox";
@import "roster";
@import "../bookmarks";
@import "inverse/roster";
@import "bookmarks";
@import "../chatrooms";
@import "inverse/bookmarks";
@import "chatrooms";
@import "../headline";
@import "inverse/chatrooms";
@import "headline";
@import "../awesomplete"
@import "inverse/headline";
@import "messages";
@import "awesomplete"
sass/inverse/_chatbox.scss
View file @ aa6a739c
......@@ -63,7 +63,6 @@
}
}
.chat-content {
padding: 0 $padding $padding $padding;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
}
......
sass/inverse/_chatrooms.scss
View file @ aa6a739c
......@@ -29,7 +29,6 @@
.chat-content {
border-top-left-radius: $chatbox-border-radius;
padding: 0 $padding $padding $padding;
}
&.full {
max-width: 100%;
......
sass/inverse/_variables.scss
View file @ aa6a739c
......@@ -97,6 +97,8 @@ $chatbox-hover-height: 6px !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
$message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$font-size-small: 14px !default;
$font-size: 16px !default;
......@@ -109,7 +111,7 @@ $toolbar-color: $greenish-white !default;
$line-height-small: 20px !default;
$line-height: 22px !default;
$line-height-large: 24px !default;
$line-height-huge: 26px !default;
$line-height-huge: 30px !default;
$controlbox-width: 250px !default;
$chat-width: 100% !default;
......
src/templates/chatroom_head.html
View file @ aa6a739c
<div class="col">
<div class="col col-9">
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7