styling in auto update + portable handling

SteamGridDB · Jun 23, 2020 · abae2c6 · abae2c6
1 parent 222e856
commit abae2c6
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 17 deletions.
diff --git a/src/main/app.ts b/src/main/app.ts
@@ -71,7 +71,11 @@ autoUpdater.on('checking-for-update', () => {
 })
 autoUpdater.on('update-available', (info) => {
   log.info('update available')
-  mainWindow.webContents.send('updater_message','update_available');
+  if(process.platform=='darwin' || process.env.PORTABLE_EXECUTABLE_DIR) {
+    mainWindow.webContents.send('updater_message','update_portable');
+  } else{
+    mainWindow.webContents.send('updater_message','update_available');
+  }
 })
 
 autoUpdater.on('error', (err) => {
@@ -93,7 +97,6 @@ app.on('ready', ()=>{
   createWindow()
   mainWindow.webContents.on('dom-ready',()=>{
     autoUpdater.checkForUpdatesAndNotify()
-    //mainWindow.webContents.send('updater_message','update_available')
   });
   ipcMain.on('download_update', (event: IpcMainEvent)=>{
     log.info('downloading update')

diff --git a/src/renderer/components/update-notifier.component.ts b/src/renderer/components/update-notifier.component.ts
@@ -5,11 +5,11 @@ import { IpcService } from '../services';
   selector: 'update-notifier',
   template: `
             <div id="updateNotification">
-              <p id="message">{{messageText}}</p>
-              <button id="no-button" (click)= "showUpdater=false" [class.hidden]="initiatedDownload">No</button>
-              <button id="yes-button" (click)="downloadUpdate()" [class.hidden]="initiatedDownload">Yes</button>
-              <button id="cancel-button" (click)="cancelUpdate()" [class.hidden]="!initiatedDownload">Cancel</button>
-              <button id="restart-button" (click)="restartApp()" [class.hidden]="!downloadComplete">Restart</button>
+              <p id="message" [innerHTML]="messageText"></p>
+              <div id="no-button" class="noButton" (click)= "showUpdater=false" [class.hidden]="initiatedDownload">{{isPortableUpdate?'Close':'No'}}</div>
+              <div id="yes-button" class="goButton" (click)="downloadUpdate()" [class.hidden]="initiatedDownload||isPortableUpdate">Yes</div>
+              <div id="cancel-button" class="noButton" (click)="cancelUpdate()" [class.hidden]="!initiatedDownload">Cancel</div>
+              <div id="restart-button" class="goButton" (click)="restartApp()" [class.hidden]="!downloadComplete">Restart</div>
             </div>
     `,
   styleUrls: ['../styles/update-notifier.component.scss'],
@@ -21,10 +21,11 @@ import { IpcService } from '../services';
 
 export class UpdateNotifierComponent {
   private showUpdater: boolean = false;
+  private isPortableUpdate: boolean = false;
   private initiatedDownload: boolean = false;
   private downloadComplete: boolean = false;
   private messageText: string = '';
-  constructor(private ipcService: IpcService, private changeDetectionRef: ChangeDetectorRef) {  }
+  constructor(private ipcService: IpcService, private changeRef: ChangeDetectorRef) {  }
 
   @Input()
   public set ipcMessage(message: any){
@@ -46,13 +47,19 @@ export class UpdateNotifierComponent {
       this.showUpdater = true;
       this.messageText = 'An update is available. Download it now?'
     }
+    else if(typeof(message)=='string' && message=='update_portable'){
+      this.showUpdater = true;
+      this.isPortableUpdate = true;
+      this.messageText = 'An update is available. <a href="https://github.com/doZennn/steam-rom-manager/releases/latest">Download it now?</a>'
+    }
     else if(typeof(message)=='string' && message=='update_downloaded') {
       this.downloadComplete=true;
       this.messageText = 'Update downloaded. Restart now?'
     }
-    else if(typeof(message)=='object') {
+    else {
       if(message['progress']) {
         this.messageText= message['progress'];
+        this.changeRef.detectChanges();
       }
     }
   }

diff --git a/src/renderer/styles/update-notifier.component.scss b/src/renderer/styles/update-notifier.component.scss
@@ -1,18 +1,59 @@
+@import 'mixins';
+
 :host {
   &.hidden {
     display: none;
   }
   .hidden {
     display: none;
   }
+  /deep/ a {
+    text-decoration: none;
+
+    color: var(--color-markdown-link);
+
+    &:hover {
+      color: var(--color-markdown-link-hover);
+    }
+
+    &:active {
+      color: var(--color-markdown-link-active);
+    }
+  }
   > #updateNotification {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    width: 200px;
-    padding: 20px;
-    border-radius: 5px;
-    background-color: white;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    font-size: 1em;
+
+    position: absolute;
+    left: 0;
+    bottom: 0;
+
+    display: inline-block;
+
+    margin: 0.5em 0.5em;
+    padding: 1em 2em;
+
+    text-align: right;
+    word-wrap: break-word;
+
+    color: var(--color-alert-text);
+    border: 1px solid var(--color-info);
+    background-color: var(--color-alert-background);
+
+    .goButton {
+      @include button();
+      @include clickButtonColor(click-button);
+      &.hidden {
+        display: none;
+      }
+      margin-left: 1em;
+
+    }
+    .noButton {
+      @include button();
+      @include clickButtonColor(dangerous-click-button);
+      &.hidden {
+        display: none;
+      }
+    }
   }
 }