Unread marker MVP
This commit is contained in:
parent
114295a1bd
commit
d37e94308d
@ -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 {
|
||||
|
@ -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");
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
5
client/views/unread_marker.tpl
Normal file
5
client/views/unread_marker.tpl
Normal file
@ -0,0 +1,5 @@
|
||||
<div class="msg unread-marker">
|
||||
<span class="time"></span>
|
||||
<span class="from"></span>
|
||||
<span class="text"></span>
|
||||
</div>
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user