chipmunkmc/gamja
1
0
Fork 0
mirror of https://codeberg.org/emersion/gamja.git synced 2024-11-28 02:05:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add unread message separator

Browse source 
Closes: https://todo.sr.ht/~emersion/gamja/4
This commit is contained in:
Simon Ser 2020-09-03 11:51:52 +02:00
parent 0b03f9d767
commit 57ca2c44ad
No known key found for this signature in database
GPG key ID: 0FDE7BE0E88F5E48
3 changed files with 41 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/app.js
View file

@ -223,8 +223,12 @@ export default class App extends Component {
}
switchBuffer(name) {
var lastReadReceipt = this.getReceipt(name, ReceiptType.READ);
// TODO: only mark as read if user scrolled at the bottom
this.setBufferState(name, { unread: Unread.NONE });
this.setBufferState(name, {
unread: Unread.NONE,
lastReadReceipt,
});
this.setState({ activeBuffer: name }, () => {
if (this.composer.current) {
this.composer.current.focus();
@ -329,13 +333,15 @@ export default class App extends Component {
this.setBufferState(bufName, (buf, state) => {
// TODO: set unread if scrolled up
var unread = buf.unread;
var lastReadReceipt = buf.lastReadReceipt;
if (state.activeBuffer != buf.name) {
unread = Unread.union(unread, msgUnread);
} else {
this.setReceipt(bufName, ReceiptType.READ, msg);
lastReadReceipt = this.getReceipt(bufName, ReceiptType.READ);
}
var messages = insertMessage(buf.messages, msg);
return { messages, unread };
return { messages, unread, lastReadReceipt };
});
}

21
components/buffer.js
View file

@ -181,13 +181,17 @@ class DateSeparator extends Component {
var DD = date.getDate().toString().padStart(2, "0");
var text = `${YYYY}-${MM}-${DD}`;
return html`
<div class="date-separator">
<div class="separator date-separator">
${text}
</div>
`;
}
}
function UnreadSeparator(props) {
return html`<div class="separator unread-separator">New messages</div>`;
}
function sameDate(d1, d2) {
return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
}
@ -198,17 +202,24 @@ export default class Buffer extends Component {
}
render() {
if (!this.props.buffer) {
var buf = this.props.buffer;
if (!buf) {
return null;
}
var children = [];
if (this.props.buffer.type == BufferType.SERVER) {
if (buf.type == BufferType.SERVER) {
children.push(html`<${NotificationNagger}/>`);
}
var hasUnreadSeparator = false;
var prevDate = new Date();
this.props.buffer.messages.forEach((msg) => {
buf.messages.forEach((msg) => {
if (!hasUnreadSeparator && buf.type != BufferType.SERVER && buf.lastReadReceipt && msg.tags.time > buf.lastReadReceipt.time) {
children.push(html`<${UnreadSeparator} key="unread"/>`);
hasUnreadSeparator = true;
}
var date = new Date(msg.tags.time);
if (!sameDate(prevDate, date)) {
children.push(html`<${DateSeparator} key=${"date-" + date} date=${date}/>`);
@ -216,7 +227,7 @@ export default class Buffer extends Component {
prevDate = date;
children.push(html`
<${LogLine} key=${"msg-" + msg.key} message=${msg} buffer=${this.props.buffer} onNickClick=${this.props.onNickClick}/>
<${LogLine} key=${"msg-" + msg.key} message=${msg} buffer=${buf} onNickClick=${this.props.onNickClick}/>
`);
});

20
style.css
View file

@ -239,15 +239,29 @@ details summary {
color: #ec273e;
}
#buffer .date-separator {
#buffer .separator {
display: flex;
align-items: center;
text-align: center;
text-transform: lowercase;
font-variant: small-caps;
}
#buffer .date-separator::before, #buffer .date-separator::after {
#buffer .separator::before, #buffer .separator::after {
content: "";
flex: 1;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid transparent;
}
#buffer .date-separator {
color: #ddd;
}
#buffer .date-separator::before, #buffer .date-separator::after {
border-color: #ddd;
}
#buffer .unread-separator {
color: #ff3535;
}
#buffer .unread-separator::before, #buffer .unread-separator::after {
border-color: #ff3535;
}
#error-msg {