Add button to join new channel

This commit is contained in:
Simon Ser 2020-06-29 10:12:46 +02:00
parent 28e96e0ad5
commit b74fb90d47
No known key found for this signature in database
GPG Key ID: 0FDE7BE0E88F5E48
2 changed files with 28 additions and 2 deletions

View File

@ -54,6 +54,7 @@ export default class App extends Component {
this.handleBufferListClick = this.handleBufferListClick.bind(this);
this.handleComposerSubmit = this.handleComposerSubmit.bind(this);
this.handleNickClick = this.handleNickClick.bind(this);
this.handleJoinClick = this.handleJoinClick.bind(this);
if (window.localStorage && localStorage.getItem("autoconnect")) {
var connectParams = JSON.parse(localStorage.getItem("autoconnect"));
@ -516,6 +517,16 @@ export default class App extends Component {
this.switchBuffer(name);
}
handleJoinClick(event) {
event.preventDefault();
var channel = prompt("Join channel:");
if (!channel) {
return;
}
this.client.send({ command: "JOIN", params: [channel] });
}
componentDidMount() {
if (this.state.connectParams.autoconnect) {
this.connect(this.state.connectParams);
@ -560,6 +571,9 @@ export default class App extends Component {
return html`
<section id="buffer-list">
<${BufferList} buffers=${this.state.buffers} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
<div class="actions">
<a href="#" onClick=${this.handleJoinClick}>Join channel</a>
</div>
</section>
${bufferHeader}
<${ScrollManager} target=${this.buffer} scrollKey=${this.state.activeBuffer}>

View File

@ -22,12 +22,16 @@ body {
background-color: #e3e3e3;
grid-column: 1;
grid-row: 1 / 4;
display: flex;
flex-direction: column;
}
#buffer-list ul {
list-style-type: none;
margin: 0;
padding: 0;
flex: 1 0 auto;
}
#buffer-list li a {
display: inline-block;
@ -42,6 +46,14 @@ body {
#buffer-list li.unread-message a {
color: #b37400;
}
#buffer-list .actions {
flex-shrink: 0;
text-align: center;
}
#buffer-list .actions a {
display: block;
padding: 10px;
}
#buffer-header, #member-list-header {
box-sizing: border-box;
@ -133,11 +145,11 @@ body {
a {
color: green;
}
#buffer-list a, a.timestamp, a.nick {
#buffer-list li a, a.timestamp, a.nick {
color: #4a4a4a;
text-decoration: none;
}
#buffer-list a:hover, #buffer-list a:active,
#buffer-list li a:hover, #buffer-list li a:active,
a.timestamp:hover, a.timestamp:active,
a.nick:hover, a.nick:active {
text-decoration: underline;