Merge pull request #84 from BenjaVR/master

Added close button + setting to close to tray or close the app

Author: emilioastarita

Lyricfier.ts

@@ -82,6 +82,10 @@ export class Lyricfier {
         const iconPath = this.getTrayIcon();
         this.appIcon = new electron.Tray(iconPath);
         this.appIcon.setContextMenu(this.createTrayMenu());
+
+        this.appIcon.on('click', () => {
+            this.window.show();
+        });
     }
 
     subscribeSettingsEvents() {

Settings.ts

@@ -8,6 +8,7 @@ export interface SettingsValues {
     theme: 'dark'|'light';
     fontSize: 'eight-pt'|'ten-pt'|'twelve-pt'|'fourteen-pt'|'sixteen-pt';
     refreshInterval: number;
+    closeToTray: boolean;
 }
 
 export const defaultSettings: SettingsValues = {
@@ -16,7 +17,8 @@ export const defaultSettings: SettingsValues = {
     autoScroll: false,
     theme: 'light',
     fontSize: 'twelve-pt',
-    refreshInterval: 5000
+    refreshInterval: 5000,
+    closeToTray: false
 };
 
 export class Settings {

render/LyricfierRender.ts

@@ -1,5 +1,5 @@
 import Component from 'vue-class-component';
-import {ipcRenderer, shell}  from 'electron';
+import {ipcRenderer, shell, remote}  from 'electron';
 import {SettingsRender} from './SettingsRender';
 import {SongRender} from './SongRender';
 import {template} from './template';
@@ -93,6 +93,14 @@ class LyricfierRender {
     isView(page) {
         return this.currentView === page;
     }
+
+    closeApp() {
+        if (this.settings.closeToTray){
+            remote.getCurrentWindow().hide();
+        } else {
+            remote.getCurrentWindow().close();
+        }
+    }
 }
 
 export = LyricfierRender;

render/less/components/app-drag-bar.less

@@ -7,9 +7,11 @@
     flex: 0 0 auto;
     display: flex;
     border-bottom: 1px solid rgba(0, 0, 0, .125);
-    width: ~"calc(100% - 2rem)";
+    width: ~"calc(100% - 4rem)";
     -webkit-app-region: drag;
-    -webkit-mask-image: linear-gradient(to right, white 50%, transparent);
+    -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 20%,rgba(255,255,255,0.99) 49%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,0) 100%);
+    position: relative;
+    left: 2rem;
 
     h1 {
         flex: 1;

render/less/views/lyric.less

@@ -39,12 +39,19 @@
     .iconbutton;
     position: fixed;
     top: .2rem;
-    right: .25rem;
     cursor: pointer;
 
     .material-icons {
         font-size: 1rem;
     }
+
+    &.settings-btn {
+        right: .25rem;
+    }
+
+    &.close-btn {
+        left: .25rem;
+    }
 }
 
 .full-vertical-flex {

render/views/Lyricfier.html

@@ -2,7 +2,10 @@
     <script src="http://localhost:35729/livereload.js"></script>
 </div>
 <div class="main-view" v-bind:class="settings.theme">
-    <a href="#" v-if="!settings.hideLyrics" v-if="isView('SongRender')" @click="changeView('SettingsRender')" title="Switch View" class="view-switcher">
+    <a href="#" @click="closeApp()" title="Close app" class="view-switcher close-btn">
+        <i class="material-icons">close</i>
+    </a>
+    <a href="#" v-if="!settings.hideLyrics" v-if="isView('SongRender')" @click="changeView('SettingsRender')" title="Switch View" class="view-switcher settings-btn">
         <i class="material-icons">settings</i>
     </a>
     <song-render

render/views/Settings.html

@@ -23,6 +23,11 @@ <h1>
                             </select>
                         </label>
                     </li>
+                    <li>
+                        <label>
+                            <input type="checkbox" v-model="settings.closeToTray" @change="onChangeSettings()"> Close button minimizes to tray
+                        </label>
+                    </li>
                 </ol>
             </fieldset>
             <fieldset>