option for startup at login

README.md

@@ -16,7 +16,7 @@ Temps
 
 > Temps is a modern and minimal menubar application based on Electron with actual weather information and forecast for Windows, Mac and Linux.
 
-![temps screenshot](assets/screenshot.png)
+![temps screenshot](assets/screenshot.jpg)
 
 ## Features
 
@@ -29,6 +29,8 @@ Temps
 * Global shortcut ```Cmd``` + ```Shift``` + ```W```
 * Minimal and colorful design
 
+![temps screenshot](assets/screenshot-overview.png)
+
 ## Development
 
 ### Run app

TODO.md

@@ -20,16 +20,16 @@
 * hourly forecast usability improvement
 * show weather icon for hourly forecast
 * Only change icons if data has changed
-* Open at startup option
+* ~~Open at startup option~~
 * Clean up code
 * forecast graph color bug
 * outsource configs
 * Windows menubar icon white
-* Open external browser
 
 ## v0.6.0
 * city autocomplete
 * auto updates
 * testing
 * web demo
+* Open external browser
 * Less, ECMAScript 5

app.js

@@ -15,6 +15,8 @@ var Tray = electron.Tray;
 // be closed automatically when the JavaScript object is garbage collected.
 var mainWindow = null;
 
+var autoLaunch = true;
+
 // Quit when all windows are closed.
 app.on('window-all-closed', function() {
   // On OS X it is common for applications and their menu bar
@@ -60,9 +62,6 @@ mb.on('ready', function ready () {
         console.log('registration failed')
     }
 
-    // Check whether a shortcut is registered.
-    console.log(globalShortcut.isRegistered('CommandOrControl+Shift+W'));
-
     ipcMain.on('no-title', function(event, args) {
         mb.tray.setToolTip('temps');
         mb.tray.setTitle('');
@@ -84,18 +83,33 @@ mb.on('ready', function ready () {
         app.quit();
     });
 
-    mb.window.on('will-navigate', function(e, url) {
-        e.preventDefault();
-        electron.shell.openExternal(url);
+    ipcMain.on('auto-launch', function(event, args) {
+
+        // appLauncher.isEnabled() not working for now
+        console.log(appLauncher.isEnabled());
+        if (autoLaunch) {
+            appLauncher.disable();
+            autoLaunch = false;
+            console.log('disable auto-launch');
+        } else {
+            appLauncher.enable();
+            autoLaunch = true;
+            console.log('enable auto-launch');
+        }
     });
+
+    //ToDo: open links in external browser
+    // mb.on('will-navigate', function(e, url) {
+    //     console.log('navigate');
+    //     e.preventDefault();
+    //     electron.shell.openExternal(url);
+    // });
 });
 
 mb.on('show', function show () {
     mb.window.webContents.send('show');
 });
 
-
-
 var appLauncher = new AutoLaunch({
     name: 'temps'
 });

index.html

@@ -66,17 +66,26 @@ <h1>
                     <label for="apikey">API Key</label>
                     <input type="text" name="apikey" id="apikey" value=""/>
                     <span class="help">
-                        You need an api key from <a href="http://www.openweathermap.org/" alt="openweathermap" target="_blank">openweathermap</a> for your weather data.
+                        You need a free api key from <a href="http://www.openweathermap.org/" alt="openweathermap" target="_blank">openweathermap</a>.
                     </span>
                 </div>
-                <div class="form-item">
-                    <span class="label">Format</span>
-                    <input type="Radio" name="format" value="metric" checked="checked" /> °C
-                    <input type="Radio" name="format" value="imperial" /> °F
+                <div class="form-item small clear">
+                    <div class="label pull-left">Format</div>
+                    <div class="pull-right">
+                        <input type="Radio" name="format" value="metric" checked="checked" /> °C
+                        <input type="Radio" name="format" value="imperial" /> °F
+                    </div>
                 </div>
-                <div class="form-item">
-                    <label>
-                        <input type="checkbox" name="mb-info" value="true"> Show weather in menubar
+                <div class="form-item small">
+                    <label class="clear">
+                        <div class="pull-left">Show weather in menubar</div>
+                        <div class="pull-right"><input type="checkbox" name="mb-info" value="true"></div>
+                    </label>
+                </div>
+                <div class="form-item small">
+                    <label class="clear">
+                        <div class="pull-left">Startup at login</div>
+                        <div class="pull-right"><input type="checkbox" name="auto-launch" value="true"> </div>
                     </label>
                 </div>
                 <div class="form-item">

package.json

@@ -6,7 +6,7 @@
   "icon": "assets/app.png",
   "description": "A simple but smart menubar weather app",
   "main": "app.js",
-  "electronVersion": "1.3.5",
+  "electronVersion": "1.4.1",
   "keywords": [
     "electron",
     "temperature",
@@ -46,8 +46,8 @@
     "electron-builder": "6.4.0"
   },
   "dependencies": {
-    "electron": "1.3.5",
-    "menubar": "^4.1.0",
+    "electron": "1.4.1",
+    "menubar": "^5.1.0",
     "auto-launch": "^5.0.0",
     "applescript": "^1.0.0",
     "jquery": "^3.1.0",

src/main.js

@@ -59,11 +59,16 @@ var loadEventListener = function() {
         if (getMbInfo()) {
             refreshWeather();
         } else {
-            console.log('send');
             ipcRenderer.send('no-title');
         }
     });
 
+    jQuery('input[type="checkbox"][name="auto-launch"]').change(function () {
+        var bool =jQuery('input[type="checkbox"][name="auto-launch"]:checked').length > 0;
+        setAutoLaunch(bool);
+        ipcRenderer.send('auto-launch');
+    });
+
     jQuery('.location').click(function () {
         toggleSettings();
         jQuery('input#city').delay(600).focus().select();
@@ -116,4 +121,10 @@ var init = function() {
     }  else {
         setMbInfo(true);
     }
+
+    if (store.get('auto-launch') != null) {
+        setAutoLaunch(store.get('auto-launch'));
+    }  else {
+        setAutoLaunch(true);
+    }
 };

src/style.css

@@ -30,6 +30,14 @@ a:hover {
     display: none;
 }
 
+.pull-left {
+    float: left;
+}
+
+.pull-right {
+    float: right;
+}
+
 h1 {
     margin: 0px;
     padding: 0;
@@ -119,7 +127,7 @@ h1:after {
 .drop {
     /*background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
     background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);*/
-    background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255,255,255,0.2);
     width:1px;
     height:50px;
     position: absolute;
@@ -389,7 +397,11 @@ h1:after {
 }
 
 #settings .form-item {
-    padding: 10px 0;
+    padding: 12px 0;
+}
+
+#settings .form-item.small {
+    padding: 5px 0;
 }
 
 #settings .form-item label, #settings .form-item .label {
@@ -432,6 +444,12 @@ h1:after {
     color: #000;
 }
 
+.clear::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
 #settings button {
     width: 100%;
     text-align: center;

src/utils.js

@@ -184,7 +184,12 @@ var setApiKey = function(key) {
 
 var setMbInfo = function(bool) {
     store.set('mb-info', bool);
-    jQuery('input[type="checkbox"]').prop('checked', bool);
+    jQuery('input[type="checkbox"][name="mb-info"]').prop('checked', bool);
+};
+
+var setAutoLaunch = function(bool) {
+    store.set('auto-launch', bool);
+    jQuery('input[type="checkbox"][name="auto-launch"]').prop('checked', bool);
 };
 
 var showErrorMessage = function(message) {
@@ -208,6 +213,14 @@ var getMbInfo = function() {
     }
 };
 
+var getAutoLaunch = function() {
+    if (store.get('auto-launch') != null) {
+        return store.get('auto-launch');
+    }  else {
+        return true;
+    }
+};
+
 var getApiKey = function () {
     if (store.get('apikey')) {
         return store.get('apikey')