Style: improve view transition and animation

ryanfwy · Jan 22, 2019 · b4153a9 · b4153a9
1 parent a1e95a5
commit b4153a9
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 69 deletions.
diff --git a/app/main/app.js b/app/main/app.js
@@ -51,68 +51,62 @@ if (config.get('hidedock')) {
 function createMenu() {
     const { l10n } = require('./localization');
 
-    const template = [
-        {
-            id: 'toggle_magnifier',
-            label: l10n('SHOW_MAGNIFIER'),
-            type: 'checkbox',
-            checked: false,
-            accelerator: 'Space',
-            click(menu) { toggleMagnifier(mainWindow, !menu.checked); }
+    const template = [{
+        id: 'toggle_magnifier',
+        label: l10n('SHOW_MAGNIFIER'),
+        type: 'checkbox',
+        checked: false,
+        accelerator: 'Space',
+        click(menu) { toggleMagnifier(mainWindow, !menu.checked); }
+    },
+    {
+        label: l10n('HIDE_DOCK_ICON'),
+        type: 'checkbox',
+        checked: config.get('hidedock'),
+        click(menu) { toggleDockIcon(menu.checked); }
+    },
+    {
+        label: l10n('CHECK_FOR_UPDATES'),
+        click() { update.check(true); }
+    },
+    {
+        type: 'separator'
+    },
+    {
+        label: l10n('WINDOW'),
+        submenu: [{
+            label: l10n('CLOSE'),
+            accelerator: 'Command+W',
+            click() { toggleWindow(false); }
         },
         {
-            label: l10n('HIDE_DOCK_ICON'),
-            type: 'checkbox',
-            checked: config.get('hidedock'),
-            click(menu) { toggleDockIcon(menu.checked); }
+            label: l10n('QUIT'),
+            accelerator: 'Command+Q',
+            click () { app.quit(); }
+        }]
+    },
+    {
+        label: l10n('HELP'),
+        submenu: [{
+            label: l10n('VERSION') + ' ' + app.getVersion(),
+            enabled: false
         },
         {
-            label: l10n('CHECK_FOR_UPDATES'),
-            click() { update.check(true); }
+            type: 'separator'
         },
         {
-            type: 'separator'
+            label: l10n('ABOUT'),
+            role: 'about'
         },
         {
-            label: l10n('WINDOW'),
-            submenu: [
-                {
-                    label: l10n('CLOSE'),
-                    accelerator: 'Command+W',
-                    click() { toggleWindow(false); }
-                },
-                {
-                    label: l10n('QUIT'),
-                    accelerator: 'Command+Q',
-                    click () { app.quit(); }
-                }
-            ]
+            label: l10n('HOMEPAGE'),
+            click() { shell.openExternal('https://www.ryannn.com'); }
         },
         {
-            label: l10n('HELP'),
-            submenu: [
-                {
-                    label: l10n('VERSION') + ' ' + app.getVersion(),
-                    enabled: false
-                },
-                {
-                    type: 'separator'
-                },
-                {
-                    label: l10n('ABOUT'),
-                    role: 'about'
-                },
-                {
-                    label: l10n('HOMEPAGE'),
-                    click() { shell.openExternal('https://www.ryannn.com'); }
-                },
-                {
-                    label: l10n('GUIDANCE'),
-                    click() { shell.openExternal('https://github.com/ryanfwy/jike-calendar'); }
-                }
-            ]
-        }
-    ];
+            label: l10n('GUIDANCE'),
+            click() { shell.openExternal('https://github.com/ryanfwy/jike-calendar'); }
+        }]
+    }];
 
     const menu = Menu.buildFromTemplate(template);
     Menu.setApplicationMenu(menu);

diff --git a/app/main/config.js b/app/main/config.js
@@ -2,8 +2,6 @@ const fs = require('fs');
 const path = require('path');
 
 
-const configPath = path.join(__dirname, '..', 'config/setting.json');
-
 class Configation {
     constructor(path) {
         if (!Configation.instance) {
@@ -34,6 +32,8 @@ class Configation {
     }
 }
 
+
+const configPath = path.join(__dirname, '..', 'config/setting.json');
 const C = new Configation(configPath);
 
 module.exports = {

diff --git a/app/main/localization.js b/app/main/localization.js
@@ -4,8 +4,6 @@ const path = require('path');
 const language = require('./config').get('language');
 
 
-const localePath = path.join(__dirname, '../locales/');
-
 class Localization {
     constructor(path) {
         if (!Localization.instance) {
@@ -30,6 +28,8 @@ class Localization {
     }
 }
 
+
+const localePath = path.join(__dirname, '../locales/');
 const L = new Localization(localePath);
 
 module.exports = {

diff --git a/app/main/request.js b/app/main/request.js
@@ -1,6 +1,6 @@
 const { ipcMain, net } = require('electron');
 const topics = require('./config').get('topics');
-const topicsId = topics.map(x => { return x.id; })
+const topicsId = topics.map(x => { return x.id; });
 
 
 /* Receiver */

diff --git a/app/main/update.js b/app/main/update.js
@@ -6,8 +6,6 @@ const { net, dialog, BrowserWindow, app, shell } = require('electron');
 const { l10n } = require('./localization');
 
 
-const packagePath = path.join(__dirname, '..', 'package.json');
-
 class Update {
     constructor(path) {
         if (!Update.instance) {
@@ -54,8 +52,8 @@ class Update {
                 method: 'GET',
                 url: url
             });
-            request.on('response', response => {
-                if (response.statusCode !== 200) return;
+            request.on('response', (response) => {
+                if (response.statusCode !== 200) { resolve(null); };
 
                 if (showProgress) {
                     this.__totalBytes = parseInt(response.headers['content-length'], 10);
@@ -86,6 +84,7 @@ class Update {
     async _fetchSourceAndUpdate(tag) {
         const asarUrl = `https://github.com/ryanfwy/jike-calendar/releases/download/v${tag}/app.asar`;
         const data = await this._getHttpsData(asarUrl, true);
+        if (!data) return;
 
         const options = {
             type: 'info',
@@ -162,6 +161,8 @@ class Update {
     }
 }
 
+
+const packagePath = path.join(__dirname, '..', 'package.json');
 const U = new Update(packagePath);
 
 module.exports = {

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
     "name": "jike-calendar",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "description": "A menubar calendar on Mac with Electron.",
     "main": "main.js",
     "scripts": {

diff --git a/app/render/index.css b/app/render/index.css
@@ -1,6 +1,25 @@
+@keyframes fade-in {
+    0% { opacity: 0;}
+    100% { opacity: 1; }
+}
+@keyframes fade-out {
+    0% { opacity: 1;}
+    100% { opacity: 0; }
+}
+
+#fade-in {
+    animation: fade-in 0.8s ease 0s 1;
+    animation-fill-mode: forwards;
+}
+#fade-out {
+    animation: fade-out 0.3s ease 0s 1;
+    animation-fill-mode: forwards;
+}
+
 body {
     margin: 0;
     background-color: rgba(255, 255, 255, 0.7);
+    transition: background-color 0.8s;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -40,6 +59,7 @@ body {
     width: 200px;
     height: 30px;
     background: rgba(255, 228, 17, 1);
+    transition: background-color 0.8s;
     font-family: STSongti-SC-Bold;
     font-size: 15px;
     text-align: center;
@@ -49,6 +69,7 @@ body {
 .triangle {
     border: 10px solid transparent;
     border-top: 10px solid rgba(255, 228, 17, 1);
+    transition: border-color 0.8s;
 }
 .answer {
     font-family: HiraMinProN-W6;

diff --git a/app/render/magnifier.js b/app/render/magnifier.js
@@ -11,7 +11,7 @@ global.mouseEvent = null;
 
 /* Events */
 document.addEventListener('mousemove', event => {
-    // if (magnifier.style.display === 'none') return;
+    if (!global.imageObject) return;
     throttle(renderMagnifier, null, event, 10, 100);
 });
 document.addEventListener('DOMContentLoaded', () => {

diff --git a/app/render/request.js b/app/render/request.js
@@ -3,6 +3,7 @@ const { ipcRenderer: ipcRequest } = require('electron');
 
 const containerView = document.querySelector('.container-content');
 const contentView = document.querySelector('.content');
+const containerTitleView = document.querySelector('.container-title');
 const topicView = document.querySelector('.topic');
 const userView = document.querySelector('.user');
 
@@ -42,10 +43,19 @@ function renderRequest(result) {
         ipcRequest.send('GetSourceFromRenderer');
         return;
     }
-
-    contentView.innerText = content;
-    topicView.innerText = '『' + topic + '』';
-    userView.innerText = 'via ' + user;
+
+    contentView.id = 'fade-out';
+    containerTitleView.id = 'fade-out';
+    setTimeout(() => {
+        contentView.innerText = content;
+        contentView.id = 'fade-in';
+
+        setTimeout(() => {
+            topicView.innerText = '『' + topic + '』';
+            userView.innerText = 'via ' + user;
+            containerTitleView.id = 'fade-in';
+        }, 200);
+    }, 200);
 
     ipcRequest.send('CaptureFrameFromRenderer');
 }
@@ -55,8 +65,7 @@ function startLoading(idx=0, up=true) {
 
     if (global.loadingOn === false) {
         for (let i=0; i<3; i++) {
-            let view = views[i];
-            simpleAnimate(view, false);
+            simpleAnimate(views[i], false);
         }
     } else if (global.loadingOn === true) {
         simpleAnimate(views[idx], up, () => {