Merge branch 'dev'
This commit is contained in:
commit
4d4471c3fd
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1,5 +1,5 @@
|
|||
node_modules/
|
||||
build/
|
||||
dist/
|
||||
release/
|
||||
npm-debug.log
|
||||
|
||||
|
|
|
@ -50,10 +50,10 @@ Node.js is required to test this app.
|
|||
2. Run `npm install`.
|
||||
3. Run `npm start`.
|
||||
|
||||
When you edit **.jsx** files, please execute `npm run build` before `npm start`.
|
||||
When you edit `src/**` files, please execute `npm run build` before `npm start`.
|
||||
|
||||
### Development
|
||||
#### `npm run serve`
|
||||
#### `npm run watch`
|
||||
Reload the app automatically when you have saved source codes.
|
||||
|
||||
#### `npm test`
|
||||
|
|
111
gulpfile.js
111
gulpfile.js
|
@ -3,16 +3,17 @@
|
|||
var gulp = require('gulp');
|
||||
var prettify = require('gulp-jsbeautifier');
|
||||
var babel = require('gulp-babel');
|
||||
var webpack = require('webpack-stream');
|
||||
var named = require('vinyl-named');
|
||||
var changed = require('gulp-changed');
|
||||
var esformatter = require('gulp-esformatter');
|
||||
var del = require('del');
|
||||
var electron = require('electron-connect').server.create({
|
||||
path: './src'
|
||||
path: './dist'
|
||||
});
|
||||
var packager = require('electron-packager');
|
||||
|
||||
var sources = ['**/*.js', '**/*.css', '**/*.html', '!**/node_modules/**', '!**/build/**', '!release/**'];
|
||||
var app_root = 'src';
|
||||
|
||||
gulp.task('prettify', ['prettify:sources', 'prettify:jsx']);
|
||||
|
||||
|
@ -34,44 +35,112 @@ gulp.task('prettify:sources', ['sync-meta'], function() {
|
|||
});
|
||||
|
||||
gulp.task('prettify:jsx', function() {
|
||||
return gulp.src(app_root + '/**/*.jsx')
|
||||
return gulp.src('src/browser/**/*.jsx')
|
||||
.pipe(esformatter({
|
||||
indent: {
|
||||
value: ' '
|
||||
},
|
||||
plugins: ['esformatter-jsx']
|
||||
}))
|
||||
.pipe(gulp.dest(app_root));
|
||||
.pipe(gulp.dest('src/browser'));
|
||||
});
|
||||
|
||||
gulp.task('build', ['sync-meta', 'build:jsx']);
|
||||
|
||||
gulp.task('build:jsx', function() {
|
||||
return gulp.src(['src/browser/**/*.jsx', '!src/node_modules/**'])
|
||||
.pipe(changed(app_root, {
|
||||
extension: '.js'
|
||||
}))
|
||||
.pipe(babel({
|
||||
presets: ['react']
|
||||
}))
|
||||
.pipe(gulp.dest('src/browser/build'));
|
||||
gulp.task('build', ['sync-meta', 'webpack', 'copy'], function() {
|
||||
return gulp.src('src/package.json')
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
gulp.task('serve', ['build'], function() {
|
||||
gulp.task('webpack', ['webpack:main', 'webpack:browser']);
|
||||
|
||||
gulp.task('webpack:browser', function() {
|
||||
return gulp.src('src/browser/**/*.jsx')
|
||||
.pipe(named())
|
||||
.pipe(webpack({
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /\.json$/,
|
||||
loader: 'json'
|
||||
}, {
|
||||
test: /\.jsx$/,
|
||||
loader: 'babel',
|
||||
query: {
|
||||
presets: ['react']
|
||||
}
|
||||
}]
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js'
|
||||
},
|
||||
node: {
|
||||
__filename: false,
|
||||
__dirname: false
|
||||
},
|
||||
target: 'electron'
|
||||
}))
|
||||
.pipe(gulp.dest('dist/browser/'));
|
||||
});
|
||||
|
||||
gulp.task('webpack:main', function() {
|
||||
return gulp.src('src/main.js')
|
||||
.pipe(webpack({
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /\.json$/,
|
||||
loader: 'json'
|
||||
}]
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js'
|
||||
},
|
||||
node: {
|
||||
__filename: false,
|
||||
__dirname: false
|
||||
},
|
||||
target: 'electron'
|
||||
}))
|
||||
.pipe(gulp.dest('dist/'));
|
||||
});
|
||||
|
||||
gulp.task('copy', ['copy:resources', 'copy:html/css', 'copy:webview:js', 'copy:modules']);
|
||||
|
||||
gulp.task('copy:resources', function() {
|
||||
return gulp.src('src/resources/**')
|
||||
.pipe(gulp.dest('dist/resources'));
|
||||
});
|
||||
|
||||
gulp.task('copy:html/css', function() {
|
||||
return gulp.src(['src/browser/**/*.html', 'src/browser/**/*.css'])
|
||||
.pipe(gulp.dest('dist/browser'));
|
||||
});
|
||||
|
||||
gulp.task('copy:webview:js', function() {
|
||||
return gulp.src(['src/browser/webview/**/*.js'])
|
||||
.pipe(gulp.dest('dist/browser/webview'))
|
||||
});
|
||||
|
||||
gulp.task('copy:modules', function() {
|
||||
return gulp.src(['src/node_modules/bootstrap/dist/**'])
|
||||
.pipe(gulp.dest('dist/browser/modules/bootstrap'))
|
||||
});
|
||||
|
||||
gulp.task('watch', ['build'], function() {
|
||||
var options = ['--livereload'];
|
||||
electron.start(options);
|
||||
gulp.watch(['src/**', '!src/browser/**', '!src/node_modules/**'], function() {
|
||||
|
||||
gulp.watch(['src/main.js', 'src/main/**/*.js', 'src/common/**/*.js'], ['webpack:main']);
|
||||
gulp.watch(['src/browser/**/*.js', 'src/browser/**/*.jsx'], ['webpack:browser', 'copy:webview:js']);
|
||||
gulp.watch(['src/browser/**/*.css', 'src/browser/**/*.html', 'src/resources/**/*.png'], ['copy']);
|
||||
|
||||
gulp.watch(['dist/main.js', 'dist/resources/**'], function() {
|
||||
electron.restart(options);
|
||||
});
|
||||
gulp.watch('src/browser/**/*.jsx', ['build:jsx']);
|
||||
gulp.watch(['src/browser/**', '!src/browser/**/*.jsx'], electron.reload);
|
||||
gulp.watch('gulpfile.js', process.exit);
|
||||
gulp.watch(['dist/browser/*.js'], electron.reload);
|
||||
});
|
||||
|
||||
function makePackage(platform, arch, callback) {
|
||||
var packageJson = require('./src/package.json');
|
||||
packager({
|
||||
dir: './' + app_root,
|
||||
dir: './dist',
|
||||
name: packageJson.name,
|
||||
platform: platform,
|
||||
arch: arch,
|
||||
|
|
13
package.json
13
package.json
|
@ -9,8 +9,9 @@
|
|||
"install": "cd src && npm install",
|
||||
"postinstall": "npm run build",
|
||||
"build": "gulp build",
|
||||
"start": "electron src",
|
||||
"serve": "gulp serve",
|
||||
"start": "electron dist",
|
||||
"watch": "gulp watch",
|
||||
"serve": "gulp watch",
|
||||
"test": "gulp build && mocha",
|
||||
"package": "gulp package",
|
||||
"package:windows": "gulp package:windows",
|
||||
|
@ -20,6 +21,8 @@
|
|||
"prettify": "gulp prettify"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.5.1",
|
||||
"babel-loader": "^6.2.2",
|
||||
"babel-preset-react": "^6.3.13",
|
||||
"chromedriver": "^2.20.0",
|
||||
"del": "^2.2.0",
|
||||
|
@ -33,9 +36,13 @@
|
|||
"gulp-changed": "^1.3.0",
|
||||
"gulp-esformatter": "^5.0.0",
|
||||
"gulp-jsbeautifier": "^1.0.1",
|
||||
"json-loader": "^0.5.4",
|
||||
"mocha": "^2.3.4",
|
||||
"mocha-circleci-reporter": "0.0.1",
|
||||
"should": "^8.0.1",
|
||||
"webdriverio": "^3.3.0"
|
||||
"style-loader": "^0.13.0",
|
||||
"vinyl-named": "^1.1.0",
|
||||
"webdriverio": "^3.3.0",
|
||||
"webpack-stream": "^3.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,15 +4,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>electron-mattermost</title>
|
||||
<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-bootstrap/dist/react-bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script src="build/index.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -1,5 +1,9 @@
|
|||
'use strict';
|
||||
|
||||
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;
|
||||
|
@ -126,7 +130,7 @@ var MainPage = React.createClass({
|
|||
tabs_row = (
|
||||
<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 }></TabBar>
|
||||
activeKey={ this.state.key } onSelect={ this.handleSelect }></TabBar>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
@ -296,24 +300,45 @@ window.addEventListener('contextmenu', function(e) {
|
|||
menu.popup(remote.getCurrentWindow());
|
||||
}, false);
|
||||
|
||||
var showUnreadBadgeWindows = function(unreadCount, mentionCount) {
|
||||
const badge = require('./js/badge');
|
||||
const sendBadge = function(dataURL, description) {
|
||||
// window.setOverlayIcon() does't work with NativeImage across remote boundaries.
|
||||
// https://github.com/atom/electron/issues/4011
|
||||
electron.ipcRenderer.send('win32-overlay', {
|
||||
overlayDataURL: dataURL,
|
||||
description: description
|
||||
});
|
||||
};
|
||||
|
||||
if (mentionCount > 0) {
|
||||
const dataURL = badge.createDataURL(mentionCount.toString());
|
||||
sendBadge(dataURL, 'You have unread mention (' + mentionCount + ')');
|
||||
} else if (unreadCount > 0) {
|
||||
const dataURL = badge.createDataURL('•');
|
||||
sendBadge(dataURL, 'You have unread channels');
|
||||
} else {
|
||||
remote.getCurrentWindow().setOverlayIcon(null, '');
|
||||
}
|
||||
}
|
||||
|
||||
var showUnreadBadgeOSX = function(unreadCount, mentionCount) {
|
||||
if (mentionCount > 0) {
|
||||
remote.app.dock.setBadge(mentionCount.toString());
|
||||
} else if (unreadCount > 0) {
|
||||
remote.app.dock.setBadge('•');
|
||||
} else {
|
||||
remote.app.dock.setBadge('');
|
||||
}
|
||||
}
|
||||
|
||||
var showUnreadBadge = function(unreadCount, mentionCount) {
|
||||
switch (process.platform) {
|
||||
case 'win32':
|
||||
var window = remote.getCurrentWindow();
|
||||
if (unreadCount > 0 || mentionCount > 0) {
|
||||
window.setOverlayIcon(path.join(__dirname, '../resources/badge.png'), 'You have unread channels.');
|
||||
} else {
|
||||
window.setOverlayIcon(null, '');
|
||||
}
|
||||
showUnreadBadgeWindows(unreadCount, mentionCount);
|
||||
break;
|
||||
case 'darwin':
|
||||
if (mentionCount > 0) {
|
||||
remote.app.dock.setBadge(mentionCount.toString());
|
||||
} else if (mentionCount < unreadCount) {
|
||||
remote.app.dock.setBadge('•');
|
||||
} else {
|
||||
remote.app.dock.setBadge('');
|
||||
}
|
||||
showUnreadBadgeOSX(unreadCount, mentionCount);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
|
29
src/browser/js/badge.js
Normal file
29
src/browser/js/badge.js
Normal file
|
@ -0,0 +1,29 @@
|
|||
'use strict';
|
||||
|
||||
var createDataURL = function(text) {
|
||||
const scale = 2; // should rely display dpi
|
||||
const size = 16 * scale;
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.setAttribute('width', size);
|
||||
canvas.setAttribute('height', size);
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// circle
|
||||
ctx.fillStyle = "#FF1744"; // Material Red A400
|
||||
ctx.beginPath();
|
||||
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// text
|
||||
ctx.fillStyle = "#ffffff"
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.font = (11 * scale) + "px sans-serif";
|
||||
ctx.fillText(text, size / 2, size / 2, size);
|
||||
|
||||
return canvas.toDataURL();
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
createDataURL: createDataURL
|
||||
};
|
|
@ -4,15 +4,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Settings</title>
|
||||
<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-bootstrap/dist/react-bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script src="build/settings.js"></script>
|
||||
<script src="settings.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -3,6 +3,10 @@
|
|||
const remote = require('electron').remote;
|
||||
const settings = require('../common/settings');
|
||||
|
||||
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;
|
||||
|
@ -12,6 +16,10 @@ const ListGroup = ReactBootstrap.ListGroup;
|
|||
const ListGroupItem = ReactBootstrap.ListGroupItem;
|
||||
const Glyphicon = ReactBootstrap.Glyphicon;
|
||||
|
||||
function backToIndex() {
|
||||
window.location = 'index.html';
|
||||
}
|
||||
|
||||
var SettingsPage = React.createClass({
|
||||
getInitialState: function() {
|
||||
var config;
|
||||
|
@ -42,10 +50,10 @@ var SettingsPage = React.createClass({
|
|||
currentWindow.setAutoHideMenuBar(config.hideMenuBar);
|
||||
currentWindow.setMenuBarVisibility(!config.hideMenuBar);
|
||||
}
|
||||
window.location = './index.html';
|
||||
backToIndex();
|
||||
},
|
||||
handleCancel: function() {
|
||||
window.location = './index.html';
|
||||
backToIndex();
|
||||
},
|
||||
handleChangeHideMenuBar: function() {
|
||||
this.setState({
|
||||
|
@ -56,8 +64,8 @@ var SettingsPage = React.createClass({
|
|||
var teams_row = (
|
||||
<Row>
|
||||
<Col md={ 12 }>
|
||||
<h2>Teams</h2>
|
||||
<TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
|
||||
<h2>Teams</h2>
|
||||
<TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
@ -69,8 +77,8 @@ var SettingsPage = React.createClass({
|
|||
var options_row = (options.length > 0) ? (
|
||||
<Row>
|
||||
<Col md={ 12 }>
|
||||
<h2>Options</h2>
|
||||
{ options }
|
||||
<h2>Options</h2>
|
||||
{ options }
|
||||
</Col>
|
||||
</Row>
|
||||
) : null;
|
||||
|
@ -81,9 +89,9 @@ var SettingsPage = React.createClass({
|
|||
{ options_row }
|
||||
<Row>
|
||||
<Col md={ 12 }>
|
||||
<Button id="btnCancel" onClick={ this.handleCancel }>Cancel</Button>
|
||||
{ ' ' }
|
||||
<Button id="btnSave" bsStyle="primary" onClick={ this.handleSave } disabled={ this.state.teams.length === 0 }>Save</Button>
|
||||
<Button id="btnCancel" onClick={ this.handleCancel }>Cancel</Button>
|
||||
{ ' ' }
|
||||
<Button id="btnSave" bsStyle="primary" onClick={ this.handleSave } disabled={ this.state.teams.length === 0 }>Save</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
20
src/main.js
20
src/main.js
|
@ -7,9 +7,10 @@ const Menu = electron.Menu;
|
|||
const Tray = electron.Tray;
|
||||
const ipc = electron.ipcMain;
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
var settings = require('./common/settings');
|
||||
var appMenu = require('./menus/app');
|
||||
var appMenu = require('./main/menus/app');
|
||||
|
||||
var argv = require('yargs').argv;
|
||||
|
||||
|
@ -38,6 +39,7 @@ try {
|
|||
}
|
||||
}
|
||||
catch (e) {
|
||||
config = settings.loadDefault();
|
||||
console.log('Failed to read or upgrade config.json');
|
||||
}
|
||||
|
||||
|
@ -81,11 +83,11 @@ app.on('before-quit', function() {
|
|||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
app.on('ready', function() {
|
||||
// set up tray icon to show balloon
|
||||
if (process.platform === 'win32') {
|
||||
trayIcon = new Tray(__dirname + '/resources/tray.png');
|
||||
// set up tray icon to show balloon
|
||||
trayIcon = new Tray(path.resolve(__dirname, 'resources/tray.png'));
|
||||
trayIcon.setToolTip(app.getName());
|
||||
var tray_menu = require('./menus/tray').createDefault();
|
||||
var tray_menu = require('./main/menus/tray').createDefault();
|
||||
trayIcon.setContextMenu(tray_menu);
|
||||
trayIcon.on('click', function() {
|
||||
mainWindow.focus();
|
||||
|
@ -95,11 +97,17 @@ app.on('ready', function() {
|
|||
});
|
||||
ipc.on('notified', function(event, arg) {
|
||||
trayIcon.displayBalloon({
|
||||
icon: __dirname + '/resources/appicon.png',
|
||||
icon: path.resolve(__dirname, 'resources/appicon.png'),
|
||||
title: arg.title,
|
||||
content: arg.options.body
|
||||
});
|
||||
});
|
||||
|
||||
// Set overlay icon from dataURL
|
||||
ipc.on('win32-overlay', function(event, arg) {
|
||||
var overlay = electron.nativeImage.createFromDataURL(arg.overlayDataURL);
|
||||
mainWindow.setOverlayIcon(overlay, arg.description);
|
||||
});
|
||||
}
|
||||
|
||||
// Create the browser window.
|
||||
|
@ -112,7 +120,7 @@ app.on('ready', function() {
|
|||
// follow Electron's defaults
|
||||
window_options = {};
|
||||
}
|
||||
window_options.icon = __dirname + '/resources/appicon.png';
|
||||
window_options.icon = path.resolve(__dirname, 'resources/appicon.png');
|
||||
mainWindow = new BrowserWindow(window_options);
|
||||
if (window_options.maximized) {
|
||||
mainWindow.maximize();
|
||||
|
|
|
@ -15,7 +15,7 @@ var createTemplate = function(mainWindow) {
|
|||
}, {
|
||||
label: 'Settings',
|
||||
click: function(item, focusedWindow) {
|
||||
mainWindow.loadURL('file://' + __dirname + '/../browser/settings.html');
|
||||
mainWindow.loadURL('file://' + __dirname + '/browser/settings.html');
|
||||
}
|
||||
}, {
|
||||
label: 'Quit',
|
Binary file not shown.
Before Width: | Height: | Size: 293 B |
|
@ -25,7 +25,7 @@ var options = {
|
|||
browserName: 'chrome',
|
||||
chromeOptions: {
|
||||
binary: electron_binary_path, // Path to your Electron binary.
|
||||
args: ['app=' + path.join(source_root_dir, 'src'), '--config-file=' + config_file_path] // Optional, perhaps 'app=' + /path/to/your/app/
|
||||
args: ['app=' + path.join(source_root_dir, 'dist'), '--config-file=' + config_file_path] // Optional, perhaps 'app=' + /path/to/your/app/
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -187,7 +187,7 @@ describe('electron-mattermost', function() {
|
|||
it('should show index.thml when Cancel button is clicked', function() {
|
||||
return client
|
||||
.init()
|
||||
.url('file://' + path.join(source_root_dir, 'src/browser/settings.html'))
|
||||
.url('file://' + path.join(source_root_dir, 'dist/browser/settings.html'))
|
||||
.waitForExist('#btnCancel')
|
||||
.click('#btnCancel')
|
||||
.pause(1000)
|
||||
|
@ -201,7 +201,7 @@ describe('electron-mattermost', function() {
|
|||
it('should show index.thml when Save button is clicked', function() {
|
||||
return client
|
||||
.init()
|
||||
.url('file://' + path.join(source_root_dir, 'src/browser/settings.html'))
|
||||
.url('file://' + path.join(source_root_dir, 'dist/browser/settings.html'))
|
||||
.waitForExist('#btnSave')
|
||||
.click('#btnSave')
|
||||
.pause(1000)
|
||||
|
|
Loading…
Reference in a new issue