Preview Screen Text + Lens Icon (#525)

* Easier Theme Selector * EmuDeck wip * Deck Theme * EmuDeck theme * Opacity * small fix setttings * font * Fix routing issue (#1) * added EmuDeck to themes * fixed routing * EmuDeck Theme + fixes Classic and Deck theme * new bg + fix navarea buttons * Preview Screen Text + Lens Icon * typo * streamlined button * add (bad) styling for required fields (#2) * comma * nicer colors * small fixie --------- Co-authored-by: Chris Dock <[email protected]>
SteamGridDB · Apr 26, 2023 · 391a9e3 · 391a9e3
1 parent e827713
commit 391a9e3
Show file tree

Hide file tree

Showing 14 changed files with 168 additions and 23 deletions.
diff --git a/src/lang/en-US/langStrings.json b/src/lang/en-US/langStrings.json
@@ -24,7 +24,9 @@
       "remainingImages": "Retrieving urls:",
       "stopUrlRetrieving": "Stop",
       "exportSelections": "Export",
-      "importSelections": "Import"
+      "importSelections": "Import",
+      "backButton": "Back",
+      "logButton": "Log"
     },
     "service": {
       "info": {
@@ -285,7 +287,7 @@
         "fuzzy_filter": "Filter images",
         "enabledProviders": "Enabled image providers",
         "selectLanguage": "Select language",
-        "selectTheme":"Select theme",
+        "selectTheme": "Select theme",
         "resetFuzzy_desc": "fuzzy list",
         "resetFuzzyCache_desc": "fuzzy cache",
         "resetFuzzy_btn": "Reset",
@@ -477,7 +479,6 @@
         "advanced": "Show advanced options",
         "noTitle": "No title!"
       }
-
     },
     "service": {
       "info": {

diff --git a/src/lang/en-US/markdown/ea-desktop-parser-input.md b/src/lang/en-US/markdown/ea-desktop-parser-input.md
@@ -1,9 +1,9 @@
 # EA Desktop Parser specific inputs
 
-## EA Desktop Games Directory
+## EA Games Directory Override
 By default Steam ROM Manager assumes your `EA Desktop` games are installed at `C:\Program Files\EA Games\`. This field allows you to change that to wherever your games are installed, e.g. `D:\Games\EA Games`.
 
-## Launch via EA Desktop
+## Launch Games Via EA Desktop
 If enabled SRM will add a shortcut to `origin2://game/launch/?offerIds=${gameid}` instead of just the game's executable. This ensures the game launches via EA and will have access to online services.
 
 `This is required to add EA Play games. EA Play games will not be detected if this is not toggled on.`
diff --git a/src/lib/parsers/glob-regex.parser.ts b/src/lib/parsers/glob-regex.parser.ts
@@ -30,6 +30,7 @@ export class GlobRegexParser implements GenericParser {
         'glob-regex': {
           label: this.lang.inputTitle,
           placeholder: this.lang.inputPlaceholder,
+          required: true,
           inputType: 'text',
           validationFn: this.validate.bind(this),
           info: this.lang.docs__md.input.join('')

diff --git a/src/lib/parsers/glob.parser.ts b/src/lib/parsers/glob.parser.ts
@@ -26,6 +26,7 @@ export class GlobParser implements GenericParser {
         'glob': {
           label: this.lang.inputTitle,
           placeholder: this.lang.inputPlaceholder,
+          required: true,
           inputType: 'text',
           validationFn: this.validate.bind(this),
           info: this.lang.docs__md.input.join('')

diff --git a/src/models/nested-form.model.ts b/src/models/nested-form.model.ts
@@ -45,6 +45,8 @@ export namespace NestedFormElement {
     /** Optional */
     allowEmpty?: boolean
     /** Optional */
+    required?: boolean
+    /** Optional */
     onValidate?: NestedInputValidator;
     /** Optional */
     onValidateObservable?: NestedInputValidatorObservable;
@@ -71,6 +73,8 @@ export namespace NestedFormElement {
     /** Optional */
     placeholder?: string;
     /** Optional */
+    required?: boolean
+    /** Optional */
     onValidate?: NestedInputValidator;
     /** Optional */
     onValidateObservable?: NestedInputValidatorObservable;
@@ -103,6 +107,8 @@ export namespace NestedFormElement {
     /** Optional */
     placeholder?: string;
     /** Optional */
+    required?: boolean
+    /** Optional */
     error?: string;
     /** Optional */
     onValidate?: NestedInputValidator;

diff --git a/src/models/parser.model.ts b/src/models/parser.model.ts
@@ -54,6 +54,7 @@ export interface ParserInputField {
     label: string,
     placeholder?: string,
     inputType: 'text' | 'path' | 'dir' | 'toggle',
+    required?: boolean,
     info?: string,
     forcedInput?: string,
     validationFn?: (inputData: any) => null | string

diff --git a/src/renderer/components/parsers.component.ts b/src/renderer/components/parsers.component.ts
@@ -64,6 +64,7 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
         parserType: new NestedFormElement.Select({
           label: this.lang.label.parserType,
           placeholder: this.lang.placeholder.parserType,
+          required: true,
           values: parserInfo.availableParsers,
           onValidate: (self, path) => this.parsersService.validate(path[0] as keyof UserConfiguration, self.value),
             onInfoClick: (self, path) => {
@@ -81,33 +82,35 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
         }),
         configTitle: new NestedFormElement.Input({
           placeholder: this.lang.placeholder.configTitle,
+          required: true,
           label: this.lang.label.configTitle,
           onValidate: (self, path) => this.parsersService.validate(path[0] as keyof UserConfiguration, self.value),
             onInfoClick: (self, path) => {
             this.currentDoc.activePath = path.join();
             this.currentDoc.content = this.lang.docs__md.configTitle.join('');
           }
         }),
-        steamCategory: new NestedFormElement.Input({
-          placeholder: this.lang.placeholder.steamCategory,
-          isHidden: () => this.isHiddenIfArtworkOnlyParser(),
-            label: this.lang.label.steamCategory,
+        steamDirectory: new NestedFormElement.Path({
+          placeholder: this.lang.placeholder.steamDirectory,
+          directory: true,
+          required: true,
+          label: this.lang.label.steamDirectory,
           highlight: this.highlight.bind(this),
           onValidate: (self, path) => this.parsersService.validate(path[0] as keyof UserConfiguration, self.value),
             onInfoClick: (self, path) => {
             this.currentDoc.activePath = path.join();
-            this.currentDoc.content = this.lang.docs__md.steamCategory.join('');
+            this.currentDoc.content = this.lang.docs__md.steamDirectory.join('');
           }
         }),
-        steamDirectory: new NestedFormElement.Path({
-          placeholder: this.lang.placeholder.steamDirectory,
-          directory: true,
-          label: this.lang.label.steamDirectory,
+        steamCategory: new NestedFormElement.Input({
+          placeholder: this.lang.placeholder.steamCategory,
+          isHidden: () => this.isHiddenIfArtworkOnlyParser(),
+            label: this.lang.label.steamCategory,
           highlight: this.highlight.bind(this),
           onValidate: (self, path) => this.parsersService.validate(path[0] as keyof UserConfiguration, self.value),
             onInfoClick: (self, path) => {
             this.currentDoc.activePath = path.join();
-            this.currentDoc.content = this.lang.docs__md.steamDirectory.join('');
+            this.currentDoc.content = this.lang.docs__md.steamCategory.join('');
           }
         }),
         userAccounts: new NestedFormElement.Group({
@@ -132,6 +135,7 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
         }),
         romDirectory: new NestedFormElement.Path({
           placeholder: this.lang.placeholder.romDirectory,
+          required: true,
           isHidden: () => this.isHiddenIfNotRomsParser(),
             directory: true,
           label: this.lang.label.romDirectory,
@@ -147,11 +151,12 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
           isHidden: () => this.isHiddenIfNotRomsParser()
         }),
         executable: new NestedFormElement.Group({
+          label: this.lang.label.executableLocation,
           isHidden: () => this.isHiddenIfNotRomsParser(),
-            label: this.lang.label.executableLocation,
           children: {
             path: new NestedFormElement.Path({
               placeholder: this.lang.placeholder.executableLocation,
+              required: true,
               highlight: this.highlight.bind(this),
               onValidate: (self, path) => {
                 let serialized: {[k: string]: any} = {};
@@ -222,6 +227,7 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
                 if(input.inputType == 'path' || input.inputType == 'dir') {
                   parserInputs[inputFieldName] = new NestedFormElement.Path({
                     placeholder: input.placeholder,
+                    required: !!input.required,
                     directory: input.inputType=='dir' ? true : false,
                     initialValue: input.forcedInput !== undefined ? input.forcedInput : null,
                     highlight: this.highlight.bind(this),
@@ -247,6 +253,7 @@ export class ParsersComponent implements AfterViewInit, OnDestroy {
                     initialValue: input.forcedInput !== undefined ? input.forcedInput : null,
                     highlight: this.highlight.bind(this),
                     placeholder: input.placeholder,
+                    required: !!input.required,
                     label: input.label,
                     isHidden: () => {
                       return concat(of(this.userForm.get('parserType').value), this.userForm.get('parserType').valueChanges).pipe(map((pType: string) => {

diff --git a/src/renderer/styles/ng-nested-form.component.scss b/src/renderer/styles/ng-nested-form.component.scss
@@ -87,12 +87,23 @@ ng-nested-form {
     ng-text-input {
       @include ngTextInput();
       @include ngTextInputColor(input, true);
-
       grid-area: input;
+      &.required {
+        outline: 1px solid var(--color--accent);
+        .display{
+          border: 0
+        }
+      }
     }
 
     ng-select {
       grid-area: input;
+      &.required {
+        outline: 1px solid var(--color--accent);
+        .display{
+          border: 0
+        }
+      }
     }
 
     ng-toggle-button {

diff --git a/src/renderer/styles/preview.component.scss b/src/renderer/styles/preview.component.scss
@@ -32,6 +32,51 @@
   'lowerMenu lowerMenu';
   grid-template-rows: auto auto auto auto 1fr auto;
   grid-template-columns: auto var(--details-width);
+
+  .preview-description{
+    height: 100%;
+    grid-area: entries;      
+    z-index: 3;
+    width: 100%;
+    max-width: 94vw;
+    margin: 0 auto;
+    padding: 30px;
+    box-sizing: border-box;
+   color: var(--color-markdown-h1);
+    + div + div {
+      background: transparent;
+    }
+    .fake-btn{
+
+      @include button();
+      @include clickButtonColor(click-button);      
+      color: var(--color-click-button-text-hover);
+      background-color: var(--color-click-button-background-hover);
+    }
+    strong{
+      color: var(--color-markdown-h1);
+    }
+    h1{
+      line-height: 1.25;
+      margin: var(--margin-markdown-hx);
+      padding-bottom: 0.3em;
+      border-bottom: 1px solid var(--color-markdown-underline);
+      font-size: var(--font-markdown-h1);
+      font-family: var(--font-family-markdown-h1);
+      color: var(--color-markdown-h1);
+      margin-top: 0;
+    }
+    p{
+      margin: 0 0 1rem 0;
+      color: var(--color-markdown-text);
+    }
+    ol{
+      li{
+        margin-bottom: 12px
+      }
+    }
+  }
+
   .upperMenu {
     display: grid;
     border: 0.5em solid transparent;

diff --git a/src/renderer/styles/themes.global.scss b/src/renderer/styles/themes.global.scss
@@ -3,10 +3,13 @@
 
 }
 
+
+
 .Classic {
   .only-emudeck{
     display: none !important
   }
+  --color--accent: #fff;
   --grid-app:"titlebar titlebar titlebar" "navarea navborder route";
   --grid-app-rows :auto 1fr;
   --grid-app-columns: auto auto 1fr;
@@ -580,8 +583,16 @@
   &.EmuDeck.EmuDeck preview{
     // grid-template-areas:  "lowerMenu" "upperMenu" "entries";
     // grid-template-rows: auto  auto 1fr;
+    position:relative;
+
+    .preview-description{
+      padding: 0;
+      padding-top: 30px;
+    }
+
     .entries{
       background: var(--color-preview-menu-background);
+      z-index:2;
     }
     .lowerMenu{
       justify-content: end;

diff --git a/src/renderer/svg-components/image-lens.component.ts b/src/renderer/svg-components/image-lens.component.ts
@@ -0,0 +1,45 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+    selector: 'svg[image-lens]',
+    template: `
+        <svg:path d="M168.5.7c-36 4.2-59.9 12.7-87 30.8-42 28-70.9 72.8-79 122.5-16.6 101.2 53.2 196.4 155 211.5 13.6 2 39.7 2 52.9 0 30.7-4.7 58.5-16.3 83.6-34.9l7.5-5.6 6.7 6.7 6.7 6.7-3.9 4.2c-6.4 6.9-7.5 9.8-7.5 19.4 0 6.8.5 9.3 2.2 12.5 1.2 2.3 29.9 31.6 67.5 69.1 61.8 61.7 65.6 65.3 70.7 66.9 6.7 2.2 15 1.6 21.2-1.5 5.9-3 40.9-38 43.9-43.9 3.1-6.1 3.6-13.4 1.6-20.7-1.7-5.9-1.8-6-66.9-71.2-37.4-37.5-66.9-66.3-69.2-67.5-3.2-1.7-5.7-2.2-12.5-2.2-9.6 0-12.5 1.1-19.4 7.5l-4.2 3.9-6.7-6.7-6.7-6.7 5.6-7.5c18.5-24.9 30.2-53 34.9-83.8 2-13.1 2-39 0-52.6-3.1-20.5-8.3-37.2-17.2-55.1C319.9 45.6 265.9 7.9 202.8 1.1c-9.1-1-27.5-1.2-34.3-.4zm40.5 35c11.7 1.8 29.9 7.7 41.1 13.3 42.8 21.4 72.2 60.2 81.5 107.5 2.6 12.8 2.6 40.4 0 54-11.5 61.7-59.4 109.6-121.1 121.1-14.7 2.8-42.2 2.5-56.2-.4-29.6-6.4-55.4-20.3-76.2-41.1-12-12-19.8-22.5-27.2-36.4-9.5-18.1-15.2-37.7-16.8-57.9-2.7-34.2 5.9-67.1 25-95.9 8.4-12.6 28.2-32.4 40.8-40.8 32.7-21.7 69.8-29.6 109.1-23.4zM370.5 347l8 8-11.8 11.8-11.7 11.7-8.2-8.3-8.3-8.2 11.5-11.5c6.3-6.3 11.7-11.5 12-11.5.3 0 4.1 3.6 8.5 8zm68.8 68.8 36.7 36.7-11.8 11.8-11.7 11.7-37-37-37-37 11.5-11.5c6.3-6.3 11.7-11.5 12-11.5.3 0 17 16.5 37.3 36.8z" fill="#ffffff"/>
+        
+        <svg:path d="M175.5 69.3c-4.5 2.5-8.5 9.2-8.5 14.2.1 4.5 3.3 10.9 7 13.5 2.4 1.7 5.4 2.5 12.3 3.2 18.6 1.7 30.6 5.6 42.9 13.7 13.2 8.8 22.9 19.9 29.7 34.1 5 10.5 6.9 17.7 8 30.6 1 11.6 2.6 15.3 7.8 18.9 6.6 4.4 17.5 2.8 22.3-3.3 3.6-4.4 4.3-9.6 3.1-21.2-5.6-53.6-45.3-96-97.6-104.5-13.4-2.2-22.1-2-27 .8z" fill="#ffffff"/>
+    `,
+    host: {
+        viewBox: "0 0 512 512",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        '[class.hover]': 'hover',
+        '[class.active]': 'active'
+    },
+    styles: [`
+        :host{
+            height: 1em;
+            vertical-align: middle;
+            background-color: var(--select-image-alert-background, transparent);
+        }
+        path{ 
+            fill: var(--color-image-alert);
+        }
+        :host(.hover):hover{
+            background-color: var(--select-image-alert-background-hover, transparent);
+        }
+        :host(.active):active{
+            background-color: var(--select-image-alert-background-active, transparent);
+        }
+        :host(.hover):hover path{
+            fill: var(--color-image-alert-hover);
+        }
+        :host(.active):active path{
+            fill: var(--color-image-alert-active);
+        }
+    `]
+})
+export class ImageLensComponent {
+    @Input() title: string;
+    @Input() hover: boolean;
+    @Input() active: boolean;
+}
diff --git a/src/renderer/svg-components/index.ts b/src/renderer/svg-components/index.ts
@@ -4,5 +4,6 @@ export * from './select-arrow-down.component';
 export * from './refresh-images.component';
 export * from './save-image.component';
 export * from './image-alert.component';
+export * from './image-lens.component';
 export * from './add-images.component';
 export * from './copy-icon.component';
diff --git a/src/renderer/templates/ng-nested-form.component.html b/src/renderer/templates/ng-nested-form.component.html
@@ -29,20 +29,21 @@
                     (click)="child.onInfoClick(currentForm.controls[childrenKey], currentForm.controls[childrenKey]['__path'])">
               </span>
               {{child.label}}
+              <small *ngIf="child.required"> * Required</small>
             </label>
             <ng-container [ngSwitch]="child.constructor.displayName">
               <ng-container *ngSwitchCase="'Select'">
-                <ng-select [formControlName]="childrenKey" [placeholder]="child.placeholder" [multiple]="child.multiple" [allowEmpty]="child.allowEmpty" [values]="child.values">
+                <ng-select [formControlName]="childrenKey" [placeholder]="child.placeholder" [multiple]="child.multiple" [allowEmpty]="child.allowEmpty" [values]="child.values" [class.required]="child.required">
                 </ng-select>
               </ng-container>
               <ng-container *ngSwitchCase="'Button'">
                 <div class="freeButton" (click)="child.onClickMethod()">{{child.buttonLabel}}</div>
               </ng-container>
               <ng-container *ngSwitchCase="'Input'">
-                <ng-text-input [formControlName]="childrenKey" [placeholder]="child.placeholder || ''" [highlight]="child.highlight"></ng-text-input>
+                <ng-text-input [formControlName]="childrenKey" [placeholder]="child.placeholder || ''" [highlight]="child.highlight" [class.required]="child.required"></ng-text-input>
               </ng-container>
               <ng-container *ngSwitchCase="'Path'">
-                <ng-text-input [formControlName]="childrenKey" [placeholder]="child.placeholder || ''" [highlight]="child.highlight" [appendGlob]="child.appendGlob"></ng-text-input>
+                <ng-text-input [formControlName]="childrenKey" [placeholder]="child.placeholder || ''" [highlight]="child.highlight" [appendGlob]="child.appendGlob" [class.required]="child.required"></ng-text-input>
                 <ng-path-input class="clickButton" [stateless]="true" [directory]="child.directory" (pathChange)="currentForm.controls[childrenKey].setValue($event)">Browse</ng-path-input>
               </ng-container>
               <ng-container *ngSwitchCase="'Toggle'">