What's New in v1.0.0:

------ * Fixes issue #9 - Sun & Moon Overlap * Add Accessibility Support * Remove Developer Menu Option
manifestinteractive · Mar 19, 2018 · 049455c · 049455c
1 parent 78d6f14
commit 049455c
Show file tree

Hide file tree

Showing 17 changed files with 114 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<p><img src="logo.png" alt="Weather Bar" width="280"/></p><p><a href="https://github.com/manifestinteractive/weather-bar-app/releases/download/v0.8.0/macos-weather-bar-0.8.0.dmg"><img src="https://img.shields.io/badge/dynamic/style-dmg-lightgrey.svg?style=for-the-badge&label=MacOS&colorA=3899d5&colorB=33c4f4" alt="MacOS" /></a> &nbsp; <a href="https://github.com/manifestinteractive/weather-bar-app/releases/download/v0.8.0/win32-weather-bar-0.8.0.exe"><img src="https://img.shields.io/badge/dynamic/style-exe-blue.svg?style=for-the-badge&label=Windows&colorA=3899d5&colorB=33c4f4" alt="Windows" /></a> &nbsp; <a href="https://github.com/manifestinteractive/weather-bar-app/releases/download/v0.8.0/linux-weather-bar-0.8.0-x86_64.AppImage"><img src="https://img.shields.io/badge/dynamic/style-AppImage-orange.svg?style=for-the-badge&label=Linux&colorA=3899d5&colorB=33c4f4" alt="Linux" /></a></p><p><img src="screenshot.gif" alt="Weather Bar" width="280" /></p>
+<p><img src="logo.png" alt="Weather Bar" width="280"/></p><p><a href="https://github.com/manifestinteractive/weather-bar-app/releases/download/v0.9.0/macos-weather-bar-0.9.0.dmg"><img src="https://img.shields.io/badge/dynamic/style-dmg-lightgrey.svg?style=for-the-badge&label=MacOS&colorA=3899d5&colorB=33c4f4" alt="MacOS" /></a> &nbsp; <a href="https://github.com/manifestinteractive/weather-bar-app/releases/download/v0.9.0/win32-weather-bar-0.9.0.exe"><img src="https://img.shields.io/badge/dynamic/style-exe-blue.svg?style=for-the-badge&label=Windows&colorA=3899d5&colorB=33c4f4" alt="Windows" /></a> &nbsp; <a href="https://github.com/manifestinteractive/weather-bar-app/releases/download/v0.9.0/linux-weather-bar-0.9.0-x86_64.AppImage"><img src="https://img.shields.io/badge/dynamic/style-AppImage-orange.svg?style=for-the-badge&label=Linux&colorA=3899d5&colorB=33c4f4" alt="Linux" /></a></p><p><img src="screenshot.gif" alt="Weather Bar" width="280" /></p>
 </div>
 
 Weather Bar

diff --git a/build/icons/icon.icns b/build/icons/icon.icns
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "weather-bar-app",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "author": "Peter Schmalfeldt <me@peterschmalfeldt.com>",
   "description": "Weather Bar is a Weather Application that lives in your Menu Bar giving you beautiful access to real-time weather conditions and a generous 15-day forecast.",
   "keywords": [
@@ -61,7 +61,7 @@
     "dmg": {
       "background": "build/img/background.png",
       "icon": "build/icons/icon.icns",
-      "title": "Weather Bar",
+      "title": "Weather Bar v1.0.0",
       "iconTextSize": 16,
       "iconSize": 120,
       "contents": [

diff --git a/src/main/index.js b/src/main/index.js
@@ -166,15 +166,6 @@ const makeMenu = () => {
     {
       type: 'separator'
     },
-    {
-      label: $t(appSettings.app_language, 'context.menu.devTools'),
-      click () {
-        mb.window.webContents.openDevTools()
-      }
-    },
-    {
-      type: 'separator'
-    },
     {
       label: $t(appSettings.app_language, 'context.menu.quit'),
       click () {

diff --git a/src/renderer/app.vue b/src/renderer/app.vue
@@ -1,9 +1,9 @@
 <template>
-  <div id="app" :class="classNames" v-if="appOpened">
+  <div id="app" :class="classNames">
     <toast v-if="toastMessage" :toastMessage="toastMessage" />
-    <loading v-if="!appReady || hasError" :hasError="hasError" />
+    <loading v-if="!appReady || hasError || !appOpened" :hasError="hasError" />
     <app-menu v-if="appReady && !hasError" :class="classNames" />
-    <router-view v-if="appReady" />
+    <router-view v-if="appReady && appOpened" />
   </div>
 </template>
 

diff --git a/src/renderer/assets/scss/time/_early-morning.scss b/src/renderer/assets/scss/time/_early-morning.scss
@@ -6,6 +6,9 @@
   .thunderstorm-wrapper {
     background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.5));
   }
+  .sun-wrapper {
+    display: none;
+  }
   .sky {
     background: linear-gradient(to bottom, #7f605b 0%, #ad7e6c 100%);
   }
@@ -16,11 +19,7 @@
       color: #75574d;
     }
   }
-  .sun-wrapper {
-    .sun-glow {
-      box-shadow: 0px -70px 225px rgba(255, 255, 235, 0.95)
-    }
-  }
+
   path.svg-trees {
     fill: #070b0b !important;
   }

diff --git a/src/renderer/components/page/new-location.vue b/src/renderer/components/page/new-location.vue
@@ -10,7 +10,7 @@
 
         <div class="form">
           <div class="search">
-            <input type="search" v-model="keyword" :placeholder="$t('page.newLocation.placeholder')">
+            <input type="search" v-model="keyword" :placeholder="$t('page.newLocation.placeholder')" tabindex="6">
             <i class="fal fa-search" v-if="keyword === ''"></i>
           </div>
 
@@ -25,12 +25,12 @@
             </ul>
           </div>
 
-          <button v-if="keyword.length > 0 && selectedCity" @click="letsGo">
+          <button v-if="keyword.length > 0 && selectedCity" @click="letsGo" tabindex="7">
             <i class="fas fa-angle-right"></i>
             {{ $t('page.newLocation.letsGo') }}
           </button>
 
-          <button v-if="keyword.length === 0" @click="getCurrentLocation">
+          <button v-if="keyword.length === 0" @click="getCurrentLocation" tabindex="7">
             <i class="fas fa-location-arrow"></i>
             {{ $t('page.newLocation.currentLocation') }}
           </button>

diff --git a/src/renderer/components/page/preferences.vue b/src/renderer/components/page/preferences.vue
@@ -4,29 +4,29 @@
       <div class="page-content">
         <page-header v-bind:title="$t('app.menu.preferences')" />
 
-        <div class="tab-set">
-          <a class="tab" :class="{ active: tab === 'app' }" @click.prevent="changeTab('app')">
+        <div class="tab-set" role="tablist">
+          <button id="tab-app" class="tab" :class="{ active: tab === 'app' }" @click="changeTab('app')" role="tab" aria-controls="tab-app-panel" :aria-selected="tab === 'app' ? 'true' : 'false'" tabindex="6">
             {{ $t('page.preferences.app') }}
-          </a>
-          <a class="tab" :class="{ active: tab === 'layout' }" @click.prevent="changeTab('layout')">
+          </button>
+          <button id="tab-layout" class="tab" :class="{ active: tab === 'layout' }" @click="changeTab('layout')" role="tab" aria-controls="tab-layout-panel" :aria-selected="tab === 'layout' ? 'true' : 'false'" tabindex="7">
             {{ $t('page.preferences.layout') }}
-          </a>
-          <a class="tab" :class="{ active: tab === 'units' }" @click.prevent="changeTab('units')">
+          </button>
+          <button id="tab-units" class="tab" :class="{ active: tab === 'units' }" @click="changeTab('units')" role="tab" aria-controls="tab-units-panel" :aria-selected="tab === 'units' ? 'true' : 'false'" tabindex="8">
             {{ $t('page.preferences.units') }}
-          </a>
+          </button>
         </div>
 
         <div class="tab-panels">
 
           <!-- APP TAB -->
-          <div class="tab-panel" v-show="tab === 'app'">
+          <div id="tab-app-panel" role="tabpanel" class="tab-panel" v-show="tab === 'app'" aria-labelledby="tab-app" :aria-hidden="tab === 'app' ? 'true' : 'false'">
 
             <h1 class="group-header first">{{ $t('page.preferences.settings') }}</h1>
 
             <!-- Language -->
             <div class="select-wrapper">
               <label for="app_language">{{ $t('page.preferences.language') }}</label>
-              <select id="app_language" v-model="settings.app_language" @change="changeLanguage">
+              <select id="app_language" v-model="settings.app_language" @change="changeLanguage" tabindex="9">
                 <option value="ar">العربية</option> <!-- Arabic -->
                 <option value="de">Deutsch</option> <!-- German -->
                 <option value="en">English</option> <!-- English -->
@@ -43,7 +43,7 @@
             <!-- Always on Top -->
             <div class="toggle-wrapper">
               <label for="app_always_on_top">{{ $t('page.preferences.alwaysOnTop') }}</label>
-              <toggle-switch id="app_always_on_top"
+              <toggle-switch id="app_always_on_top" tabindex="10"
                 v-model="settings.app_always_on_top"
                 :enabled.sync="settings.app_always_on_top"
                 @togglePreference="togglePreference"
@@ -53,7 +53,7 @@
             <!-- Launch at Startup -->
             <div class="toggle-wrapper">
               <label for="app_launch_at_startup">{{ $t('page.preferences.launchAtStartup') }}</label>
-              <toggle-switch id="app_launch_at_startup"
+              <toggle-switch id="app_launch_at_startup" tabindex="11"
                 v-model="settings.app_launch_at_startup"
                 :enabled.sync="settings.app_launch_at_startup"
                 @togglePreference="togglePreference"
@@ -64,49 +64,54 @@
 
             <div class="toggle-wrapper" v-if="platform === 'darwin'">
               <label for="both">{{ $t('page.preferences.both') }}</label>
-              <radio-button id="both" name="app_launch_icon" option="both"
+              <radio-button id="both" name="app_launch_icon" option="both" tabindex="12"
                 v-model="settings.app_launch_icon"
+                :current="options.app_launch_icon === 'both'"
                 :enabled.sync="settings.app_launch_icon"
                 @selectPreference="selectPreference"
                 />
             </div>
 
             <div class="toggle-wrapper">
               <label for="temperature">{{ $t('page.preferences.temperature') }}</label>
-              <radio-button id="temperature" name="app_launch_icon" option="temperature"
+              <radio-button id="temperature" name="app_launch_icon" option="temperature" tabindex="13"
                 v-model="settings.app_launch_icon"
+                :current="options.app_launch_icon === 'temperature'"
                 :enabled.sync="settings.app_launch_icon"
                 @selectPreference="selectPreference"
               />
             </div>
 
             <div class="toggle-wrapper">
               <label for="condition">{{ $t('page.preferences.condition') }}</label>
-              <radio-button id="condition" name="app_launch_icon" option="condition"
+              <radio-button id="condition" name="app_launch_icon" option="condition" tabindex="14"
                 v-model="settings.app_launch_icon"
+                :current="options.app_launch_icon === 'condition'"
                 :enabled.sync="settings.app_launch_icon"
                 @selectPreference="selectPreference"
               />
             </div>
           </div>
 
           <!-- LAYOUT TAB -->
-          <div class="tab-panel" v-show="tab === 'layout'">
+          <div id="tab-layout-panel" role="tabpanel" class="tab-panel" v-show="tab === 'layout'" aria-labelledby="tab-layout" :aria-hidden="tab === 'layout' ? 'true' : 'false'">
             <h1 class="group-header">{{ $t('page.preferences.currentTemp') }}</h1>
 
             <div class="toggle-wrapper">
               <label for="actual">{{ $t('page.preferences.actual') }}</label>
-              <radio-button id="actual" name="layout_current_temp" option="actual"
+              <radio-button id="actual" name="layout_current_temp" option="actual" tabindex="9"
                 v-model="settings.layout_current_temp"
+                :current="options.layout_current_temp === 'actual'"
                 :enabled.sync="settings.layout_current_temp"
                 @selectPreference="selectPreference"
                 />
             </div>
 
             <div class="toggle-wrapper">
               <label for="feels_like">{{ $t('page.preferences.feelsLike') }}</label>
-              <radio-button id="feels_like" name="layout_current_temp" option="feels_like"
+              <radio-button id="feels_like" name="layout_current_temp" option="feels_like" tabindex="10"
                 v-model="settings.layout_current_temp"
+                :current="options.layout_current_temp === 'feels_like'"
                 :enabled.sync="settings.layout_current_temp"
                 @selectPreference="selectPreference"
                 />
@@ -115,22 +120,24 @@
           </div>
 
           <!-- UNITS TAB -->
-          <div class="tab-panel" v-show="tab === 'units'">
+          <div id="tab-units-panel" role="tabpanel" class="tab-panel" v-show="tab === 'units'" aria-labelledby="tab-units" :aria-hidden="tab === 'units' ? 'true' : 'false'">
             <h1 class="group-header">{{ $t('page.preferences.temperature') }}</h1>
 
             <div class="toggle-wrapper">
               <label for="fahrenheit">{{ $t('page.preferences.fahrenheit') }}</label>
-              <radio-button id="fahrenheit" name="units_temperature" option="fahrenheit"
+              <radio-button id="fahrenheit" name="units_temperature" option="fahrenheit" tabindex="9"
                 v-model="settings.units_temperature"
+                :current="options.units_time === 'fahrenheit'"
                 :enabled.sync="settings.units_temperature"
                 @selectPreference="selectPreference"
                 />
             </div>
 
             <div class="toggle-wrapper">
               <label for="celsius">{{ $t('page.preferences.celsius') }}</label>
-              <radio-button id="celsius" name="units_temperature" option="celsius"
+              <radio-button id="celsius" name="units_temperature" option="celsius" tabindex="10"
                 v-model="settings.units_temperature"
+                :current="options.units_time === 'celsius'"
                 :enabled.sync="settings.units_temperature"
                 @selectPreference="selectPreference"
                 />
@@ -140,17 +147,19 @@
 
             <div class="toggle-wrapper">
               <label for="twelve_hour">{{ $t('page.preferences.twelveHour') }}</label>
-              <radio-button id="twelve_hour" name="units_time" option="twelve_hour"
+              <radio-button id="twelve_hour" name="units_time" option="twelve_hour" tabindex="11"
                 v-model="settings.units_time"
+                :current="options.units_time === 'twelve_hour'"
                 :enabled.sync="settings.units_time"
                 @selectPreference="selectPreference"
                 />
             </div>
 
             <div class="toggle-wrapper">
               <label for="twenty_four_hour">{{ $t('page.preferences.twentyFourHour') }}</label>
-              <radio-button id="twenty_four_hour" name="units_time" option="twenty_four_hour"
+              <radio-button id="twenty_four_hour" name="units_time" option="twenty_four_hour" tabindex="12"
                 v-model="settings.units_time"
+                :current="options.units_time === 'twenty_four_hour'"
                 :enabled.sync="settings.units_time"
                 @selectPreference="selectPreference"
                 />
@@ -200,17 +209,25 @@
       text-align: center;
       display: inline-block;
       line-height: 36px;
-      transition: all 0.25s ease-in-out;
+      transition: border 0.25s ease-in-out, color 0.25s ease-in-out;
       cursor: pointer;
       color: rgba(255, 255, 255, 0.75);
       font-weight: 300;
       font-size: 14px;
+      background: transparent;
+      border: none;
+      -webkit-appearance: none;
 
       &.active {
         border-bottom: 3px solid $logo-blue;
         color: rgba(255, 255, 255, 1);
         font-weight: 400;
       }
+
+      &:focus {
+        outline: 1px solid rgba(255, 255, 255, 0.25);
+        outline-offset: -1px;
+      }
     }
   }
 
@@ -253,9 +270,13 @@
         tab: 'app',
         platform: process.platform,
         settings: Object.assign({}, this.$store.getters.getSettings),
+        options: {},
         random: (Math.floor(Math.random() * 10) + 1)
       }
     },
+    mounted () {
+      this.options = Object.assign({}, this.$store.getters.getSettings)
+    },
     methods: {
       changeLanguage () {
         this.$i18n.locale = this.settings.app_language
@@ -285,6 +306,7 @@
           if (response.data) {
             this.$store.dispatch('updateSetting', { key: key, value: value })
             this.$electron.ipcRenderer.send('save-setting', key, value)
+            this.options[key] = value
 
             EventBus.$emit('updatedSettings')
 

diff --git a/src/renderer/components/page/saved-locations.vue b/src/renderer/components/page/saved-locations.vue
@@ -8,21 +8,23 @@
           <div class="tiles">
             <location
               v-if="orderedLocations && location.hash_key === 'current'"
-              v-for="location in orderedLocations"
+              v-for="(location, index) in orderedLocations"
               :current='true'
               :primary="location.primary"
               :info="location"
               :key="location.id"
+              tabindex="7"
               @clicked="clicked"
               @makePrimary="makePrimary"
             />
             <location
               v-if="orderedLocations && location.hash_key !== 'current'"
-              v-for="location in orderedLocations"
+              v-for="(location, index) in orderedLocations"
               :current='false'
               :primary="location.primary"
               :info="location"
               :key="location.id"
+              :tabindex="8 + index"
               @clicked="clicked"
               @deleted="deleted"
               @makePrimary="makePrimary"