e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added more options to the connect form, added support for more IRC commands on the server, added Font Awesome

Browse source
This commit is contained in:
khlieng 2015-02-07 03:10:58 +01:00
parent e942924c15
commit c15feaa310
10 changed files with 128 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

5
client/src/index.html
View file

@ -1,8 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IRC</title>
<link href="//fonts.googleapis.com/css?family=Montserrat|Roboto" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>

10
client/src/js/actions/server.js
View file

@ -9,13 +9,15 @@ var serverActions = Reflux.createActions([
'load'
]);
serverActions.connect.preEmit = function(server, nick, username, tls, name) {
serverActions.connect.preEmit = function(server, nick, opts) {
socket.send('connect', {
server: server,
nick: nick,
username: username,
tls: tls || false,
name: name || server
username: opts.username || nick,
password: opts.password,
realname: opts.realname || nick,
tls: opts.tls || false,
name: opts.name || server
});
};

48
client/src/js/components/Connect.jsx
View file

@ -5,18 +5,31 @@ var serverActions = require('../actions/server');
var channelActions = require('../actions/channel');
var Connect = React.createClass({
getInitialState: function() {
return {
showOptionals: false
};
},
handleSubmit: function(e) {
e.preventDefault();
var name = e.target.name.value.trim();
var address = e.target.address.value.trim();
var ssl = e.target.ssl.checked;
var nick = e.target.nick.value.trim();
var username = e.target.username.value.trim();
var channels = _.filter(_.map(e.target.channels.value.split(','), _.trim));
var opts = {
name: e.target.name.value.trim(),
ssl: e.target.ssl.checked
};
if (address.indexOf('.') > 0 && nick && username) {
serverActions.connect(address, nick, username, ssl, name);
if (this.state.showOptionals) {
opts.realname = e.target.realname.value.trim();
opts.username = e.target.username.value.trim();
opts.password = e.target.password.value.trim();
}
if (address.indexOf('.') > 0 && nick) {
serverActions.connect(address, nick, opts);
if (channels.length > 0) {
channelActions.join(channels, address);
@ -24,17 +37,36 @@ var Connect = React.createClass({
}
},
handleShowClick: function() {
this.setState({ showOptionals: !this.state.showOptionals});
},
render: function() {
var optionals = null;
if (this.state.showOptionals) {
optionals = (
<div>
<input name="username" type="text" placeholder="Username" />
<input name="password" type="text" placeholder="Password" />
<input name="realname" type="text" placeholder="Realname" />
</div>
);
}
return (
<div className="connect">
<form ref="form" className="connect-form" onSubmit={this.handleSubmit}>
<h1>Connect</h1>
<input name="name" type="text" placeholder="Name" defaultValue="Freenode" />
<input name="address" type="text" placeholder="Address" defaultValue="irc.freenode.net" />
<label><input name="ssl" type="checkbox" />SSL</label>
<input name="nick" type="text" placeholder="Nick" onChange={this.handleNickChange} />
<input name="username" type="text" placeholder="Username" />
<input name="nick" type="text" placeholder="Nick" />
<input name="channels" type="text" placeholder="Channels" />
{optionals}
<p>
<label><input name="ssl" type="checkbox" />SSL</label>
<i className="fa fa-ellipsis-h" onClick={this.handleShowClick}></i>
</p>
<input type="submit" value="Connect" />
</form>
</div>

9
client/src/js/components/MessageBox.jsx
View file

@ -34,6 +34,7 @@ var MessageBox = React.createClass({
render: function() {
var tab = this.state.selectedTab;
var dest = tab.channel || tab.server;
var style = {}
var messages = _.map(messageStore.getMessages(tab.server, dest), function(message) {
var messageClass = 'message';
@ -50,9 +51,13 @@ var MessageBox = React.createClass({
</p>
);
});
if (!tab.channel || tab.channel[0] !== '#') {
style.right = 0;
}
return (
<div className="messagebox">{messages}</div>
<div className="messagebox" style={style}>{messages}</div>
);
}
});

2
client/src/js/components/TabList.jsx
View file

@ -71,7 +71,7 @@ var TabList = React.createClass({
<button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
{tabs}
<div className="side-buttons">
<button onClick={this.handleSettingsClick}>Settings</button>
<i className="fa fa-cog" onClick={this.handleSettingsClick}></i>
</div>
</div>
);

36
client/src/style.css
View file

@ -12,7 +12,6 @@ body {
input {
font: 16px Roboto, sans-serif;
border: none;
border-top: 1px solid #DDD;
outline: none;
}
@ -81,12 +80,17 @@ p {
text-align: center;
}
.side-buttons button {
background: #333;
color: #FFF;
.side-buttons i {
color: #999;
margin: 5px;
height: 40px;
width: 100px;
line-height: 40px;
width: 40px;
cursor: pointer;
font-size: 20px;
}
.side-buttons i:hover {
color: #FFF;
}
.connect {
@ -136,12 +140,25 @@ p {
.connect-form input[type="checkbox"] {
display: inline-block;
margin: 15px 10px;
margin-left: 0;
vertical-align: center;
margin-right: 10px;
vertical-align: middle;
}
.connect-form i {
float: right;
cursor: pointer;
color: #999;
padding: 10px 5px;
font-size: 24px;
}
.connect-form i:hover {
color: #000;
}
.connect-form label {
display: inline-block;
padding: 10px 0;
color: #333;
}
@ -235,6 +252,7 @@ p {
width: 100%;
height: 100%;
padding: 15px;
border-top: 1px solid #DDD;
}
.userlist {