ui/x standardization. Still need to standardize button groups in lowe…

…r menus and add an options panel to the logger

src/lib/string-interpolation.ts

@@ -3,6 +3,7 @@ import * as _ from "lodash";
 declare global {
   interface String {
     interpolate(params: { [key: string]: any }): string;
+    startCase(): string;
   }
 }
 
@@ -11,3 +12,8 @@ String.prototype.interpolate = function (params: any) {
   const vals = _.values(params);
   return new Function(...names, `return \`${this}\`;`)(...vals);
 };
+
+
+String.prototype.startCase = function() {
+  return this.split(/\s/g).map((w: string)=>_.capitalize(w)).join(" ");
+} 

src/renderer/components/logger.component.ts

@@ -5,6 +5,8 @@ import {
   ViewChild,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
+  Renderer2,
+  RendererStyleFlags2
 } from "@angular/core";
 import { FormGroup, FormBuilder } from "@angular/forms";
 import { LoggerService } from "../services";
@@ -32,13 +34,16 @@ export class LoggerComponent {
   description: string = "";
   discordHandle: string = "";
   bugForm: FormGroup;
+  showReporter:boolean = false;
 
   @ViewChild("messageWindow") private messageWindow: ElementRef;
 
   constructor(
     private loggerService: LoggerService,
     private changeDetectionRef: ChangeDetectorRef,
     private formBuilder: FormBuilder,
+    private renderer: Renderer2,
+    private elementRef: ElementRef
   ) {
     this.settings = this.loggerService.getLogSettings();
     this.messages = this.loggerService.getLogMessages();
@@ -130,4 +135,23 @@ export class LoggerComponent {
   clearLog() {
     this.loggerService.clearLog();
   }
+
+  openReporter() {
+    this.showReporter = true;
+    this.renderer.setStyle(
+      this.elementRef.nativeElement,
+      "--reporter-width",
+      "1fr",
+      RendererStyleFlags2.DashCase,
+    );
+  }
+  closeReporter() {
+    this.showReporter = false;
+    this.renderer.setStyle(
+      this.elementRef.nativeElement,
+      "--reporter-width",
+      "0fr",
+      RendererStyleFlags2.DashCase,
+    );
+  }
 }

src/renderer/components/parsers.component.ts

@@ -632,7 +632,7 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
                       values: input.allowedValues.map((option: string) => {
                         return {
                           value: option,
-                          displayValue: _.startCase(option.replace(/_/g, " ")),
+                          displayValue: option.replace(/_/g, " ").startCase(),
                         };
                       }),
                       onValidate: (self, path) => {

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

@@ -3,6 +3,9 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   OnDestroy,
+  Renderer2,
+  ElementRef,
+  RendererStyleFlags2
 } from "@angular/core";
 import { ActivatedRoute, Router, RouterLinkActive } from "@angular/router";
 import { FormBuilder, FormArray, FormGroup, FormControl } from "@angular/forms";
@@ -27,6 +30,7 @@ export class ExceptionsComponent implements OnDestroy {
   filterValue = "";
   private subscriptions: Subscription = new Subscription();
   private userExceptions: UserExceptions;
+  showMarkdown: boolean = false;
 
   sortByOpts: SelectItem[] = _.flatten(
     [
@@ -46,6 +50,8 @@ export class ExceptionsComponent implements OnDestroy {
     private loggerService: LoggerService,
     private formBuilder: FormBuilder,
     private changeDetectorRef: ChangeDetectorRef,
+    private renderer:  Renderer2,
+    private elementRef: ElementRef
   ) {
     this.currentDoc.content = this.lang.docs__md.userExceptions.join("");
   }
@@ -147,6 +153,25 @@ export class ExceptionsComponent implements OnDestroy {
     this.exceptionsFormItems.removeAt(index);
   }
 
+  openDocs() {
+    this.showMarkdown = true;
+    this.renderer.setStyle(
+      this.elementRef.nativeElement,
+      "--markdown-width",
+      "0.7fr",
+      RendererStyleFlags2.DashCase,
+    );
+  }
+  closeDocs() {
+    this.showMarkdown = false;
+    this.renderer.setStyle(
+      this.elementRef.nativeElement,
+      "--markdown-width",
+      "0fr",
+      RendererStyleFlags2.DashCase,
+    );
+  }
+
   ngOnInit() {
     this.exceptionsService.setIsUnsaved(false);
     this.subscriptions.add(

src/renderer/styles/logger.component.scss

@@ -1,6 +1,7 @@
 @import "mixins";
 
 :host {
+  --reporter-width: 0fr;
   display: grid;
   overflow: auto;
 
@@ -9,11 +10,12 @@
     "messages bugreport"
     "messages bugreportdocs"
     "menu menu";
-  grid-template-columns: 1.5fr 1fr;
+  grid-template-columns: 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;
@@ -121,6 +123,12 @@
   .messages {
     grid-area: messages;
     @include webkitScrollbar(logger-messages-scrollbar);
+    &.showReporter {
+      ::-webkit-scrollbar {
+        width: 0.75em;
+      }
+      overflow-y: scroll;
+    }
     overflow: auto;
 
     color: var(--color-logger-messages-text);

src/renderer/styles/ng-select.component.scss

@@ -77,7 +77,6 @@
       @include webkitScrollbar(ng-select-scrollbar);
     }
     .sectionTitle {
-      border-bottom: solid 1px;
       background-color: var(--color-ng-select-section-background);
       color: var(--color-ng-select-text);
       padding: var(--ng-select-padding, 0);

src/renderer/styles/preview.component.scss

@@ -363,7 +363,7 @@
     overflow-y: auto;
     grid-area: excludesLower;
     .title {
-      padding: 1em;
+      padding: 9px;
       background-color: var(--color-preview-user-background);
       color: var(--color-preview-text);
       border-bottom: solid 1px var(--color-preview-user-background);

src/renderer/styles/themes.global.scss

@@ -1417,7 +1417,7 @@
   --padding-input-text: var(--ng-select-padding);
   --margin-input-text: 16px;
   --color-logger-menu-background: #050505;
-  --color-logger-messages-background: var(--color-markdown-background);
+  --color-logger-messages-background: var(--color-nested-form-background);
   --color-logger-messages-scrollbar-thumb: rgba(80, 80, 80, 0.5);
   --color-logger-messages-scrollbar-track: rgba(80, 80, 80, 0.3);
   --color-logger-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
@@ -1512,7 +1512,7 @@
   --color-parsers-user-instructions-item-title-text: #c8c8c8;
   --color-parsers-user-instructions-scrollbar-thumb: rgba(80, 80, 80, 0.5);
   --color-parsers-user-instructions-scrollbar-track: rgba(31, 31, 31, 0.45);
-  --color-preview-background: #101424;
+  --color-preview-background: var(--color-nested-form-background);
   --color-select-arrow-left: #fff;
   --color-select-arrow-left-active: #ffffff;
   --color-select-arrow-left-hover: #cccccc;
@@ -1557,7 +1557,7 @@
   --color-preview-app-button: #8d8d8d;
   --color-preview-app-button-active: #ffffff;
   --color-preview-app-button-hover: #cccccc;
-  --color-nested-form-background: rgba(29, 29, 29, 0.7);
+  --color-nested-form-background: rgba(29, 29, 29, 1);
   --color-nested-form-error-border: #fbfd81;
   --color-nested-form-error: inherit;
   --color-nested-form-error-background: inherit;
@@ -1679,7 +1679,7 @@
   --height-ng-buttons: 20px;
   --color-parser-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
   --color-parser-menu-scrollbar-track: rgba(80, 80, 80, 0.3);
-  --color-about-background: inherit;
+  --color-about-background: var(--color-nested-form-background);
   --color-about-scrollbar-thumb: rgba(80, 80, 80, 0.5);
   --color-about-scrollbar-track: rgba(80, 80, 80, 0.3);
   --color-highlight-level-0: #256e81;

src/renderer/styles/user-exceptions.component.scss

@@ -1,6 +1,7 @@
 @import "mixins";
 
 :host {
+  --markdown-width: 0fr;
   display: grid;
   overflow: auto;
 
@@ -10,7 +11,7 @@
     "docs exceptions"
     "menu menu";
 
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: var(--markdown-width) 1fr;
   grid-template-rows: auto 1fr auto;
 
   .upperMenu {

src/renderer/styles/view.component.scss

@@ -2,6 +2,7 @@
 
 :host {
   --view-details-width: 0%;
+  background: var(--color-nested-form-background);
 
   display: grid;
   overflow: auto;
@@ -56,6 +57,12 @@
     grid-area: gamesList;
     @include webkitScrollbar(nested-form-scrollbar);
     overflow-y: auto;
+    &.showDetails {
+      ::-webkit-scrollbar {
+        width: 0.75em;
+      }
+      overflow-y: scroll;
+    }
     > .directory {
       > .title {
         padding: 0.5em 0.25em;