Skip to content

Develop.message statuses #245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dimaspirit merged 8 commits into from
May 31, 2017
Merged

Develop.message statuses #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1ab4485
message statuses
IegorKozakov May 24, 2017
c0068d7
merege develop into develop.messageStatuses
IegorKozakov May 24, 2017
630285b
Resolve HTML file
IegorKozakov May 24, 2017
bb080e9
Unread messages counter
IegorKozakov May 24, 2017
dc88544
QBWEBSDK-535, QBWEBSDK-537
IegorKozakov May 26, 2017
f6db7ea
fixed without testing
dimaspirit May 30, 2017
587235b
after merge
dimaspirit May 31, 2017
ebc38a6
Merge remote-tracking branch 'remotes/origin/develop' into develop.me…
dimaspirit May 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions quickblox.min.js
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 22 additions & 5 deletions samples/chat/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,18 +321,31 @@
align-items: center;
}

.message__content_wrap {
.message__content {
flex: 1 0;
flex-wrap: nowrap;
overflow: hidden;
}

.message__sender_and_status {
display: flex;
margin: 0 0 4px 0;
}

.message__text_and_date {
display: flex;
}

.message__sender_name {
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #778594;
margin: 0 0 4px 0;
flex: 1 0;
}

.message__text_wrap {
flex: 1 0;
}

.message__text {
Expand All @@ -342,22 +355,26 @@
color: #4A4A4A;
overflow: hidden;
white-space: pre-line;
word-break: break-all
word-break: break-all;
}

.message__text a {
color: #366BA9;
}

.message__timestamp {
width: 30px;
.message__timestamp,
.message__status {
opacity: 0.6;
font-size: 12px;
line-height: 14px;
text-align: right;
color: #4A4A4A;
}

.message__timestamp {
width: 30px;
}

.message_attachment {
width: 100%;
max-width: 328px;
Expand Down
108 changes: 55 additions & 53 deletions samples/chat/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@
<div class="login__inner">
<div class="login__top">
<a href="https://quickblox.com/" class="login__logo">
<img src="./img/qb-logo.svg" alt="QuickBlox">
<img src="./img/qb-logo.svg" alt="QuickBlox">]
</a>
<h1>Quickblox Chat Sample</h1>
<h3>Please enter your username and user group.
Users within the same group will be able
to communicate, create chats with each other
</h3>
</div>

<form name="loginForm" class="login__form">
<div class="login_form__row">
<label for="userName">User name</label>
Expand All @@ -42,14 +42,13 @@ <h3>Please enter your username and user group.
<div class="login_form__row">
<label for="userGroup">User group</label>
<input type="text" id="userGroup" name="userGroup"/>
</div>
</div>
<div class="login__button_wrap">
<button type="submit" name="login_submit" class="btn m-login__button j-login__button" disabled>
login
</button>
</div>
</form>

</div>
<div class="login__footer">
<div class="footer__logo_wrap">
Expand All @@ -72,7 +71,6 @@ <h3>Please enter your username and user group.
<a href="https://quickblox.com/" class="dashboard__logo">
<img src="./img/qb-logo.svg" alt="QuickBlox">
</a>

<div class="dashboard__status_wrap">
<h2 class="dashboard__title"><%- user.user_tags %></h2>
<p class="dashboard__status j-dashboard_status">
Expand All @@ -96,20 +94,18 @@ <h2 class="dashboard__title"><%- user.user_tags %></h2>
</li>
</ul>
<ul class="sidebar__dilog_list j-sidebar__dilog_list">

</ul>
</div>
</div>
</div>
<div class="content j-content">

</div>
</div>
</script>

<script type="text/template" id="tpl_welcome">
<div class="content__title j-content__title j-welcome">
Welcome to QuickBlox chat sample!
Welcome to QuickBlox chat sample!
</div>
<div class="notifications j-notifications hidden"></div>
<div class="content__inner j-content__inner">
Expand All @@ -120,29 +116,29 @@ <h2 class="dashboard__title"><%- user.user_tags %></h2>
</script>

<script type="text/template" id="tpl_userConversations">
<li class="dialog__item j-dialog__item" id="<%= dialog._id %>" data-name="<%- dialog.name %>">
<a class="dialog__item_link" href="#!/dialog/<%= dialog._id %>">
<span class="dialog__avatar m-user__img_<%= dialog.color %> m-type_<%= dialog.type === 2 ? 'group' : 'chat' %>" >
<% if(dialog.type === 2) { %>
<i class="material-icons">supervisor_account</i>
<% } else { %>
<i class="material-icons">account_circle</i>
<% } %>
</span>
<span class="dialog__info">
<span class="dialog__name"><%- dialog.name %></span>
<span class="dialog__last_message j-dialog__last_message <%= dialog.attachment ? 'attachment' : ''%>"><%- dialog.last_message%></span>
<li class="dialog__item j-dialog__item" id="<%= dialog._id %>" data-name="<%- dialog.name %>">
<a class="dialog__item_link" href="#!/dialog/<%= dialog._id %>">
<span class="dialog__avatar m-user__img_<%= dialog.color %> m-type_<%= dialog.type === 2 ? 'group' : 'chat' %>" >
<% if(dialog.type === 2) { %>
<i class="material-icons">supervisor_account</i>
<% } else { %>
<i class="material-icons">account_circle</i>
<% } %>
</span>
<span class="dialog__info">
<span class="dialog__name"><%- dialog.name %></span>
<span class="dialog__last_message j-dialog__last_message <%= dialog.attachment ? 'attachment' : ''%>"><%- dialog.last_message%></span>
</span>
<span class="dialog_additional_info">
<span class="dialog__last_message_date j-dialog__last_message_date">
<%= dialog.last_message_date_sent %>
</span>
<span class="dialog_additional_info">
<span class="dialog__last_message_date j-dialog__last_message_date">
<%= dialog.last_message_date_sent %>
</span>
<span class="dialog_unread_counter j-dialog_unread_counter <% !dialog.unread_messages_count ? print('hidden') : '' %>">
<% dialog.unread_messages_count ? print(dialog.unread_messages_count) : '' %>
</span>
<span class="dialog_unread_counter j-dialog_unread_counter <% !dialog.unread_messages_count ? print('hidden') : '' %>">
<% dialog.unread_messages_count ? print(dialog.unread_messages_count) : '' %>
</span>
</a>
</li>
</span>
</a>
</li>
</script>

<script type="text/template" id="tpl_conversationContainer">
Expand All @@ -158,8 +154,8 @@ <h1 class="dialog__title j-dialog__title"><%- title %></h1>
<div class="content__inner j-content__inner">
<div class=" messages j-messages"></div>
<form name="send_message" class="send_message" autocomplete="off">
<textarea name="message_feald" class="message_feald" id="message_feald" autocomplete="off"
autocorrect="off" autocapitalize="off" placeholder="Type a message" autofocus></textarea>
<textarea name="message_feald" class="message_feald" id="message_feald" autocomplete="off"
autocorrect="off" autocapitalize="off" placeholder="Type a message" autofocus></textarea>
<div class="message__actions">
<div class="attachments_preview j-attachments_preview"></div>
<label for="attach_btn" class="attach_btn">
Expand Down Expand Up @@ -211,33 +207,39 @@ <h1 class="dialog__title j-dialog__title"><%- title %></h1>
</script>

<script type="text/template" id="tpl_message">
<div class="message__wrap" id="<%= message._id %>">
<div class="message__wrap" id="<%= message.id %>" data-status="<%= message.status %>">
<span class="message__avatar m-user__img_<%= sender ? sender.color : 'not_loaded' %>">
<i class="material-icons">account_circle</i>
</span>
<div class="message__content_wrap">
<p class="message__sender_name"><%- sender ? sender.name : 'unknown user (' + message.sender_id + ')' %></p>
<% if (message.message) { %>
<p class="message__text"><%= message.message %></p>
<% } %>

<% if (message.attachments.length) { %>
<div class="message__attachments_wtap">
<% _.each(message.attachments, function(attachment){ %>
<div class="message__content">
<div class="message__sender_and_status">
<p class="message__sender_name"><%- sender ? sender.name : 'unknown user (' + message.sender_id + ')' %></p>
<p class="message__status j-message__status"><%= message.status %></p>
</div>
<div class="message__text_and_date">
<div class="message__text_wrap">
<% if (message.message) { %>
<p class="message__text"><%= message.message %></p>
<% } %>
<% if (message.attachments.length) { %>
<div class="message__attachments_wtap">
<% _.each(message.attachments, function(attachment){ %>
<img src="<%= attachment.src %>" alt="attachment" class="message_attachment">
<% }); %>
<% }); %>
</div>
<% } %>
</div>
<% } %>
</div>
<div class="message__timestamp">
<%= message.date_sent %>
<div class="message__timestamp">
<%= message.date_sent %>
</div>
</div>
</div>
</div>
</script>

<script type="text/template" id="tpl_notificationMessage">
<div class="message__wrap m-notification_message" id="<%= _id %>">
<%= message || body %>
<%= message || body %>
</div>
</script>

Expand Down Expand Up @@ -269,7 +271,7 @@ <h1 class="group_chat__title">New Group Chat</h1>
<div class="user__details">
<p class="user__name"><%- user.name %></p>
<% if (user.last_request_at) { %>
<p class="user__last_seen"><%= user.last_request_at %></p>
<p class="user__last_seen"><%= user.last_request_at %></p>
<% } %>
</div>
</div>
Expand All @@ -283,11 +285,11 @@ <h1 class="group_chat__title">New Group Chat</h1>
</span>
<% }); %>
<% if (users.length){ %>
<div id="fountainG">
<div id="fountainG_1" class="fountainG"></div>
<div id="fountainG_2" class="fountainG"></div>
<div id="fountainG_3" class="fountainG"></div>
</div>
<div id="fountainG">
<div id="fountainG_1" class="fountainG"></div>
<div id="fountainG_2" class="fountainG"></div>
<div id="fountainG_3" class="fountainG"></div>
</div>
<% } %>
</div>
</script>
Expand Down
35 changes: 27 additions & 8 deletions samples/chat/js/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,20 +147,26 @@ Dialog.prototype.selectCurrentDialog = function(dialogId){
}

dialogElem.classList.add('selected');

self.resetUnreadCounter(dialogId);
};

Dialog.prototype.resetUnreadCounter = function(dialogId){
Dialog.prototype.decreaseUnreadCounter = function(dialogId){
var self = this,
dialogElem = document.getElementById(dialogId);
dialog = self._cache[dialogId];

// Can't decrease unexist dialog or dialog without unread messages.
if(dialog === undefined || dialog.unread_messages_count <= 0) return;

dialog.unread_messages_count--;

self._cache[dialogId].unread_messages_count = 0;
var dialogElem = document.getElementById(dialogId),
unreadCounter = dialogElem.querySelector('.j-dialog_unread_counter');

var unreadCounter = dialogElem.querySelector('.j-dialog_unread_counter');
unreadCounter.innerText = dialog.unread_messages_count;

unreadCounter.classList.add('hidden');
unreadCounter.innerText = '';
if(dialog.unread_messages_count === 0) {
unreadCounter.classList.add('hidden');
unreadCounter.innerText = '';
}
};

Dialog.prototype.replaceDialogLink = function (elem) {
Expand Down Expand Up @@ -234,6 +240,18 @@ Dialog.prototype.renderMessages = function (dialogId) {

self.dialogTitle.innerText = dialog.name;

if(dialog.type === CONSTANTS.DIALOG_TYPES.CHAT || dialog.type === CONSTANTS.DIALOG_TYPES.GROUPCHAT) {
if (dialog && dialog.messages.length) {
for (var i = 0; i < dialog.messages.length; i++) {
if(!dialog.messages[i].selfReaded) {
messageModule.sendReadStatus(dialog.messages[i]._id, dialog.messages[i].sender_id, dialogId);
dialog.messages[i].selfReaded = true;
dialogModule.decreaseUnreadCounter(dialogId);
}
}
}
}

if(dialog.type === CONSTANTS.DIALOG_TYPES.GROUPCHAT){
self.editLink.classList.remove('hidden');
self.editLink.href = '#!/dialog/' + self.dialogId + '/edit';
Expand Down Expand Up @@ -571,6 +589,7 @@ Dialog.prototype.quitFromTheDialog = function(dialogId){
delete self._cache[dialogId];
var dialogElem = document.getElementById(dialogId);
dialogElem.parentNode.removeChild(dialogElem);
self.dialogId = null;
}

function _notuyfyUsers(){
Expand Down
Loading