Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #452 Fix design of splash screen

This commit is contained in:
AkiraFukushima 2018-07-28 20:44:16 +09:00
parent bf5a7f35f6
commit 4141e2f4c2
4 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.electron-vue/webpack.renderer.config.js
View File

@ -164,7 +164,7 @@ if (process.env.NODE_ENV === 'production') {
{
from: path.join(__dirname, '../static'),
to: path.join(__dirname, '../dist/electron/static'),
ignore: ['.*']
ignore: ['.*', '*~']
}
]),
new webpack.DefinePlugin({

6
src/main/index.js
View File

@ -42,7 +42,7 @@ const winURL = process.env.NODE_ENV === 'development'
: `file://${__dirname}/index.html`
const splashURL = process.env.NODE_ENV === 'development'
? path.resolve(__dirname, '../../dist/electron/static/splash-screen.html')
? path.resolve(__dirname, '../../static/splash-screen.html')
: `file://${__dirname}/static/splash-screen.html`
// https://github.com/louischatriot/nedb/issues/459
@ -304,8 +304,8 @@ async function createWindow () {
mainWindow = Splashscreen.initSplashScreen(config)
mainWindowState.manage(mainWindow)
console.log(winURL)
// mainWindow.loadURL(winURL)
mainWindow.loadURL(winURL)
mainWindow.webContents.on('will-navigate', (event) => event.preventDefault())

49
static/images/loading.svg Normal file
View File

@ -0,0 +1,49 @@
<svg class="lds-spinner" width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;"><g transform="rotate(0 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(30 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(60 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(120 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(150 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(210 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(240 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(300 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(330 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

18
static/splash-screen.html
View File

@ -1,13 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<html style="height: 100%">
<head></head>
<body>
<center>
<img src="./images/icon.png" width="200" height="200"></img>
</center>
<center>
Loading...<span id="status"></span>
</center>
<body style="height: 100%">
<div style="display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%">
<center>
<img src="./images/icon.png" width="120" height="120"></img>
</center>
<center>
<img src="./images/loading.svg" width="40" height="40"></img>
</center>
</div>
</body>
</html>