UI/dashboard polish (#1407)

* Reposition "Blur Unread Summaries" toggle under "Page Layout Mode"

* Save buttons now disable themselves after being clicked.
Change Password save button only enables if passwords match

* Center user roles to Roles: in admin dashboard

* Made ordering of common elements between series and entity info consistent.
Renamed "Read Left" to "Time Left"

UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html

@@ -23,7 +23,7 @@
         <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">Reset</button>
-            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
+            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.dirty">Save</button>
         </div>
     </form>
 </div>

UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.ts

@@ -26,6 +26,7 @@ export class ManageEmailSettingsComponent implements OnInit {
 
   resetForm() {
     this.settingsForm.get('emailServiceUrl')?.setValue(this.serverSettings.emailServiceUrl);
+    this.settingsForm.markAsPristine();
   }
 
   async saveSettings() {

UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html

@@ -15,7 +15,7 @@
         <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">Reset</button>
-            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
+            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.dirty">Save</button>
         </div>
     </form>
 </div>

UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts

@@ -26,6 +26,7 @@ export class ManageMediaSettingsComponent implements OnInit {
 
   resetForm() {
     this.settingsForm.get('convertBookmarkToWebP')?.setValue(this.serverSettings.convertBookmarkToWebP);
+    this.settingsForm.markAsPristine();
   }
 
   async saveSettings() {

UI/Web/src/app/admin/manage-settings/manage-settings.component.html

@@ -87,7 +87,7 @@
         <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">Reset</button>
-            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
+            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.dirty">Save</button>
         </div>
     </form>
 </div>

UI/Web/src/app/admin/manage-settings/manage-settings.component.ts

@@ -60,6 +60,7 @@ export class ManageSettingsComponent implements OnInit {
     this.settingsForm.get('emailServiceUrl')?.setValue(this.serverSettings.emailServiceUrl);
     this.settingsForm.get('enableSwaggerUi')?.setValue(this.serverSettings.enableSwaggerUi);
     this.settingsForm.get('totalBackups')?.setValue(this.serverSettings.totalBackups);
+    this.settingsForm.markAsPristine();
   }
 
   async saveSettings() {
@@ -91,7 +92,7 @@ export class ManageSettingsComponent implements OnInit {
     modalRef.closed.subscribe((closeResult: DirectoryPickerResult) => {
       if (closeResult.success) {
         this.settingsForm.get(formControl)?.setValue(closeResult.folderPath);
-        this.settingsForm.markAsTouched();
+        this.settingsForm.markAsDirty();
       }
     });
   }

UI/Web/src/app/admin/manage-system/manage-system.component.ts

@@ -46,6 +46,7 @@ export class ManageSystemComponent implements OnInit {
     this.settingsForm.get('port')?.setValue(this.serverSettings.port);
     this.settingsForm.get('loggingLevel')?.setValue(this.serverSettings.loggingLevel);
     this.settingsForm.get('allowStatCollection')?.setValue(this.serverSettings.allowStatCollection);
+    this.settingsForm.markAsPristine();
   }
 
   saveSettings() {

UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.html

@@ -67,7 +67,7 @@
         <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>
             <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">Reset</button>
-            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
+            <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.dirty">Save</button>
         </div>
     </form>
 </div>

UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts

@@ -99,6 +99,7 @@ export class ManageTasksSettingsComponent implements OnInit {
   resetForm() {
     this.settingsForm.get('taskScan')?.setValue(this.serverSettings.taskScan);
     this.settingsForm.get('taskBackup')?.setValue(this.serverSettings.taskBackup);
+    this.settingsForm.markAsPristine();
   }
 
   async saveSettings() {

UI/Web/src/app/admin/manage-users/manage-users.component.html

@@ -51,18 +51,22 @@
                         <button class="btn btn-primary btn-sm" (click)="openEditUser(member)" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{member.username | titlecase}}"><i class="fa fa-pen" aria-hidden="true"></i></button>
                     </div>
                 </h4>
-                <div>Last Active: 
-                    <span *ngIf="member.lastActive == '0001-01-01T00:00:00'; else activeDate">Never</span>
-                    <ng-template #activeDate>
-                        {{member.lastActive | date: 'short'}}
-                    </ng-template>
-                </div>
-                <div *ngIf="!hasAdminRole(member)">Sharing: {{formatLibraries(member)}}</div>
-                <div class="row g-0">
-                    Roles: <span *ngIf="getRoles(member).length === 0; else showRoles">None</span>
-                    <ng-template #showRoles>
-                        <app-tag-badge *ngFor="let role of getRoles(member)" class="col-auto">{{role}}</app-tag-badge>
-                    </ng-template>
+                <div class="user-info">
+                    <div>Last Active:
+                        <span *ngIf="member.lastActive == '0001-01-01T00:00:00'; else activeDate">Never</span>
+                        <ng-template #activeDate>
+                            {{member.lastActive | date: 'short'}}
+                        </ng-template>
+                    </div>
+                    <div *ngIf="!hasAdminRole(member)">Sharing: {{formatLibraries(member)}}</div>
+                    <div class="row g-0">
+                        <div>
+                            Roles: <span *ngIf="getRoles(member).length === 0; else showRoles">None</span>
+                            <ng-template #showRoles>
+                                <app-tag-badge *ngFor="let role of getRoles(member)" class="col-auto">{{role}}</app-tag-badge>
+                            </ng-template>
+                        </div>
+                    </div>
                 </div>
             </div>
         </li>
@@ -75,4 +79,4 @@
             There are no other users.
         </li>
     </ul>
-</div>
+</div>

UI/Web/src/app/admin/manage-users/manage-users.component.scss

@@ -1,3 +1,7 @@
 .presence {
     font-size: 12px;
-}
+}
+
+.user-info > div {
+    margin-top: 3px;
+}

UI/Web/src/app/cards/entity-info-cards/entity-info-cards.component.html

@@ -1,4 +1,22 @@
 <div class="row g-0 mt-4 mb-3">
+    <ng-container *ngIf="chapter !== undefined && chapter.releaseDate && (chapter.releaseDate | date: 'shortDate') !== '1/1/01'">
+        <div class="col-auto mb-2">
+            <app-icon-and-title label="Release Date" [clickable]="false" fontClasses="fa-regular fa-calendar" title="Release">
+                {{chapter.releaseDate | date:'shortDate'}}
+            </app-icon-and-title>
+        </div>
+        <div class="vr d-none d-lg-block m-2"></div>
+    </ng-container>
+
+    <ng-container *ngIf="chapter.ageRating !== AgeRating.Unknown">
+        <div class="col-auto mb-2">
+            <app-icon-and-title label="Age Rating" [clickable]="false" fontClasses="fas fa-eye" title="Age Rating">
+                {{chapter.ageRating | ageRating | async}}
+            </app-icon-and-title>
+        </div>
+        <div class="vr d-none d-lg-block m-2"></div>
+    </ng-container>
+
     <ng-container *ngIf="totalPages > 0">
         <div class="col-auto mb-2">
             <app-icon-and-title label="Print Length" [clickable]="false" fontClasses="fa-regular fa-file-lines" title="Pages">
@@ -8,10 +26,10 @@
         <div class="vr d-none d-lg-block m-2"></div>
     </ng-container>
 
-    <ng-container *ngIf="chapter !== undefined && chapter.releaseDate && (chapter.releaseDate | date: 'shortDate') !== '1/1/01'">
+    <ng-container *ngIf="chapter.files[0].format === MangaFormat.EPUB && totalWordCount > 0">
         <div class="col-auto mb-2">
-            <app-icon-and-title label="Release Date" [clickable]="false" fontClasses="fa-regular fa-calendar" title="Release">
-                {{chapter.releaseDate | date:'shortDate'}}
+            <app-icon-and-title label="Word Count" [clickable]="false" fontClasses="fa-solid fa-book-open">
+                {{totalWordCount | compactNumber}} Words
             </app-icon-and-title>
         </div>
         <div class="vr d-none d-lg-block m-2"></div>
@@ -28,24 +46,6 @@
         </div>
     </ng-container>
 
-    <ng-container *ngIf="chapter.files[0].format === MangaFormat.EPUB && totalWordCount > 0">
-        <div class="vr d-none d-lg-block m-2"></div>
-        <div class="col-auto mb-2">
-            <app-icon-and-title label="Word Count" [clickable]="false" fontClasses="fa-solid fa-book-open">
-                {{totalWordCount | compactNumber}} Words
-            </app-icon-and-title>
-        </div>    
-    </ng-container>
-
-    <ng-container *ngIf="chapter.ageRating !== AgeRating.Unknown">
-        <div class="vr d-none d-lg-block m-2"></div>
-        <div class="col-auto">
-            <app-icon-and-title label="Age Rating" [clickable]="false" fontClasses="fas fa-eye" title="Age Rating">
-                {{chapter.ageRating | ageRating | async}}
-            </app-icon-and-title>
-        </div>
-    </ng-container>
-
     <ng-container *ngIf="showExtendedProperties && chapter.created && chapter.created !== '' && (chapter.created | date: 'shortDate') !== '1/1/01'">
         <div class="vr d-none d-lg-block m-2"></div>
         <div class="col-auto">

UI/Web/src/app/cards/series-info-cards/series-info-cards.component.html

@@ -1,4 +1,12 @@
 <div class="row g-0 mb-4 mt-3">
+    <ng-container *ngIf="seriesMetadata.releaseYear > 0">
+        <div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-3">
+            <app-icon-and-title label="Release Year" [clickable]="false" fontClasses="fa-regular fa-calendar" title="Release Year">
+                {{seriesMetadata.releaseYear}}
+            </app-icon-and-title>
+        </div>
+        <div class="vr d-none d-lg-block m-2"></div>
+    </ng-container>
 
     <ng-container *ngIf="seriesMetadata">
         <ng-container *ngIf="seriesMetadata.ageRating">
@@ -10,15 +18,6 @@
             <div class="vr d-none d-lg-block m-2"></div>
         </ng-container>
 
-        <ng-container *ngIf="seriesMetadata.releaseYear > 0">
-            <div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-3">
-                <app-icon-and-title label="Release Year" [clickable]="false" fontClasses="fa-regular fa-calendar" title="Release Year">
-                    {{seriesMetadata.releaseYear}}
-                </app-icon-and-title>
-            </div>
-            <div class="vr d-none d-lg-block m-2"></div>
-        </ng-container>
-
         <ng-container *ngIf="seriesMetadata.language !== null">
             <div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-3">
                 <app-icon-and-title label="Language" [clickable]="true" fontClasses="fas fa-language" (click)="handleGoTo(FilterQueryParam.Languages, seriesMetadata.language)" title="Language">
@@ -58,7 +57,6 @@
             </div>
             <div class="vr d-none d-lg-block m-2"></div>
         </ng-container>
-        
 
         <ng-container *ngIf="series.format === MangaFormat.EPUB; else showPages">
             <ng-container *ngIf="series.wordCount > 0">
@@ -67,9 +65,9 @@
                         {{series.wordCount | compactNumber}} Words
                     </app-icon-and-title>
                 </div>
-                <div class="vr d-none d-lg-block m-2"></div>    
+                <div class="vr d-none d-lg-block m-2"></div>
             </ng-container>
-            
+
         </ng-container>
         <ng-template #showPages>
             <div class="d-none d-md-block col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
@@ -78,9 +76,7 @@
                 </app-icon-and-title>
             </div>
             <div class="vr d-none d-lg-block m-2"></div>
-        </ng-template>    
-        
-        
+        </ng-template>
 
         <ng-container *ngIf="series.format === MangaFormat.EPUB && series.wordCount > 0 || series.format !== MangaFormat.EPUB">
             <div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
@@ -93,11 +89,10 @@
             </div>
         </ng-container>
 
-        
         <ng-container *ngIf="hasReadingProgress && showReadingTimeLeft && readingTimeLeft && readingTimeLeft.avgHours !== 0">
             <div class="vr d-none d-lg-block m-2"></div>
             <div class="col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
-                <app-icon-and-title label="Read Left" [clickable]="false" fontClasses="fa-solid fa-clock">
+                <app-icon-and-title label="Time Left" [clickable]="false" fontClasses="fa-solid fa-clock">
                     ~{{readingTimeLeft.avgHours}} Hour{{readingTimeLeft.avgHours > 1 ? 's' : ''}} Left
                 </app-icon-and-title>
             </div>

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html

@@ -34,7 +34,9 @@
                                                 <option *ngFor="let opt of pageLayoutModes" [value]="opt.value">{{opt.text | titlecase}}</option>
                                             </select>
                                         </div>
+                                    </div>
 
+                                    <div class="row g-0">
                                         <div class="col-md-6 col-sm-12 pe-2 mb-2">
                                             <div class="form-check form-switch">
                                                 <input type="checkbox" id="auto-close" role="switch" formControlName="blurUnreadSummaries" class="form-check-input" aria-describedby="settings-global-blurUnreadSummaries-help" [value]="true" aria-labelledby="auto-close-label">
@@ -45,6 +47,7 @@
                                             <span class="visually-hidden" id="settings-global-blurUnreadSummaries-help">Blurs summary text on volumes or chapters that have no read progress (to avoid spoilers)</span>
                                         </div>
                                     </div>
+
                                     <div class="row g-0">
                                         <div class="col-md-6 col-sm-12 pe-2 mb-2">
                                             <div class="form-check form-switch">
@@ -59,7 +62,7 @@
 
                                     <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
                                         <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()" aria-describedby="reading-panel">Reset</button>
-                                        <button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
+                                        <button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.dirty">Save</button>
                                     </div>
                             </ng-template>
                         </ngb-panel>
@@ -152,7 +155,7 @@
 
                                     <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
                                         <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()" aria-describedby="reading-panel">Reset</button>
-                                        <button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
+                                        <button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.dirty">Save</button>
                                     </div>
                             </ng-template>
                         </ngb-panel>
@@ -267,7 +270,7 @@
 
                                 <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
                                     <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()" aria-describedby="reading-panel">Reset</button>
-                                    <button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
+                                    <button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.dirty">Save</button>
                                 </div>
                             </ng-template>
                         </ngb-panel>

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts

@@ -188,6 +188,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
     this.settingsForm.get('blurUnreadSummaries')?.setValue(this.user.preferences.blurUnreadSummaries);
     this.settingsForm.get('promptForDownloadSize')?.setValue(this.user.preferences.promptForDownloadSize);
     this.cdRef.markForCheck();
+    this.settingsForm.markAsPristine();
   }
 
   resetPasswordForm() {