aaron/mattermost-desktop
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Style settings UI with React-Bootstrap

Browse source
This commit is contained in:
Yuya Ochiai 2015-12-22 00:58:41 +09:00
parent f3984982d1
commit 8c24475c68
3 changed files with 83 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/package.json
View file

@ -9,8 +9,10 @@
"electron-connect": "^0.3.3" "electron-connect": "^0.3.3"
}, },
"dependencies": { "dependencies": {
"bootstrap": "^3.3.6",
"os-locale": "^1.4.0", "os-locale": "^1.4.0",
"react": "^0.14.3", "react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3", "react-dom": "^0.14.3",
"yargs": "^3.31.0" "yargs": "^3.31.0"
} }

2
src/settings.html
View file

@ -6,6 +6,8 @@
<title>Settings</title> <title>Settings</title>
<script src="node_modules/react/dist/react.min.js"></script> <script src="node_modules/react/dist/react.min.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script> <script src="node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="node_modules/react-bootstrap/dist/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head> </head>
<body> <body>

124
src/settings.jsx
View file

@ -3,6 +3,14 @@
const remote = require('electron').remote; const remote = require('electron').remote;
const settings = require('./common/settings'); const settings = require('./common/settings');
const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Button = ReactBootstrap.Button;
const ListGroup = ReactBootstrap.ListGroup;
const ListGroupItem = ReactBootstrap.ListGroupItem;
const Glyphicon = ReactBootstrap.Glyphicon;
var SettingsPage = React.createClass({ var SettingsPage = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
@ -20,7 +28,7 @@ var SettingsPage = React.createClass({
teams: teams teams: teams
}); });
}, },
handleOK: function() { handleSave: function() {
var config = { var config = {
teams: this.state.teams, teams: this.state.teams,
version: 1 version: 1
@ -33,22 +41,33 @@ var SettingsPage = React.createClass({
}, },
render: function() { render: function() {
return ( return (
<div className="settingsPage"> <Grid className="settingsPage">
<TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } /> <Row>
<input type="button" value="OK" onClick={ this.handleOK } /> <Col md={ 12 }>
<input type="button" value="Cancel" onClick={ this.handleCancel } /> <h2>Teams</h2>
</div> <TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
</Col>
</Row>
<Row>
<Col md={ 12 }>
<Button onClick={ this.handleCancel }>Cancel</Button>
{ ' ' }
<Button bsStyle="primary" onClick={ this.handleSave }>Save</Button>
</Col>
</Row>
</Grid>
); );
} }
}); });
var TeamList = React.createClass({ var TeamList = React.createClass({
handleTeamChange: function(index, team) { handleTeamRemove: function(index) {
console.log(index);
var teams = this.props.teams; var teams = this.props.teams;
teams[index] = team; teams.splice(index, 1);
this.props.onTeamsChange(teams); this.props.onTeamsChange(teams);
}, },
handleNewTeamAdd: function(team) { handleTeamAdd: function(team) {
var teams = this.props.teams; var teams = this.props.teams;
teams.push(team); teams.push(team);
this.props.onTeamsChange(teams); this.props.onTeamsChange(teams);
@ -56,82 +75,97 @@ var TeamList = React.createClass({
render: function() { render: function() {
var thisObj = this; var thisObj = this;
var teamNodes = this.props.teams.map(function(team, i) { var teamNodes = this.props.teams.map(function(team, i) {
var handleTeamChange = function(team) { var handleTeamRemove = function() {
thisObj.handleTeamChange(i, team); thisObj.handleTeamRemove(i);
}; };
return ( return (
<li> <TeamListItem index={ i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } />
<TeamItem index={ i } name={ team.name } url={ team.url } onTeamChange={ handleTeamChange } onName />
</li>
); );
}); });
return ( return (
<div className="teamList"> <ListGroup class="teamList">
<ol> { teamNodes }
{ teamNodes } <TeamListItemNew onTeamAdd={ this.handleTeamAdd } />
<li> </ListGroup>
<NewTeamItem onNewTeamAdd={ this.handleNewTeamAdd } />
</li>
</ol>
</div>
); );
} }
}); });
var TeamItem = React.createClass({ var TeamListItem = React.createClass({
handleNameChange: function(e) { handleTeamRemove: function() {
this.props.onTeamChange({ this.props.onTeamRemove();
name: e.target.value,
url: this.props.url
});
},
handleURLChange: function(e) {
this.props.onTeamChange({
name: this.props.name,
url: e.target.value
});
}, },
render: function() { render: function() {
var style = {
left: {
"display": 'inline-block'
}
};
return ( return (
<div className="teamItem"> <div className="teamListItem list-group-item">
<input type="text" placeholder="Team name" value={ this.props.name } onChange={ this.handleNameChange }></input> <div style={ style.left }>
<input type="text" placeholder="Team URL (http://example.com/team)" value={ this.props.url } onChange={ this.handleURLChange }></input> <h4 className="list-group-item-heading">{ this.props.name }</h4>
<p className="list-group-item-text">
{ this.props.url }
</p>
</div>
<div className="pull-right">
<Button bsSize="xsmall" onClick={ this.handleTeamRemove }>
<Glyphicon glyph="remove" />
</Button>
</div>
</div> </div>
); );
} }
}); });
var NewTeamItem = React.createClass({ var TeamListItemNew = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
name: '', name: '',
url: '' url: ''
}; };
}, },
handleNewTeamAdd: function() { handleSubmit: function(e) {
this.props.onNewTeamAdd({ console.log('submit');
e.preventDefault();
this.props.onTeamAdd({
name: this.state.name, name: this.state.name,
url: this.state.url url: this.state.url
}); });
this.setState(this.getInitialState()); this.setState(this.getInitialState());
}, },
handleNameChange: function(e) { handleNameChange: function(e) {
console.log('name');
this.setState({ this.setState({
name: e.target.value name: e.target.value
}); });
}, },
handleURLChange: function(e) { handleURLChange: function(e) {
console.log('url');
this.setState({ this.setState({
url: e.target.value url: e.target.value
}); });
}, },
render: function() { render: function() {
return ( return (
<div className="newTeamItem"> <ListGroupItem>
<input type="text" placeholder="Team name" value={ this.state.name } onChange={ this.handleNameChange } /> <form className="form-inline" onSubmit={ this.handleSubmit }>
<input type="text" placeholder="Team URL (http://example.com/team)" value={ this.state.url } onChange={ this.handleURLChange } /> <div className="form-group">
<input type="button" value="Add" onClick={ this.handleNewTeamAdd } /> <label for="inputTeamName">Name</label>
</div> { ' ' }
<input type="text" className="form-control" id="inputTeamName" placeholder="Example team" value={ this.state.name } onChange={ this.handleNameChange } />
</div>
{ ' ' }
<div className="form-group">
<label for="inputTeamURL">URL</label>
{ ' ' }
<input type="url" className="form-control" id="inputTeamURL" placeholder="http://example.com/team" value={ this.state.url } onChange={ this.handleURLChange } />
</div>
{ ' ' }
<Button type="submit">Add</Button>
</form>
</ListGroupItem>
); );
} }
}); });