grassrootseconomics/openethereum
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Loading splashscreen

Browse Source
This commit is contained in:
Nicolas Gotchac 2016-11-24 03:40:22 +01:00
parent e676f00dfa
commit d188435fd8
4 changed files with 78 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/src/dapps/index.ejs
View File

@ -5,9 +5,35 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: Roboto;
background-color: rgba(0, 0, 0, 0.8);
color: #ddd;
}
.loading {
font-size: 4em;
}
</style>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container">
<div class="loading-container">
<span class="loading">Loading...</span>
</div>
</div>
<script src="vendor.js"></script> <script src="vendor.js"></script>
<% if (!htmlWebpackPlugin.options.secure) { %> <% if (!htmlWebpackPlugin.options.secure) { %>
<script src="/parity-utils/parity.js"></script> <script src="/parity-utils/parity.js"></script>

23
js/src/index.ejs
View File

@ -7,12 +7,33 @@
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<style> <style>
html, body, #container { html, body, #container {
width: 100%;
height: 100%; height: 100%;
margin: 0;
padding: 0;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: Roboto;
background-color: rgba(0, 0, 0, 0.8);
color: #ddd;
}
.loading {
font-size: 4em;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container">
<div class="loading-container">
<span class="loading">Loading...</span>
</div>
</div>
<script src="vendor.js"></script> <script src="vendor.js"></script>
</body> </body>
</html> </html>

37
js/webpack/config.js
View File

@ -15,12 +15,8 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
const path = require('path');
const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
const postcssVars = require('postcss-simple-vars');
const rucksack = require('rucksack-css');
const webpack = require('webpack'); const webpack = require('webpack');
const path = require('path');
const WebpackErrorNotificationPlugin = require('webpack-error-notification'); const WebpackErrorNotificationPlugin = require('webpack-error-notification');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
@ -28,17 +24,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const Shared = require('./shared'); const Shared = require('./shared');
const DAPPS = require('../src/dapps'); const DAPPS = require('../src/dapps');
const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
const DEST = process.env.BUILD_DEST || '.build';
const FAVICON = path.resolve(__dirname, '../assets/images/parity-logo-black-no-text.png'); const FAVICON = path.resolve(__dirname, '../assets/images/parity-logo-black-no-text.png');
// dapps const DEST = process.env.BUILD_DEST || '.build';
const entry = Shared.dappsEntry; const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
// main UI
entry.index = './index.js';
module.exports = { module.exports = {
debug: !isProd, debug: !isProd,
@ -46,7 +36,9 @@ module.exports = {
devtool: isProd ? '#eval' : '#cheap-module-eval-source-map', devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
context: path.join(__dirname, '../src'), context: path.join(__dirname, '../src'),
entry: entry, entry: Object.assign({}, Shared.dappsEntry, {
index: './index.js'
}),
output: { output: {
path: path.join(__dirname, '../', DEST), path: path.join(__dirname, '../', DEST),
filename: '[name].[hash].js' filename: '[name].[hash].js'
@ -113,20 +105,7 @@ module.exports = {
attrs: ['img:src', 'link:href'] attrs: ['img:src', 'link:href']
}, },
postcss: [ postcss: Shared.postcss,
postcssImport({
addDependencyTo: webpack
}),
postcssNested({}),
postcssVars({
unknown: function (node, name, result) {
node.warn(result, `Unknown variable ${name}`);
}
}),
rucksack({
autoprefixer: true
})
],
plugins: (function () { plugins: (function () {
const plugins = Shared.getPlugins().concat([ const plugins = Shared.getPlugins().concat([

21
js/webpack/shared.js
View File

@ -17,6 +17,11 @@
const webpack = require('webpack'); const webpack = require('webpack');
const HappyPack = require('happypack'); const HappyPack = require('happypack');
const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
const postcssVars = require('postcss-simple-vars');
const rucksack = require('rucksack-css');
const ENV = process.env.NODE_ENV || 'development'; const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production'; const isProd = ENV === 'production';
@ -77,6 +82,21 @@ function getDappsEntry () {
}, {}); }, {});
} }
const postcss = [
postcssImport({
addDependencyTo: webpack
}),
postcssNested({}),
postcssVars({
unknown: function (node, name, result) {
node.warn(result, `Unknown variable ${name}`);
}
}),
rucksack({
autoprefixer: true
})
];
const proxies = [ const proxies = [
{ {
context: (pathname, req) => { context: (pathname, req) => {
@ -118,5 +138,6 @@ const proxies = [
module.exports = { module.exports = {
getPlugins: getPlugins, getPlugins: getPlugins,
dappsEntry: getDappsEntry(), dappsEntry: getDappsEntry(),
postcss: postcss,
proxies: proxies proxies: proxies
}; };