Make transitions smoother between windows

This commit is contained in:
Jaisen Mathai 2015-11-18 01:37:46 -08:00
parent a252a29c6b
commit eafe375144
10 changed files with 126 additions and 24 deletions

6
app/html/blank.html Normal file
View File

@ -0,0 +1,6 @@
<html>
<head></head>
<body>
<div style="width:100%; height:100%; background-color:#fff;"></div>
</body>
</html>

View File

@ -71,6 +71,18 @@
"css": "calendar", "css": "calendar",
"code": 59398, "code": 59398,
"src": "elusive" "src": "elusive"
},
{
"uid": "15739f3032c2aa3df67efc96b3ffef56",
"css": "cancel-circle",
"code": 59403,
"src": "websymbols"
},
{
"uid": "994eaa764b3f30721f3839c64c390ce3",
"css": "minus-circle",
"code": 59404,
"src": "websymbols"
} }
] ]
} }

View File

@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: 'elodie'; font-family: 'elodie';
src: url('../font/elodie.eot?43975196'); src: url('../font/elodie.eot?99803888');
src: url('../font/elodie.eot?43975196#iefix') format('embedded-opentype'), src: url('../font/elodie.eot?99803888#iefix') format('embedded-opentype'),
url('../font/elodie.woff?43975196') format('woff'), url('../font/elodie.woff?99803888') format('woff'),
url('../font/elodie.ttf?43975196') format('truetype'), url('../font/elodie.ttf?99803888') format('truetype'),
url('../font/elodie.svg?43975196#elodie') format('svg'); url('../font/elodie.svg?99803888#elodie') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -14,7 +14,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face { @font-face {
font-family: 'elodie'; font-family: 'elodie';
src: url('../font/elodie.svg?43975196#elodie') format('svg'); src: url('../font/elodie.svg?99803888#elodie') format('svg');
} }
} }
*/ */
@ -64,4 +64,6 @@
.icon-title:before { content: '\e807'; } /* '' */ .icon-title:before { content: '\e807'; } /* '' */
.icon-media-add:before { content: '\e808'; } /* '' */ .icon-media-add:before { content: '\e808'; } /* '' */
.icon-folder-open:before { content: '\e809'; } /* '' */ .icon-folder-open:before { content: '\e809'; } /* '' */
.icon-folder-closed:before { content: '\e80a'; } /* '' */ .icon-folder-closed:before { content: '\e80a'; } /* '' */
.icon-cancel-circle:before { content: '\e80b'; } /* '' */
.icon-minus-circle:before { content: '\e80c'; } /* '' */

View File

@ -17,6 +17,8 @@
<glyph glyph-name="media-add" unicode="&#xe808;" d="m573 350q21 0 36-15t16-37-16-36-36-15l-104 0 0-105q0-22-16-37t-37-15-36 15-15 37l0 105-105 0q-21 0-36 15t-15 36 15 37 36 15l105 0 0 104q0 21 15 37t36 16 37-16 16-37l0-104 104 0z m245 245q16-16 16-36l0-521q0-65-46-111t-110-46l-522 0q-65 0-110 46t-46 111l0 625q0 65 46 110t110 46l417 0q22 0 37-15z m-110-36l-135 134 0-56q0-32 23-55t55-23l57 0z m-30-574q21 0 36 16t15 37l0 469-78 0q-53 0-92 38t-38 92l0 78-365 0q-21 0-37-15t-15-37l0-625q0-21 15-37t37-16l522 0z" horiz-adv-x="834" /> <glyph glyph-name="media-add" unicode="&#xe808;" d="m573 350q21 0 36-15t16-37-16-36-36-15l-104 0 0-105q0-22-16-37t-37-15-36 15-15 37l0 105-105 0q-21 0-36 15t-15 36 15 37 36 15l105 0 0 104q0 21 15 37t36 16 37-16 16-37l0-104 104 0z m245 245q16-16 16-36l0-521q0-65-46-111t-110-46l-522 0q-65 0-110 46t-46 111l0 625q0 65 46 110t110 46l417 0q22 0 37-15z m-110-36l-135 134 0-56q0-32 23-55t55-23l57 0z m-30-574q21 0 36 16t15 37l0 469-78 0q-53 0-92 38t-38 92l0 78-365 0q-21 0-37-15t-15-37l0-625q0-21 15-37t37-16l522 0z" horiz-adv-x="834" />
<glyph glyph-name="folder-open" unicode="&#xe809;" d="m994 330q0 20-30 20h-607q-22 0-48-12t-39-29l-164-203q-11-13-11-22 0-20 30-20h607q22 0 48 13t40 29l164 203q10 12 10 21z m-637 91h429v90q0 22-16 38t-38 15h-321q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-476l143 175q25 30 65 49t78 19z m708-91q0-34-25-66l-165-203q-24-30-65-49t-78-19h-607q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h303q51 0 88-37t37-88v-90h107q30 0 56-13t37-40q8-17 8-38z" horiz-adv-x="1071.4" /> <glyph glyph-name="folder-open" unicode="&#xe809;" d="m994 330q0 20-30 20h-607q-22 0-48-12t-39-29l-164-203q-11-13-11-22 0-20 30-20h607q22 0 48 13t40 29l164 203q10 12 10 21z m-637 91h429v90q0 22-16 38t-38 15h-321q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-476l143 175q25 30 65 49t78 19z m708-91q0-34-25-66l-165-203q-24-30-65-49t-78-19h-607q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h303q51 0 88-37t37-88v-90h107q30 0 56-13t37-40q8-17 8-38z" horiz-adv-x="1071.4" />
<glyph glyph-name="folder-closed" unicode="&#xe80a;" d="m857 118v393q0 22-15 38t-38 15h-393q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-536q0-22 16-38t38-16h679q22 0 38 16t15 38z m72 393v-393q0-51-37-88t-88-37h-679q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h375q51 0 88-37t37-88z" horiz-adv-x="928.6" /> <glyph glyph-name="folder-closed" unicode="&#xe80a;" d="m857 118v393q0 22-15 38t-38 15h-393q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-536q0-22 16-38t38-16h679q22 0 38 16t15 38z m72 393v-393q0-51-37-88t-88-37h-679q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h375q51 0 88-37t37-88z" horiz-adv-x="928.6" />
<glyph glyph-name="cancel-circle" unicode="&#xe80b;" d="m1000 349q0-136-67-251t-182-182-251-67-251 67-182 182-67 251 67 251 182 182 251 67 251-67 182-182 67-251z m-339-232l71 71-161 161 161 161-71 71-161-161-161 161-71-71 161-161-161-161 71-71 161 161z" horiz-adv-x="1000" />
<glyph glyph-name="minus-circle" unicode="&#xe80c;" d="m1000 349q0-136-67-251t-182-182-251-67-251 67-182 182-67 251 67 251 182 182 251 67 251-67 182-182 67-251z m-794-58h589v118h-589v-118z" horiz-adv-x="1000" />
</font> </font>
</defs> </defs>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@ -1,3 +1,12 @@
body {
-webkit-animation: fadein 1s;
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
*, body, div { *, body, div {
font-family: 'Lato', 'Helvetica'; font-family: 'Lato', 'Helvetica';
font-weight: 300; font-weight: 300;
@ -23,9 +32,30 @@ body {
.titlebar a { .titlebar a {
font-weight: 300; font-weight: 300;
font-size:.9em; font-size:.7em;
padding-top:5px;
}
.titlebar a.right {
float:right; float:right;
padding-top:3px; }
.titlebar a.left {
float:left;
}
.titlebar a.quit i {
color: #ff4136 !important;
}
.titlebar a.minus i {
color: #ffba00 !important;
}
.x-titlebar em {
padding-right: 28px;
background: url("../img/logo@18x22.png") no-repeat right 4px;
} }
.content, .content-index { .content, .content-index {

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -10,8 +10,9 @@
</head> </head>
<body> <body>
<div class="titlebar"> <div class="titlebar">
<!--<a href="" class="left quit quitProgram"><i class="icon-cancel-circle"></i></a>
<a href="" class="left minus minimizeProgram"><i class="icon-minus-circle"></i></a>-->
How can I help you? <em>-- Elodie</em><i></i> How can I help you? <em>-- Elodie</em><i></i>
<a href="index.html"><i class="icon-media-add"></i></a>
</div> </div>
<form class="importPhotos" action="" method="post"> <form class="importPhotos" action="" method="post">
<div class="content"> <div class="content">
@ -19,12 +20,12 @@
Let me know where your photos are and where you'd like me to put them as I sort them. Let me know where your photos are and where you'd like me to put them as I sort them.
</p> </p>
<div> <div>
<label for="source"><i class="icon-folder-open"></i> Choose the folder your photos are in</label> <label for="source"><i class="icon-folder-open"></i> What folder are your photos in now?</label>
<input type="text" name="source" id="source" placeholder="Path to your photos folder"> <input type="text" name="source" id="source" placeholder="Path to your photos folder">
<small><em>Hint: Right clicking on your folder in Finder, pressing option and clicking "Copy as Pathname" will put the full path on your clipboard</em></small> <small><em>Hint: Right clicking on your folder in Finder, pressing option and clicking "Copy as Pathname" will put the full path on your clipboard</em></small>
</div> </div>
<div> <div>
<label for="destination"><i class="icon-folder-closed"></i> Choose a destination folder</label> <label for="destination"><i class="icon-folder-closed"></i> Where would you like me to organize them to?</label>
<input type="text" name="destination" id="destination" placeholder="Path to your photos folder"> <input type="text" name="destination" id="destination" placeholder="Path to your photos folder">
<button type="submit" class="push">Start Organizing<i></i></button> <button type="submit" class="push">Start Organizing<i></i></button>
</div> </div>

View File

@ -18,6 +18,10 @@ if(typeof(require) === 'function') {
handlers.removeProgressIcons(); handlers.removeProgressIcons();
handlers.addSuccessImportMessage(args); handlers.addSuccessImportMessage(args);
}); });
ipc.on('update-import-no-photos', function(args) {
//var response = JSON.parse(args['stdout']);
handlers.removeProgressIcons();
});
ipc.on('update-photos-success', function(args) { ipc.on('update-photos-success', function(args) {
var response = JSON.parse(args['stdout']); var response = JSON.parse(args['stdout']);
handlers.setSuccessTitle(); handlers.setSuccessTitle();
@ -58,17 +62,26 @@ function Handlers() {
ev.preventDefault(); ev.preventDefault();
broadcast.send('launch-finder', tgt); broadcast.send('launch-finder', tgt);
}; };
this.click.quitProgram = function(ev) {
//ev.preventDefault();
console.log('quit');
broadcast.send('program-quit');
};
// SUBMIT // SUBMIT
this.submit.importPhotos = function(ev) { this.submit.importPhotos = function(ev) {
var el = ev.target, var el = ev.target,
cls = el.className, cls = el.className,
params; params;
ev.preventDefault(); ev.preventDefault();
document.querySelector('button.push i').className = 'icon-spin animate-spin';
params = {}; params = {};
params['source'] = document.querySelector('input[name="source"]').value params['source'] = document.querySelector('input[name="source"]').value
params['destination'] = document.querySelector('input[name="destination"]').value params['destination'] = document.querySelector('input[name="destination"]').value
if(params['destination'].length === 0 || params['source'].length === 0) {
return;
}
document.querySelector('button.push i').className = 'icon-spin animate-spin';
broadcast.send('import-photos', params); broadcast.send('import-photos', params);
}; };
this.submit.updatePhotos = function(ev) { this.submit.updatePhotos = function(ev) {

View File

@ -10,8 +10,12 @@
</head> </head>
<body> <body>
<div class="titlebar"> <div class="titlebar">
<div class="left">
<!--<a href="" class="left quit quitProgram"><i class="icon-cancel-circle"></i></a>
<a href="" class="left minus minimizeProgram"><i class="icon-minus-circle"></i></a>-->
</div>
How can I help you? <em>-- Elodie</em><i></i> How can I help you? <em>-- Elodie</em><i></i>
<a href="index.html"><i class="icon-media-add"></i></a> <a href="index.html" class="right"><i class="icon-media-add"></i></a>
</div> </div>
<form class="updatePhotos" action="" method="post"> <form class="updatePhotos" action="" method="post">
<div class="content"> <div class="content">

View File

@ -1,7 +1,9 @@
var menubar = require('menubar'), var menubar = require('menubar'),
menu = require("menu"),
tray = require('tray'), tray = require('tray'),
ipc = require('ipc'), ipc = require('ipc'),
exec = require('child_process').exec;; exec = require('child_process').exec,
loadUrl = null;
/* /*
* The main process listens for events from the web renderer. * The main process listens for events from the web renderer.
@ -19,6 +21,7 @@ ipc.on('import-photos', function(event, args) {
console.log(args); console.log(args);
if(typeof(args['source']) === 'undefined' || args['source'].length === 0 || typeof(args['destination']) === 'undefined' || args['destination'].length === 0) { if(typeof(args['source']) === 'undefined' || args['source'].length === 0 || typeof(args['destination']) === 'undefined' || args['destination'].length === 0) {
console.log('no source or destination passed in to import-photos'); console.log('no source or destination passed in to import-photos');
event.sender.send('update-import-no-photos', null);
return; return;
} }
@ -94,37 +97,60 @@ ipc.on('update-photos', function(event, args) {
}); });
}); });
ipc.on('launch-finder', function(event, path) { ipc.on('launch-finder', function(event, path) {
console.log(path); console.log(path);
var shell = require('shell'); var shell = require('shell');
shell.showItemInFolder(path); shell.showItemInFolder(path);
}); });
ipc.on('program-quit', function(event, path) {
console.log('program-quit');
//mb.tray.destroy();
mb.quit();
});
var mb = menubar( var mb = menubar(
{ {
preloadWindow: true, preloadWindow: true,
dir: __dirname + '/html', dir: __dirname + '/html',
index: 'index.html', index: 'index.html',
pages: { pages: {
'blank': 'blank.html',
'location': 'location.html' 'location': 'location.html'
}, },
width: 400, width: 400,
height: 500 height: 500,
'window-position': 'trayCenter'
} }
) );
mb.on('ready', function ready () { mb.on('ready', function ready () {
console.log('app is ready') console.log('app is ready')
var template = [{
label: "Application",
submenu: [
{ label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); }}
]}, {
label: "Edit",
submenu: [
{ label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },
{ label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },
{ label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
{ label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
{ label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
{ label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" }
]}
];
menu.setApplicationMenu(menu.buildFromTemplate(template));
this.tray.setToolTip('Drag and drop files here') this.tray.setToolTip('Drag and drop files here')
//this.tray.setImage('img/logo.png') this.tray.setImage(mb.getOption('dir') + '/img/logo@18x22xbw.png')
this.tray.on('clicked', function clicked () { this.tray.on('clicked', function clicked () {
console.log('tray-clicked') console.log('tray-clicked')
}) })
this.tray.on('drop-files', function dropFiles (ev, files) { this.tray.on('drop-files', function dropFiles (ev, files) {
mb.showWindow() loadUrl = mb.getOption('pages')['location'];
console.log('window file name ' + mb.window.getRepresentedFilename()) mb.showWindow();
mb.window.loadUrl('file://' + mb.getOption('dir') + '/' + mb.getOption('pages')['location'])
//mb.window.openDevTools(); //mb.window.openDevTools();
mb.window.webContents.on('did-finish-load', function() { mb.window.webContents.on('did-finish-load', function() {
mb.window.webContents.send('files', files); mb.window.webContents.send('files', files);
@ -140,9 +166,14 @@ mb.on('create-window', function createWindow () {
mb.on('after-create-window', function afterCreateWindow () { mb.on('after-create-window', function afterCreateWindow () {
}) })
var loaded = false;
mb.on('show', function show () { mb.on('show', function show () {
//this.window.openDevTools(); if(loadUrl === null) {
this.window.loadUrl('file://' + this.getOption('dir') + '/' + this.getOption('index')) loadUrl = this.getOption('index');
}
this.window.loadUrl('file://' + this.getOption('dir') + '/' + loadUrl);
loadUrl = null;
//mb.window.openDevTools();
}) })
mb.on('after-show', function afterShow () { mb.on('after-show', function afterShow () {
@ -155,4 +186,5 @@ mb.on('hide', function hide () {
mb.on('after-hide', function afterHide () { mb.on('after-hide', function afterHide () {
console.log('after-hide') console.log('after-hide')
this.window.loadUrl('file://' + this.getOption('dir') + '/' + this.getOption('pages')['blank']);
}) })