UI standardization project complete on Deck theme, just need to fix s…

…ome small breaks in emudeck and classic themes

src/lang/en-US/langStrings.json

@@ -298,13 +298,13 @@
   "logger": {
     "component": {
       "noMessages": "No messages are available",
-      "error": "ERROR",
-      "info": "INFO",
-      "success": "SUCCESS",
-      "fuzzy": "FUZZY",
-      "textWrap": "TEXT-WRAP",
-      "autoscroll": "AUTOSCROLL",
-      "clearLog": "Clear log",
+      "error": "Error messages",
+      "info": "Info messages",
+      "success": "Success messages",
+      "fuzzy": "Fuzzy messages",
+      "textWrap": "Wrap text",
+      "autoscroll": "Autoscroll",
+      "clearLog": "Clear",
       "issueDescription": "Thorough issue description with passable spelling.",
       "handleExample": "CoolHandle#1234"
     }
@@ -364,7 +364,8 @@
         "showSteamImages": "Show current Steam artwork by default",
         "deleteDisabledShortcuts": "Remove shortcuts for disabled parsers",
         "clearLogOnTest": "Automatically clear log before testing parsers",
-        "configDir": "Open Config Directory"
+        "configDir": "Config Directory",
+        "steamDir": "Steam Directory"
       },
       "placeholder": {
         "noProviders": "None",

src/models/language.model.ts

@@ -395,6 +395,7 @@ export interface languageStruct {
         deleteDisabledShortcuts: string;
         clearLogOnTest: string;
         configDir: string;
+        steamDir: string;
       };
       placeholder: {
         noProviders: string;

src/renderer/components/logger.component.ts

@@ -9,8 +9,8 @@ import {
   RendererStyleFlags2
 } from "@angular/core";
 import { FormGroup, FormBuilder } from "@angular/forms";
-import { LoggerService } from "../services";
-import { LogMessage, LogSettings } from "../../models";
+import { LoggerService, SettingsService } from "../services";
+import { AppSettings, LogMessage, LogSettings } from "../../models";
 import { Observable } from "rxjs";
 import { APP } from "../../variables";
 import { clipboard } from "electron";
@@ -26,10 +26,12 @@ import * as fs from "fs-extra";
 })
 export class LoggerComponent {
   messages: Observable<LogMessage[]>;
-  settings: LogSettings = undefined;
+  settings: LogSettings;
+  appSettings: AppSettings;
   explanation: string;
-  reportID: string = undefined;
-  deleteKey: string = undefined;
+  showOptions: boolean = false;
+  reportID: string;
+  deleteKey: string;
   useVDFs: boolean = false;
   description: string = "";
   discordHandle: string = "";
@@ -43,9 +45,11 @@ export class LoggerComponent {
     private changeDetectionRef: ChangeDetectorRef,
     private formBuilder: FormBuilder,
     private renderer: Renderer2,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private settingsService: SettingsService
   ) {
     this.settings = this.loggerService.getLogSettings();
+    this.appSettings = this.settingsService.getSettings();
     this.messages = this.loggerService.getLogMessages();
     this.explanation = this.lang.docs__md.self.join(" ");
 
@@ -135,6 +139,35 @@ export class LoggerComponent {
   clearLog() {
     this.loggerService.clearLog();
   }
+
+  closeOptions() {
+    this.showOptions = false;
+    this.renderer.setStyle(
+      this.elementRef.nativeElement,
+      "--options-width",
+      "0%",
+      RendererStyleFlags2.DashCase,
+    );
+  }
+
+  openOptions() {
+    this.showOptions = true;
+    this.renderer.setStyle(
+      this.elementRef.nativeElement,
+      "--options-width",
+      "300px",
+      RendererStyleFlags2.DashCase,
+    );
+  }
+
+  toggleOptions() {
+    if (this.showOptions) {
+      this.closeOptions();
+    } else {
+      this.openOptions();
+    }
+    this.changeDetectionRef.detectChanges();
+  }
 
   openReporter() {
     this.showReporter = true;

src/renderer/components/parsers.component.ts

@@ -743,7 +743,7 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
       this.renderer.setStyle(
         this.elementRef.nativeElement,
         "--markdown-width",
-        "0.7fr",
+        "1fr",
         RendererStyleFlags2.DashCase,
       );
     } else {

src/renderer/components/preview.component.ts

@@ -513,12 +513,7 @@ export class PreviewComponent implements OnDestroy {
       RendererStyleFlags2.DashCase,
     );
   }
-
-  toggleDetailsPerApp() {
-    this.hideDetailsPerApp = !this.hideDetailsPerApp;
-    this.changeDetectionRef.detectChanges();
-  }
-
+
   toggleFilters() {
     if (this.showFilters) {
       this.closeFilters();
@@ -528,6 +523,11 @@ export class PreviewComponent implements OnDestroy {
     this.changeDetectionRef.detectChanges();
   }
 
+  toggleDetailsPerApp() {
+    this.hideDetailsPerApp = !this.hideDetailsPerApp;
+    this.changeDetectionRef.detectChanges();
+  }
+
   setArtFilter(artFilter: boolean) {
     this.missingArtFilter = artFilter;
     this.changeDetectionRef.detectChanges();

src/renderer/components/settings.component.ts

@@ -248,7 +248,7 @@ export class SettingsComponent implements OnDestroy {
     this.renderer.setStyle(
       this.elementRef.nativeElement,
       "--markdown-width",
-      "0.7fr",
+      "1fr",
       RendererStyleFlags2.DashCase,
     );
   }

src/renderer/components/user-exceptions.component.ts

@@ -9,8 +9,8 @@ import {
 } from "@angular/core";
 import { ActivatedRoute, Router, RouterLinkActive } from "@angular/router";
 import { FormBuilder, FormArray, FormGroup, FormControl } from "@angular/forms";
-import { UserExceptions, SelectItem } from "../../models";
-import { UserExceptionsService, LoggerService } from "../services";
+import { UserExceptions, SelectItem, AppSettings } from "../../models";
+import { UserExceptionsService, LoggerService, SettingsService } from "../services";
 import { Subscription } from "rxjs";
 import { APP } from "../../variables";
 import * as _ from "lodash";
@@ -26,6 +26,7 @@ export class ExceptionsComponent implements OnDestroy {
     activePath: "",
     content: "",
   };
+  appSettings: AppSettings;
   exceptionsForm: FormGroup;
   filterValue = "";
   private subscriptions: Subscription = new Subscription();
@@ -51,8 +52,10 @@ export class ExceptionsComponent implements OnDestroy {
     private formBuilder: FormBuilder,
     private changeDetectorRef: ChangeDetectorRef,
     private renderer:  Renderer2,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private settingsService: SettingsService
   ) {
+    this.appSettings = this.settingsService.getSettings();
     this.currentDoc.content = this.lang.docs__md.userExceptions.join("");
   }
 
@@ -158,7 +161,7 @@ export class ExceptionsComponent implements OnDestroy {
     this.renderer.setStyle(
       this.elementRef.nativeElement,
       "--markdown-width",
-      "0.7fr",
+      "1fr",
       RendererStyleFlags2.DashCase,
     );
   }

src/renderer/components/view.component.ts

@@ -9,7 +9,7 @@ import {
 } from "@angular/core";
 import { clipboard } from "electron";
 import { ActivatedRoute, Router } from "@angular/router";
-import { LoggerService } from "../services";
+import { LoggerService, SettingsService } from "../services";
 import { ControllerManager } from "../../lib";
 import {
   controllerTypes,
@@ -24,6 +24,7 @@ import {
   VDF_ShortcutsItem,
   SteamInputEnabled,
   ControllerTemplate,
+  AppSettings,
 } from "../../models";
 import { generateShortAppId } from "../../lib/helpers/steam";
 import path from "path";
@@ -40,6 +41,7 @@ import { ViewService } from "../services/view.service";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ViewComponent {
+  appSettings: AppSettings;
   currentShortcut: VDF_ShortcutsItem;
   currentCats: string;
   currentLaunch: string;
@@ -52,11 +54,14 @@ export class ViewComponent {
     private router: Router,
     private activatedRoute: ActivatedRoute,
     private loggerService: LoggerService,
+    private settingsService: SettingsService,
     public viewService: ViewService,
     private renderer: Renderer2,
     private elementRef: ElementRef,
     private changeDetectionRef: ChangeDetectorRef,
-  ) {}
+  ) {
+    this.appSettings = this.settingsService.getSettings();
+  }
 
   get artworkSingDict() {
     return artworkSingDict;

src/renderer/styles/logger.component.scss

@@ -2,45 +2,44 @@
 
 :host {
   --reporter-width: 0fr;
+  --options-width: 0fr;
+
   display: grid;
   overflow: auto;
 
   grid-area: route;
   grid-template-areas:
-    "messages bugreport"
-    "messages bugreportdocs"
-    "menu menu";
-  grid-template-columns: 1.5fr var(--reporter-width);
+    "options messages bugreport"
+    "options messages bugreportdocs"
+    "menu menu menu";
+  grid-template-columns: var(--options-width) 1.5fr var(--reporter-width);
   grid-template-rows: 1fr 1.3fr auto;
 
-  .menu {
-    @include webkitScrollbar(logger-menu-scrollbar, 0.5em);
-
-    grid-area: menu;
-    display: flex;
-    overflow: auto;
-
-    border: solid 0.5em transparent;
-    background-color: var(--color-logger-menu-background);
-
-    align-self: end;
-
-    > div {
-      @include toggleButtonColor(toggle-button);
-      @include button();
-
-      margin: 0 0.25em;
-      &:last-child {
-        margin-right: 0;
-      }
-      &:first-child {
-        margin-left: 0;
+  .options {
+    grid-area: options;
+    background-color: var(--color-preview-user-background);
+    @include webkitScrollbar(preview-scrollbar);
+    overflow-y: scroll;
+    .optionsGroup {
+      padding-left: 1em;
+      padding-right: 1em;
+      padding-top: 1em;
+      .optionsLabel {
+        margin-bottom: 0.5em;
+        span {
+          color: var(--color-preview-text);
+        }
       }
-
-      &.clear {
-        @include clickButtonColor(click-button);
+      .optionsButton {
+        @include button();
+        @include toggleButtonColor(toggle-button);
+        margin-bottom: 1em;
+        margin-right: 1em;
       }
     }
+
+
+
   }
   .bugreport {
     grid-area: bugreport;
@@ -178,4 +177,38 @@
       }
     }
   }
+  .menu {
+    @include webkitScrollbar(logger-menu-scrollbar, 0.5em);
+
+    display: grid;
+    grid-area: menu;
+    grid-template-areas: "lowerLeft . lowerRight";
+    grid-template-columns: auto 1fr auto;
+    .lowerLeft {
+      grid-area: lowerLeft;
+    }
+    .lowerRight {
+      grid-area: lowerRight;
+    }
+    overflow: auto;
+
+    border: solid 0.5em transparent;
+    background-color: var(--color-logger-menu-background);
+
+    .lowerLeft>div,.lowerRight>div {
+      @include toggleButtonColor(click-button);
+      @include button();
+
+      margin: 0 0.25em;
+      &:last-child {
+        margin-right: 0;
+      }
+      &:first-child {
+        margin-left: 0;
+      }
+      &.dangerousButton {
+        @include clickButtonColor(dangerous-click-button);
+      }
+    }
+  }
 }

src/renderer/styles/settings.component.scss

@@ -115,23 +115,30 @@
   .menu {
     @include webkitScrollbar(parser-menu-scrollbar, 0.5em);
 
-    display: flex;
+    display: grid;
+    grid-area: menu;
+    grid-template-areas: "lowerLeft . lowerRight";
+    grid-template-columns: auto 1fr auto;
+    .lowerLeft {
+      grid-area: lowerLeft;
+    }
+    .lowerRight {
+      grid-area: lowerRight;
+    }
     overflow: auto;
 
     border: 0.5em solid transparent;
     background-color: var(--color-parsers-menu-background);
 
-    grid-area: menu;
-
-    > div {
+    .lowerLeft>div,.lowerRight>div {
       @include clickButtonColor(click-button, true);
       @include button();
       margin: 0 0.25em;
       &:last-child {
         margin-right: 0;
       }
       &:first-child {
-        margin-left: auto;
+        margin-left: 0;
       }
       &.dangerousButton {
         @include clickButtonColor(dangerous-click-button);