Use config file to show multiple teams

This commit is contained in:
Yuya Ochiai
2015-12-23 00:34:24 +09:00
parent e381a89cd5
commit 7f8ba9fd56
2 changed files with 77 additions and 26 deletions

View File

@@ -13,7 +13,7 @@
<body> <body>
<div id="content"></div> <div id="content"></div>
<script src="build/index.js"></script> <script src="build/index.js"></script>
<script src="./index.js"></script> <!-- <script src="./index.js"></script>-->
</body> </body>
</html> </html>

View File

@@ -1,25 +1,76 @@
'use strict'; 'use strict';
var MainPage = React.createClass({ const Grid = ReactBootstrap.Grid;
render: function() { const Row = ReactBootstrap.Row;
var style = { const Col = ReactBootstrap.Col;
position: 'absolute', const Tabs = ReactBootstrap.Tabs;
top: 0, const Tab = ReactBootstrap.Tab;
right: 0,
bottom: 0, const electron = require('electron');
left: 0 const remote = electron.remote;
};
// 'disablewebsecurity' is necessary to display external images. const settings = require('../common/settings');
// However, it allows also CSS/JavaScript.
// So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow. var MainPage = React.createClass({
return ( getInitialState: function() {
<webview style={ style } id="mainWebview" autosize="on" preload="webview/mattermost.js"></webview> return {
); key: 0
} };
}); },
handleSelect: function(key) {
this.setState({
ReactDOM.render( key
<MainPage />, });
document.getElementById('content') },
); visibleStyle: function(visible) {
var visibility = visible ? 'initial' : 'hidden';
return {
position: 'absolute',
top: 42,
right: 0,
bottom: 0,
left: 0,
visibility: visibility
};
},
render: function() {
var tabs = this.props.teams.map(function(team, index) {
return (<Tab eventKey={ index } title={ team.name }></Tab>);
});
var thisObj = this;
var views = this.props.teams.map(function(team, index) {
return (<MattermostView style={ thisObj.visibleStyle(thisObj.state.key === index) } src={ team.url } />)
});
return (
<Grid fluid>
<Row>
<Tabs activeKey={ this.state.key } onSelect={ this.handleSelect }>
{ tabs }
</Tabs>
</Row>
<Row>
{ views }
</Row>
</Grid>
);
}
});
var MattermostView = React.createClass({
render: function() {
// 'disablewebsecurity' is necessary to display external images.
// However, it allows also CSS/JavaScript.
// So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
return (
<webview style={ this.props.style } preload="webview/mattermost.js" src={ this.props.src } allowpopups></webview>
);
}
});
var configFile = remote.getGlobal('config-file');
var config = settings.readFileSync(configFile);
ReactDOM.render(
<MainPage teams={ config.teams } />,
document.getElementById('content')
);