From 8c24475c682276ffd017762db0d336c0730cb9fd Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Tue, 22 Dec 2015 00:58:41 +0900 Subject: [PATCH] Style settings UI with React-Bootstrap --- src/package.json | 2 + src/settings.html | 2 + src/settings.jsx | 124 +++++++++++++++++++++++++++++----------------- 3 files changed, 83 insertions(+), 45 deletions(-) diff --git a/src/package.json b/src/package.json index 8a06e6e7..eda56688 100644 --- a/src/package.json +++ b/src/package.json @@ -9,8 +9,10 @@ "electron-connect": "^0.3.3" }, "dependencies": { + "bootstrap": "^3.3.6", "os-locale": "^1.4.0", "react": "^0.14.3", + "react-bootstrap": "^0.28.1", "react-dom": "^0.14.3", "yargs": "^3.31.0" } diff --git a/src/settings.html b/src/settings.html index fa84cb4d..c8cf1fc6 100644 --- a/src/settings.html +++ b/src/settings.html @@ -6,6 +6,8 @@ Settings + + diff --git a/src/settings.jsx b/src/settings.jsx index c45d0517..d85ad59b 100644 --- a/src/settings.jsx +++ b/src/settings.jsx @@ -3,6 +3,14 @@ const remote = require('electron').remote; 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({ getInitialState: function() { return { @@ -20,7 +28,7 @@ var SettingsPage = React.createClass({ teams: teams }); }, - handleOK: function() { + handleSave: function() { var config = { teams: this.state.teams, version: 1 @@ -33,22 +41,33 @@ var SettingsPage = React.createClass({ }, render: function() { return ( -
- - - -
+ + + +

Teams

+ + + + + + + { ' ' } + + + + ); } }); var TeamList = React.createClass({ - handleTeamChange: function(index, team) { + handleTeamRemove: function(index) { + console.log(index); var teams = this.props.teams; - teams[index] = team; + teams.splice(index, 1); this.props.onTeamsChange(teams); }, - handleNewTeamAdd: function(team) { + handleTeamAdd: function(team) { var teams = this.props.teams; teams.push(team); this.props.onTeamsChange(teams); @@ -56,82 +75,97 @@ var TeamList = React.createClass({ render: function() { var thisObj = this; var teamNodes = this.props.teams.map(function(team, i) { - var handleTeamChange = function(team) { - thisObj.handleTeamChange(i, team); + var handleTeamRemove = function() { + thisObj.handleTeamRemove(i); }; return ( -
  • - -
    • + ); }); return ( -
    -
      - { teamNodes } -
    1. - -
      2. -
    -
    + + { teamNodes } + + ); } }); -var TeamItem = React.createClass({ - handleNameChange: function(e) { - this.props.onTeamChange({ - name: e.target.value, - url: this.props.url - }); - }, - handleURLChange: function(e) { - this.props.onTeamChange({ - name: this.props.name, - url: e.target.value - }); +var TeamListItem = React.createClass({ + handleTeamRemove: function() { + this.props.onTeamRemove(); }, render: function() { + var style = { + left: { + "display": 'inline-block' + } + }; return ( -
    - - +
    +
    +

    { this.props.name }

    +

    + { this.props.url } +

    +
    +
    + +
    ); } }); -var NewTeamItem = React.createClass({ +var TeamListItemNew = React.createClass({ getInitialState: function() { return { name: '', url: '' }; }, - handleNewTeamAdd: function() { - this.props.onNewTeamAdd({ + handleSubmit: function(e) { + console.log('submit'); + e.preventDefault(); + this.props.onTeamAdd({ name: this.state.name, url: this.state.url }); this.setState(this.getInitialState()); }, handleNameChange: function(e) { + console.log('name'); this.setState({ name: e.target.value }); }, handleURLChange: function(e) { + console.log('url'); this.setState({ url: e.target.value }); }, render: function() { return ( -
    - - - -
    + +
    +
    + + { ' ' } + +
    + { ' ' } +
    + + { ' ' } + +
    + { ' ' } + +
    +     ); } });