CringeStudios/IRC_Client
5
0
Fork 0
forked from CringeStudios/gamja
Code Pull Requests Activity

Add date separators to buffer

Browse Source 
Closes: https://todo.sr.ht/~emersion/gamja/5
This commit is contained in:
Simon Ser 2020-08-13 19:00:56 +02:00
parent bce216b7fb
commit 0f2d1c3e71
No known key found for this signature in database
GPG Key ID: 0FDE7BE0E88F5E48
2 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/buffer.js
View File

@ -161,6 +161,33 @@ class NotificationNagger extends Component {
}
}
class DateSeparator extends Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps) {
return this.props.date.getTime() !== nextProps.date.getTime();
}
render() {
var date = this.props.date;
var YYYY = date.getFullYear().toString().padStart(4, "0");
var MM = (date.getMonth() + 1).toString().padStart(2, "0");
var DD = date.getDate().toString().padStart(2, "0");
var text = `${YYYY}-${MM}-${DD}`;
return html`
<div class="date-separator">
${text}
</div>
`;
}
}
function sameDate(d1, d2) {
return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
}
export default class Buffer extends Component {
shouldComponentUpdate(nextProps) {
return this.props.buffer !== nextProps.buffer;
@ -171,17 +198,27 @@ export default class Buffer extends Component {
return null;
}
var notifNagger = null;
var children = [];
if (this.props.buffer.type == BufferType.SERVER) {
notifNagger = html`<${NotificationNagger}/>`;
children.push(html`<${NotificationNagger}/>`);
}
var prevDate = new Date();
this.props.buffer.messages.forEach((msg) => {
var date = new Date(msg.tags.time);
if (!sameDate(prevDate, date)) {
children.push(html`<${DateSeparator} key=${"date-" + date} date=${date}/>`);
}
prevDate = date;
children.push(html`
<${LogLine} key=${"msg-" + msg.key} message=${msg} buffer=${this.props.buffer} onNickClick=${this.props.onNickClick}/>
`);
});
return html`
<div class="logline-list">
${notifNagger}
${this.props.buffer.messages.map((msg) => html`
<${LogLine} key=${msg.key} message=${msg} buffer=${this.props.buffer} onNickClick=${this.props.onNickClick}/>
`)}
${children}
</div>
`;
}

11
style.css
View File

@ -239,6 +239,17 @@ details summary {
color: #ec273e;
}
#buffer .date-separator {
display: flex;
align-items: center;
text-align: center;
}
#buffer .date-separator::before, #buffer .date-separator::after {
content: "";
flex: 1;
border-bottom: 1px solid #ddd;
}
#error-msg {
color: white;
background-color: red;