[Improvement] manual select menubar icon style

package.json

@@ -60,7 +60,6 @@
     "countup.js": "^1.7.1",
     "semver": "^5.1.0",
     "superagent": "^3.1.0",
-    "jquery-lang-js": "^3.0.2",
     "moment": "^2.17.1"
   }
 }

src/app.js

@@ -15,6 +15,7 @@ const config = require('./../package.json')
 const path = require('path')
 
 let autoLaunch = true
+let iconSetting = 'auto'
 
 // Quit when all windows are closed.
 app.on('window-all-closed', function () {
@@ -37,7 +38,7 @@ const mb = menubar({
   height: 480,
   resizable: false,
   showDockIcon: false,
-  preloadWindow: true,
+  preloadWindow: true
 })
 
 mb.on('ready', function ready () {
@@ -66,24 +67,21 @@ mb.on('ready', function ready () {
   ipcMain.on('no-title', function (event, args) {
     mb.tray.setToolTip('temps')
     mb.tray.setTitle('')
-    if (process.platform === 'darwin') {
-      mb.tray.setImage(path.join(__dirname, '/../assets/IconTemplate.png'))
-    } else {
-      mb.tray.setImage(path.join(__dirname, '/../assets/icons/01dW.png'))
-    }
+    changeIcon('01d')
   })
 
   ipcMain.on('set-title', function (event, args) {
     const temperature = Math.round(args.temperature) + '°'
-    mb.tray.setToolTip(args.location + ' - ' + temperature)
+    mb.tray.setToolTip(args.location + ' / ' + temperature)
     mb.tray.setTitle(temperature)
-    if (process.platform === 'darwin') {
-      mb.tray.setImage(path.join(__dirname, '/../assets/icons', args.icon + 'Template.png'))
-    } else {
-      mb.tray.setImage(path.join(__dirname, '/../assets/icons', args.icon + 'W.png'))
-    }
+    changeIcon(args.icon)
   })
 
+  ipcMain.on('icon-setting', function (event, args) {
+      iconSetting = args.setting
+      changeIcon(args.icon)
+    })
+
   ipcMain.on('close', function (event, args) {
     app.quit()
   })
@@ -183,6 +181,23 @@ const template = [{
     }
 ]
 
+const changeIcon = function (icon) {
+    if (iconSetting === 'auto') {
+        if (process.platform === 'darwin') {
+            mb.tray.setImage(path.join(__dirname, '/../assets/icons', icon + 'Template.png'))
+        } else {
+            mb.tray.setImage(path.join(__dirname, '/../assets/icons', icon + 'W.png'))
+        }
+    } else {
+        if (iconSetting === 'white') {
+            mb.tray.setImage(path.join(__dirname, '/../assets/icons', icon + 'W.png'))
+        } else {
+            mb.tray.setImage(path.join(__dirname, '/../assets/icons', icon + '.png'))
+        }
+    }
+
+}
+
 const autoUpdater = function () {
   superagent
       .get('https://raw.githubusercontent.com/jackd248/temps/master/package.json')

src/components/weather.js

@@ -109,6 +109,10 @@ const refreshWeather = function () {
   window.setTimeout(color.colorPalette, 1000)
 }
 
+const getIcon = function () {
+  return store.getWdata()[0].weather[0].icon
+}
+
 const showWeatherData = function () {
   const wdata = store.getWdata()
   if (NumAnimTemp === null) {
@@ -393,3 +397,4 @@ exports.showHourlyWeatherData = showHourlyWeatherData
 exports.getGeolocation = getGeolocation
 exports.getNumAnimTemp = getNumAnimTemp
 exports.setNumAnimTemp = setNumAnimTemp
+exports.getIcon = getIcon

src/main/index.html

@@ -85,7 +85,7 @@ <h1>
                     <div class="geolocation"></div>
                     <label class="inline fav"><input type="checkbox" name="favorite-city" value="false"><span></span></label>
                 </div>
-                <div class="form-item">
+                <div class="form-item small">
                     <label for="apikey">API Key</label>
                     <input type="text" name="apikey" id="apikey" value="" class="small"/>
                     <span class="help">
@@ -105,6 +105,16 @@ <h1>
                         <div class="pull-right"><input type="checkbox" name="mb-info" value="true"><span class="fit"></span></div>
                     </label>
                 </div>
+                <div class="form-item small">
+                    <div class="label pull-left">Menubar icon</div>
+                    <div class="pull-right fit menubar-icon">
+                        <select>
+                            <option value="auto">auto</option>
+                            <option value="white">white</option>
+                            <option value="black">black</option>
+                        </select>
+                    </div>
+                </div>
                 <div class="form-item small">
                     <label class="clear">
                         <div class="pull-left">Start at login</div>

src/main/main.js

@@ -97,6 +97,15 @@ const loadEventListener = function () {
     utils.toggleSettings()
   })
 
+  jQuery('.menubar-icon select').on('change', function (e) {
+    let selection = jQuery('option:selected', this).val()
+    store.setIconSetting(selection)
+    ipcRenderer.send('icon-setting', {
+      setting: selection,
+      icon: weather.getIcon()
+    })
+  })
+
   jQuery('a').click(function (e) {
     e.preventDefault()
     const target = jQuery(this).attr('href')
@@ -169,6 +178,16 @@ const init = function () {
     store.setAutoLaunch(true)
   }
 
+  if (store.getIconSetting()) {
+    store.setIconSetting(store.getIconSetting())
+    ipcRenderer.send('icon-setting', {
+      setting: store.getIconSetting(),
+      icon: '01d'
+    })
+  } else {
+    store.setIconSetting('auto')
+  }
+
   if (store.getFavoriteCity()) {
     if (store.getCity() === store.getFavoriteCity()) {
       jQuery('input[type="checkbox"][name="favorite-city"]').prop('checked', true)

src/main/style.css

@@ -385,9 +385,13 @@ h1:after {
     transition: all 1s ease-in-out;
 }
 
+#settings h1 {
+    font-size: 26px;
+}
+
 #settings h1:before {
-    width: 45px;
-    height: 45px;
+    width: 40px;
+    height: 40px;
     content: ' ';
     background: url('../../assets/app.png') no-repeat center center;
     background-size: cover;
@@ -542,6 +546,32 @@ input[type="checkbox"][name="favorite-city"]:checked + span {
     background-size: cover;
 }
 
+.menubar-icon {
+    padding: 0;
+    margin: 0;
+    border: 1px solid #999999;
+    width: 60px;
+    overflow: hidden;
+    background-color: #fff;
+    background: #fff url(../../assets/dropdown@2x.png) center right no-repeat;
+}
+
+.menubar-icon select {
+    padding: 5px 8px;
+    width: 130%;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.menubar-icon select:focus {
+    outline: none;
+}
+
 .clear::after {
     content: "";
     clear: both;
@@ -553,7 +583,7 @@ input[type="checkbox"][name="favorite-city"]:checked + span {
     text-align: center;
     border: 1px solid #CCCCCC;
     color: #000;
-    padding: 6px;
+    padding: 4px;
     background: #FFF;
     box-sizing: border-box;
     font-size: 14px;
@@ -582,7 +612,6 @@ input[type="checkbox"][name="favorite-city"]:checked + span {
 
 #settings .footer {
     text-align: center;
-    margin-top: 5px;
 }
 @keyframes pulse {
     0%   { opacity: 1; }

src/utilities/store.js

@@ -108,6 +108,15 @@ const setTimeFormat = function (format) {
     jQuery('input:radio[name="time"]')[1].checked = true
 }
 
+const getIconSetting = function () {
+  return localStore.get('icon-setting')
+}
+
+const setIconSetting = function (setting) {
+  localStore.set('icon-setting', setting)
+  jQuery('.menubar-icon select').val(setting)
+}
+
 exports.getWdata = getWdata
 exports.setWdata = setWdata
 exports.setCity = setCity
@@ -124,3 +133,5 @@ exports.getAutoLaunch = getAutoLaunch
 exports.setAutoLaunch = setAutoLaunch
 exports.getTimeFormat = getTimeFormat
 exports.setTimeFormat = setTimeFormat
+exports.getIconSetting = getIconSetting
+exports.setIconSetting = setIconSetting