Unread marker MVP

This commit is contained in:
Pavel Djundik 2016-05-13 13:23:05 +03:00 committed by Jérémie Astori
parent 114295a1bd
commit d37e94308d
8 changed files with 73 additions and 15 deletions

View File

@ -679,6 +679,7 @@ button {
#chat .show-more {
display: none;
padding: 10px;
padding-bottom: 0;
width: 100%;
}
@ -711,6 +712,17 @@ button {
word-wrap: break-word;
}
#chat .unread-marker span {
padding: 0;
height: 1px;
border-color: #455164;
background-color: #455164;
}
#chat .unread-marker:last-child {
display: none;
}
.inline-channel {
cursor: pointer;
}
@ -1625,10 +1637,6 @@ button {
padding: 2px 0;
}
#chat .msg:last-child {
height: auto;
}
#chat .time,
#chat .from,
#chat .text {
@ -1636,6 +1644,16 @@ button {
display: inline;
padding: 0;
}
#chat .unread-marker .time,
#chat .unread-marker .from {
display: none;
}
#chat .unread-marker .text {
display: block;
width: 100%;
}
}
::-webkit-scrollbar {

View File

@ -285,7 +285,20 @@ $(function() {
function renderChannelMessages(data) {
var documentFragment = buildChannelMessages(data.id, data.messages);
chat.find("#chan-" + data.id + " .messages").append(documentFragment);
var channel = chat.find("#chan-" + data.id + " .messages").append(documentFragment);
if (data.firstUnread > 0) {
var first = channel.find("#msg-" + data.firstUnread);
// TODO: If the message is far off in the history, we still need to append the marker into DOM
if (!first.length) {
channel.prepend(render("unread_marker"));
} else {
first.before(render("unread_marker"));
}
} else {
channel.append(render("unread_marker"));
}
}
function renderChannelUsers(data) {
@ -313,12 +326,20 @@ $(function() {
socket.on("msg", function(data) {
var msg = buildChatMessage(data);
var target = "#chan-" + data.chan;
chat.find(target + " .messages")
var container = chat.find(target + " .messages");
container
.append(msg)
.trigger("msg", [
target,
data.msg
]);
if (data.msg.self) {
container
.find(".unread-marker")
.appendTo(container);
}
});
socket.on("more", function(data) {
@ -751,11 +772,17 @@ $(function() {
}
viewport.removeClass("lt");
$("#windows .active")
var lastActive = $("#windows .active");
lastActive
.removeClass("active")
.find(".chat")
.unsticky();
lastActive
.find(".unread-marker")
.appendTo(lastActive.find(".messages"));
var chan = $(target)
.addClass("active")
.trigger("show")
@ -1029,14 +1056,14 @@ $(function() {
setInterval(function() {
chat.find(".chan:not(.active)").each(function() {
var chan = $(this);
if (chan.find(".messages").children().slice(0, -100).remove().length) {
if (chan.find(".messages .msg:not(.unread-marker)").slice(0, -100).remove().length) {
chan.find(".show-more").addClass("show");
}
});
}, 1000 * 10);
function clear() {
chat.find(".active .messages").empty();
chat.find(".active .messages .msg:not(.unread-marker)").remove();
chat.find(".active .show-more").addClass("show");
}

View File

@ -1,4 +1,4 @@
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}">
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}">
<span class="time">
{{tz time}}
</span>

View File

@ -1,4 +1,4 @@
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}">
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}">
<span class="time">
{{tz time}}
</span>

View File

@ -0,0 +1,5 @@
<div class="msg unread-marker">
<span class="time"></span>
<span class="from"></span>
<span class="text"></span>
</div>

View File

@ -361,6 +361,7 @@ Client.prototype.more = function(data) {
Client.prototype.open = function(data) {
var target = this.find(data);
if (target) {
target.chan.firstUnread = 0;
target.chan.unread = 0;
target.chan.highlight = false;
this.activeChannel = target.chan.id;

View File

@ -18,6 +18,7 @@ function Chan(attr) {
name: "",
topic: "",
type: Chan.Type.CHANNEL,
firstUnread: 0,
unread: 0,
highlight: false,
users: []
@ -41,6 +42,16 @@ Chan.prototype.pushMessage = function(client, msg) {
if (Helper.config.maxHistory >= 0 && this.messages.length > Helper.config.maxHistory) {
this.messages.splice(0, this.messages.length - Helper.config.maxHistory);
}
if (!msg.self && this.id !== client.activeChannel) {
if (!this.firstUnread) {
this.firstUnread = msg.id;
}
if (msg.highlight) {
this.highlight = true;
}
}
};
Chan.prototype.sortUsers = function(irc) {

View File

@ -72,10 +72,6 @@ module.exports = function(irc, network) {
if (!self && chan.id !== client.activeChannel) {
chan.unread++;
if (highlight) {
chan.highlight = true;
}
}
var msg = new Msg({