From 036f4772155628c532b786c4707a1f58c29a4629 Mon Sep 17 00:00:00 2001 From: Jaisen Mathai Date: Wed, 28 Oct 2015 01:38:45 -0700 Subject: [PATCH] Add UI support for updating title and date/time --- .gitignore | 1 + app/app.js | 46 +++++++++----- app/html/css/fontello/config.json | 18 ++++++ app/html/css/fontello/css/elodie.css | 17 ++--- app/html/css/fontello/css/font/elodie.svg | 16 ----- app/html/css/fontello/font/elodie.svg | 3 + app/html/css/styles.css | 56 ++++++++++++++--- app/html/js/handlers.js | 77 ++++++++++++++++------- app/html/location.html | 28 +++++++-- update.py | 3 +- 10 files changed, 191 insertions(+), 74 deletions(-) delete mode 100644 app/html/css/fontello/css/font/elodie.svg diff --git a/.gitignore b/.gitignore index 9fa5594..6236fcb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ **/.DS_Store **/*.pyc **/config.ini +**/node_modules/** diff --git a/app/app.js b/app/app.js index 3c2a00a..5c1b201 100644 --- a/app/app.js +++ b/app/app.js @@ -12,6 +12,9 @@ var menubar = require('menubar'), // Once this main process completes the update it will send a 'update-photos-completed' event back to the renderer with information // so a proper response can be displayed. ipc.on('update-photos', function(event, args) { + var params = args, + normalize + console.log('update-photos') console.log(args) if(typeof(args['files']) === 'undefined' || args['files'].length === 0) { @@ -19,25 +22,38 @@ ipc.on('update-photos', function(event, args) { return; } + normalize = function(files) { + for(var i=0; i - - -Copyright (C) 2015 by original authors @ fontello.com - - - - - - - - - - - - \ No newline at end of file diff --git a/app/html/css/fontello/font/elodie.svg b/app/html/css/fontello/font/elodie.svg index 8fdb63f..168277d 100644 --- a/app/html/css/fontello/font/elodie.svg +++ b/app/html/css/fontello/font/elodie.svg @@ -11,6 +11,9 @@ + + + \ No newline at end of file diff --git a/app/html/css/styles.css b/app/html/css/styles.css index 63d67b1..d572c5a 100644 --- a/app/html/css/styles.css +++ b/app/html/css/styles.css @@ -22,20 +22,41 @@ body { } .content { - padding: 10px; + padding: 0 10px 10px 10px; } -.content>.location { - padding-bottom: 20px; +.content > div { border-bottom: solid 1px #eee; + padding: 10px 0; } -.content>.album { - padding-top: 15px; - padding-bottom: 20px; - border-bottom: solid 1px #eee; + +.status { + display: none; +} + +.status ul { + list-style-type:none; + padding:0; + margin:20px 0 0; + font-size:.8em; +} + +.status ul li { + padding:0; + margin:0 0 10px; +} + +.status ul li .destination { + width: 100%; + font-size: .75em; + padding-top: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .preview { + position: relative; padding: 20px 0; } @@ -43,12 +64,23 @@ body { display: inline-block; border-radius: 2px; border: solid 1px #ddd; + margin: 1px; width: 42px; height: 42px; background-position: center center; background-size: cover; } +.preview .center-cropped.video:before { + font-family: "elodie"; + color: #eee; + content: '\e805'; + position: absolute; + margin-top: 6px; + margin-left: 8px; + font-size: 1.5em; +} + i { color: #555; } @@ -74,9 +106,17 @@ input, button { border-radius: 3px; } + +input:focus, +select:focus, +textarea:focus, +button:focus { + outline: none; +} + input { padding: 4px; - width: 300px; + width: 250px; } button { diff --git a/app/html/js/handlers.js b/app/html/js/handlers.js index 0c1d74e..4a0cebe 100644 --- a/app/html/js/handlers.js +++ b/app/html/js/handlers.js @@ -12,8 +12,10 @@ ipc.on('preview', function(files) { handlers.renderPreview(files) }); ipc.on('update-photos-success', function(args) { + var response = JSON.parse(args['stdout']) handlers.setSuccessTitle() handlers.removeProgressIcons() + handlers.updateStatus(response) }); function Broadcast() { @@ -25,31 +27,28 @@ function Broadcast() { function Handlers() { var self = this; var broadcast = new Broadcast(); - this.addAlbum = function(ev) { - var alb = document.querySelector('input[id="album-field"]').value, - progress = document.querySelector('button[class~="addAlbum"] i'); + this.updatePhotos = function(ev) { + var el = ev.target, + cls = el.className, + params; - progress.className = 'icon-spin animate-spin' - if(typeof(__process__.files) !== 'object' && __process__.files.length === 0) { + el.getElementsByTagName('i')[0].className = 'icon-spin animate-spin'; + + params = {}; + if(cls.search('add-location') !== -1) { + params['location'] = document.querySelector('input[id="location-field"]').value; + } else if(cls.search('add-datetime') !== -1) { + params['datetime'] = document.querySelector('input[id="datetime-field"]').value; + } else if(cls.search('add-album') !== -1) { + params['album'] = document.querySelector('input[id="album-field"]').value; + } else if(cls.search('add-title') !== -1) { + params['title'] = document.querySelector('input[id="title-field"]').value; + } else { return; } - console.log(__process__.files); - progress.className = 'icon-spin animate-spin' - broadcast.send('update-photos', {album: alb, files: __process__.files}); - }; - - this.addLocation = function(ev) { - var loc = document.querySelector('input[id="location-field"]').value, - progress = document.querySelector('button[class~="addLocation"] i'); - - if(typeof(__process__.files) !== 'object' && __process__.files.length === 0) { - return; - } - - console.log(__process__.files); - progress.className = 'icon-spin animate-spin' - broadcast.send('update-photos', {location: loc, files: __process__.files}); + params['files'] = __process__.files; + broadcast.send('update-photos', params); }; this.dispatch = function(ev) { @@ -70,8 +69,15 @@ function Handlers() { this.renderPreview = function(files) { html = '' - for(var i=0; i' + for(var i=0; i' + } else { + html += '
' + } + } + if(files.length >= 16) { + html += '
...and ' + (files.length -16) + ' more.' } document.querySelector('.preview').innerHTML = html }; @@ -79,6 +85,31 @@ function Handlers() { this.setSuccessTitle = function() { var el = document.querySelector('.titlebar i').className = 'icon-happy' }; + + this.updateStatus = function(response) { + var el = document.querySelector('.status'), + source, destination, html; + + console.log('update status') + console.log(response); + + if(response.length > 0) { + html = '
    '; + for(i=0; i'; + } else { + html += '
  • ' + sourceFileName + '
    '+destination+'
    • '; + } + } + html += '
'; + el.innerHTML = html; + el.style.display = 'block'; + } + }; } var handlers = new Handlers(); document.addEventListener('click', handlers.dispatch); diff --git a/app/html/location.html b/app/html/location.html index efef987..78efab6 100644 --- a/app/html/location.html +++ b/app/html/location.html @@ -15,19 +15,36 @@
- + +
+
+ + + +
+
+ + +
- - + + +
+
+
+ diff --git a/update.py b/update.py index 850e688..4941116 100755 --- a/update.py +++ b/update.py @@ -20,6 +20,7 @@ from elodie.localstorage import Db def parse_arguments(args): config = { + 'title': None, 'time': None, 'location': None, 'album': None, @@ -107,7 +108,7 @@ def main(config, args): db = Db() filesystem = FileSystem() -args = arguments.parse(sys.argv[1:], None, ['album=','time=','location=','process='], './update.py --time= --location= --process=no file1 file2...fileN') +args = arguments.parse(sys.argv[1:], None, ['title=','album=','time=','location=','process='], './update.py --time= --location= --process=no file1 file2...fileN') config = parse_arguments(args) if __name__ == '__main__':