AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Release Polish 2 (#3354)

Browse source
This commit is contained in:
Joe Milazzo 2024-11-09 14:05:17 -06:00 • committed by GitHub
parent e1aba57783
commit 0e0d8dca5b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 333 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

21
UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.ts
View file

@ -1,4 +1,13 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
inject,
Input,
OnChanges,
OnInit,
SimpleChanges
} from '@angular/core';
import {AgeRating} from "../../_models/metadata/age-rating";
import {ImageComponent} from "../../shared/image/image.component";
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
@ -23,7 +32,7 @@ const basePath = './assets/images/ratings/';
styleUrl: './age-rating-image.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AgeRatingImageComponent implements OnInit {
export class AgeRatingImageComponent implements OnInit, OnChanges {
private readonly cdRef = inject(ChangeDetectorRef);
private readonly filterUtilityService = inject(FilterUtilitiesService);
@ -34,6 +43,14 @@ export class AgeRatingImageComponent implements OnInit {
imageUrl: string = 'unknown-rating.png';
ngOnInit() {
this.setImage();
}
ngOnChanges() {
this.setImage();
}
setImage() {
switch (this.rating) {
case AgeRating.Unknown:
this.imageUrl = basePath + 'unknown-rating.png';

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

@ -1,6 +1,12 @@
<ng-container *transloco="let t; read: 'manage-email-settings'">
<div class="position-relative">
<button type="button" class="btn btn-primary-outline position-absolute custom-position" (click)="test()">{{t('test')}}</button>
</div>
<p>{{t('description')}}</p>
<form [formGroup]="settingsForm">
<p class="alert alert-warning">{{t('setting-description')}} {{t('test-warning')}}</p>
@ -86,7 +92,7 @@
@if(settingsForm.get('enableSsl'); as formControl) {
<app-setting-switch [title]="t('enable-ssl-label')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input id="setting-enable-ssl" type="checkbox" class="form-check-input" formControlName="enableSsl">
</div>
</ng-template>
@ -137,18 +143,13 @@
@if(settingsForm.get('customizedTemplates'); as formControl) {
<app-setting-switch [title]="t('customized-templates-label')" [subtitle]="t('customized-templates-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input id="settings-customized-templates" type="checkbox" class="form-check-input" formControlName="customizedTemplates">
</div>
</ng-template>
</app-setting-switch>
}
</div>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mt-4">
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="test()">{{t('test')}}</button>
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">{{t('reset-to-default')}}</button>
</div>
</form>
</ng-container>

4
UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.scss
View file

@ -0,0 +1,4 @@
.custom-position {
right: 15px;
top: -42px;
}

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

@ -1,14 +1,14 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {ToastrService} from 'ngx-toastr';
import {debounceTime, distinctUntilChanged, filter, map, switchMap, take, tap} from 'rxjs';
import {debounceTime, distinctUntilChanged, filter, switchMap, take, tap} from 'rxjs';
import {SettingsService} from '../settings.service';
import {ServerSettings} from '../_models/server-settings';
import {
NgbAlert,
NgbTooltip
} from '@ng-bootstrap/ng-bootstrap';
import {AsyncPipe, NgIf, NgTemplateOutlet, TitleCasePipe} from '@angular/common';
import {AsyncPipe, NgTemplateOutlet, TitleCasePipe} from '@angular/common';
import {translate, TranslocoModule} from "@jsverse/transloco";
import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
import {ManageMediaIssuesComponent} from "../manage-media-issues/manage-media-issues.component";
@ -17,6 +17,7 @@ import {SettingSwitchComponent} from "../../settings/_components/setting-switch/
import {DefaultValuePipe} from "../../_pipes/default-value.pipe";
import {BytesPipe} from "../../_pipes/bytes.pipe";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
@Component({
selector: 'app-manage-email-settings',
@ -24,8 +25,8 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
styleUrls: ['./manage-email-settings.component.scss'],
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf, ReactiveFormsModule, NgbTooltip, NgTemplateOutlet, TranslocoModule, SafeHtmlPipe,
ManageMediaIssuesComponent, TitleCasePipe, NgbAlert, SettingItemComponent, SettingSwitchComponent, DefaultValuePipe, BytesPipe, AsyncPipe]
imports: [ReactiveFormsModule, NgbTooltip, NgTemplateOutlet, TranslocoModule, SafeHtmlPipe,
ManageMediaIssuesComponent, TitleCasePipe, NgbAlert, SettingItemComponent, SettingSwitchComponent, DefaultValuePipe, BytesPipe, AsyncPipe, CardActionablesComponent]
})
export class ManageEmailSettingsComponent implements OnInit {
@ -125,27 +126,6 @@ export class ManageEmailSettingsComponent implements OnInit {
return modelSettings;
}
async saveSettings() {
const modelSettings = this.packData();
this.settingsService.updateServerSettings(modelSettings).pipe(take(1)).subscribe((settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success(translate('toasts.server-settings-updated'));
}, (err: any) => {
console.error('error: ', err);
});
}
resetToDefaults() {
this.settingsService.resetServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success(translate('toasts.server-settings-updated'));
}, (err: any) => {
console.error('error: ', err);
});
}
test() {
this.settingsService.testEmailServerSettings().subscribe(res => {

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

@ -1,11 +1,4 @@
<ng-container *transloco="let t; read: 'manage-media-settings'">
<div class="position-relative">
<button class="btn btn-secondary-outline position-absolute custom-position" (click)="resetToDefaults()" [title]="t('reset-to-default')">
<span class="phone-hidden ms-1">{{t('reset-to-default')}}</span>
</button>
</div>
<form [formGroup]="settingsForm">
<div class="mb-4">
<p>

4
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.scss
View file

@ -1,4 +0,0 @@
.custom-position {
right: 5px;
top: -42px;
}

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

@ -1,4 +1,10 @@
<ng-container *transloco="let t; read: 'manage-settings'">
<div class="position-relative">
<button type="button" class="btn btn-primary-outline position-absolute custom-position" (click)="resetToDefaults()">{{t('reset-to-default')}}</button>
</div>
<form [formGroup]="settingsForm">
<div class="alert alert-warning" role="alert">
<strong>{{t('notice')}}</strong> {{t('restart-required')}}
@ -217,10 +223,8 @@
@if(settingsForm.get('enableOpds'); as formControl) {
<app-setting-switch [title]="t('opds-label')" [subtitle]="t('opds-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch">
<input id="opds" type="checkbox" [attr.aria-label]="t('opds-label')" class="form-check-input" formControlName="enableOpds">
</div>
<div class="form-check form-switch float-end">
<input id="opds" type="checkbox" [attr.aria-label]="t('opds-label')" class="form-check-input" formControlName="enableOpds">
</div>
</ng-template>
</app-setting-switch>
@ -231,10 +235,8 @@
@if(settingsForm.get('enableFolderWatching'); as formControl) {
<app-setting-switch [title]="t('folder-watching-label')" [subtitle]="t('folder-watching-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch">
<input id="folder-watching" type="checkbox" class="form-check-input" formControlName="enableFolderWatching" role="switch">
</div>
<div class="form-check form-switch float-end">
<input id="folder-watching" type="checkbox" class="form-check-input" formControlName="enableFolderWatching" role="switch">
</div>
</ng-template>
</app-setting-switch>
@ -245,10 +247,8 @@
@if(settingsForm.get('allowStatCollection'); as formControl) {
<app-setting-switch [title]="t('allow-stats-label')" [subtitle]="allowStatsTooltip">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch">
<input id="stat-collection" type="checkbox" class="form-check-input" formControlName="allowStatCollection" role="switch">
</div>
<div class="form-check form-switch float-end">
<input id="stat-collection" type="checkbox" class="form-check-input" formControlName="allowStatCollection" role="switch">
</div>
</ng-template>
</app-setting-switch>
@ -315,10 +315,6 @@
}
</div>
</ng-container>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mt-4">
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">{{t('reset-to-default')}}</button>
</div>
</form>
</ng-container>

4
UI/Web/src/app/admin/manage-settings/manage-settings.component.scss
View file

@ -1,3 +1,7 @@
.invalid-feedback {
display: inherit;
}
.custom-position {
right: 5px;
top: -42px;
}

12
UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
View file

@ -130,7 +130,7 @@
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('manage-collection-label')" [subtitle]="t('manage-collection-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input type="checkbox" id="manage-collections" role="switch" formControlName="manageCollections" class="form-check-input">
</div>
</ng-template>
@ -140,7 +140,7 @@
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('manage-reading-list-label')" [subtitle]="t('manage-reading-list-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input type="checkbox" id="manage-readinglists" role="switch" formControlName="manageReadingLists" class="form-check-input">
</div>
</ng-template>
@ -150,7 +150,7 @@
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('allow-scrobbling-label')" [subtitle]="t('allow-scrobbling-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input type="checkbox" id="scrobbling" role="switch" formControlName="allowScrobbling" class="form-check-input">
</div>
</ng-template>
@ -160,7 +160,7 @@
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('folder-watching-label')" [subtitle]="t('folder-watching-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input type="checkbox" id="lib-folder-watching" role="switch" formControlName="folderWatching" class="form-check-input">
</div>
</ng-template>
@ -170,7 +170,7 @@
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('include-in-dashboard-label')" [subtitle]="t('include-in-dashboard-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input type="checkbox" id="include-dashboard" role="switch" formControlName="includeInDashboard" class="form-check-input">
</div>
</ng-template>
@ -181,7 +181,7 @@
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('include-in-search-label')" [subtitle]="t('include-in-search-tooltip')">
<ng-template #switch>
<div class="form-check form-switch">
<div class="form-check form-switch float-end">
<input type="checkbox" id="include-search" role="switch" formControlName="includeInSearch" class="form-check-input">
</div>
</ng-template>

4
UI/Web/src/app/user-settings/api-key/api-key.component.html
View file

@ -2,7 +2,7 @@
<app-setting-item [title]="title" [showEdit]="false" [canEdit]="false" [subtitle]="tooltipText" [toggleOnViewClick]="false">
<ng-template #view>
<input #apiKey [type]="InputType" readonly class="d-inline-flex form-control" style="width: 80%" id="api-key--{{title}}" aria-describedby="button-addon4" [value]="key" (click)="selectAll()">
<input #apiKey [type]="InputType" readonly class="d-inline-flex form-control" style="width: 80%" id="api-key--{{title}}" aria-describedby="button-addon4" [value]="key" (click)="selectAll()">
<div class="d-inline-flex">
@if (hideData) {
@ -18,7 +18,7 @@
</ng-template>
@if (showRefresh) {
<ng-template #titleActions>
<button class="btn btn-danger-text" [ngbTooltip]="tipContent" (click)="refresh()">Reset</button>
<button class="btn btn-danger-outline" [ngbTooltip]="tipContent" (click)="refresh()">Reset</button>
</ng-template>
}
</app-setting-item>

5
UI/Web/src/app/user-settings/manage-devices/manage-devices.component.html
View file

@ -2,10 +2,7 @@
<div class="position-relative">
<button class="btn btn-primary-outline position-absolute custom-position" (click)="addDevice()">
<i class="fa fa-plus" aria-hidden="true"></i>
<span class="phone-hidden ms-1">
{{t('add')}}
</span>
<i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden ms-1">{{t('add')}}</span>
</button>
</div>

2
UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.html
View file

@ -26,7 +26,7 @@
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('blur-unread-summaries-label')" [subtitle]="t('blur-unread-summaries-tooltip')">
<ng-template #switch>
<div class="form-check form-switch float-end float-end">
<div class="form-check form-switch float-end">
<input type="checkbox" role="switch"
formControlName="blurUnreadSummaries" class="form-check-input"
aria-labelledby="auto-close-label">

4
UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.ts
View file

@ -139,6 +139,7 @@ export class ManageUserPreferencesComponent implements OnInit {
this.localizationService.getLocales().subscribe(res => {
this.locales = res;
this.cdRef.markForCheck();
});
}
@ -197,9 +198,6 @@ export class ManageUserPreferencesComponent implements OnInit {
this.settingsForm.addControl('shareReviews', new FormControl(this.user.preferences.shareReviews, []));
this.settingsForm.addControl('locale', new FormControl(this.user.preferences.locale || 'en', []));
if (this.locales.length === 1) {
this.settingsForm.get('locale')?.disable();
}
// Automatically save settings as we edit them
this.settingsForm.valueChanges.pipe(

2
UI/Web/src/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>Kavita</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">

12
UI/Web/src/theme/components/_buttons.scss
View file

@ -40,6 +40,18 @@
}
}
.btn-danger-outline {
color: var(--btn-danger-outline-text-color);
background-color: var(--btn-danger-outline-bg-color);
border-color: var(--btn-danger-outline-border-color);
&:hover {
color: var(--btn-danger-outline-hover-text-color);
background-color: var(--btn-danger-outline-hover-bg-color);
border-color: var(--btn-danger-outline-hover-border-color);
}
}
.btn-actions {
color: var(--btn-fa-icon-color);
border-radius: var(--btn-actions-border-radius);

8
UI/Web/src/theme/themes/dark.scss
View file

@ -145,7 +145,15 @@
--btn-secondary-outline-font-weight: bold;
--btn-primary-text-text-color: white;
--btn-secondary-text-text-color: lightgrey;
--btn-danger-text-text-color: var(--error-color);
--btn-danger-outline-text-color: white;
--btn-danger-outline-bg-color: transparent;
--btn-danger-outline-border-color: var(--error-color);
--btn-danger-outline-hover-text-color: white;
--btn-danger-outline-hover-bg-color: var(--error-color);
--btn-danger-outline-hover-border-color: var(--error-color);
--btn-alt-bg-color: #424c72;
--btn-alt-border-color: #444f75;
--btn-alt-hover-bg-color: #3b4466;