Unread marker MVP
This commit is contained in:
parent
114295a1bd
commit
d37e94308d
@ -679,6 +679,7 @@ button {
|
|||||||
#chat .show-more {
|
#chat .show-more {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
padding-bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -711,6 +712,17 @@ button {
|
|||||||
word-wrap: break-word;
|
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 {
|
.inline-channel {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -1625,10 +1637,6 @@ button {
|
|||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat .msg:last-child {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chat .time,
|
#chat .time,
|
||||||
#chat .from,
|
#chat .from,
|
||||||
#chat .text {
|
#chat .text {
|
||||||
@ -1636,6 +1644,16 @@ button {
|
|||||||
display: inline;
|
display: inline;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#chat .unread-marker .time,
|
||||||
|
#chat .unread-marker .from {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat .unread-marker .text {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
|
@ -285,7 +285,20 @@ $(function() {
|
|||||||
|
|
||||||
function renderChannelMessages(data) {
|
function renderChannelMessages(data) {
|
||||||
var documentFragment = buildChannelMessages(data.id, data.messages);
|
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) {
|
function renderChannelUsers(data) {
|
||||||
@ -313,12 +326,20 @@ $(function() {
|
|||||||
socket.on("msg", function(data) {
|
socket.on("msg", function(data) {
|
||||||
var msg = buildChatMessage(data);
|
var msg = buildChatMessage(data);
|
||||||
var target = "#chan-" + data.chan;
|
var target = "#chan-" + data.chan;
|
||||||
chat.find(target + " .messages")
|
var container = chat.find(target + " .messages");
|
||||||
|
|
||||||
|
container
|
||||||
.append(msg)
|
.append(msg)
|
||||||
.trigger("msg", [
|
.trigger("msg", [
|
||||||
target,
|
target,
|
||||||
data.msg
|
data.msg
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
if (data.msg.self) {
|
||||||
|
container
|
||||||
|
.find(".unread-marker")
|
||||||
|
.appendTo(container);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("more", function(data) {
|
socket.on("more", function(data) {
|
||||||
@ -751,11 +772,17 @@ $(function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
viewport.removeClass("lt");
|
viewport.removeClass("lt");
|
||||||
$("#windows .active")
|
var lastActive = $("#windows .active");
|
||||||
|
|
||||||
|
lastActive
|
||||||
.removeClass("active")
|
.removeClass("active")
|
||||||
.find(".chat")
|
.find(".chat")
|
||||||
.unsticky();
|
.unsticky();
|
||||||
|
|
||||||
|
lastActive
|
||||||
|
.find(".unread-marker")
|
||||||
|
.appendTo(lastActive.find(".messages"));
|
||||||
|
|
||||||
var chan = $(target)
|
var chan = $(target)
|
||||||
.addClass("active")
|
.addClass("active")
|
||||||
.trigger("show")
|
.trigger("show")
|
||||||
@ -1029,14 +1056,14 @@ $(function() {
|
|||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
chat.find(".chan:not(.active)").each(function() {
|
chat.find(".chan:not(.active)").each(function() {
|
||||||
var chan = $(this);
|
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");
|
chan.find(".show-more").addClass("show");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, 1000 * 10);
|
}, 1000 * 10);
|
||||||
|
|
||||||
function clear() {
|
function clear() {
|
||||||
chat.find(".active .messages").empty();
|
chat.find(".active .messages .msg:not(.unread-marker)").remove();
|
||||||
chat.find(".active .show-more").addClass("show");
|
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">
|
<span class="time">
|
||||||
{{tz time}}
|
{{tz time}}
|
||||||
</span>
|
</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">
|
<span class="time">
|
||||||
{{tz time}}
|
{{tz time}}
|
||||||
</span>
|
</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) {
|
Client.prototype.open = function(data) {
|
||||||
var target = this.find(data);
|
var target = this.find(data);
|
||||||
if (target) {
|
if (target) {
|
||||||
|
target.chan.firstUnread = 0;
|
||||||
target.chan.unread = 0;
|
target.chan.unread = 0;
|
||||||
target.chan.highlight = false;
|
target.chan.highlight = false;
|
||||||
this.activeChannel = target.chan.id;
|
this.activeChannel = target.chan.id;
|
||||||
|
@ -18,6 +18,7 @@ function Chan(attr) {
|
|||||||
name: "",
|
name: "",
|
||||||
topic: "",
|
topic: "",
|
||||||
type: Chan.Type.CHANNEL,
|
type: Chan.Type.CHANNEL,
|
||||||
|
firstUnread: 0,
|
||||||
unread: 0,
|
unread: 0,
|
||||||
highlight: false,
|
highlight: false,
|
||||||
users: []
|
users: []
|
||||||
@ -41,6 +42,16 @@ Chan.prototype.pushMessage = function(client, msg) {
|
|||||||
if (Helper.config.maxHistory >= 0 && this.messages.length > Helper.config.maxHistory) {
|
if (Helper.config.maxHistory >= 0 && this.messages.length > Helper.config.maxHistory) {
|
||||||
this.messages.splice(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) {
|
Chan.prototype.sortUsers = function(irc) {
|
||||||
|
@ -72,10 +72,6 @@ module.exports = function(irc, network) {
|
|||||||
|
|
||||||
if (!self && chan.id !== client.activeChannel) {
|
if (!self && chan.id !== client.activeChannel) {
|
||||||
chan.unread++;
|
chan.unread++;
|
||||||
|
|
||||||
if (highlight) {
|
|
||||||
chan.highlight = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var msg = new Msg({
|
var msg = new Msg({
|
||||||
|
Loading…
Reference in New Issue
Block a user