Divide index.jsx into components
This commit is contained in:
Yuya Ochiai
95
src/browser/components/ErrorView.jsx
Normal file
95
src/browser/components/ErrorView.jsx
Normal file
@@ -0,0 +1,95 @@
|
||||
// ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
|
||||
|
||||
const React = require('react');
|
||||
const {Grid, Row, Col} = require('react-bootstrap');
|
||||
|
||||
const errorPage = {
|
||||
tableStyle: {
|
||||
display: 'table',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0'
|
||||
},
|
||||
|
||||
cellStyle: {
|
||||
display: 'table-cell',
|
||||
verticalAlign: 'top',
|
||||
paddingTop: '2em'
|
||||
},
|
||||
|
||||
bullets: {
|
||||
paddingLeft: '15px',
|
||||
lineHeight: '1.7'
|
||||
},
|
||||
|
||||
techInfo: {
|
||||
fontSize: '12px',
|
||||
color: '#aaa'
|
||||
}
|
||||
};
|
||||
|
||||
class ErrorView extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Grid
|
||||
id={this.props.id}
|
||||
style={this.props.style}
|
||||
>
|
||||
<div style={errorPage.tableStyle}>
|
||||
<div style={errorPage.cellStyle}>
|
||||
<Row>
|
||||
<Col
|
||||
xs={0}
|
||||
sm={1}
|
||||
md={1}
|
||||
lg={2}
|
||||
/>
|
||||
<Col
|
||||
xs={12}
|
||||
sm={10}
|
||||
md={10}
|
||||
lg={8}
|
||||
>
|
||||
<h2>{'Cannot connect to Mattermost'}</h2>
|
||||
<hr/>
|
||||
<p>{'We\'re having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work please verify that:'}</p>
|
||||
<br/>
|
||||
<ul style={errorPage.bullets}>
|
||||
<li>{'Your computer is connected to the internet.'}</li>
|
||||
<li>{'The Mattermost URL '}
|
||||
<a href={this.props.errorInfo.validatedURL}>
|
||||
{this.props.errorInfo.validatedURL}
|
||||
</a>{' is correct.'}</li>
|
||||
<li>{'You can reach '}
|
||||
<a href={this.props.errorInfo.validatedURL}>
|
||||
{this.props.errorInfo.validatedURL}
|
||||
</a>{' from a browser window.'}</li>
|
||||
</ul>
|
||||
<br/>
|
||||
<div style={errorPage.techInfo}>
|
||||
{this.props.errorInfo.errorDescription}{' ('}
|
||||
{this.props.errorInfo.errorCode }{')'}</div>
|
||||
</Col>
|
||||
<Col
|
||||
xs={0}
|
||||
sm={1}
|
||||
md={1}
|
||||
lg={2}
|
||||
/>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ErrorView.propTypes = {
|
||||
errorInfo: React.PropTypes.object,
|
||||
id: React.PropTypes.number,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = ErrorView;
|
||||
@@ -1,16 +1,8 @@
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const ReactBootstrap = require('react-bootstrap');
|
||||
const Modal = ReactBootstrap.Modal;
|
||||
const Form = ReactBootstrap.Form;
|
||||
const FormGroup = ReactBootstrap.FormGroup;
|
||||
const FormControl = ReactBootstrap.FormControl;
|
||||
const ControlLabel = ReactBootstrap.ControlLabel;
|
||||
const Col = ReactBootstrap.Col;
|
||||
const {Button, Col, ControlLabel, Form, FormGroup, FormControl, Modal} = require('react-bootstrap');
|
||||
|
||||
const Button = ReactBootstrap.Button;
|
||||
|
||||
const LoginModal = React.createClass({
|
||||
class LoginModal extends React.Component {
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
const usernameNode = ReactDOM.findDOMNode(this.refs.username);
|
||||
@@ -18,7 +10,8 @@ const LoginModal = React.createClass({
|
||||
this.props.onLogin(this.props.request, usernameNode.value, passwordNode.value);
|
||||
usernameNode.value = '';
|
||||
passwordNode.value = '';
|
||||
},
|
||||
}
|
||||
|
||||
render() {
|
||||
var theServer = '';
|
||||
if (!this.props.show) {
|
||||
@@ -39,7 +32,7 @@ const LoginModal = React.createClass({
|
||||
{ message }
|
||||
</p>
|
||||
<Form
|
||||
horizontal
|
||||
horizontal={true}
|
||||
onSubmit={this.handleSubmit}
|
||||
>
|
||||
<FormGroup>
|
||||
@@ -85,6 +78,15 @@ const LoginModal = React.createClass({
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
LoginModal.propTypes = {
|
||||
authInfo: React.PropTypes.object,
|
||||
authServerURL: React.PropTypes.string,
|
||||
onCancel: React.PropTypes.func,
|
||||
onLogin: React.PropTypes.func,
|
||||
request: React.PropTypes.object,
|
||||
show: React.PropTypes.bool
|
||||
};
|
||||
|
||||
module.exports = LoginModal;
|
||||
276
src/browser/components/MainPage.jsx
Normal file
276
src/browser/components/MainPage.jsx
Normal file
@@ -0,0 +1,276 @@
|
||||
const React = require('react');
|
||||
const {Grid, Row} = require('react-bootstrap');
|
||||
|
||||
const {ipcRenderer, remote} = require('electron');
|
||||
const url = require('url');
|
||||
|
||||
const LoginModal = require('./LoginModal.jsx');
|
||||
const MattermostView = require('./MattermostView.jsx');
|
||||
const TabBar = require('./TabBar.jsx');
|
||||
|
||||
const MainPage = React.createClass({
|
||||
propTypes: {
|
||||
disablewebsecurity: React.PropTypes.bool.isRequired,
|
||||
onUnreadCountChange: React.PropTypes.func.isRequired,
|
||||
teams: React.PropTypes.array.isRequired
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
key: 0,
|
||||
unreadCounts: new Array(this.props.teams.length),
|
||||
mentionCounts: new Array(this.props.teams.length),
|
||||
unreadAtActive: new Array(this.props.teams.length),
|
||||
mentionAtActiveCounts: new Array(this.props.teams.length),
|
||||
loginQueue: []
|
||||
};
|
||||
},
|
||||
componentDidMount() {
|
||||
var self = this;
|
||||
ipcRenderer.on('login-request', (event, request, authInfo) => {
|
||||
self.setState({
|
||||
loginRequired: true
|
||||
});
|
||||
const loginQueue = self.state.loginQueue;
|
||||
loginQueue.push({
|
||||
request,
|
||||
authInfo
|
||||
});
|
||||
self.setState({
|
||||
loginQueue
|
||||
});
|
||||
});
|
||||
|
||||
// can't switch tabs sequencially for some reason...
|
||||
ipcRenderer.on('switch-tab', (event, key) => {
|
||||
this.handleSelect(key);
|
||||
});
|
||||
ipcRenderer.on('select-next-tab', () => {
|
||||
this.handleSelect(this.state.key + 1);
|
||||
});
|
||||
ipcRenderer.on('select-previous-tab', () => {
|
||||
this.handleSelect(this.state.key - 1);
|
||||
});
|
||||
|
||||
// reload the activated tab
|
||||
ipcRenderer.on('reload-tab', () => {
|
||||
this.refs[`mattermostView${this.state.key}`].reload();
|
||||
});
|
||||
ipcRenderer.on('clear-cache-and-reload-tab', () => {
|
||||
this.refs[`mattermostView${this.state.key}`].clearCacheAndReload();
|
||||
});
|
||||
|
||||
// activate search box in current tab
|
||||
ipcRenderer.on('activate-search-box', () => {
|
||||
const webview = document.getElementById('mattermostView' + self.state.key);
|
||||
webview.send('activate-search-box');
|
||||
});
|
||||
|
||||
// activate search box in current chunnel
|
||||
ipcRenderer.on('activate-search-box-in-channel', () => {
|
||||
const webview = document.getElementById('mattermostView' + self.state.key);
|
||||
webview.send('activate-search-box-in-channel');
|
||||
});
|
||||
|
||||
function focusListener() {
|
||||
self.handleOnTeamFocused(self.state.key);
|
||||
self.refs[`mattermostView${self.state.key}`].focusOnWebView();
|
||||
}
|
||||
|
||||
var currentWindow = remote.getCurrentWindow();
|
||||
currentWindow.on('focus', focusListener);
|
||||
window.addEventListener('beforeunload', () => {
|
||||
currentWindow.removeListener('focus', focusListener);
|
||||
});
|
||||
|
||||
//goBack and goForward
|
||||
ipcRenderer.on('go-back', () => {
|
||||
const mattermost = self.refs[`mattermostView${self.state.key}`];
|
||||
if (mattermost.canGoBack()) {
|
||||
mattermost.goBack();
|
||||
}
|
||||
});
|
||||
|
||||
ipcRenderer.on('go-forward', () => {
|
||||
const mattermost = self.refs[`mattermostView${self.state.key}`];
|
||||
if (mattermost.canGoForward()) {
|
||||
mattermost.goForward();
|
||||
}
|
||||
});
|
||||
},
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.key !== this.state.key) { // i.e. When tab has been changed
|
||||
this.refs[`mattermostView${this.state.key}`].focusOnWebView();
|
||||
}
|
||||
},
|
||||
handleSelect(key) {
|
||||
const newKey = (this.props.teams.length + key) % this.props.teams.length;
|
||||
this.setState({
|
||||
key: newKey
|
||||
});
|
||||
this.handleOnTeamFocused(newKey);
|
||||
|
||||
var webview = document.getElementById('mattermostView' + newKey);
|
||||
ipcRenderer.send('update-title', {
|
||||
title: webview.getTitle()
|
||||
});
|
||||
},
|
||||
handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned) {
|
||||
var unreadCounts = this.state.unreadCounts;
|
||||
var mentionCounts = this.state.mentionCounts;
|
||||
var unreadAtActive = this.state.unreadAtActive;
|
||||
var mentionAtActiveCounts = this.state.mentionAtActiveCounts;
|
||||
unreadCounts[index] = unreadCount;
|
||||
mentionCounts[index] = mentionCount;
|
||||
|
||||
// Never turn on the unreadAtActive flag at current focused tab.
|
||||
if (this.state.key !== index || !remote.getCurrentWindow().isFocused()) {
|
||||
unreadAtActive[index] = unreadAtActive[index] || isUnread;
|
||||
if (isMentioned) {
|
||||
mentionAtActiveCounts[index]++;
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
unreadCounts,
|
||||
mentionCounts,
|
||||
unreadAtActive,
|
||||
mentionAtActiveCounts
|
||||
});
|
||||
this.handleUnreadCountTotalChange();
|
||||
},
|
||||
markReadAtActive(index) {
|
||||
var unreadAtActive = this.state.unreadAtActive;
|
||||
var mentionAtActiveCounts = this.state.mentionAtActiveCounts;
|
||||
unreadAtActive[index] = false;
|
||||
mentionAtActiveCounts[index] = 0;
|
||||
this.setState({
|
||||
unreadAtActive,
|
||||
mentionAtActiveCounts
|
||||
});
|
||||
this.handleUnreadCountTotalChange();
|
||||
},
|
||||
handleUnreadCountTotalChange() {
|
||||
if (this.props.onUnreadCountChange) {
|
||||
var allUnreadCount = this.state.unreadCounts.reduce((prev, curr) => {
|
||||
return prev + curr;
|
||||
}, 0);
|
||||
this.state.unreadAtActive.forEach((state) => {
|
||||
if (state) {
|
||||
allUnreadCount += 1;
|
||||
}
|
||||
});
|
||||
var allMentionCount = this.state.mentionCounts.reduce((prev, curr) => {
|
||||
return prev + curr;
|
||||
}, 0);
|
||||
this.state.mentionAtActiveCounts.forEach((count) => {
|
||||
allMentionCount += count;
|
||||
});
|
||||
this.props.onUnreadCountChange(allUnreadCount, allMentionCount);
|
||||
}
|
||||
},
|
||||
handleOnTeamFocused(index) {
|
||||
// Turn off the flag to indicate whether unread message of active channel contains at current tab.
|
||||
this.markReadAtActive(index);
|
||||
},
|
||||
|
||||
visibleStyle(visible) {
|
||||
var visibility = visible ? 'visible' : 'hidden';
|
||||
return {
|
||||
position: 'absolute',
|
||||
top: (this.props.teams.length > 1) ? 42 : 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
visibility
|
||||
};
|
||||
},
|
||||
|
||||
handleLogin(request, username, password) {
|
||||
ipcRenderer.send('login-credentials', request, username, password);
|
||||
const loginQueue = this.state.loginQueue;
|
||||
loginQueue.shift();
|
||||
this.setState({loginQueue});
|
||||
},
|
||||
handleLoginCancel() {
|
||||
const loginQueue = this.state.loginQueue;
|
||||
loginQueue.shift();
|
||||
this.setState({loginQueue});
|
||||
},
|
||||
render() {
|
||||
var self = this;
|
||||
|
||||
var tabsRow;
|
||||
if (this.props.teams.length > 1) {
|
||||
tabsRow = (
|
||||
<Row>
|
||||
<TabBar
|
||||
id='tabBar'
|
||||
teams={this.props.teams}
|
||||
unreadCounts={this.state.unreadCounts}
|
||||
mentionCounts={this.state.mentionCounts}
|
||||
unreadAtActive={this.state.unreadAtActive}
|
||||
mentionAtActiveCounts={this.state.mentionAtActiveCounts}
|
||||
activeKey={this.state.key}
|
||||
onSelect={this.handleSelect}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
var views = this.props.teams.map((team, index) => {
|
||||
function handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
|
||||
self.handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned);
|
||||
}
|
||||
function handleNotificationClick() {
|
||||
self.handleSelect(index);
|
||||
}
|
||||
var id = 'mattermostView' + index;
|
||||
var isActive = self.state.key === index;
|
||||
return (
|
||||
<MattermostView
|
||||
key={id}
|
||||
id={id}
|
||||
style={self.visibleStyle(isActive)}
|
||||
src={team.url}
|
||||
name={team.name}
|
||||
disablewebsecurity={this.props.disablewebsecurity}
|
||||
onUnreadCountChange={handleUnreadCountChange}
|
||||
onNotificationClick={handleNotificationClick}
|
||||
ref={id}
|
||||
active={isActive}
|
||||
/>);
|
||||
});
|
||||
var viewsRow = (
|
||||
<Row>
|
||||
{views}
|
||||
</Row>);
|
||||
|
||||
var request = null;
|
||||
var authServerURL = null;
|
||||
var authInfo = null;
|
||||
if (this.state.loginQueue.length !== 0) {
|
||||
request = this.state.loginQueue[0].request;
|
||||
const tmpURL = url.parse(this.state.loginQueue[0].request.url);
|
||||
authServerURL = `${tmpURL.protocol}//${tmpURL.host}`;
|
||||
authInfo = this.state.loginQueue[0].authInfo;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<LoginModal
|
||||
show={this.state.loginQueue.length !== 0}
|
||||
request={request}
|
||||
authInfo={authInfo}
|
||||
authServerURL={authServerURL}
|
||||
onLogin={this.handleLogin}
|
||||
onCancel={this.handleLoginCancel}
|
||||
/>
|
||||
<Grid fluid={true}>
|
||||
{ tabsRow }
|
||||
{ viewsRow }
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MainPage;
|
||||
231
src/browser/components/MattermostView.jsx
Normal file
231
src/browser/components/MattermostView.jsx
Normal file
@@ -0,0 +1,231 @@
|
||||
const React = require('react');
|
||||
const {findDOMNode} = require('react-dom');
|
||||
const {ipcRenderer, shell} = require('electron');
|
||||
const fs = require('fs');
|
||||
const url = require('url');
|
||||
const osLocale = require('os-locale');
|
||||
const electronContextMenu = require('electron-context-menu');
|
||||
|
||||
const ErrorView = require('./ErrorView.jsx');
|
||||
|
||||
const MattermostView = React.createClass({
|
||||
propTypes: {
|
||||
disablewebsecurity: React.PropTypes.bool,
|
||||
name: React.PropTypes.string,
|
||||
id: React.PropTypes.string,
|
||||
onUnreadCountChange: React.PropTypes.func,
|
||||
src: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
errorInfo: null
|
||||
};
|
||||
},
|
||||
|
||||
handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
|
||||
if (this.props.onUnreadCountChange) {
|
||||
this.props.onUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
|
||||
}
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
var self = this;
|
||||
var webview = findDOMNode(this.refs.webview);
|
||||
|
||||
// This option allows insecure content, when set to true it is possible to
|
||||
// load content via HTTP while the mattermost server serves HTTPS
|
||||
if (this.props.disablewebsecurity === true) {
|
||||
webview.setAttribute('webpreferences', 'allowDisplayingInsecureContent');
|
||||
}
|
||||
|
||||
webview.addEventListener('did-fail-load', (e) => {
|
||||
console.log(self.props.name, 'webview did-fail-load', e);
|
||||
if (e.errorCode === -3) { // An operation was aborted (due to user action).
|
||||
return;
|
||||
}
|
||||
|
||||
self.setState({
|
||||
errorInfo: e
|
||||
});
|
||||
function reload() {
|
||||
window.removeEventListener('online', reload);
|
||||
self.reload();
|
||||
}
|
||||
if (navigator.onLine) {
|
||||
setTimeout(reload, 30000);
|
||||
} else {
|
||||
window.addEventListener('online', reload);
|
||||
}
|
||||
});
|
||||
|
||||
// Open link in browserWindow. for exmaple, attached files.
|
||||
webview.addEventListener('new-window', (e) => {
|
||||
var currentURL = url.parse(webview.getURL());
|
||||
var destURL = url.parse(e.url);
|
||||
if (destURL.protocol !== 'http:' && destURL.protocol !== 'https:') {
|
||||
ipcRenderer.send('confirm-protocol', destURL.protocol, e.url);
|
||||
return;
|
||||
}
|
||||
if (currentURL.host === destURL.host) {
|
||||
// New window should disable nodeIntergration.
|
||||
window.open(e.url, 'Mattermost', 'nodeIntegration=no');
|
||||
} else {
|
||||
// if the link is external, use default browser.
|
||||
shell.openExternal(e.url);
|
||||
}
|
||||
});
|
||||
|
||||
webview.addEventListener('dom-ready', () => {
|
||||
// webview.openDevTools();
|
||||
|
||||
// Use 'Meiryo UI' and 'MS Gothic' to prevent CJK fonts on Windows(JP).
|
||||
if (process.platform === 'win32') {
|
||||
function applyCssFile(cssFile) {
|
||||
fs.readFile(cssFile, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
return;
|
||||
}
|
||||
webview.insertCSS(data);
|
||||
});
|
||||
}
|
||||
|
||||
osLocale((err, locale) => {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
return;
|
||||
}
|
||||
if (locale === 'ja_JP') {
|
||||
applyCssFile(__dirname + '/css/jp_fonts.css');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
electronContextMenu({
|
||||
window: webview
|
||||
});
|
||||
});
|
||||
|
||||
webview.addEventListener('ipc-message', (event) => {
|
||||
switch (event.channel) {
|
||||
case 'onUnreadCountChange':
|
||||
var unreadCount = event.args[0];
|
||||
var mentionCount = event.args[1];
|
||||
|
||||
// isUnread and isMentioned is pulse flag.
|
||||
var isUnread = event.args[2];
|
||||
var isMentioned = event.args[3];
|
||||
self.handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
|
||||
break;
|
||||
case 'onNotificationClick':
|
||||
self.props.onNotificationClick();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
webview.addEventListener('page-title-updated', (event) => {
|
||||
if (self.props.active) {
|
||||
ipcRenderer.send('update-title', {
|
||||
title: event.title
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
webview.addEventListener('console-message', (e) => {
|
||||
const message = `[${this.props.name}] ${e.message}`;
|
||||
switch (e.level) {
|
||||
case 0:
|
||||
console.log(message);
|
||||
break;
|
||||
case 1:
|
||||
console.warn(message);
|
||||
break;
|
||||
case 2:
|
||||
console.error(message);
|
||||
break;
|
||||
default:
|
||||
console.log(message);
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
reload() {
|
||||
this.setState({
|
||||
errorInfo: null
|
||||
});
|
||||
var webview = findDOMNode(this.refs.webview);
|
||||
webview.reload();
|
||||
},
|
||||
|
||||
clearCacheAndReload() {
|
||||
this.setState({
|
||||
errorInfo: null
|
||||
});
|
||||
var webContents = findDOMNode(this.refs.webview).getWebContents();
|
||||
webContents.session.clearCache(() => {
|
||||
webContents.reload();
|
||||
});
|
||||
},
|
||||
|
||||
focusOnWebView() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
if (!webview.getWebContents().isFocused()) {
|
||||
webview.focus();
|
||||
webview.getWebContents().focus();
|
||||
}
|
||||
},
|
||||
|
||||
canGoBack() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
return webview.getWebContents().canGoBack();
|
||||
},
|
||||
|
||||
canGoForward() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
return webview.getWebContents().canGoForward();
|
||||
},
|
||||
|
||||
goBack() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
webview.getWebContents().goBack();
|
||||
},
|
||||
|
||||
goForward() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
webview.getWebContents().goForward();
|
||||
},
|
||||
|
||||
render() {
|
||||
const errorView = this.state.errorInfo ? (
|
||||
<ErrorView
|
||||
id={this.props.id + '-fail'}
|
||||
style={this.props.style}
|
||||
className='errorView'
|
||||
errorInfo={this.state.errorInfo}
|
||||
/>) : null;
|
||||
|
||||
// 'disablewebsecurity' is necessary to display external images.
|
||||
// However, it allows also CSS/JavaScript.
|
||||
// So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
|
||||
|
||||
// Need to keep webview mounted when failed to load.
|
||||
return (
|
||||
<div>
|
||||
{ errorView }
|
||||
<webview
|
||||
id={this.props.id}
|
||||
className='mattermostView'
|
||||
style={this.props.style}
|
||||
preload='webview/mattermost.js'
|
||||
src={this.props.src}
|
||||
ref='webview'
|
||||
nodeintegration='false'
|
||||
/>
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MattermostView;
|
||||
90
src/browser/components/TabBar.jsx
Normal file
90
src/browser/components/TabBar.jsx
Normal file
@@ -0,0 +1,90 @@
|
||||
const React = require('react');
|
||||
const {Nav, NavItem} = require('react-bootstrap');
|
||||
|
||||
class TabBar extends React.Component {
|
||||
render() {
|
||||
var self = this;
|
||||
var tabs = this.props.teams.map((team, index) => {
|
||||
var unreadCount = 0;
|
||||
var badgeStyle = {
|
||||
background: '#FF1744',
|
||||
float: 'right',
|
||||
color: 'white',
|
||||
minWidth: '19px',
|
||||
fontSize: '12px',
|
||||
textAlign: 'center',
|
||||
lineHeight: '20px',
|
||||
height: '19px',
|
||||
marginLeft: '5px',
|
||||
borderRadius: '50%'
|
||||
};
|
||||
|
||||
if (self.props.unreadCounts[index] > 0) {
|
||||
unreadCount = self.props.unreadCounts[index];
|
||||
}
|
||||
if (self.props.unreadAtActive[index]) {
|
||||
unreadCount += 1;
|
||||
}
|
||||
|
||||
var mentionCount = 0;
|
||||
if (self.props.mentionCounts[index] > 0) {
|
||||
mentionCount = self.props.mentionCounts[index];
|
||||
}
|
||||
if (self.props.mentionAtActiveCounts[index] > 0) {
|
||||
mentionCount += self.props.mentionAtActiveCounts[index];
|
||||
}
|
||||
|
||||
var badgeDiv;
|
||||
if (mentionCount !== 0) {
|
||||
badgeDiv = (
|
||||
<div style={badgeStyle}>
|
||||
{mentionCount}
|
||||
</div>);
|
||||
}
|
||||
var id = 'teamTabItem' + index;
|
||||
if (unreadCount === 0) {
|
||||
return (
|
||||
<NavItem
|
||||
className='teamTabItem'
|
||||
key={id}
|
||||
id={id}
|
||||
eventKey={index}
|
||||
>
|
||||
{ team.name }
|
||||
{ ' ' }
|
||||
{ badgeDiv }
|
||||
</NavItem>);
|
||||
}
|
||||
return (
|
||||
<NavItem
|
||||
className='teamTabItem'
|
||||
key={id}
|
||||
id={id}
|
||||
eventKey={index}
|
||||
>
|
||||
<b>{ team.name }</b>
|
||||
{ ' ' }
|
||||
{ badgeDiv }
|
||||
</NavItem>);
|
||||
});
|
||||
return (
|
||||
<Nav
|
||||
id={this.props.id}
|
||||
bsStyle='tabs'
|
||||
activeKey={this.props.activeKey}
|
||||
onSelect={this.props.onSelect}
|
||||
>
|
||||
{ tabs }
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TabBar.propTypes = {
|
||||
activeKey: React.PropTypes.number,
|
||||
id: React.PropTypes.string,
|
||||
onSelect: React.PropTypes.func,
|
||||
teams: React.PropTypes.array
|
||||
};
|
||||
|
||||
module.exports = TabBar;
|
||||
@@ -6,22 +6,8 @@ window.eval = global.eval = () => {
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const ReactBootstrap = require('react-bootstrap');
|
||||
|
||||
const Grid = ReactBootstrap.Grid;
|
||||
const Row = ReactBootstrap.Row;
|
||||
const Col = ReactBootstrap.Col;
|
||||
const Nav = ReactBootstrap.Nav;
|
||||
const NavItem = ReactBootstrap.NavItem;
|
||||
|
||||
const LoginModal = require('./components/loginModal.jsx');
|
||||
|
||||
const {remote, ipcRenderer, shell} = require('electron');
|
||||
const electronContextMenu = require('electron-context-menu');
|
||||
|
||||
const osLocale = require('os-locale');
|
||||
const fs = require('fs');
|
||||
const url = require('url');
|
||||
const {remote, ipcRenderer} = require('electron');
|
||||
const MainPage = require('./components/MainPage.jsx');
|
||||
|
||||
const settings = require('../common/settings');
|
||||
const badge = require('./js/badge');
|
||||
@@ -39,635 +25,6 @@ if (config.teams.length === 0) {
|
||||
window.location = 'settings.html';
|
||||
}
|
||||
|
||||
var MainPage = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
key: 0,
|
||||
unreadCounts: new Array(this.props.teams.length),
|
||||
mentionCounts: new Array(this.props.teams.length),
|
||||
unreadAtActive: new Array(this.props.teams.length),
|
||||
mentionAtActiveCounts: new Array(this.props.teams.length),
|
||||
loginQueue: []
|
||||
};
|
||||
},
|
||||
componentDidMount() {
|
||||
var self = this;
|
||||
ipcRenderer.on('login-request', (event, request, authInfo) => {
|
||||
self.setState({
|
||||
loginRequired: true
|
||||
});
|
||||
const loginQueue = self.state.loginQueue;
|
||||
loginQueue.push({
|
||||
request,
|
||||
authInfo
|
||||
});
|
||||
self.setState({
|
||||
loginQueue
|
||||
});
|
||||
});
|
||||
|
||||
// can't switch tabs sequencially for some reason...
|
||||
ipcRenderer.on('switch-tab', (event, key) => {
|
||||
this.handleSelect(key);
|
||||
});
|
||||
ipcRenderer.on('select-next-tab', () => {
|
||||
this.handleSelect(this.state.key + 1);
|
||||
});
|
||||
ipcRenderer.on('select-previous-tab', () => {
|
||||
this.handleSelect(this.state.key - 1);
|
||||
});
|
||||
|
||||
// reload the activated tab
|
||||
ipcRenderer.on('reload-tab', () => {
|
||||
this.refs[`mattermostView${this.state.key}`].reload();
|
||||
});
|
||||
ipcRenderer.on('clear-cache-and-reload-tab', () => {
|
||||
this.refs[`mattermostView${this.state.key}`].clearCacheAndReload();
|
||||
});
|
||||
|
||||
// activate search box in current tab
|
||||
ipcRenderer.on('activate-search-box', () => {
|
||||
const webview = document.getElementById('mattermostView' + self.state.key);
|
||||
webview.send('activate-search-box');
|
||||
});
|
||||
|
||||
// activate search box in current chunnel
|
||||
ipcRenderer.on('activate-search-box-in-channel', () => {
|
||||
const webview = document.getElementById('mattermostView' + self.state.key);
|
||||
webview.send('activate-search-box-in-channel');
|
||||
});
|
||||
|
||||
function focusListener() {
|
||||
self.handleOnTeamFocused(self.state.key);
|
||||
self.refs[`mattermostView${self.state.key}`].focusOnWebView();
|
||||
}
|
||||
|
||||
var currentWindow = remote.getCurrentWindow();
|
||||
currentWindow.on('focus', focusListener);
|
||||
window.addEventListener('beforeunload', () => {
|
||||
currentWindow.removeListener('focus', focusListener);
|
||||
});
|
||||
|
||||
//goBack and goForward
|
||||
ipcRenderer.on('go-back', () => {
|
||||
const mattermost = self.refs[`mattermostView${self.state.key}`];
|
||||
if (mattermost.canGoBack()) {
|
||||
mattermost.goBack();
|
||||
}
|
||||
});
|
||||
|
||||
ipcRenderer.on('go-forward', () => {
|
||||
const mattermost = self.refs[`mattermostView${self.state.key}`];
|
||||
if (mattermost.canGoForward()) {
|
||||
mattermost.goForward();
|
||||
}
|
||||
});
|
||||
},
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.key !== this.state.key) { // i.e. When tab has been changed
|
||||
this.refs[`mattermostView${this.state.key}`].focusOnWebView();
|
||||
}
|
||||
},
|
||||
handleSelect(key) {
|
||||
const newKey = (this.props.teams.length + key) % this.props.teams.length;
|
||||
this.setState({
|
||||
key: newKey
|
||||
});
|
||||
this.handleOnTeamFocused(newKey);
|
||||
|
||||
var webview = document.getElementById('mattermostView' + newKey);
|
||||
ipcRenderer.send('update-title', {
|
||||
title: webview.getTitle()
|
||||
});
|
||||
},
|
||||
handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned) {
|
||||
var unreadCounts = this.state.unreadCounts;
|
||||
var mentionCounts = this.state.mentionCounts;
|
||||
var unreadAtActive = this.state.unreadAtActive;
|
||||
var mentionAtActiveCounts = this.state.mentionAtActiveCounts;
|
||||
unreadCounts[index] = unreadCount;
|
||||
mentionCounts[index] = mentionCount;
|
||||
|
||||
// Never turn on the unreadAtActive flag at current focused tab.
|
||||
if (this.state.key !== index || !remote.getCurrentWindow().isFocused()) {
|
||||
unreadAtActive[index] = unreadAtActive[index] || isUnread;
|
||||
if (isMentioned) {
|
||||
mentionAtActiveCounts[index]++;
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
unreadCounts,
|
||||
mentionCounts,
|
||||
unreadAtActive,
|
||||
mentionAtActiveCounts
|
||||
});
|
||||
this.handleUnreadCountTotalChange();
|
||||
},
|
||||
markReadAtActive(index) {
|
||||
var unreadAtActive = this.state.unreadAtActive;
|
||||
var mentionAtActiveCounts = this.state.mentionAtActiveCounts;
|
||||
unreadAtActive[index] = false;
|
||||
mentionAtActiveCounts[index] = 0;
|
||||
this.setState({
|
||||
unreadAtActive,
|
||||
mentionAtActiveCounts
|
||||
});
|
||||
this.handleUnreadCountTotalChange();
|
||||
},
|
||||
handleUnreadCountTotalChange() {
|
||||
if (this.props.onUnreadCountChange) {
|
||||
var allUnreadCount = this.state.unreadCounts.reduce((prev, curr) => {
|
||||
return prev + curr;
|
||||
}, 0);
|
||||
this.state.unreadAtActive.forEach((state) => {
|
||||
if (state) {
|
||||
allUnreadCount += 1;
|
||||
}
|
||||
});
|
||||
var allMentionCount = this.state.mentionCounts.reduce((prev, curr) => {
|
||||
return prev + curr;
|
||||
}, 0);
|
||||
this.state.mentionAtActiveCounts.forEach((count) => {
|
||||
allMentionCount += count;
|
||||
});
|
||||
this.props.onUnreadCountChange(allUnreadCount, allMentionCount);
|
||||
}
|
||||
},
|
||||
handleOnTeamFocused(index) {
|
||||
// Turn off the flag to indicate whether unread message of active channel contains at current tab.
|
||||
this.markReadAtActive(index);
|
||||
},
|
||||
|
||||
visibleStyle(visible) {
|
||||
var visibility = visible ? 'visible' : 'hidden';
|
||||
return {
|
||||
position: 'absolute',
|
||||
top: (this.props.teams.length > 1) ? 42 : 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
visibility
|
||||
};
|
||||
},
|
||||
|
||||
handleLogin(request, username, password) {
|
||||
ipcRenderer.send('login-credentials', request, username, password);
|
||||
const loginQueue = this.state.loginQueue;
|
||||
loginQueue.shift();
|
||||
this.setState(loginQueue);
|
||||
},
|
||||
handleLoginCancel() {
|
||||
const loginQueue = this.state.loginQueue;
|
||||
loginQueue.shift();
|
||||
this.setState(loginQueue);
|
||||
},
|
||||
render() {
|
||||
var self = this;
|
||||
|
||||
var tabsRow;
|
||||
if (this.props.teams.length > 1) {
|
||||
tabsRow = (
|
||||
<Row>
|
||||
<TabBar
|
||||
id='tabBar'
|
||||
teams={this.props.teams}
|
||||
unreadCounts={this.state.unreadCounts}
|
||||
mentionCounts={this.state.mentionCounts}
|
||||
unreadAtActive={this.state.unreadAtActive}
|
||||
mentionAtActiveCounts={this.state.mentionAtActiveCounts}
|
||||
activeKey={this.state.key}
|
||||
onSelect={this.handleSelect}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
var views = this.props.teams.map((team, index) => {
|
||||
function handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
|
||||
self.handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned);
|
||||
}
|
||||
function handleNotificationClick() {
|
||||
self.handleSelect(index);
|
||||
}
|
||||
var id = 'mattermostView' + index;
|
||||
var isActive = self.state.key === index;
|
||||
return (
|
||||
<MattermostView
|
||||
key={id}
|
||||
id={id}
|
||||
style={self.visibleStyle(isActive)}
|
||||
src={team.url}
|
||||
name={team.name}
|
||||
onUnreadCountChange={handleUnreadCountChange}
|
||||
onNotificationClick={handleNotificationClick}
|
||||
ref={id}
|
||||
active={isActive}
|
||||
/>);
|
||||
});
|
||||
var viewsRow = (
|
||||
<Row>
|
||||
{views}
|
||||
</Row>);
|
||||
|
||||
var request = null;
|
||||
var authServerURL = null;
|
||||
var authInfo = null;
|
||||
if (this.state.loginQueue.length !== 0) {
|
||||
request = this.state.loginQueue[0].request;
|
||||
const tmpURL = url.parse(this.state.loginQueue[0].request.url);
|
||||
authServerURL = `${tmpURL.protocol}//${tmpURL.host}`;
|
||||
authInfo = this.state.loginQueue[0].authInfo;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<LoginModal
|
||||
show={this.state.loginQueue.length !== 0}
|
||||
request={request}
|
||||
authInfo={authInfo}
|
||||
authServerURL={authServerURL}
|
||||
onLogin={this.handleLogin}
|
||||
onCancel={this.handleLoginCancel}
|
||||
/>
|
||||
<Grid fluid>
|
||||
{ tabsRow }
|
||||
{ viewsRow }
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var TabBar = React.createClass({
|
||||
render() {
|
||||
var self = this;
|
||||
var tabs = this.props.teams.map((team, index) => {
|
||||
var unreadCount = 0;
|
||||
var badgeStyle = {
|
||||
background: '#FF1744',
|
||||
float: 'right',
|
||||
color: 'white',
|
||||
minWidth: '19px',
|
||||
fontSize: '12px',
|
||||
textAlign: 'center',
|
||||
lineHeight: '20px',
|
||||
height: '19px',
|
||||
marginLeft: '5px',
|
||||
borderRadius: '50%'
|
||||
};
|
||||
|
||||
if (self.props.unreadCounts[index] > 0) {
|
||||
unreadCount = self.props.unreadCounts[index];
|
||||
}
|
||||
if (self.props.unreadAtActive[index]) {
|
||||
unreadCount += 1;
|
||||
}
|
||||
|
||||
var mentionCount = 0;
|
||||
if (self.props.mentionCounts[index] > 0) {
|
||||
mentionCount = self.props.mentionCounts[index];
|
||||
}
|
||||
if (self.props.mentionAtActiveCounts[index] > 0) {
|
||||
mentionCount += self.props.mentionAtActiveCounts[index];
|
||||
}
|
||||
|
||||
var badgeDiv;
|
||||
if (mentionCount !== 0) {
|
||||
badgeDiv = (
|
||||
<div style={badgeStyle}>
|
||||
{mentionCount}
|
||||
</div>);
|
||||
}
|
||||
var id = 'teamTabItem' + index;
|
||||
if (unreadCount === 0) {
|
||||
return (
|
||||
<NavItem
|
||||
className='teamTabItem'
|
||||
key={id}
|
||||
id={id}
|
||||
eventKey={index}
|
||||
>
|
||||
{ team.name }
|
||||
{ ' ' }
|
||||
{ badgeDiv }
|
||||
</NavItem>);
|
||||
}
|
||||
return (
|
||||
<NavItem
|
||||
className='teamTabItem'
|
||||
key={id}
|
||||
id={id}
|
||||
eventKey={index}
|
||||
>
|
||||
<b>{ team.name }</b>
|
||||
{ ' ' }
|
||||
{ badgeDiv }
|
||||
</NavItem>);
|
||||
});
|
||||
return (
|
||||
<Nav
|
||||
id={this.props.id}
|
||||
bsStyle='tabs'
|
||||
activeKey={this.props.activeKey}
|
||||
onSelect={this.props.onSelect}
|
||||
>
|
||||
{ tabs }
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var MattermostView = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
errorInfo: null
|
||||
};
|
||||
},
|
||||
handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
|
||||
if (this.props.onUnreadCountChange) {
|
||||
this.props.onUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
|
||||
}
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
var self = this;
|
||||
var webview = ReactDOM.findDOMNode(this.refs.webview);
|
||||
|
||||
// This option allows insecure content, when set to true it is possible to
|
||||
// load content via HTTP while the mattermost server serves HTTPS
|
||||
if (config.disablewebsecurity === true) {
|
||||
webview.setAttribute('webpreferences', 'allowDisplayingInsecureContent');
|
||||
}
|
||||
|
||||
webview.addEventListener('did-fail-load', (e) => {
|
||||
console.log(self.props.name, 'webview did-fail-load', e);
|
||||
if (e.errorCode === -3) { // An operation was aborted (due to user action).
|
||||
return;
|
||||
}
|
||||
|
||||
self.setState({
|
||||
errorInfo: e
|
||||
});
|
||||
function reload() {
|
||||
window.removeEventListener('online', reload);
|
||||
self.reload();
|
||||
}
|
||||
if (navigator.onLine) {
|
||||
setTimeout(reload, 30000);
|
||||
} else {
|
||||
window.addEventListener('online', reload);
|
||||
}
|
||||
});
|
||||
|
||||
// Open link in browserWindow. for exmaple, attached files.
|
||||
webview.addEventListener('new-window', (e) => {
|
||||
var currentURL = url.parse(webview.getURL());
|
||||
var destURL = url.parse(e.url);
|
||||
if (destURL.protocol !== 'http:' && destURL.protocol !== 'https:') {
|
||||
ipcRenderer.send('confirm-protocol', destURL.protocol, e.url);
|
||||
return;
|
||||
}
|
||||
if (currentURL.host === destURL.host) {
|
||||
// New window should disable nodeIntergration.
|
||||
window.open(e.url, 'Mattermost', 'nodeIntegration=no');
|
||||
} else {
|
||||
// if the link is external, use default browser.
|
||||
shell.openExternal(e.url);
|
||||
}
|
||||
});
|
||||
|
||||
webview.addEventListener('dom-ready', () => {
|
||||
// webview.openDevTools();
|
||||
|
||||
// Use 'Meiryo UI' and 'MS Gothic' to prevent CJK fonts on Windows(JP).
|
||||
if (process.platform === 'win32') {
|
||||
function applyCssFile(cssFile) {
|
||||
fs.readFile(cssFile, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
return;
|
||||
}
|
||||
webview.insertCSS(data);
|
||||
});
|
||||
}
|
||||
|
||||
osLocale((err, locale) => {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
return;
|
||||
}
|
||||
if (locale === 'ja_JP') {
|
||||
applyCssFile(__dirname + '/css/jp_fonts.css');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
electronContextMenu({
|
||||
window: webview
|
||||
});
|
||||
});
|
||||
|
||||
webview.addEventListener('ipc-message', (event) => {
|
||||
switch (event.channel) {
|
||||
case 'onUnreadCountChange':
|
||||
var unreadCount = event.args[0];
|
||||
var mentionCount = event.args[1];
|
||||
|
||||
// isUnread and isMentioned is pulse flag.
|
||||
var isUnread = event.args[2];
|
||||
var isMentioned = event.args[3];
|
||||
self.handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
|
||||
break;
|
||||
case 'onNotificationClick':
|
||||
self.props.onNotificationClick();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
webview.addEventListener('page-title-updated', (event) => {
|
||||
if (self.props.active) {
|
||||
ipcRenderer.send('update-title', {
|
||||
title: event.title
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
webview.addEventListener('console-message', (e) => {
|
||||
const message = `[${this.props.name}] ${e.message}`;
|
||||
switch (e.level) {
|
||||
case 0:
|
||||
console.log(message);
|
||||
break;
|
||||
case 1:
|
||||
console.warn(message);
|
||||
break;
|
||||
case 2:
|
||||
console.error(message);
|
||||
break;
|
||||
default:
|
||||
console.log(message);
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
reload() {
|
||||
this.setState({
|
||||
errorInfo: null
|
||||
});
|
||||
var webview = ReactDOM.findDOMNode(this.refs.webview);
|
||||
webview.reload();
|
||||
},
|
||||
clearCacheAndReload() {
|
||||
this.setState({
|
||||
errorInfo: null
|
||||
});
|
||||
var webContents = ReactDOM.findDOMNode(this.refs.webview).getWebContents();
|
||||
webContents.session.clearCache(() => {
|
||||
webContents.reload();
|
||||
});
|
||||
},
|
||||
|
||||
focusOnWebView() {
|
||||
const webview = ReactDOM.findDOMNode(this.refs.webview);
|
||||
if (!webview.getWebContents().isFocused()) {
|
||||
webview.focus();
|
||||
webview.getWebContents().focus();
|
||||
}
|
||||
},
|
||||
|
||||
canGoBack() {
|
||||
const webview = ReactDOM.findDOMNode(this.refs.webview);
|
||||
return webview.getWebContents().canGoBack();
|
||||
},
|
||||
|
||||
canGoForward() {
|
||||
const webview = ReactDOM.findDOMNode(this.refs.webview);
|
||||
return webview.getWebContents().canGoForward();
|
||||
},
|
||||
|
||||
goBack() {
|
||||
const webview = ReactDOM.findDOMNode(this.refs.webview);
|
||||
webview.getWebContents().goBack();
|
||||
},
|
||||
|
||||
goForward() {
|
||||
const webview = ReactDOM.findDOMNode(this.refs.webview);
|
||||
webview.getWebContents().goForward();
|
||||
},
|
||||
|
||||
render() {
|
||||
const errorView = this.state.errorInfo ? (
|
||||
<ErrorView
|
||||
id={this.props.id + '-fail'}
|
||||
style={this.props.style}
|
||||
className='errorView'
|
||||
errorInfo={this.state.errorInfo}
|
||||
/>) : null;
|
||||
|
||||
// 'disablewebsecurity' is necessary to display external images.
|
||||
// However, it allows also CSS/JavaScript.
|
||||
// So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
|
||||
|
||||
// Need to keep webview mounted when failed to load.
|
||||
return (
|
||||
<div>
|
||||
{ errorView }
|
||||
<webview
|
||||
id={this.props.id}
|
||||
className='mattermostView'
|
||||
style={this.props.style}
|
||||
preload='webview/mattermost.js'
|
||||
src={this.props.src}
|
||||
ref='webview'
|
||||
nodeintegration='false'
|
||||
/>
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
|
||||
// ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
|
||||
const errorPage = {
|
||||
tableStyle: {
|
||||
display: 'table',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0'
|
||||
},
|
||||
|
||||
cellStyle: {
|
||||
display: 'table-cell',
|
||||
verticalAlign: 'top',
|
||||
paddingTop: '2em'
|
||||
},
|
||||
|
||||
bullets: {
|
||||
paddingLeft: '15px',
|
||||
lineHeight: '1.7'
|
||||
},
|
||||
|
||||
techInfo: {
|
||||
fontSize: '12px',
|
||||
color: '#aaa'
|
||||
}
|
||||
};
|
||||
|
||||
var ErrorView = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<Grid
|
||||
id={this.props.id}
|
||||
style={this.props.style}
|
||||
>
|
||||
<div style={errorPage.tableStyle}>
|
||||
<div style={errorPage.cellStyle}>
|
||||
<Row>
|
||||
<Col
|
||||
xs={0}
|
||||
sm={1}
|
||||
md={1}
|
||||
lg={2}
|
||||
/>
|
||||
<Col
|
||||
xs={12}
|
||||
sm={10}
|
||||
md={10}
|
||||
lg={8}
|
||||
>
|
||||
<h2>{'Cannot connect to Mattermost'}</h2>
|
||||
<hr/>
|
||||
<p>{'We\'re having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work please verify that:'}</p>
|
||||
<br/>
|
||||
<ul style={errorPage.bullets}>
|
||||
<li>{'Your computer is connected to the internet.'}</li>
|
||||
<li>{'The Mattermost URL '}
|
||||
<a href={this.props.errorInfo.validatedURL}>
|
||||
{this.props.errorInfo.validatedURL}
|
||||
</a>{' is correct.'}</li>
|
||||
<li>{'You can reach '}
|
||||
<a href={this.props.errorInfo.validatedURL}>
|
||||
{this.props.errorInfo.validatedURL}
|
||||
</a>{' from a browser window.'}</li>
|
||||
</ul>
|
||||
<br/>
|
||||
<div style={errorPage.techInfo}>
|
||||
{this.props.errorInfo.errorDescription}{' ('}
|
||||
{this.props.errorInfo.errorCode }{')'}</div>
|
||||
</Col>
|
||||
<Col
|
||||
xs={0}
|
||||
sm={1}
|
||||
md={1}
|
||||
lg={2}
|
||||
/>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
function showUnreadBadgeWindows(unreadCount, mentionCount) {
|
||||
function sendBadge(dataURL, description) {
|
||||
// window.setOverlayIcon() does't work with NativeImage across remote boundaries.
|
||||
@@ -734,6 +91,7 @@ function showUnreadBadge(unreadCount, mentionCount) {
|
||||
|
||||
ReactDOM.render(
|
||||
<MainPage
|
||||
disablewebsecurity={config.disablewebsecurity}
|
||||
teams={config.teams}
|
||||
onUnreadCountChange={showUnreadBadge}
|
||||
/>,
|
||||
|
||||
Reference in New Issue
Block a user