better docs

SteamGridDB · May 29, 2020 · a3026fe · a3026fe
1 parent b1cba84
commit a3026fe
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 133 deletions.
diff --git a/src/lang/english/markdown/community-presets.md b/src/lang/english/markdown/community-presets.md
@@ -3,5 +3,6 @@ These are parser configurations that have been created by the SRM community and
 
 ## Generic Parser
 The Generic Parser (the first preset) works for a wide variety of emulators that don't need specific commandline arguments in order to work, for example:
--- Yuzu
--- Citra
+* Yuzu
+* Citra
+* Xenia (add `--fullscreen` in `Command Line Arguments` if desired)
diff --git a/src/renderer/components/parsers.component.ts b/src/renderer/components/parsers.component.ts
@@ -9,51 +9,7 @@ import { Subscription, Observable } from "rxjs";
 import { APP } from '../../variables';
 @Component({
   selector: 'parsers',
-  template: `
-        <markdown class="docs" [content]="this.currentDoc.content"></markdown>
-        <div class="nestedForm">
-            <label>
-              <span class="infoButton infoIcon" (click)="presetsInfoClick()">
-              </span>
-              Community Presets
-            </label>
-            <ng-select placeholder="Configuration presets" allowEmpty="true" emitOnly="false" ngModel (ngModelChange)="setPreset($event)">
-                <ng-option text-scroll *ngFor="let value of configPresets | keys">
-                    {{value}}
-                </ng-option>
-            </ng-select>
-            <ng-nested-form (parentFormChange)="userForm = $event" [nestedGroup]="nestedGroup"></ng-nested-form>
-        </div>
-        <div class="menu" drag-scroll>
-            <ng-container *ngIf="configurationIndex === -1; else moreOptions">
-                <div (click)="saveForm()" style="margin-right: auto;">{{lang.buttons.save}}</div>
-                <div *ngIf="(parsersService.getDeletedConfigurations() | async).length !== 0" (click)="restoreForm()">{{lang.buttons.undoDelete}}</div>
-                <div (click)="openFAQ()">{{lang.buttons.faq}}</div>
-            </ng-container>
-            <ng-template #moreOptions>
-                <div (click)="updateForm()">{{lang.buttons.save}}</div>
-                <div (click)="saveForm()">{{lang.buttons.copy}}</div>
-                <div (click)="testForm()">{{lang.buttons.testParser}}</div>
-                <div class="dangerousButton" (click)="deleteForm()" style="margin-right: auto;">{{lang.buttons.delete}}</div>
-                <div *ngIf="(parsersService.getDeletedConfigurations() | async).length !== 0" (click)="restoreForm()">{{lang.buttons.undoDelete}}</div>
-                <div *ngIf="isUnsaved" (click)="undoChanges()">{{lang.buttons.undoChanges}}</div>
-                <div (click)="toClipboard()" [title]="lang.buttons.toClipboard">
-                    <svg copy-icon [title]="lang.buttons.toClipboard"></svg>
-                </div>
-                <div [class.disabled]="configurationIndex === 0" (click)="moveUp()" [title]="lang.buttons.moveUp">
-                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300" height="1em">
-                        <path d="M150 10 l 140 150 h -80 v 120 h -120 v -120 h -80 z" stroke="black" stroke-width="3" />
-                    </svg>
-                </div>
-                <div [class.disabled]="configurationIndex + 1 === userConfigurations.length" (click)="moveDown()" [title]="lang.buttons.moveDown">
-                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300" height="1em">
-                        <path d="M150 290 l 140 -150 h -80 v -120 h -120 v 120 h -80 z" stroke="black" stroke-width="3" />
-                    </svg>
-                </div>
-                <div (click)="openFAQ()">{{lang.buttons.faq}}</div>
-            </ng-template>
-        </div>
-    `,
+  templateUrl:'../templates/parsers.component.html',
   styleUrls: [
     '../styles/parsers.component.scss'
   ],

diff --git a/src/renderer/styles/ng-nested-form.component.scss b/src/renderer/styles/ng-nested-form.component.scss
@@ -79,4 +79,4 @@ ng-nested-form {
 	*[hidden] {
 		display: none !important;
 	}
-}
+}
diff --git a/src/renderer/styles/parsers.component.scss b/src/renderer/styles/parsers.component.scss
@@ -5,7 +5,7 @@
 	overflow: auto;
 
 	grid-area: route;
-	grid-template-areas: 
+	grid-template-areas:
 	'docs nestedForm'
 	'menu menu';
 	grid-template-columns: 1fr 1fr;
@@ -18,6 +18,7 @@
 	}
 
 	.nestedForm {
+
 		padding: 1em;
 
 		grid-area: nestedForm;
@@ -28,6 +29,21 @@
 
 		background-color: var(--color-nested-form-background);
 
+    label {
+			display: flex;
+
+			margin: 0 0 0.35em 0;
+
+			color: var(--color-nested-form-label);
+
+			align-items: center;
+			grid-area: label;
+
+			.infoButton {
+				margin: 0 0.25em 0 0;
+			}
+		}
+
 		> ng-select {
 			@include ngSelect();
 			@include ngSelectColor(ng-select);
@@ -56,8 +72,8 @@
 						}
 					}
 				}
-			}			
-		} 
+			}
+		}
 	}
 
 	.menu {

diff --git a/src/renderer/templates/nav.component.html b/src/renderer/templates/nav.component.html
@@ -3,15 +3,15 @@
 <nav-link routerLink="/settings" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{lang.settings}}</nav-link>
 <nav-link routerLink="/about" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{lang.about}}</nav-link>
 <nav-expand routerLinkActive="active">
-    <nav-link class="title" [routerLink]="['/parsers', -1]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
-        <span>{{lang.parsers}}</span>
-        <span>&nbsp;&nbsp;</span>
-        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300">
-            <polyline points="30,110 150,210 270,110" style="stroke-width:30;fill:none;" />
-        </svg>
-    </nav-link>
-    <nav-link class="item" [ngClass]="{unsaved: config.current != null, disabled: config.saved.disabled}" *ngFor="let config of userConfigurations; index as i" [routerLink]="['/parsers', i]" routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true, dummy: dummy }">
-        {{config.saved.configTitle || lang.noTitle}}
-    </nav-link>
+  <nav-link class="title" [routerLink]="['/parsers', -1]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+    <span>{{lang.parsers}}</span>
+    <span>&nbsp;&nbsp;</span>
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300">
+      <polyline points="30,110 150,210 270,110" style="stroke-width:30;fill:none;" />
+    </svg>
+  </nav-link>
+  <nav-link class="item" [ngClass]="{unsaved: config.current != null, disabled: config.saved.disabled}" *ngFor="let config of userConfigurations; index as i" [routerLink]="['/parsers', i]" routerLinkActive="active"
+                                                                                                                                                                                             [routerLinkActiveOptions]="{ exact: true, dummy: dummy }">
+    {{config.saved.configTitle || lang.noTitle}}
+  </nav-link>
 </nav-expand>
diff --git a/src/renderer/templates/parsers.component.html b/src/renderer/templates/parsers.component.html
@@ -0,0 +1,43 @@
+<markdown class="docs" [content]="this.currentDoc.content"></markdown>
+<div class="nestedForm">
+  <label>
+    <span class="infoButton infoIcon" (click)="presetsInfoClick()">
+    </span>
+    Community Presets
+  </label>
+  <ng-select placeholder="Configuration presets" allowEmpty="true" emitOnly="false" ngModel (ngModelChange)="setPreset($event)">
+    <ng-option text-scroll *ngFor="let value of configPresets | keys">
+      {{value}}
+    </ng-option>
+  </ng-select>
+  <ng-nested-form (parentFormChange)="userForm = $event" [nestedGroup]="nestedGroup"></ng-nested-form>
+</div>
+<div class="menu" drag-scroll>
+  <ng-container *ngIf="configurationIndex === -1; else moreOptions">
+    <div (click)="saveForm()" style="margin-right: auto;">{{lang.buttons.save}}</div>
+    <div *ngIf="(parsersService.getDeletedConfigurations() | async).length !== 0" (click)="restoreForm()">{{lang.buttons.undoDelete}}</div>
+    <div (click)="openFAQ()">{{lang.buttons.faq}}</div>
+  </ng-container>
+  <ng-template #moreOptions>
+    <div (click)="updateForm()">{{lang.buttons.save}}</div>
+    <div (click)="saveForm()">{{lang.buttons.copy}}</div>
+    <div (click)="testForm()">{{lang.buttons.testParser}}</div>
+    <div class="dangerousButton" (click)="deleteForm()" style="margin-right: auto;">{{lang.buttons.delete}}</div>
+    <div *ngIf="(parsersService.getDeletedConfigurations() | async).length !== 0" (click)="restoreForm()">{{lang.buttons.undoDelete}}</div>
+    <div *ngIf="isUnsaved" (click)="undoChanges()">{{lang.buttons.undoChanges}}</div>
+    <div (click)="toClipboard()" [title]="lang.buttons.toClipboard">
+      <svg copy-icon [title]="lang.buttons.toClipboard"></svg>
+    </div>
+    <div [class.disabled]="configurationIndex === 0" (click)="moveUp()" [title]="lang.buttons.moveUp">
+      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300" height="1em">
+        <path d="M150 10 l 140 150 h -80 v 120 h -120 v -120 h -80 z" stroke="black" stroke-width="3" />
+      </svg>
+    </div>
+    <div [class.disabled]="configurationIndex + 1 === userConfigurations.length" (click)="moveDown()" [title]="lang.buttons.moveDown">
+      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300" height="1em">
+        <path d="M150 290 l 140 -150 h -80 v -120 h -120 v 120 h -80 z" stroke="black" stroke-width="3" />
+      </svg>
+    </div>
+    <div (click)="openFAQ()">{{lang.buttons.faq}}</div>
+  </ng-template>
+</div>
diff --git a/src/renderer/templates/settings.component.html b/src/renderer/templates/settings.component.html
@@ -1,87 +1,87 @@
 <div>
-    <label>
-        {{lang.label.general}}
-    </label>
-    <div class="inputContainer">
-        <ng-toggle-button class="ngToggleButton" [ngModel]="settings.offlineMode" (ngModelChange)="settings.offlineMode = $event; onSettingsChange();">{{lang.text.offlineMode}}</ng-toggle-button>
-        <ng-toggle-button class="ngToggleButton" [ngModel]="settings.clearLogOnTest" (ngModelChange)="settings.clearLogOnTest = $event; onSettingsChange();">{{lang.text.clearLogOnTest}}</ng-toggle-button>
-        <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>
-    </div>
-    <div class="inputContainer">
-        <div class="inlineGroup">
-            <div class=text style="margin-right: 0.25em;">{{lang.text.removeApps_desc}}</div>
-            <div class="clickButton dangerousButton" style="font-size: 0.85em;" [class.disabled]="this.settings.knownSteamDirectories.length === 0"
-                (click)="removeApps()">{{lang.text.removeApps_btn}}</div>
-        </div>
+  <label>
+    {{lang.label.general}}
+  </label>
+  <div class="inputContainer">
+    <ng-toggle-button class="ngToggleButton" [ngModel]="settings.offlineMode" (ngModelChange)="settings.offlineMode = $event; onSettingsChange();">{{lang.text.offlineMode}}</ng-toggle-button>
+    <ng-toggle-button class="ngToggleButton" [ngModel]="settings.clearLogOnTest" (ngModelChange)="settings.clearLogOnTest = $event; onSettingsChange();">{{lang.text.clearLogOnTest}}</ng-toggle-button>
+    <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>
+  </div>
+  <div class="inputContainer">
+    <div class="inlineGroup">
+      <div class=text style="margin-right: 0.25em;">{{lang.text.removeApps_desc}}</div>
+      <div class="clickButton dangerousButton" style="font-size: 0.85em;" [class.disabled]="this.settings.knownSteamDirectories.length === 0"
+                                               (click)="removeApps()">{{lang.text.removeApps_btn}}</div>
     </div>
-    <div class="inputContainer">
-        <div class="inlineGroup">
-            <div class=text style="margin-right: 0.25em;">{{lang.text.selectLanguage}}</div>
-            <ng-select style="font-size: 0.85em;" class="ngSelect" [ngModel]="settings.language" (ngModelChange)="settings.language = $event; loadLanguage(); onSettingsChange();">
-                <ng-option *ngFor="let value of availableLanguages" [ngValue]="value">
-                    {{value}}
-                </ng-option>
-            </ng-select>
-        </div>
+  </div>
+  <div class="inputContainer">
+    <div class="inlineGroup">
+      <div class=text style="margin-right: 0.25em;">{{lang.text.selectLanguage}}</div>
+      <ng-select style="font-size: 0.85em;" class="ngSelect" [ngModel]="settings.language" (ngModelChange)="settings.language = $event; loadLanguage(); onSettingsChange();">
+        <ng-option *ngFor="let value of availableLanguages" [ngValue]="value">
+          {{value}}
+        </ng-option>
+      </ng-select>
     </div>
+  </div>
 </div>
 <div>
-    <label>
-        {{lang.label.fuzzy}}
-    </label>
-    <div class="inputContainer">
-        <ng-toggle-button class="ngToggleButton" [ngModel]="settings.fuzzyMatcher.verbose" (ngModelChange)="settings.fuzzyMatcher.verbose = $event; onSettingsChange();">{{lang.text.fuzzy_verbose}}</ng-toggle-button>
-        <ng-toggle-button class="ngToggleButton" [ngModel]="settings.fuzzyMatcher.filterProviders" (ngModelChange)="settings.fuzzyMatcher.filterProviders = $event; onSettingsChange();">{{lang.text.fuzzy_filter}}</ng-toggle-button>
-        <div class="inlineGroup">
-            <div class=text style="margin-right: 0.25em;">{{lang.text.resetFuzzy_desc}}</div>
-            <div class="clickButton dangerousButton" style="font-size: 0.85em;" (click)="resetFuzzy()">{{lang.text.resetFuzzy_btn}}</div>
-        </div>
-        <div class="inlineGroup" style="margin-top: 0.25em;">
-            <div class=text style="margin-right: 0.25em;">Clear fuzzy cache: </div>
-            <div class="clickButton dangerousButton" style="font-size: 0.85em;" (click)="clearFuzzy()">Clear</div>
-        </div>
+  <label>
+    {{lang.label.fuzzy}}
+  </label>
+  <div class="inputContainer">
+    <ng-toggle-button class="ngToggleButton" [ngModel]="settings.fuzzyMatcher.verbose" (ngModelChange)="settings.fuzzyMatcher.verbose = $event; onSettingsChange();">{{lang.text.fuzzy_verbose}}</ng-toggle-button>
+    <ng-toggle-button class="ngToggleButton" [ngModel]="settings.fuzzyMatcher.filterProviders" (ngModelChange)="settings.fuzzyMatcher.filterProviders = $event; onSettingsChange();">{{lang.text.fuzzy_filter}}</ng-toggle-button>
+    <div class="inlineGroup">
+      <div class=text style="margin-right: 0.25em;">{{lang.text.resetFuzzy_desc}}</div>
+      <div class="clickButton dangerousButton" style="font-size: 0.85em;" (click)="resetFuzzy()">{{lang.text.resetFuzzy_btn}}</div>
     </div>
+    <div class="inlineGroup" style="margin-top: 0.25em;">
+      <div class=text style="margin-right: 0.25em;">Clear fuzzy cache: </div>
+      <div class="clickButton dangerousButton" style="font-size: 0.85em;" (click)="clearFuzzy()">Clear</div>
+    </div>
+  </div>
 </div>
 <div>
-    <label>
-        {{lang.label.imageProviders}}
-    </label>
-    <div class="inputContainer">
-        <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.preload" (ngModelChange)="preload($event); onSettingsChange();">{{lang.text.preloadImages}}</ng-toggle-button>
-    </div>
-    <div class="inputContainer">
-        <div class="inlineGroup">
-            <div class=text style="margin-right: 0.25em;">{{lang.text.enabledProviders}}</div>
-            <ng-select style="font-size: 0.85em;" class="ngSelect" [ngModel]="settings.enabledProviders" (ngModelChange)="settings.enabledProviders = $event; onSettingsChange();"
-                multiple="true" allowEmpty="true" [placeholder]="lang.placeholder.noProviders">
-                <ng-option *ngFor="let value of availableProviders" [ngValue]="value">
-                    {{value}}
-                </ng-option>
-            </ng-select>
-        </div>
+  <label>
+    {{lang.label.imageProviders}}
+  </label>
+  <div class="inputContainer">
+    <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.preload" (ngModelChange)="preload($event); onSettingsChange();">{{lang.text.preloadImages}}</ng-toggle-button>
+  </div>
+  <div class="inputContainer">
+    <div class="inlineGroup">
+      <div class=text style="margin-right: 0.25em;">{{lang.text.enabledProviders}}</div>
+      <ng-select style="font-size: 0.85em;" class="ngSelect" [ngModel]="settings.enabledProviders" (ngModelChange)="settings.enabledProviders = $event; onSettingsChange();"
+                                            multiple="true" allowEmpty="true" [placeholder]="lang.placeholder.noProviders">
+        <ng-option *ngFor="let value of availableProviders" [ngValue]="value">
+          {{value}}
+        </ng-option>
+      </ng-select>
     </div>
+  </div>
 </div>
 <div>
-    <label>
-      {{lang.label.communityPresets}}
-    </label>
-    <div class="inputContainer">
-        <div class="inlineGroup">
-            <div class=text style="margin-right: 0.25em;">Custom variables: </div>
-            <div class="clickButton dangerousButton"
-                [class.disabled]="cvService.isDownloading | async" style="font-size: 0.85em;"
-                (click)="cvService.download(true)">Force download</div>
-        </div>
+  <label>
+    {{lang.label.communityPresets}}
+  </label>
+  <div class="inputContainer">
+    <div class="inlineGroup">
+      <div class=text style="margin-right: 0.25em;">Custom variables: </div>
+      <div class="clickButton dangerousButton"
+           [class.disabled]="cvService.isDownloading | async" style="font-size: 0.85em;"
+                                                              (click)="cvService.download(true)">Force download</div>
     </div>
-    <div class="inputContainer">
-        <div class="inlineGroup">
-            <div class=text style="margin-right: 0.25em;">Configuration presets: </div>
-            <div class="clickButton dangerousButton"
-                [class.disabled]="cpService.isDownloading | async" style="font-size: 0.85em;"
-                (click)="cpService.download(true)">Force download</div>
-        </div>
+  </div>
+  <div class="inputContainer">
+    <div class="inlineGroup">
+      <div class=text style="margin-right: 0.25em;">Configuration presets: </div>
+      <div class="clickButton dangerousButton"
+           [class.disabled]="cpService.isDownloading | async" style="font-size: 0.85em;"
+                                                              (click)="cpService.download(true)">Force download</div>
     </div>
+  </div>
 </div>
 <div>
   <label>
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,4 +79,4 @@ ng-nested-form { @@
     	*[hidden] {
     		display: none !important;
     	}
-    }
+    }