increase preview responsiveness

SteamGridDB · Jun 7, 2024 · 5ff69dd · 5ff69dd
1 parent ad1c38b
commit 5ff69dd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/renderer/components/preview.component.ts b/src/renderer/components/preview.component.ts
@@ -164,6 +164,11 @@ export class PreviewComponent implements OnDestroy {
     this.actualParserFilter = parsers.map(p=>p.replace(/&nbsp;/g,' '));
   }
 
+  setSearchFilter(searchFilter: string) {
+    this.filterValue = searchFilter;
+    this.changeDetectionRef.detectChanges();
+  }
+
   ngAfterContentInit() {
     this.setImageSize(this.appSettings.previewSettings.imageZoomPercentage);
     this.setImageBoxSizes();
@@ -439,6 +444,10 @@ export class PreviewComponent implements OnDestroy {
     this.showListImages = false;
     this.renderer.setStyle(this.elementRef.nativeElement, '--list-images-width','0%',RendererStyleFlags2.DashCase);
   }
+  changeListImagesArtworkType(artworkType: ArtworkType) {
+    this.listImagesArtworkType = artworkType;
+    this.changeDetectionRef.detectChanges();
+  }
 
   deleteExceptionDetails() {
     if(this.detailsApp) {

diff --git a/src/renderer/templates/preview.component.html b/src/renderer/templates/preview.component.html
@@ -19,7 +19,7 @@ <h1>Add your games to Steam</h1>
       If you don't want to add all games click <strong>Exclude Apps</strong> and then select the ones you don't want and
       hit <strong>Save Excludes</strong>
     </p>
-    <div class="fake-btn" (click)="generatePreviewData()">{{ lang.generateAppList }}</div>
+    <div class="fake-btn" (click)="generatePreviewData()">Parse</div>
   </div>
   <div class="upperMenu" *ngIf="previewVariables.numberOfListItems > 0">
     <div class="filtersButton" (click)="toggleFilters()">Filters</div>
@@ -52,7 +52,7 @@ <h1>Add your games to Steam</h1>
       >
       </ng-select>
     </div>
-    <ng-text-input class="appFilter" [placeholder]="lang.filter" [(ngModel)]="filterValue"></ng-text-input>
+    <ng-text-input class="appFilter" [placeholder]="lang.filter" [ngModel]="filterValue" (ngModelChange)="setSearchFilter($event)"></ng-text-input>
   </div>
   <div class="excludes" *ngIf="showExcludes">
     <div class="titleGroup">
@@ -157,7 +157,7 @@ <h1>Add your games to Steam</h1>
       <ng-container *ngFor="let artworkType of artworkTypes">
         <div class="listImagesButton" 
         [class.selected]="listImagesArtworkType==artworkType"
-        (click)="listImagesArtworkType=artworkType"
+        (click)="changeListImagesArtworkType(artworkType)"
         >{{artworkViewNames[artworkType]}}</div>
       </ng-container>
     </div>

diff --git a/src/renderer/templates/settings.component.html b/src/renderer/templates/settings.component.html
@@ -46,7 +46,7 @@
     <div class="inputContainer">
       <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.retrieveCurrentSteamImages" (ngModelChange)="settings.previewSettings.retrieveCurrentSteamImages = $event; onSettingsChange();">{{lang.text.showSteamImages}}</ng-toggle-button>
       <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.deleteDisabledShortcuts" (ngModelChange)="settings.previewSettings.deleteDisabledShortcuts=$event; onSettingsChange();">{{lang.text.deleteDisabledShortcuts}}</ng-toggle-button>
-      <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.disableCategories" (ngModelChange)="settings.previewSettings.disableCategories=$event; onSettingsChange();">Disable saving of steam categories.</ng-toggle-button>
+      <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.disableCategories" (ngModelChange)="settings.previewSettings.disableCategories=$event; onSettingsChange();">Disable saving of steam categories</ng-toggle-button>
       <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.hideUserAccount" (ngModelChange)="settings.previewSettings.hideUserAccount=$event; onSettingsChange();">Hide Steam username from preview</ng-toggle-button>
     </div>
     <div class="inputContainer">