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

setting segments separation

Browse source 
clear separation between setting segments by adding a background
This commit is contained in:
Christopher 2025-05-11 22:22:24 -06:00
parent 45c029a50d
commit 4a3fd8a089
12 changed files with 1466 additions and 1361 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,145 +10,147 @@
<form [formGroup]="settingsForm"> <form [formGroup]="settingsForm">
<p class="alert alert-warning">{{t('setting-description')}} {{t('test-warning')}}</p> <p class="alert alert-warning">{{t('setting-description')}} {{t('test-warning')}}</p>
<div class="row g-0 mt-2"> <div class="section">
@if (settingsForm.get('hostName'); as formControl) { <div class="row g-0">
<app-setting-item [title]="t('host-name-label')" [subtitle]="t('host-name-tooltip')" [control]="formControl"> @if (settingsForm.get('hostName'); as formControl) {
<ng-template #view> <app-setting-item [title]="t('host-name-label')" [subtitle]="t('host-name-tooltip')" [control]="formControl">
{{formControl.value | defaultValue}} <ng-template #view>
</ng-template> {{formControl.value | defaultValue}}
<ng-template #edit> </ng-template>
<input id="settings-hostname" aria-describedby="hostname-validations" class="form-control" formControlName="hostName" type="text" <ng-template #edit>
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur> <input id="settings-hostname" aria-describedby="hostname-validations" class="form-control" formControlName="hostName" type="text"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if (formControl.errors; as errors) {
<div id="hostname-validations" class="invalid-feedback" style="display: inline-block"> @if (formControl.errors; as errors) {
@if (errors.pattern) { <div id="hostname-validations" class="invalid-feedback" style="display: inline-block">
<div>{{t('host-name-validation')}}</div> @if (errors.pattern) {
} <div>{{t('host-name-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@if (settingsForm.get('senderAddress'); as formControl) {
<app-setting-item [title]="t('sender-address-label')" [subtitle]="t('sender-address-tooltip')">
<ng-template #view>
{{formControl.value | defaultValue}}
</ng-template>
<ng-template #edit>
<input type="text" class="form-control" formControlName="senderAddress" id="settings-sender-address" appEnterBlur/>
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@if (settingsForm.get('senderDisplayName'); as formControl) {
<app-setting-item [title]="t('sender-displayname-label')" [subtitle]="t('sender-displayname-tooltip')">
<ng-template #view>
{{formControl.value | defaultValue}}
</ng-template>
<ng-template #edit>
<input type="text" class="form-control" formControlName="senderDisplayName" id="settings-sender-displayname" appEnterBlur />
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@if (settingsForm.get('host'); as formControl) {
<app-setting-item [title]="t('host-label')" [subtitle]="t('host-tooltip')">
<ng-template #view>
{{formControl.value | defaultValue}}
</ng-template>
<ng-template #edit>
<div class="input-group">
<input type="text" class="form-control" formControlName="host" id="settings-host" appEnterBlur />
<button type="button" class="btn btn-outline-secondary" (click)="autofillGmail()">{{t('gmail-label')}}</button>
<button type="button" class="btn btn-outline-secondary" (click)="autofillOutlook()">{{t('outlook-label')}}</button>
</div> </div>
} </ng-template>
</ng-template> </app-setting-item>
</app-setting-item> }
} </div>
</div>
<div class="row g-0 mt-2">
<div class="row g-0 mt-2"> @if (settingsForm.get('port'); as formControl) {
@if (settingsForm.get('senderAddress'); as formControl) { <app-setting-item [title]="t('port-label')">
<app-setting-item [title]="t('sender-address-label')" [subtitle]="t('sender-address-tooltip')"> <ng-template #view>
<ng-template #view> {{formControl.value | defaultValue}}
{{formControl.value | defaultValue}} </ng-template>
</ng-template> <ng-template #edit>
<ng-template #edit> <input type="number" inputmode="numeric" min="1" class="form-control" formControlName="port" id="settings-port" appEnterBlur />
<input type="text" class="form-control" formControlName="senderAddress" id="settings-sender-address" appEnterBlur/> </ng-template>
</ng-template> </app-setting-item>
</app-setting-item> }
} </div>
</div>
<div class="row g-0 mt-2">
<div class="row g-0 mt-2"> @if(settingsForm.get('enableSsl'); as formControl) {
@if (settingsForm.get('senderDisplayName'); as formControl) { <app-setting-switch labelId="setting-enable-ssl" [title]="t('enable-ssl-label')">
<app-setting-item [title]="t('sender-displayname-label')" [subtitle]="t('sender-displayname-tooltip')"> <ng-template #switch>
<ng-template #view> <div class="form-check form-switch float-end">
{{formControl.value | defaultValue}} <input id="setting-enable-ssl" type="checkbox" class="form-check-input" formControlName="enableSsl">
</ng-template> </div>
<ng-template #edit> </ng-template>
<input type="text" class="form-control" formControlName="senderDisplayName" id="settings-sender-displayname" appEnterBlur /> </app-setting-switch>
</ng-template> }
</app-setting-item> </div>
}
</div> <div class="row g-0 mt-2">
@if (settingsForm.get('userName'); as formControl) {
<div class="row g-0 mt-2"> <app-setting-item [title]="t('username-label')" [subtitle]="t('username-tooltip')">
@if (settingsForm.get('host'); as formControl) { <ng-template #view>
<app-setting-item [title]="t('host-label')" [subtitle]="t('host-tooltip')"> {{formControl.value | defaultValue}}
<ng-template #view> </ng-template>
{{formControl.value | defaultValue}} <ng-template #edit>
</ng-template> <input type="text" class="form-control" formControlName="userName" id="settings-username" appEnterBlur />
<ng-template #edit> </ng-template>
<div class="input-group"> </app-setting-item>
<input type="text" class="form-control" formControlName="host" id="settings-host" appEnterBlur /> }
<button type="button" class="btn btn-outline-secondary" (click)="autofillGmail()">{{t('gmail-label')}}</button> </div>
<button type="button" class="btn btn-outline-secondary" (click)="autofillOutlook()">{{t('outlook-label')}}</button>
</div> <div class="row g-0 mt-2">
</ng-template> @if (settingsForm.get('password'); as formControl) {
</app-setting-item> <app-setting-item [title]="t('password-label')">
} <ng-template #view>
</div> {{formControl.value ? '********' : null | defaultValue}}
</ng-template>
<div class="row g-0 mt-2"> <ng-template #edit>
@if (settingsForm.get('port'); as formControl) { <input type="text" class="form-control" formControlName="password" id="settings-password" appEnterBlur />
<app-setting-item [title]="t('port-label')"> </ng-template>
<ng-template #view> </app-setting-item>
{{formControl.value | defaultValue}} }
</ng-template> </div>
<ng-template #edit>
<input type="number" inputmode="numeric" min="1" class="form-control" formControlName="port" id="settings-port" appEnterBlur /> <div class="row g-0 mt-2">
</ng-template> @if (settingsForm.get('sizeLimit'); as formControl) {
</app-setting-item> <app-setting-item [title]="t('size-limit-label')" [subtitle]="t('size-limit-tooltip')">
} <ng-template #view>
</div> {{formControl.value | bytes}}
</ng-template>
<div class="row g-0 mt-2"> <ng-template #edit>
@if(settingsForm.get('enableSsl'); as formControl) { <input type="number" inputmode="numeric" min="1" class="form-control" formControlName="sizeLimit" id="settings-size-limit" appEnterBlur />
<app-setting-switch labelId="setting-enable-ssl" [title]="t('enable-ssl-label')"> </ng-template>
<ng-template #switch> </app-setting-item>
<div class="form-check form-switch float-end"> }
<input id="setting-enable-ssl" type="checkbox" class="form-check-input" formControlName="enableSsl"> </div>
</div>
</ng-template> <div class="row g-0 mt-2">
</app-setting-switch> @if(settingsForm.get('customizedTemplates'); as formControl) {
} <app-setting-switch [title]="t('customized-templates-label')" [subtitle]="t('customized-templates-tooltip')">
</div> <ng-template #switch>
<div class="form-check form-switch float-end">
<div class="row g-0 mt-2"> <input id="settings-customized-templates" type="checkbox" class="form-check-input" formControlName="customizedTemplates">
@if (settingsForm.get('userName'); as formControl) { </div>
<app-setting-item [title]="t('username-label')" [subtitle]="t('username-tooltip')"> </ng-template>
<ng-template #view> </app-setting-switch>
{{formControl.value | defaultValue}} }
</ng-template> </div>
<ng-template #edit>
<input type="text" class="form-control" formControlName="userName" id="settings-username" appEnterBlur />
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@if (settingsForm.get('password'); as formControl) {
<app-setting-item [title]="t('password-label')">
<ng-template #view>
{{formControl.value ? '********' : null | defaultValue}}
</ng-template>
<ng-template #edit>
<input type="text" class="form-control" formControlName="password" id="settings-password" appEnterBlur />
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@if (settingsForm.get('sizeLimit'); as formControl) {
<app-setting-item [title]="t('size-limit-label')" [subtitle]="t('size-limit-tooltip')">
<ng-template #view>
{{formControl.value | bytes}}
</ng-template>
<ng-template #edit>
<input type="number" inputmode="numeric" min="1" class="form-control" formControlName="sizeLimit" id="settings-size-limit" appEnterBlur />
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@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 float-end">
<input id="settings-customized-templates" type="checkbox" class="form-check-input" formControlName="customizedTemplates">
</div>
</ng-template>
</app-setting-switch>
}
</div> </div>
</form> </form>

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

@ -9,60 +9,62 @@
</div> </div>
</div> </div>
<ng-container> <div class="section">
<div class="row g-0 mt-2"> <ng-container>
@if(settingsForm.get('encodeMediaAs'); as formControl) { <div class="row g-0">
<app-setting-item [title]="t('encode-as-label')" [subtitle]="t('encode-as-tooltip')"> @if(settingsForm.get('encodeMediaAs'); as formControl) {
<ng-template #view> <app-setting-item [title]="t('encode-as-label')" [subtitle]="t('encode-as-tooltip')">
{{formControl.value | encodeFormat}} <ng-template #view>
</ng-template> {{formControl.value | encodeFormat}}
<ng-template #edit> </ng-template>
<select class="form-select" formControlName="encodeMediaAs"> <ng-template #edit>
@for (opt of allEncodeFormats; track opt) { <select class="form-select" formControlName="encodeMediaAs">
<option [value]="opt">{{opt | encodeFormat}}</option> @for (opt of allEncodeFormats; track opt) {
} <option [value]="opt">{{opt | encodeFormat}}</option>
</select> }
</ng-template> </select>
</app-setting-item> </ng-template>
} </app-setting-item>
</div> }
</div>
<div class="row g-0 mt-2">
@if(settingsForm.get('coverImageSize'); as formControl) { <div class="row g-0 mt-2">
<app-setting-item [title]="t('cover-image-size-label')" [subtitle]="t('cover-image-size-tooltip')"> @if(settingsForm.get('coverImageSize'); as formControl) {
<ng-template #view> <app-setting-item [title]="t('cover-image-size-label')" [subtitle]="t('cover-image-size-tooltip')">
{{formControl!.value | coverImageSize}} <ng-template #view>
</ng-template> {{formControl!.value | coverImageSize}}
<ng-template #edit> </ng-template>
<select class="form-select" formControlName="coverImageSize"> <ng-template #edit>
@for (opt of allCoverImageSizes; track opt) { <select class="form-select" formControlName="coverImageSize">
<option [value]="opt">{{opt | coverImageSize}}</option> @for (opt of allCoverImageSizes; track opt) {
} <option [value]="opt">{{opt | coverImageSize}}</option>
</select> }
</ng-template> </select>
</app-setting-item> </ng-template>
} </app-setting-item>
</div> }
</div>
<div class="row g-0 mt-2">
@if(settingsForm.get('bookmarksDirectory'); as formControl) { <div class="row g-0 mt-2">
<app-setting-item [title]="t('bookmark-dir-label')" [subtitle]="t('bookmark-dir-tooltip')"> @if(settingsForm.get('bookmarksDirectory'); as formControl) {
<ng-template #view> <app-setting-item [title]="t('bookmark-dir-label')" [subtitle]="t('bookmark-dir-tooltip')">
{{formControl!.value}} <ng-template #view>
</ng-template> {{formControl!.value}}
<ng-template #edit> </ng-template>
<div class="input-group"> <ng-template #edit>
<input readonly id="settings-bookmarksdir" class="form-control" formControlName="bookmarksDirectory" type="text" aria-describedby="change-bookmarks-dir"> <div class="input-group">
<button id="change-bookmarks-dir" class="btn btn-primary" (click)="openDirectoryChooser(formControl.value, 'bookmarksDirectory')"> <input readonly id="settings-bookmarksdir" class="form-control" formControlName="bookmarksDirectory" type="text" aria-describedby="change-bookmarks-dir">
{{t('change')}} <button id="change-bookmarks-dir" class="btn btn-primary" (click)="openDirectoryChooser(formControl.value, 'bookmarksDirectory')">
</button> {{t('change')}}
</div> </button>
</ng-template> </div>
</app-setting-item> </ng-template>
} </app-setting-item>
</div> }
</div>
</ng-container>
</ng-container>
</div>
</form> </form>

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

@ -10,311 +10,314 @@
<strong>{{t('notice')}}</strong> {{t('restart-required')}} <strong>{{t('notice')}}</strong> {{t('restart-required')}}
</div> </div>
<div class="section">
<h4>{{t('networking-settings-title')}}</h4> <h4>{{t('networking-settings-title')}}</h4>
<ng-container> <ng-container>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('hostName'); as formControl) { @if (settingsForm.get('hostName'); as formControl) {
<app-setting-item [title]="t('host-name-label')" [subtitle]="t('host-name-tooltip')"> <app-setting-item [title]="t('host-name-label')" [subtitle]="t('host-name-tooltip')">
<ng-template #view> <ng-template #view>
{{formControl.value | defaultValue}} {{formControl.value | defaultValue}}
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<input id="settings-hostname" aria-describedby="settings-hostname-help" class="form-control" formControlName="hostName" type="text" <input id="settings-hostname" aria-describedby="settings-hostname-help" class="form-control" formControlName="hostName" type="text"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="hostname-validations" class="invalid-feedback">
@if (formControl.errors?.pattern) {
<div>{{t('host-name-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('baseUrl'); as formControl) {
<app-setting-item [title]="t('base-url-label')" [subtitle]="t('base-url-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<div class="input-group">
<input id="settings-baseurl" aria-describedby="settings-baseurl-help" class="form-control" formControlName="baseUrl" type="text"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur> [class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
<button type="button" class="btn btn-outline-secondary" (click)="resetBaseUrl()">{{t('reset')}}</button>
</div> @if(settingsForm.dirty || !settingsForm.untouched) {
<div id="hostname-validations" class="invalid-feedback">
@if(settingsForm.dirty || !settingsForm.untouched) { @if (formControl.errors?.pattern) {
<div id="baseurl-validations" class="invalid-feedback"> <div>{{t('host-name-validation')}}</div>
@if (formControl.errors?.pattern) { }
<div>{{t('base-url-validation')}}</div> </div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('ipAddresses'); as formControl) {
<app-setting-item [title]="t('ip-address-label')" [subtitle]="t('ip-address-tooltip')">
<ng-template #view>
{{formControl.value | defaultValue}}
</ng-template>
<ng-template #edit>
<div class="input-group">
<input id="settings-ipaddresses" aria-describedby="settings-ipaddresses-help" class="form-control" formControlName="ipAddresses" type="text"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
<button type="button" class="btn btn-outline-secondary" (click)="resetIPAddresses()">{{t('reset')}}</button>
</div>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="ipaddresses-validations" class="invalid-feedback">
@if (formControl.errors?.emptyOrPattern) {
<div>{{t('ip-address-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('port'); as formControl) {
<app-setting-item [title]="t('port-label')" [subtitle]="t('port-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<input id="settings-port" aria-describedby="settings-port-help" class="form-control"
formControlName="port" type="number" step="1" min="1"
onkeypress="return event.charCode >= 48 && event.charCode <= 57" appEnterBlur>
</ng-template>
</app-setting-item>
}
</div>
</ng-container>
<div class="setting-section-break"></div>
<h4>{{t('system-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('totalBackups'); as formControl) {
<app-setting-item [title]="t('backup-label')" [subtitle]="t('backup-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<input id="settings-backup" aria-describedby="total-backups-validations" class="form-control"
formControlName="totalBackups" type="number" inputmode="numeric" step="1" min="1" max="30"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="total-backups-validations" class="invalid-feedback">
@if (formControl.errors?.required) {
<div>{{t('field-required')}}</div>
}
@if (formControl.errors?.max) {
<div>{{t('max-backup-validation', {num: formControl.errors?.max?.max})}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-backup-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('totalLogs'); as formControl) {
<app-setting-item [title]="t('log-label')" [subtitle]="t('log-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<input id="settings-logs" aria-describedby="total-logs-validations" class="form-control"
formControlName="totalLogs" type="number" inputmode="numeric" step="1" min="1" max="30"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="total-logs-validations" class="invalid-feedback">
@if (formControl.errors?.required) {
<div>{{t('field-required')}}</div>
}
@if (formControl.errors?.max) {
<div>{{t('max-logs-validation', {num: formControl.errors?.max?.max})}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-log-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('loggingLevel'); as formControl) {
<app-setting-item [title]="t('logging-level-label')" [subtitle]="t('logging-level-tooltip')">
<ng-template #view>
{{formControl.value | logLevel}}
</ng-template>
<ng-template #edit>
<select id="logging-level" aria-describedby="logging-level-help" class="form-select" formControlName="loggingLevel"
[class.is-invalid]="formControl.invalid && !formControl.untouched">
@for(level of logLevels; track level) {
<option [value]="level">{{level | logLevel}}</option>
} }
</select> </ng-template>
</app-setting-item>
@if(settingsForm.dirty || !settingsForm.untouched) { }
<div id="logging-level-validations" class="invalid-feedback"> </div>
@if (formControl.errors?.pattern) {
<div>{{t('host-name-validation')}}</div> <div class="row g-0 mt-4 mb-4">
} @if (settingsForm.get('baseUrl'); as formControl) {
<app-setting-item [title]="t('base-url-label')" [subtitle]="t('base-url-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<div class="input-group">
<input id="settings-baseurl" aria-describedby="settings-baseurl-help" class="form-control" formControlName="baseUrl" type="text"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
<button type="button" class="btn btn-outline-secondary" (click)="resetBaseUrl()">{{t('reset')}}</button>
</div> </div>
}
</ng-template> @if(settingsForm.dirty || !settingsForm.untouched) {
</app-setting-item> <div id="baseurl-validations" class="invalid-feedback">
} @if (formControl.errors?.pattern) {
</div> <div>{{t('base-url-validation')}}</div>
}
<div class="row g-0 mt-4 mb-4"> </div>
@if (settingsForm.get('cacheSize'); as formControl) { }
<app-setting-item [title]="t('cache-size-label')" [subtitle]="t('cache-size-tooltip')"> </ng-template>
<ng-template #view> </app-setting-item>
{{formControl.value}} }
</ng-template> </div>
<ng-template #edit>
<input id="setting-cache-size" aria-describedby="cache-size-help" class="form-control" formControlName="cacheSize" <div class="row g-0 mt-4 mb-4">
type="number" inputmode="numeric" step="5" min="50" onkeypress="return event.charCode >= 48 && event.charCode <= 57" @if (settingsForm.get('ipAddresses'); as formControl) {
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur> <app-setting-item [title]="t('ip-address-label')" [subtitle]="t('ip-address-tooltip')">
<ng-template #view>
@if(settingsForm.dirty || !settingsForm.untouched) { {{formControl.value | defaultValue}}
<div id="cache-size-validations" class="invalid-feedback"> </ng-template>
@if (formControl.errors?.required) { <ng-template #edit>
<div>{{t('field-required')}}</div> <div class="input-group">
} <input id="settings-ipaddresses" aria-describedby="settings-ipaddresses-help" class="form-control" formControlName="ipAddresses" type="text"
@if (formControl.errors?.min) { [class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
<div>{{t('min-cache-validation')}}</div> <button type="button" class="btn btn-outline-secondary" (click)="resetIPAddresses()">{{t('reset')}}</button>
}
</div> </div>
}
</ng-template> @if(settingsForm.dirty || !settingsForm.untouched) {
</app-setting-item> <div id="ipaddresses-validations" class="invalid-feedback">
} @if (formControl.errors?.emptyOrPattern) {
</div> <div>{{t('ip-address-validation')}}</div>
}
<div class="row g-0 mt-4 mb-4"> </div>
@if(settingsForm.get('enableOpds'); as formControl) { }
<app-setting-switch [title]="t('opds-label')" [subtitle]="t('opds-tooltip')"> </ng-template>
<ng-template #switch> </app-setting-item>
<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>
</div>
</ng-template> <div class="row g-0 mt-4 mb-4">
</app-setting-switch> @if (settingsForm.get('port'); as formControl) {
} <app-setting-item [title]="t('port-label')" [subtitle]="t('port-tooltip')">
</div> <ng-template #view>
{{formControl.value}}
<div class="row g-0 mt-4 mb-4"> </ng-template>
@if(settingsForm.get('enableFolderWatching'); as formControl) { <ng-template #edit>
<app-setting-switch [title]="t('folder-watching-label')" [subtitle]="t('folder-watching-tooltip')"> <input id="settings-port" aria-describedby="settings-port-help" class="form-control"
<ng-template #switch> formControlName="port" type="number" step="1" min="1"
<div class="form-check form-switch float-end"> onkeypress="return event.charCode >= 48 && event.charCode <= 57" appEnterBlur>
<input id="folder-watching" type="checkbox" class="form-check-input" formControlName="enableFolderWatching" role="switch"> </ng-template>
</div> </app-setting-item>
</ng-template> }
</app-setting-switch> </div>
} </ng-container>
</div> </div>
<div class="row g-0 mt-4 mb-4">
@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 float-end">
<input id="stat-collection" type="checkbox" class="form-check-input" formControlName="allowStatCollection" role="switch">
</div>
</ng-template>
</app-setting-switch>
}
</div>
</ng-container>
<div class="setting-section-break"></div> <div class="setting-section-break"></div>
<h4>{{t('customization-settings-title')}}</h4> <div class="section">
<ng-container> <h4>{{t('system-settings-title')}}</h4>
<div class="row g-0 mt-4 mb-4"> <ng-container>
@if (settingsForm.get('onDeckProgressDays'); as formControl) { <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('on-deck-last-progress-label')" [subtitle]="t('on-deck-last-progress-tooltip')"> @if (settingsForm.get('totalBackups'); as formControl) {
<ng-template #view> <app-setting-item [title]="t('backup-label')" [subtitle]="t('backup-tooltip')">
{{formControl.value}} <ng-template #view>
</ng-template> {{formControl.value}}
<ng-template #edit> </ng-template>
<input id="setting-on-deck-progress-days" aria-describedby="on-deck-progress-days-validations" class="form-control" formControlName="onDeckProgressDays" <ng-template #edit>
type="number" inputmode="numeric" step="1" min="1" <input id="settings-backup" aria-describedby="total-backups-validations" class="form-control"
onkeypress="return event.charCode >= 48 && event.charCode <= 57" formControlName="totalBackups" type="number" inputmode="numeric" step="1" min="1" max="30"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur> onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="on-deck-last-progress-validations" class="invalid-feedback"> @if(settingsForm.dirty || !settingsForm.untouched) {
@if (formControl.errors?.required) { <div id="total-backups-validations" class="invalid-feedback">
<div>{{t('field-required')}}</div> @if (formControl.errors?.required) {
} <div>{{t('field-required')}}</div>
@if (formControl.errors?.min) { }
<div>{{t('min-days-validation')}}</div> @if (formControl.errors?.max) {
<div>{{t('max-backup-validation', {num: formControl.errors?.max?.max})}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-backup-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('totalLogs'); as formControl) {
<app-setting-item [title]="t('log-label')" [subtitle]="t('log-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<input id="settings-logs" aria-describedby="total-logs-validations" class="form-control"
formControlName="totalLogs" type="number" inputmode="numeric" step="1" min="1" max="30"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="total-logs-validations" class="invalid-feedback">
@if (formControl.errors?.required) {
<div>{{t('field-required')}}</div>
}
@if (formControl.errors?.max) {
<div>{{t('max-logs-validation', {num: formControl.errors?.max?.max})}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-log-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('loggingLevel'); as formControl) {
<app-setting-item [title]="t('logging-level-label')" [subtitle]="t('logging-level-tooltip')">
<ng-template #view>
{{formControl.value | logLevel}}
</ng-template>
<ng-template #edit>
<select id="logging-level" aria-describedby="logging-level-help" class="form-select" formControlName="loggingLevel"
[class.is-invalid]="formControl.invalid && !formControl.untouched">
@for(level of logLevels; track level) {
<option [value]="level">{{level | logLevel}}</option>
} }
</select>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="logging-level-validations" class="invalid-feedback">
@if (formControl.errors?.pattern) {
<div>{{t('host-name-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('cacheSize'); as formControl) {
<app-setting-item [title]="t('cache-size-label')" [subtitle]="t('cache-size-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<input id="setting-cache-size" aria-describedby="cache-size-help" class="form-control" formControlName="cacheSize"
type="number" inputmode="numeric" step="5" min="50" onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="cache-size-validations" class="invalid-feedback">
@if (formControl.errors?.required) {
<div>{{t('field-required')}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-cache-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@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 float-end">
<input id="opds" type="checkbox" [attr.aria-label]="t('opds-label')" class="form-check-input" formControlName="enableOpds">
</div> </div>
} </ng-template>
</ng-template> </app-setting-switch>
</app-setting-item> }
} </div>
</div>
<div class="row g-0 mt-4 mb-4">
<div class="row g-0 mt-4 mb-4"> @if(settingsForm.get('enableFolderWatching'); as formControl) {
@if (settingsForm.get('onDeckUpdateDays'); as formControl) { <app-setting-switch [title]="t('folder-watching-label')" [subtitle]="t('folder-watching-tooltip')">
<app-setting-item [title]="t('on-deck-last-chapter-add-label')" [subtitle]="t('on-deck-last-chapter-add-tooltip')"> <ng-template #switch>
<ng-template #view> <div class="form-check form-switch float-end">
{{formControl.value}} <input id="folder-watching" type="checkbox" class="form-check-input" formControlName="enableFolderWatching" role="switch">
</ng-template>
<ng-template #edit>
<input id="on-deck-last-chapter-add" aria-describedby="on-deck-last-chapter-add-validations" class="form-control" formControlName="onDeckUpdateDays"
type="number" inputmode="numeric" step="1" min="1"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="on-deck-last-chapter-add-validations" class="invalid-feedback">
@if (formControl.errors?.required) {
<div>{{t('field-required')}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-days-validation')}}</div>
}
</div> </div>
} </ng-template>
</ng-template> </app-setting-switch>
</app-setting-item> }
} </div>
</div>
</ng-container> <div class="row g-0 mt-4 mb-4">
@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 float-end">
<input id="stat-collection" type="checkbox" class="form-check-input" formControlName="allowStatCollection" role="switch">
</div>
</ng-template>
</app-setting-switch>
}
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
<div class="section">
<h4>{{t('customization-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('onDeckProgressDays'); as formControl) {
<app-setting-item [title]="t('on-deck-last-progress-label')" [subtitle]="t('on-deck-last-progress-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<input id="setting-on-deck-progress-days" aria-describedby="on-deck-progress-days-validations" class="form-control" formControlName="onDeckProgressDays"
type="number" inputmode="numeric" step="1" min="1"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="on-deck-last-progress-validations" class="invalid-feedback">
@if (formControl.errors?.required) {
<div>{{t('field-required')}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-days-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('onDeckUpdateDays'); as formControl) {
<app-setting-item [title]="t('on-deck-last-chapter-add-label')" [subtitle]="t('on-deck-last-chapter-add-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>
<ng-template #edit>
<input id="on-deck-last-chapter-add" aria-describedby="on-deck-last-chapter-add-validations" class="form-control" formControlName="onDeckUpdateDays"
type="number" inputmode="numeric" step="1" min="1"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="formControl.invalid && !formControl.untouched" appEnterBlur>
@if(settingsForm.dirty || !settingsForm.untouched) {
<div id="on-deck-last-chapter-add-validations" class="invalid-feedback">
@if (formControl.errors?.required) {
<div>{{t('field-required')}}</div>
}
@if (formControl.errors?.min) {
<div>{{t('min-days-validation')}}</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
</ng-container>
</div>
</form> </form>
</ng-container> </ng-container>

111
UI/Web/src/app/admin/manage-system/manage-system.component.html
View file

@ -1,68 +1,71 @@
<ng-container *transloco="let t; read: 'manage-system'"> <ng-container *transloco="let t; read: 'manage-system'">
@if (serverInfo) { @if (serverInfo) {
<div class="mb-3"> <div class="section">
<h3>{{t('title')}}</h3> <div class="mb-3">
<h3>{{t('title')}}</h3>
<div class="row">
<div class="col-4"> <div class="row">
<div>{{t('version-title')}}</div> <div class="col-4">
<div>{{serverInfo.kavitaVersion}}</div> <div>{{t('version-title')}}</div>
<div>{{serverInfo.kavitaVersion}}</div>
</div>
<div class="col-4">
<div>{{t('installId-title')}}</div>
<div>{{serverInfo.installId}}</div>
</div>
</div> </div>
<div class="col-4"> <div class="row">
<div>{{t('installId-title')}}</div> <div class="col-4">
<div>{{serverInfo.installId}}</div> <div>{{t('first-install-version-title')}}</div>
</div> <div>{{serverInfo.firstInstallVersion}}</div>
</div> </div>
<div class="row"> <div class="col-4">
<div class="col-4"> <div>{{t('first-install-date-title')}}</div>
<div>{{t('first-install-version-title')}}</div> <div>{{serverInfo.firstInstallDate | date:'shortDate'}}</div>
<div>{{serverInfo.firstInstallVersion}}</div> </div>
</div>
<div class="col-4">
<div>{{t('first-install-date-title')}}</div>
<div>{{serverInfo.firstInstallDate | date:'shortDate'}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="setting-section-break"></div> <div class="setting-section-break"></div>
} }
<div class="mb-3"> <div class="section">
<h3>{{t('more-info-title')}}</h3> <div class="mb-3">
<div class="row"> <h3>{{t('more-info-title')}}</h3>
<div class="col-4">{{t('home-page-title')}}</div> <div class="row">
<div class="col"><a href="https://www.kavitareader.com" target="_blank" rel="noopener noreferrer">kavitareader.com</a></div> <div class="col-4">{{t('home-page-title')}}</div>
</div> <div class="col"><a href="https://www.kavitareader.com" target="_blank" rel="noopener noreferrer">kavitareader.com</a></div>
<div class="row"> </div>
<div class="col-4">{{t('wiki-title')}}</div> <div class="row">
<div class="col"><a href="https://wiki.kavitareader.com" target="_blank" rel="noopener noreferrer">wiki.kavitareader.com</a></div> <div class="col-4">{{t('wiki-title')}}</div>
</div> <div class="col"><a href="https://wiki.kavitareader.com" target="_blank" rel="noopener noreferrer">wiki.kavitareader.com</a></div>
<div class="row"> </div>
<div class="col-4">{{t('discord-title')}}</div> <div class="row">
<div class="col"><a href="https://discord.gg/b52wT37kt7" target="_blank" rel="noopener noreferrer">discord.gg/b52wT37kt7</a></div> <div class="col-4">{{t('discord-title')}}</div>
</div> <div class="col"><a href="https://discord.gg/b52wT37kt7" target="_blank" rel="noopener noreferrer">discord.gg/b52wT37kt7</a></div>
<div class="row"> </div>
<div class="col-4">{{t('donations-title')}}</div> <div class="row">
<div class="col"><a href="https://opencollective.com/kavita" target="_blank" rel="noopener noreferrer">opencollective.com/kavita</a></div> <div class="col-4">{{t('donations-title')}}</div>
</div> <div class="col"><a href="https://opencollective.com/kavita" target="_blank" rel="noopener noreferrer">opencollective.com/kavita</a></div>
<div class="row"> </div>
<div class="col-4">{{t('source-title')}}</div> <div class="row">
<div class="col"><a href="https://github.com/Kareadita/Kavita" target="_blank" rel="noopener noreferrer">github.com/Kareadita/Kavita</a></div> <div class="col-4">{{t('source-title')}}</div>
</div> <div class="col"><a href="https://github.com/Kareadita/Kavita" target="_blank" rel="noopener noreferrer">github.com/Kareadita/Kavita</a></div>
<div class="row"> </div>
<div class="col-4">{{t('localization-title')}}</div> <div class="row">
<div class="col"><a href="https://hosted.weblate.org/engage/kavita/" target="_blank" rel="noopener noreferrer">Weblate</a><br/></div> <div class="col-4">{{t('localization-title')}}</div>
</div> <div class="col"><a href="https://hosted.weblate.org/engage/kavita/" target="_blank" rel="noopener noreferrer">Weblate</a><br/></div>
<div class="row"> </div>
<div class="col-4">{{t('feature-request-title')}}</div> <div class="row">
<div class="col"><a href="https://github.com/Kareadita/Kavita/discussions/2529" target="_blank" rel="noopener noreferrer">https://github.com/Kareadita/Kavita/discussions/</a><br/></div> <div class="col-4">{{t('feature-request-title')}}</div>
<div class="col"><a href="https://github.com/Kareadita/Kavita/discussions/2529" target="_blank" rel="noopener noreferrer">https://github.com/Kareadita/Kavita/discussions/</a><br/></div>
</div>
</div> </div>
</div> </div>
<div class="setting-section-break"></div> <div class="setting-section-break"></div>
<div class="mb-3"> <div class="mb-3">

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

@ -1,192 +1,197 @@
<ng-container *transloco="let t; read: 'manage-tasks-settings'"> <ng-container *transloco="let t; read: 'manage-tasks-settings'">
@if (serverSettings) { @if (serverSettings) {
<form [formGroup]="settingsForm"> <form [formGroup]="settingsForm">
<div class="section">
<h4>{{t('title')}}</h4> <h4>{{t('title')}}</h4>
<ng-container> <ng-container>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('taskScan'); as formControl) { @if (settingsForm.get('taskScan'); as formControl) {
<app-setting-item [title]="t('library-scan-label')" [subtitle]="t('library-scan-tooltip')"> <app-setting-item [title]="t('library-scan-label')" [subtitle]="t('library-scan-tooltip')">
<ng-template #view> <ng-template #view>
@if (formControl.value === customOption) { @if (formControl.value === customOption) {
{{t(formControl.value)}} ({{settingsForm.get('taskScanCustom')?.value}}) {{t(formControl.value)}} ({{settingsForm.get('taskScanCustom')?.value}})
} @else { } @else {
{{t(formControl.value)}} {{t(formControl.value)}}
}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="settings-tasks-scan-help" formControlName="taskScan" id="settings-tasks-scan">
@for(freq of taskFrequencies; track freq) {
<option [value]="freq">{{t(freq)}}</option>
} }
</select> </ng-template>
<ng-template #edit>
@if (formControl.value === customOption) {
<div class="mt-3"> <select class="form-select" aria-describedby="settings-tasks-scan-help" formControlName="taskScan" id="settings-tasks-scan">
<label for="custom-task-scan" class="form-label">{{t('custom-label')}}</label> @for(freq of taskFrequencies; track freq) {
<input class="form-control" type="text" <option [value]="freq">{{t(freq)}}</option>
id="custom-task-scan" formControlName="taskScanCustom"
[class.is-invalid]="settingsForm.get('taskScanCustom')?.invalid && settingsForm.get('taskScanCustom')?.touched"
aria-describedby="task-scan-validations">
@if (settingsForm.dirty || !settingsForm.untouched) {
<div id="task-scan-validations" class="invalid-feedback" style="display: inline-block">
@if(settingsForm.get('taskScanCustom')?.errors?.required) {
<div>{{t('required')}}</div>
}
@if(settingsForm.get('taskScanCustom')?.errors?.invalidCron) {
<div>{{t('cron-notation')}}</div>
}
</div>
} }
</div> </select>
}
</ng-template> @if (formControl.value === customOption) {
</app-setting-item> <div class="mt-3">
} <label for="custom-task-scan" class="form-label">{{t('custom-label')}}</label>
</div> <input class="form-control" type="text"
id="custom-task-scan" formControlName="taskScanCustom"
<div class="row g-0 mt-4 mb-4"> [class.is-invalid]="settingsForm.get('taskScanCustom')?.invalid && settingsForm.get('taskScanCustom')?.touched"
@if (settingsForm.get('taskBackup'); as formControl) { aria-describedby="task-scan-validations">
<app-setting-item [title]="t('library-database-backup-label')" [subtitle]="t('library-database-backup-tooltip')">
<ng-template #view> @if (settingsForm.dirty || !settingsForm.untouched) {
@if (formControl.value === customOption) { <div id="task-scan-validations" class="invalid-feedback" style="display: inline-block">
{{t(formControl.value)}} ({{settingsForm.get('taskBackupCustom')?.value}}) @if(settingsForm.get('taskScanCustom')?.errors?.required) {
} @else { <div>{{t('required')}}</div>
{{t(formControl.value)}} }
} @if(settingsForm.get('taskScanCustom')?.errors?.invalidCron) {
</ng-template> <div>{{t('cron-notation')}}</div>
<ng-template #edit> }
</div>
<select class="form-select" aria-describedby="settings-tasks-backup-help" formControlName="taskBackup" id="settings-tasks-backup"> }
@for(freq of taskFrequencies; track freq) { </div>
<option [value]="freq">{{t(freq)}}</option>
} }
</select> </ng-template>
</app-setting-item>
@if (formControl.value === customOption) { }
<div class="mt-3"> </div>
<label for="custom-task-scan" class="form-label">{{t('custom-label')}}</label>
<input class="form-control" type="text" <div class="row g-0 mt-4 mb-4">
id="custom-task-backup" formControlName="taskBackupCustom" @if (settingsForm.get('taskBackup'); as formControl) {
[class.is-invalid]="settingsForm.get('taskBackupCustom')?.invalid && settingsForm.get('taskBackupCustom')?.touched" <app-setting-item [title]="t('library-database-backup-label')" [subtitle]="t('library-database-backup-tooltip')">
aria-describedby="task-scan-validations"> <ng-template #view>
@if (formControl.value === customOption) {
@if (settingsForm.dirty || !settingsForm.untouched) { {{t(formControl.value)}} ({{settingsForm.get('taskBackupCustom')?.value}})
<div id="task-backup-validations" class="invalid-feedback" style="display: inline-block"> } @else {
@if(settingsForm.get('taskBackupCustom')?.errors?.required) { {{t(formControl.value)}}
<div>{{t('required')}}</div>
}
@if(settingsForm.get('taskBackupCustom')?.errors?.invalidCron) {
<div>{{t('cron-notation')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('taskCleanup'); as formControl) {
<app-setting-item [title]="t('cleanup-label')" [subtitle]="t('cleanup-tooltip')">
<ng-template #view>
@if (formControl.value === customOption) {
{{t(formControl.value)}} ({{settingsForm.get('taskCleanupCustom')?.value}})
} @else {
{{t(formControl.value)}}
}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="settings-tasks-cleanup-help" formControlName="taskCleanup" id="settings-tasks-cleanup">
@for(freq of taskFrequenciesForCleanup; track freq) {
<option [value]="freq">{{t(freq)}}</option>
} }
</select> </ng-template>
<ng-template #edit>
@if (formControl.value === customOption) {
<div class="mt-3"> <select class="form-select" aria-describedby="settings-tasks-backup-help" formControlName="taskBackup" id="settings-tasks-backup">
<label for="custom-task-scan" class="form-label">{{t('custom-label')}}</label> @for(freq of taskFrequencies; track freq) {
<input class="form-control" type="text" <option [value]="freq">{{t(freq)}}</option>
id="custom-task-cleanup" formControlName="taskCleanupCustom"
[class.is-invalid]="settingsForm.get('taskCleanupCustom')?.invalid && settingsForm.get('taskCleanupCustom')?.touched"
aria-describedby="task-scan-validations">
@if (settingsForm.get('taskCleanupCustom')?.invalid) {
<div id="task-cleanup-validations" class="invalid-feedback" style="display: inline-block">
@if(settingsForm.get('taskCleanupCustom')?.errors?.required) {
<div>{{t('required')}}</div>
}
@if(settingsForm.get('taskCleanupCustom')?.errors?.invalidCron) {
<div>{{t('cron-notation')}}</div>
}
</div>
} }
</div> </select>
}
</ng-template> @if (formControl.value === customOption) {
</app-setting-item> <div class="mt-3">
} <label for="custom-task-scan" class="form-label">{{t('custom-label')}}</label>
</div> <input class="form-control" type="text"
</ng-container> id="custom-task-backup" formControlName="taskBackupCustom"
[class.is-invalid]="settingsForm.get('taskBackupCustom')?.invalid && settingsForm.get('taskBackupCustom')?.touched"
aria-describedby="task-scan-validations">
@if (settingsForm.dirty || !settingsForm.untouched) {
<div id="task-backup-validations" class="invalid-feedback" style="display: inline-block">
@if(settingsForm.get('taskBackupCustom')?.errors?.required) {
<div>{{t('required')}}</div>
}
@if(settingsForm.get('taskBackupCustom')?.errors?.invalidCron) {
<div>{{t('cron-notation')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('taskCleanup'); as formControl) {
<app-setting-item [title]="t('cleanup-label')" [subtitle]="t('cleanup-tooltip')">
<ng-template #view>
@if (formControl.value === customOption) {
{{t(formControl.value)}} ({{settingsForm.get('taskCleanupCustom')?.value}})
} @else {
{{t(formControl.value)}}
}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="settings-tasks-cleanup-help" formControlName="taskCleanup" id="settings-tasks-cleanup">
@for(freq of taskFrequenciesForCleanup; track freq) {
<option [value]="freq">{{t(freq)}}</option>
}
</select>
@if (formControl.value === customOption) {
<div class="mt-3">
<label for="custom-task-scan" class="form-label">{{t('custom-label')}}</label>
<input class="form-control" type="text"
id="custom-task-cleanup" formControlName="taskCleanupCustom"
[class.is-invalid]="settingsForm.get('taskCleanupCustom')?.invalid && settingsForm.get('taskCleanupCustom')?.touched"
aria-describedby="task-scan-validations">
@if (settingsForm.get('taskCleanupCustom')?.invalid) {
<div id="task-cleanup-validations" class="invalid-feedback" style="display: inline-block">
@if(settingsForm.get('taskCleanupCustom')?.errors?.required) {
<div>{{t('required')}}</div>
}
@if(settingsForm.get('taskCleanupCustom')?.errors?.invalidCron) {
<div>{{t('cron-notation')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
}
</div>
</ng-container>
</div>
<div class="setting-section-break"></div>
<div class="section">
<h4>{{t('adhoc-tasks-title')}}</h4>
@for(task of adhocTasks; track task.name; let idx = $index) {
<div class="mt-4 mb-4">
<app-setting-button [subtitle]="t(task.description)">
<button class="btn btn-secondary btn-sm mb-2" (click)="runAdhoc(task)">{{t(task.name)}}</button>
</app-setting-button>
</div>
}
</div>
<div class="setting-section-break"></div> <div class="setting-section-break"></div>
<h4>{{t('adhoc-tasks-title')}}</h4> <div class="section">
<h4>{{t('recurring-tasks-title')}}</h4>
@for(task of adhocTasks; track task.name; let idx = $index) { <ngx-datatable
<div class="mt-4 mb-4"> class="bootstrap"
<app-setting-button [subtitle]="t(task.description)"> [rows]="recurringTasks$ | async"
<button class="btn btn-secondary btn-sm mb-2" (click)="runAdhoc(task)">{{t(task.name)}}</button> [columnMode]="ColumnMode.flex"
</app-setting-button> rowHeight="auto"
</div> [footerHeight]="50"
} [limit]="15"
>
<div class="setting-section-break"></div>
<ngx-datatable-column prop="title" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="3">
<h4>{{t('recurring-tasks-title')}}</h4> <ng-template let-column="column" ngx-datatable-header-template>
<ngx-datatable {{t('job-title-header')}}
class="bootstrap" </ng-template>
[rows]="recurringTasks$ | async" <ng-template let-item="row" ngx-datatable-cell-template>
[columnMode]="ColumnMode.flex" {{item.title | titlecase}}
rowHeight="auto" </ng-template>
[footerHeight]="50" </ngx-datatable-column>
[limit]="15"
>
<ngx-datatable-column prop="lastExecutionUtc" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="1">
<ngx-datatable-column prop="title" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="3"> <ng-template let-column="column" ngx-datatable-header-template>
<ng-template let-column="column" ngx-datatable-header-template> {{t('last-executed-header')}}
{{t('job-title-header')}} </ng-template>
</ng-template> <ng-template let-item="row" let-idx="index" ngx-datatable-cell-template>
<ng-template let-item="row" ngx-datatable-cell-template> {{item.lastExecutionUtc | utcToLocalTime | defaultValue }}
{{item.title | titlecase}} </ng-template>
</ng-template> </ngx-datatable-column>
</ngx-datatable-column>
<ngx-datatable-column prop="cron" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
<ng-template let-column="column" ngx-datatable-header-template>
<ngx-datatable-column prop="lastExecutionUtc" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="1"> {{t('cron-header')}}
<ng-template let-column="column" ngx-datatable-header-template> </ng-template>
{{t('last-executed-header')}} <ng-template let-item="row" ngx-datatable-cell-template>
</ng-template> {{item.cron}}
<ng-template let-item="row" let-idx="index" ngx-datatable-cell-template> </ng-template>
{{item.lastExecutionUtc | utcToLocalTime | defaultValue }} </ngx-datatable-column>
</ng-template> </ngx-datatable>
</ngx-datatable-column> </div>
<ngx-datatable-column prop="cron" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
<ng-template let-column="column" ngx-datatable-header-template>
{{t('cron-header')}}
</ng-template>
<ng-template let-item="row" ngx-datatable-cell-template>
{{item.cron}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</form> </form>
} }
</ng-container> </ng-container>

40
UI/Web/src/app/settings/_components/settings/settings.component.scss
View file

@ -19,8 +19,34 @@ h2 {
} }
} }
:host ::ng-deep {
.main-container {
.container-fluid {
> div {
padding-right: unset;
.section {
background: var(--side-nav-bg-color);
border-radius: 5px;
padding: 0.9rem;
}
}
}
}
}
@media (max-width: theme.$grid-breakpoints-lg) { @media (max-width: theme.$grid-breakpoints-lg) {
:host ::ng-deep {
.main-container {
padding: 0 0 0 25px;
.container-fluid {
padding: unset;
> div {
padding-right: calc(var(--bs-gutter-x) * 0.5);
}
}
}
}
::ng-deep .content-wrapper:not(.closed) { ::ng-deep .content-wrapper:not(.closed) {
.scale { .scale {
width: 100% !important; width: 100% !important;
@ -28,3 +54,17 @@ h2 {
} }
} }
} }
@media (max-width: theme.$grid-breakpoints-md) {
:host ::ng-deep {
.main-container {
padding: 0 0 0 14px;
.container-fluid {
padding: unset;
> div {
padding-right: unset;
}
}
}
}
}

224
UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html
View file

@ -1,113 +1,139 @@
<ng-container *transloco="let t; read:'server-stats'"> <ng-container *transloco="let t; read:'server-stats'">
<div class="row g-0 mt-4 mb-3 d-flex justify-content-around" *ngIf="stats$ | async as stats"> <div class="section">
<ng-container> <div class="row g-0 d-flex justify-content-around" *ngIf="stats$ | async as stats">
<div class="col-auto mb-2"> <ng-container>
<app-icon-and-title [label]="t('total-series-label')" [clickable]="false" fontClasses="fa-solid fa-book-open" [title]="t('total-series-tooltip', {count: stats.seriesCount | number})"> <div class="col-auto">
{{t('series-count', {num: stats.seriesCount | number})}} <app-icon-and-title [label]="t('total-series-label')" [clickable]="false" fontClasses="fa-solid fa-book-open" [title]="t('total-series-tooltip', {count: stats.seriesCount | number})">
</app-icon-and-title> {{t('series-count', {num: stats.seriesCount | number})}}
</div> </app-icon-and-title>
<div class="vr d-none d-lg-block m-2"></div> </div>
</ng-container> <div class="vr d-none d-lg-block m-2"></div>
</ng-container>
<ng-container >
<div class="col-auto mb-2"> <ng-container >
<app-icon-and-title [label]="t('total-volumes-label')" [clickable]="false" fontClasses="fas fa-book" [title]="t('total-volumes-tooltip', {count: stats.volumeCount | number})"> <div class="col-auto">
{{t('volume-count', {num: stats.volumeCount | number})}} <app-icon-and-title [label]="t('total-volumes-label')" [clickable]="false" fontClasses="fas fa-book" [title]="t('total-volumes-tooltip', {count: stats.volumeCount | number})">
</app-icon-and-title> {{t('volume-count', {num: stats.volumeCount | number})}}
</div> </app-icon-and-title>
<div class="vr d-none d-lg-block m-2"></div> </div>
</ng-container> <div class="vr d-none d-lg-block m-2"></div>
</ng-container>
<ng-container>
<div class="col-auto mb-2"> <ng-container>
<app-icon-and-title [label]="t('total-files-label')" [clickable]="false" fontClasses="fa-regular fa-file" [title]="t('total-files-tooltip', {count: stats.totalFiles | number})"> <div class="col-auto">
{{t('file-count', {num: stats.totalFiles | number})}} <app-icon-and-title [label]="t('total-files-label')" [clickable]="false" fontClasses="fa-regular fa-file" [title]="t('total-files-tooltip', {count: stats.totalFiles | number})">
</app-icon-and-title> {{t('file-count', {num: stats.totalFiles | number})}}
</div> </app-icon-and-title>
<div class="vr d-none d-lg-block m-2"></div> </div>
</ng-container> <div class="vr d-none d-lg-block m-2"></div>
</ng-container>
<ng-container>
<div class="col-auto mb-2"> <ng-container>
<app-icon-and-title [label]="t('total-size-label')" [clickable]="false" fontClasses="fa-solid fa-scale-unbalanced" [title]="t('total-size-label')"> <div class="col-auto">
{{stats.totalSize | bytes}} <app-icon-and-title [label]="t('total-size-label')" [clickable]="false" fontClasses="fa-solid fa-scale-unbalanced" [title]="t('total-size-label')">
</app-icon-and-title> {{stats.totalSize | bytes}}
</div> </app-icon-and-title>
<div class="vr d-none d-lg-block m-2"></div> </div>
</ng-container> <div class="vr d-none d-lg-block m-2"></div>
</ng-container>
<ng-container>
<div class="col-auto mb-2"> <ng-container>
<app-icon-and-title [label]="t('total-genres-label')" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-genres-tooltip', {count: stats.totalGenres | number})" (click)="openGenreList();$event.stopPropagation();"> <div class="col-auto">
{{t('genre-count', {num: stats.totalGenres | compactNumber})}} <app-icon-and-title [label]="t('total-genres-label')" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-genres-tooltip', {count: stats.totalGenres | number})" (click)="openGenreList();$event.stopPropagation();">
</app-icon-and-title> {{t('genre-count', {num: stats.totalGenres | compactNumber})}}
</div> </app-icon-and-title>
<div class="vr d-none d-lg-block m-2"></div> </div>
</ng-container> <div class="vr d-none d-lg-block m-2"></div>
</ng-container>
<ng-container>
<div class="col-auto mb-2"> <ng-container>
<app-icon-and-title [label]="t('total-tags-label')" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-tags-tooltip', {count: stats.totalTags | number})" (click)="openTagList();$event.stopPropagation();"> <div class="col-auto">
{{t('tag-count', {num: stats.totalTags | compactNumber})}} <app-icon-and-title [label]="t('total-tags-label')" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-tags-tooltip', {count: stats.totalTags | number})" (click)="openTagList();$event.stopPropagation();">
</app-icon-and-title> {{t('tag-count', {num: stats.totalTags | compactNumber})}}
</div> </app-icon-and-title>
<div class="vr d-none d-lg-block m-2"></div> </div>
</ng-container> <div class="vr d-none d-lg-block m-2"></div>
</ng-container>
<ng-container>
<div class="col-auto mb-2"> <ng-container>
<app-icon-and-title [label]="t('total-people-label')" [clickable]="true" fontClasses="fa-solid fa-user-tag" [title]="t('total-people-tooltip', {count: stats.totalPeople | number})" (click)="openPeopleList();$event.stopPropagation();"> <div class="col-auto">
{{t('people-count', {num: stats.totalPeople | compactNumber})}} <app-icon-and-title [label]="t('total-people-label')" [clickable]="true" fontClasses="fa-solid fa-user-tag" [title]="t('total-people-tooltip', {count: stats.totalPeople | number})" (click)="openPeopleList();$event.stopPropagation();">
</app-icon-and-title> {{t('people-count', {num: stats.totalPeople | compactNumber})}}
</div> </app-icon-and-title>
<div class="vr d-none d-lg-block m-2"></div> </div>
</ng-container> <div class="vr d-none d-lg-block m-2"></div>
</ng-container>
<ng-container>
<div class="col-auto mb-2"> <ng-container>
<app-icon-and-title [label]="t('total-read-time-label')" [clickable]="false" fontClasses="fas fa-eye" [title]="t('total-read-time-tooltip', {count: stats.totalReadingTime | number})"> <div class="col-auto">
{{stats.totalReadingTime | timeDuration}} <app-icon-and-title [label]="t('total-read-time-label')" [clickable]="false" fontClasses="fas fa-eye" [title]="t('total-read-time-tooltip', {count: stats.totalReadingTime | number})">
</app-icon-and-title> {{stats.totalReadingTime | timeDuration}}
</div> </app-icon-and-title>
</ng-container> </div>
</div> </ng-container>
<div class="grid row g-0 pt-2 pb-2 d-flex justify-content-around">
<div class="col-auto">
<app-stat-list [data$]="releaseYears$" [title]="t('release-years-title')" [label]="t('series')"></app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="mostActiveUsers$" [title]="t('most-active-users-title')" [label]="t('reads')"></app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="mostActiveLibrary$" [title]="t('popular-libraries-title')" [label]="t('reads')"></app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="mostActiveSeries$" [title]="t('popular-series-title')" [image]="seriesImage" [handleClick]="openSeries">
</app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="recentlyRead$" [title]="t('recently-read-title')" [image]="seriesImage" [handleClick]="openSeries"></app-stat-list>
</div> </div>
</div> </div>
<div class="row g-0 pt-2 pb-2"> <div class="setting-section-break"></div>
<app-top-readers></app-top-readers>
<div class="section">
<div class="grid row g-0 pt-2 pb-2 d-flex justify-content-around">
<div class="col-auto">
<app-stat-list [data$]="releaseYears$" [title]="t('release-years-title')" [label]="t('series')"></app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="mostActiveUsers$" [title]="t('most-active-users-title')" [label]="t('reads')"></app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="mostActiveLibrary$" [title]="t('popular-libraries-title')" [label]="t('reads')"></app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="mostActiveSeries$" [title]="t('popular-series-title')" [image]="seriesImage" [handleClick]="openSeries">
</app-stat-list>
</div>
<div class="col-auto">
<app-stat-list [data$]="recentlyRead$" [title]="t('recently-read-title')" [image]="seriesImage" [handleClick]="openSeries"></app-stat-list>
</div>
</div>
</div> </div>
<div class="row g-0 pt-4 pb-2"> <div class="setting-section-break"></div>
<app-file-breakdown-stats></app-file-breakdown-stats>
<div class="section">
<div class="row g-0 pt-2 pb-2">
<app-top-readers></app-top-readers>
</div>
</div> </div>
<div class="row g-0 pt-4 pb-2"> <div class="setting-section-break"></div>
<app-publication-status-stats></app-publication-status-stats>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-file-breakdown-stats></app-file-breakdown-stats>
</div>
</div> </div>
<div class="row g-0 pt-4 pb-2"> <div class="setting-section-break"></div>
<app-reading-activity [isAdmin]="true"></app-reading-activity>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-publication-status-stats></app-publication-status-stats>
</div>
</div> </div>
<div class="row g-0 pt-4 pb-2"> <div class="setting-section-break"></div>
<app-day-breakdown></app-day-breakdown>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-reading-activity [isAdmin]="true"></app-reading-activity>
</div>
</div>
<div class="setting-section-break"></div>
<div class="section">
<div class="row g-0 pt-4 pb-2">
<app-day-breakdown></app-day-breakdown>
</div>
</div> </div>
</ng-container> </ng-container>

2
UI/Web/src/app/statistics/_components/user-stats-info-cards/user-stats-info-cards.component.html
View file

@ -1,5 +1,5 @@
<ng-container *transloco="let t; read:'user-stats-info-cards'"> <ng-container *transloco="let t; read:'user-stats-info-cards'">
<div class="row g-0 mt-4 mb-3 d-flex justify-content-around"> <div class="row g-0 d-flex justify-content-around">
<ng-container> <ng-container>
<div class="col-auto mb-2"> <div class="col-auto mb-2">
<app-icon-and-title [label]="t('total-pages-read-label')" [clickable]="true" fontClasses="fa-regular fa-file-lines" <app-icon-and-title [label]="t('total-pages-read-label')" [clickable]="true" fontClasses="fa-regular fa-file-lines"

37
UI/Web/src/app/statistics/_components/user-stats/user-stats.component.html
View file

@ -1,23 +1,36 @@
<ng-container *transloco="let t; read:'user-stats'"> <ng-container *transloco="let t; read:'user-stats'">
<div class="vstack gap-3" *ngIf="userId"> <div class="vstack gap-3" *ngIf="userId">
<div class="section">
<div class="row g-0 d-flex justify-content-around"> <div class="row g-0 d-flex justify-content-around">
<ng-container *ngIf="userStats$ | async as userStats"> <ng-container *ngIf="userStats$ | async as userStats">
<app-user-stats-info-cards [totalPagesRead]="userStats.totalPagesRead" [totalWordsRead]="userStats.totalWordsRead" [timeSpentReading]="userStats.timeSpentReading" <app-user-stats-info-cards [totalPagesRead]="userStats.totalPagesRead" [totalWordsRead]="userStats.totalWordsRead" [timeSpentReading]="userStats.timeSpentReading"
[chaptersRead]="userStats.chaptersRead" [lastActive]="userStats.lastActive" [avgHoursPerWeekSpentReading]="userStats.avgHoursPerWeekSpentReading"></app-user-stats-info-cards> [chaptersRead]="userStats.chaptersRead" [lastActive]="userStats.lastActive" [avgHoursPerWeekSpentReading]="userStats.avgHoursPerWeekSpentReading"></app-user-stats-info-cards>
</ng-container> </ng-container>
</div>
</div> </div>
<div class="row g-0 fixed-row"> <div class="setting-section-break"></div>
<app-reading-activity [userId]="userId" [isAdmin]="(accountService.isAdmin$ | async) || false" [individualUserMode]="true"></app-reading-activity>
<div class="section">
<div class="row g-0 fixed-row">
<app-reading-activity [userId]="userId" [isAdmin]="(accountService.isAdmin$ | async) || false" [individualUserMode]="true"></app-reading-activity>
</div>
</div> </div>
<div class="row g-0 fixed-row"> <div class="setting-section-break"></div>
<app-day-breakdown [userId]="userId"></app-day-breakdown>
<div class="section">
<div class="row g-0 fixed-row">
<app-day-breakdown [userId]="userId"></app-day-breakdown>
</div>
</div> </div>
<div class="row g-0 fixed-row"> <div class="setting-section-break"></div>
<app-stat-list [data$]="percentageRead$" [label]="t('read-percentage')" [title]="t('library-read-progress-title')"></app-stat-list>
<div class="section">
<div class="row g-0 fixed-row">
<app-stat-list [data$]="percentageRead$" [label]="t('read-percentage')" [title]="t('library-read-progress-title')"></app-stat-list>
</div>
</div> </div>
</div> </div>

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

@ -7,58 +7,59 @@
</div> </div>
<p>{{t('description')}}</p> <p>{{t('description')}}</p>
<div class="section">
<ngx-datatable <ngx-datatable
class="bootstrap" class="bootstrap"
[rows]="devices" [rows]="devices"
[columnMode]="ColumnMode.flex" [columnMode]="ColumnMode.flex"
rowHeight="auto" rowHeight="auto"
[footerHeight]="50" [footerHeight]="50"
[limit]="15" [limit]="15"
> >
<ngx-datatable-column prop="name" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="3"> <ngx-datatable-column prop="name" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="3">
<ng-template let-column="column" ngx-datatable-header-template> <ng-template let-column="column" ngx-datatable-header-template>
{{t('name-label')}} {{t('name-label')}}
</ng-template> </ng-template>
<ng-template let-item="row" ngx-datatable-cell-template> <ng-template let-item="row" ngx-datatable-cell-template>
{{ item.name }} {{ item.name }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column prop="emailAddress" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="1"> <ngx-datatable-column prop="emailAddress" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="1">
<ng-template let-column="column" ngx-datatable-header-template> <ng-template let-column="column" ngx-datatable-header-template>
{{t('email-label')}} {{t('email-label')}}
</ng-template> </ng-template>
<ng-template let-item="row" let-idx="index" ngx-datatable-cell-template> <ng-template let-item="row" let-idx="index" ngx-datatable-cell-template>
{{ item.emailAddress }} {{ item.emailAddress }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column prop="platform" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1"> <ngx-datatable-column prop="platform" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
<ng-template let-column="column" ngx-datatable-header-template> <ng-template let-column="column" ngx-datatable-header-template>
{{t('platform-label')}} {{t('platform-label')}}
</ng-template> </ng-template>
<ng-template let-item="row" ngx-datatable-cell-template> <ng-template let-item="row" ngx-datatable-cell-template>
{{ item.platform | devicePlatform }} {{ item.platform | devicePlatform }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="actions" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1"> <ngx-datatable-column name="actions" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
<ng-template let-column="column" ngx-datatable-header-template> <ng-template let-column="column" ngx-datatable-header-template>
</ng-template> </ng-template>
<ng-template let-item="row" ngx-datatable-cell-template> <ng-template let-item="row" ngx-datatable-cell-template>
<button class="btn btn-danger me-2" (click)="deleteDevice(item)"> <button class="btn btn-danger me-2" (click)="deleteDevice(item)">
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
<span class="visually-hidden">{{t('delete')}}</span> <span class="visually-hidden">{{t('delete')}}</span>
</button> </button>
<button class="btn btn-primary" (click)="editDevice(item)"> <button class="btn btn-primary" (click)="editDevice(item)">
<i class="fa fa-pen" aria-hidden="true"></i> <i class="fa fa-pen" aria-hidden="true"></i>
<span class="visually-hidden">{{t('edit')}}</span> <span class="visually-hidden">{{t('edit')}}</span>
</button> </button>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
</ngx-datatable> </ngx-datatable>
</div>
</ng-container> </ng-container>

15
UI/Web/src/app/user-settings/manage-opds/manage-opds.component.html
View file

@ -5,14 +5,17 @@
<p>{{t('clients-opds-description')}}</p> <p>{{t('clients-opds-description')}}</p>
<div class="section">
<app-api-key [hideData]="true" [title]="t('clients-api-key-label')" [tooltipText]="t('clients-api-key-tooltip')" [showRefresh]="true"></app-api-key> <app-api-key [hideData]="true" [title]="t('clients-api-key-label')" [tooltipText]="t('clients-api-key-tooltip')" [showRefresh]="true"></app-api-key>
</div>
@if (opdsEnabled && opdsUrl) { @if (opdsEnabled && opdsUrl) {
<div class="mt-4"> <div class="setting-section-break"></div>
<app-api-key [title]="t('clients-opds-url-label')" [tooltipText]="t('clients-opds-url-tooltip') + ' ' + opdsUrlLink" [hideData]="true" [showRefresh]="false" <div class="section">
[transform]="makeUrl"></app-api-key> <div>
<app-api-key [title]="t('clients-opds-url-label')" [tooltipText]="t('clients-opds-url-tooltip') + ' ' + opdsUrlLink" [hideData]="true" [showRefresh]="false"
[transform]="makeUrl"></app-api-key>
</div>
</div> </div>
} }

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

@ -5,493 +5,500 @@
@if (user) { @if (user) {
<form [formGroup]="settingsForm"> <form [formGroup]="settingsForm">
<h4>{{t('global-settings-title')}}</h4> <div class="section">
<ng-container> <h4>{{t('global-settings-title')}}</h4>
<ng-container>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('locale-label')" [subtitle]="t('locale-tooltip')" labelId="locale"> <div class="row g-0 mt-4 mb-4">
<ng-template #view> <app-setting-item [title]="t('locale-label')" [subtitle]="t('locale-tooltip')" labelId="locale">
{{Locale | titlecase}} <ng-template #view>
</ng-template> {{Locale | titlecase}}
<ng-template #edit> </ng-template>
<select class="form-select" aria-describedby="global-header" formControlName="locale" id="locale"> <ng-template #edit>
@for(opt of locales; track opt.renderName) { <select class="form-select" aria-describedby="global-header" formControlName="locale" id="locale">
<option [value]="opt.fileName">{{opt.renderName | titlecase}} ({{opt.translationCompletion | number:'1.0-1'}}%)</option> @for(opt of locales; track opt.renderName) {
} <option [value]="opt.fileName">{{opt.renderName | titlecase}} ({{opt.translationCompletion | number:'1.0-1'}}%)</option>
</select> }
</ng-template> </select>
</app-setting-item> </ng-template>
</div> </app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('blur-unread-summaries-label')" [subtitle]="t('blur-unread-summaries-tooltip')"> <div class="row g-0 mt-4 mb-4">
<ng-template #switch> <app-setting-switch [title]="t('blur-unread-summaries-label')" [subtitle]="t('blur-unread-summaries-tooltip')">
<div class="form-check form-switch float-end"> <ng-template #switch>
<input type="checkbox" role="switch" id="blur-unread-summaries" <div class="form-check form-switch float-end">
formControlName="blurUnreadSummaries" class="form-check-input" <input type="checkbox" role="switch" id="blur-unread-summaries"
aria-labelledby="auto-close-label"> formControlName="blurUnreadSummaries" class="form-check-input"
</div> aria-labelledby="auto-close-label">
</ng-template> </div>
</app-setting-switch> </ng-template>
</div> </app-setting-switch>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('prompt-on-download-label')" [subtitle]="t('prompt-on-download-tooltip', {size: '100'})"> <div class="row g-0 mt-4 mb-4">
<ng-template #switch> <app-setting-switch [title]="t('prompt-on-download-label')" [subtitle]="t('prompt-on-download-tooltip', {size: '100'})">
<div class="form-check form-switch float-end"> <ng-template #switch>
<input type="checkbox" role="switch" id="prompt-on-download" <div class="form-check form-switch float-end">
formControlName="promptForDownloadSize" class="form-check-input" <input type="checkbox" role="switch" id="prompt-on-download"
aria-labelledby="auto-close-label"> formControlName="promptForDownloadSize" class="form-check-input"
</div> aria-labelledby="auto-close-label">
</ng-template> </div>
</app-setting-switch> </ng-template>
</div> </app-setting-switch>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('disable-animations-label')" [subtitle]="t('disable-animations-tooltip')"> <div class="row g-0 mt-4 mb-4">
<ng-template #switch> <app-setting-switch [title]="t('disable-animations-label')" [subtitle]="t('disable-animations-tooltip')">
<div class="form-check form-switch float-end"> <ng-template #switch>
<input type="checkbox" role="switch" id="disable-animations" <div class="form-check form-switch float-end">
formControlName="noTransitions" class="form-check-input" <input type="checkbox" role="switch" id="disable-animations"
aria-labelledby="auto-close-label"> formControlName="noTransitions" class="form-check-input"
</div> aria-labelledby="auto-close-label">
</ng-template> </div>
</app-setting-switch> </ng-template>
</div> </app-setting-switch>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('collapse-series-relationships-label')" [subtitle]="t('collapse-series-relationships-tooltip')"> <div class="row g-0 mt-4 mb-4">
<ng-template #switch> <app-setting-switch [title]="t('collapse-series-relationships-label')" [subtitle]="t('collapse-series-relationships-tooltip')">
<div class="form-check form-switch float-end"> <ng-template #switch>
<input type="checkbox" role="switch" id="collapse-series-relationships" <div class="form-check form-switch float-end">
formControlName="collapseSeriesRelationships" class="form-check-input" <input type="checkbox" role="switch" id="collapse-series-relationships"
aria-labelledby="auto-close-label"> formControlName="collapseSeriesRelationships" class="form-check-input"
</div> aria-labelledby="auto-close-label">
</ng-template> </div>
</app-setting-switch> </ng-template>
</div> </app-setting-switch>
</div>
<div class="row g-0 mt-2">
<app-setting-switch [title]="t('share-series-reviews-label')" [subtitle]="t('share-series-reviews-tooltip')"> <div class="row g-0 mt-2">
<ng-template #switch> <app-setting-switch [title]="t('share-series-reviews-label')" [subtitle]="t('share-series-reviews-tooltip')">
<div class="form-check form-switch float-end"> <ng-template #switch>
<input type="checkbox" role="switch" id="share-series-reviews" <div class="form-check form-switch float-end">
formControlName="shareReviews" class="form-check-input" <input type="checkbox" role="switch" id="share-series-reviews"
aria-labelledby="auto-close-label"> formControlName="shareReviews" class="form-check-input"
</div> aria-labelledby="auto-close-label">
</ng-template> </div>
</app-setting-switch> </ng-template>
</div> </app-setting-switch>
</ng-container> </div>
</ng-container>
</div>
<div class="setting-section-break"></div> <div class="setting-section-break"></div>
@if (licenseService.hasValidLicense$ | async) { @if (licenseService.hasValidLicense$ | async) {
<h4 id="kavitaplus-heading" class="mt-3">{{t('kavitaplus-settings-title')}}</h4> <div class="section">
<h4 id="kavitaplus-heading" class="mt-3">{{t('kavitaplus-settings-title')}}</h4>
<div class="row g-0 mt-4 mb-4">
@if(settingsForm.get('aniListScrobblingEnabled'); as formControl) { <div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('anilist-scrobbling-label')" [subtitle]="t('anilist-scrobbling-tooltip')"> @if(settingsForm.get('aniListScrobblingEnabled'); as formControl) {
<ng-template #switch> <app-setting-switch [title]="t('anilist-scrobbling-label')" [subtitle]="t('anilist-scrobbling-tooltip')">
<div class="form-check form-switch float-end"> <ng-template #switch>
<input id="setting-anilist-scrobbling" type="checkbox" <div class="form-check form-switch float-end">
class="form-check-input" formControlName="aniListScrobblingEnabled"> <input id="setting-anilist-scrobbling" type="checkbox"
</div> class="form-check-input" formControlName="aniListScrobblingEnabled">
</ng-template> </div>
</app-setting-switch> </ng-template>
} </app-setting-switch>
}
</div>
<div class="row g-0 mt-4 mb-4">
@if(settingsForm.get('wantToReadSync'); as formControl) {
<app-setting-switch [title]="t('want-to-read-sync-label')" [subtitle]="t('want-to-read-sync-tooltip')">
<ng-template #switch>
<div class="form-check form-switch float-end">
<input id="setting-want-to-read-sync" type="checkbox" class="form-check-input" formControlName="wantToReadSync">
</div>
</ng-template>
</app-setting-switch>
}
</div>
</div> </div>
<div class="row g-0 mt-4 mb-4">
@if(settingsForm.get('wantToReadSync'); as formControl) {
<app-setting-switch [title]="t('want-to-read-sync-label')" [subtitle]="t('want-to-read-sync-tooltip')">
<ng-template #switch>
<div class="form-check form-switch float-end">
<input id="setting-want-to-read-sync" type="checkbox" class="form-check-input" formControlName="wantToReadSync">
</div>
</ng-template>
</app-setting-switch>
}
</div>
<div class="setting-section-break"></div>
} }
<div class="section">
<h4 id="image-reader-heading" class="mt-3">{{t('image-reader-settings-title')}}</h4> <h4 id="image-reader-heading">{{t('image-reader-settings-title')}}</h4>
<ng-container> <ng-container>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('reading-direction-label')" [subtitle]="t('reading-direction-tooltip')"> <app-setting-item [title]="t('reading-direction-label')" [subtitle]="t('reading-direction-tooltip')">
<ng-template #view> <ng-template #view>
{{settingsForm.get('readingDirection')!.value | readingDirection}} {{settingsForm.get('readingDirection')!.value | readingDirection}}
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<select class="form-select" aria-describedby="image-reader-heading" <select class="form-select" aria-describedby="image-reader-heading"
formControlName="readingDirection"> formControlName="readingDirection">
@for (opt of readingDirections; track opt) { @for (opt of readingDirections; track opt) {
<option [value]="opt.value">{{opt.value | readingDirection}}</option> <option [value]="opt.value">{{opt.value | readingDirection}}</option>
} }
</select> </select>
</ng-template> </ng-template>
</app-setting-item> </app-setting-item>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('scaling-option-label')" [subtitle]="t('scaling-option-tooltip')"> <app-setting-item [title]="t('scaling-option-label')" [subtitle]="t('scaling-option-tooltip')">
<ng-template #view> <ng-template #view>
{{settingsForm.get('scalingOption')!.value | scalingOption}} {{settingsForm.get('scalingOption')!.value | scalingOption}}
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<select class="form-select" aria-describedby="image-reader-heading" <select class="form-select" aria-describedby="image-reader-heading"
formControlName="scalingOption"> formControlName="scalingOption">
@for (opt of scalingOptions; track opt) { @for (opt of scalingOptions; track opt) {
<option [value]="opt.value">{{opt.value | scalingOption}}</option> <option [value]="opt.value">{{opt.value | scalingOption}}</option>
} }
</select> </select>
</ng-template> </ng-template>
</app-setting-item> </app-setting-item>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('page-splitting-label')" [subtitle]="t('page-splitting-tooltip')"> <app-setting-item [title]="t('page-splitting-label')" [subtitle]="t('page-splitting-tooltip')">
<ng-template #view> <ng-template #view>
{{settingsForm.get('pageSplitOption')!.value | pageSplitOption}} {{settingsForm.get('pageSplitOption')!.value | pageSplitOption}}
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<select class="form-select" aria-describedby="image-reader-heading" <select class="form-select" aria-describedby="image-reader-heading"
formControlName="pageSplitOption"> formControlName="pageSplitOption">
@for (opt of pageSplitOptions; track opt) { @for (opt of pageSplitOptions; track opt) {
<option [value]="opt.value">{{opt.value | pageSplitOption}}</option> <option [value]="opt.value">{{opt.value | pageSplitOption}}</option>
} }
</select> </select>
</ng-template> </ng-template>
</app-setting-item> </app-setting-item>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('reading-mode-label')" [subtitle]="t('reading-mode-tooltip')"> <app-setting-item [title]="t('reading-mode-label')" [subtitle]="t('reading-mode-tooltip')">
<ng-template #view> <ng-template #view>
{{settingsForm.get('readerMode')!.value | readerMode}} {{settingsForm.get('readerMode')!.value | readerMode}}
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<select class="form-select" aria-describedby="image-reader-heading" <select class="form-select" aria-describedby="image-reader-heading"
formControlName="readerMode"> formControlName="readerMode">
@for (opt of readerModes; track opt) { @for (opt of readerModes; track opt) {
<option [value]="opt.value">{{opt.value | readerMode}}</option> <option [value]="opt.value">{{opt.value | readerMode}}</option>
} }
</select> </select>
</ng-template> </ng-template>
</app-setting-item> </app-setting-item>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('layout-mode-label')" [subtitle]="t('layout-mode-tooltip')"> <app-setting-item [title]="t('layout-mode-label')" [subtitle]="t('layout-mode-tooltip')">
<ng-template #view> <ng-template #view>
{{settingsForm.get('layoutMode')!.value | layoutMode}} {{settingsForm.get('layoutMode')!.value | layoutMode}}
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<select class="form-select" aria-describedby="image-reader-heading" <select class="form-select" aria-describedby="image-reader-heading"
formControlName="layoutMode"> formControlName="layoutMode">
@for (opt of layoutModes; track opt) { @for (opt of layoutModes; track opt) {
<option [value]="opt.value">{{opt.value | layoutMode}}</option> <option [value]="opt.value">{{opt.value | layoutMode}}</option>
} }
</select> </select>
</ng-template> </ng-template>
</app-setting-item> </app-setting-item>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('background-color-label')" [subtitle]="t('background-color-tooltip')"> <app-setting-item [title]="t('background-color-label')" [subtitle]="t('background-color-tooltip')">
<ng-template #view> <ng-template #view>
<div class="color-box-container"> <div class="color-box-container">
<div class="color-box" [ngStyle]="{'background-color': user.preferences!.backgroundColor}"></div> <div class="color-box" [ngStyle]="{'background-color': user.preferences!.backgroundColor}"></div>
<span class="hex-code">{{ user.preferences!.backgroundColor.toUpperCase() }}</span> <span class="hex-code">{{ user.preferences!.backgroundColor.toUpperCase() }}</span>
</div> </div>
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<input [value]="user!.preferences!.backgroundColor" class="form-control" <input [value]="user!.preferences!.backgroundColor" class="form-control"
(colorPickerChange)="handleBackgroundColorChange($event)" (colorPickerChange)="handleBackgroundColorChange($event)"
[style.background]="user!.preferences!.backgroundColor" [cpAlphaChannel]="'disabled'" [style.background]="user!.preferences!.backgroundColor" [cpAlphaChannel]="'disabled'"
[(colorPicker)]="user!.preferences!.backgroundColor" /> [(colorPicker)]="user!.preferences!.backgroundColor" />
</ng-template> </ng-template>
</app-setting-item> </app-setting-item>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('auto-close-menu-label')" [subtitle]="t('auto-close-menu-tooltip')"> <app-setting-switch [title]="t('auto-close-menu-label')" [subtitle]="t('auto-close-menu-tooltip')">
<ng-template #switch> <ng-template #switch>
<div class="form-check form-switch float-end"> <div class="form-check form-switch float-end">
<input type="checkbox" role="switch" <input type="checkbox" role="switch"
formControlName="autoCloseMenu" class="form-check-input" formControlName="autoCloseMenu" class="form-check-input"
aria-labelledby="auto-close-label"> aria-labelledby="auto-close-label">
</div> </div>
</ng-template> </ng-template>
</app-setting-switch> </app-setting-switch>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('show-screen-hints-label')" [subtitle]="t('show-screen-hints-tooltip')"> <app-setting-switch [title]="t('show-screen-hints-label')" [subtitle]="t('show-screen-hints-tooltip')">
<ng-template #switch> <ng-template #switch>
<div class="form-check form-switch float-end"> <div class="form-check form-switch float-end">
<input type="checkbox" role="switch" <input type="checkbox" role="switch"
formControlName="showScreenHints" class="form-check-input" formControlName="showScreenHints" class="form-check-input"
aria-labelledby="auto-close-label"> aria-labelledby="auto-close-label">
</div> </div>
</ng-template> </ng-template>
</app-setting-switch> </app-setting-switch>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('emulate-comic-book-label')" [subtitle]="t('emulate-comic-book-tooltip')"> <app-setting-switch [title]="t('emulate-comic-book-label')" [subtitle]="t('emulate-comic-book-tooltip')">
<ng-template #switch> <ng-template #switch>
<div class="form-check form-switch float-end"> <div class="form-check form-switch float-end">
<input type="checkbox" role="switch" id="emulate-comic-book" <input type="checkbox" role="switch" id="emulate-comic-book"
formControlName="emulateBook" class="form-check-input" formControlName="emulateBook" class="form-check-input"
aria-labelledby="auto-close-label"> aria-labelledby="auto-close-label">
</div> </div>
</ng-template> </ng-template>
</app-setting-switch> </app-setting-switch>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('swipe-to-paginate-label')" [subtitle]="t('swipe-to-paginate-tooltip')"> <app-setting-switch [title]="t('swipe-to-paginate-label')" [subtitle]="t('swipe-to-paginate-tooltip')">
<ng-template #switch> <ng-template #switch>
<div class="form-check form-switch float-end"> <div class="form-check form-switch float-end">
<input type="checkbox" role="switch" id="swipe-to-paginate" <input type="checkbox" role="switch" id="swipe-to-paginate"
formControlName="swipeToPaginate" class="form-check-input" formControlName="swipeToPaginate" class="form-check-input"
aria-labelledby="auto-close-label"> aria-labelledby="auto-close-label">
</div> </div>
</ng-template> </ng-template>
</app-setting-switch> </app-setting-switch>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('allow-auto-webtoon-reader-label')" [subtitle]="t('allow-auto-webtoon-reader-tooltip')"> <app-setting-switch [title]="t('allow-auto-webtoon-reader-label')" [subtitle]="t('allow-auto-webtoon-reader-tooltip')">
<ng-template #switch> <ng-template #switch>
<div class="form-check form-switch float-end"> <div class="form-check form-switch float-end">
<input type="checkbox" role="switch" id="allow-auto-webtoon-reader" <input type="checkbox" role="switch" id="allow-auto-webtoon-reader"
formControlName="allowAutomaticWebtoonReaderDetection" class="form-check-input" formControlName="allowAutomaticWebtoonReaderDetection" class="form-check-input"
aria-labelledby="auto-close-label"> aria-labelledby="auto-close-label">
</div> </div>
</ng-template> </ng-template>
</app-setting-switch> </app-setting-switch>
</div> </div>
</ng-container> </ng-container>
</div>
<div class="setting-section-break"></div> <div class="setting-section-break"></div>
<h4 id="book-reader-heading" class="mt-3">{{t('book-reader-settings-title')}}</h4> <div class="section">
<ng-container> <h4 id="book-reader-heading">{{t('book-reader-settings-title')}}</h4>
<div class="row g-0 mt-4 mb-4"> <ng-container>
<app-setting-switch [title]="t('tap-to-paginate-label')" [subtitle]="t('tap-to-paginate-tooltip')"> <div class="row g-0 mt-4 mb-4">
<ng-template #switch> <app-setting-switch [title]="t('tap-to-paginate-label')" [subtitle]="t('tap-to-paginate-tooltip')">
<div class="form-check form-switch float-end"> <ng-template #switch>
<input type="checkbox" role="switch" id="tap-to-paginate" <div class="form-check form-switch float-end">
formControlName="bookReaderTapToPaginate" class="form-check-input" <input type="checkbox" role="switch" id="tap-to-paginate"
aria-labelledby="auto-close-label"> formControlName="bookReaderTapToPaginate" class="form-check-input"
</div> aria-labelledby="auto-close-label">
</ng-template>
</app-setting-switch>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('immersive-mode-label')" [subtitle]="t('immersive-mode-tooltip')">
<ng-template #switch>
<div class="form-check form-switch float-end">
<input type="checkbox" role="switch"
formControlName="bookReaderImmersiveMode" class="form-check-input"
aria-labelledby="auto-close-label">
</div>
</ng-template>
</app-setting-switch>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('reading-direction-label')" [subtitle]="t('reading-direction-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderReadingDirection')!.value | readingDirection}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderReadingDirection">
@for (opt of readingDirections; track opt) {
<option [value]="opt.value">{{opt.value | readingDirection}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('font-family-label')" [subtitle]="t('font-family-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderFontFamily')!.value | titlecase}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderFontFamily">
@for (opt of fontFamilies; track opt) {
<option [value]="opt">{{opt | titlecase}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('writing-style-label')" [subtitle]="t('writing-style-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderWritingStyle')!.value | writingStyle}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderWritingStyle">
@for (opt of bookWritingStyles; track opt) {
<option [value]="opt.value">{{opt.value | writingStyle}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('layout-mode-book-label')" [subtitle]="t('layout-mode-book-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderLayoutMode')!.value | bookPageLayoutMode}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderLayoutMode">
@for (opt of bookLayoutModes; track opt) {
<option [value]="opt.value">{{opt.value | bookPageLayoutMode}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('color-theme-book-label')" [subtitle]="t('color-theme-book-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderThemeName')!.value}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderThemeName">
@for (opt of bookColorThemesTranslated; track opt) {
<option [value]="opt.name">{{opt.name | titlecase}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('font-size-book-label')" [subtitle]="t('font-size-book-tooltip')">
<ng-template #view>
<span class="range-text">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span>
</ng-template>
<ng-template #edit>
<div class="row g-0">
<div class="col-10">
<input type="range" class="form-range" id="fontsize" min="50" max="300" step="10"
formControlName="bookReaderFontSize">
</div> </div>
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span> </ng-template>
</div> </app-setting-switch>
</ng-template> </div>
</app-setting-item>
</div> <div class="row g-0 mt-4 mb-4">
<app-setting-switch [title]="t('immersive-mode-label')" [subtitle]="t('immersive-mode-tooltip')">
<div class="row g-0 mt-4 mb-4"> <ng-template #switch>
<app-setting-item [title]="t('line-height-book-label')" [subtitle]="t('line-height-book-tooltip')"> <div class="form-check form-switch float-end">
<ng-template #view> <input type="checkbox" role="switch"
<span class="range-text">{{settingsForm.get('bookReaderLineSpacing')?.value + '%'}}</span> formControlName="bookReaderImmersiveMode" class="form-check-input"
</ng-template> aria-labelledby="auto-close-label">
<ng-template #edit>
<div class="row g-0">
<div class="col-10">
<input type="range" class="form-range" id="linespacing" min="100" max="200" step="10"
formControlName="bookReaderLineSpacing">
</div> </div>
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderLineSpacing')?.value + '%'}}</span> </ng-template>
</app-setting-switch>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('reading-direction-label')" [subtitle]="t('reading-direction-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderReadingDirection')!.value | readingDirection}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderReadingDirection">
@for (opt of readingDirections; track opt) {
<option [value]="opt.value">{{opt.value | readingDirection}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('font-family-label')" [subtitle]="t('font-family-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderFontFamily')!.value | titlecase}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderFontFamily">
@for (opt of fontFamilies; track opt) {
<option [value]="opt">{{opt | titlecase}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('writing-style-label')" [subtitle]="t('writing-style-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderWritingStyle')!.value | writingStyle}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderWritingStyle">
@for (opt of bookWritingStyles; track opt) {
<option [value]="opt.value">{{opt.value | writingStyle}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('layout-mode-book-label')" [subtitle]="t('layout-mode-book-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderLayoutMode')!.value | bookPageLayoutMode}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderLayoutMode">
@for (opt of bookLayoutModes; track opt) {
<option [value]="opt.value">{{opt.value | bookPageLayoutMode}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('color-theme-book-label')" [subtitle]="t('color-theme-book-tooltip')">
<ng-template #view>
{{settingsForm.get('bookReaderThemeName')!.value}}
</ng-template>
<ng-template #edit>
<select class="form-select" aria-describedby="book-reader-heading"
formControlName="bookReaderThemeName">
@for (opt of bookColorThemesTranslated; track opt) {
<option [value]="opt.name">{{opt.name | titlecase}}</option>
}
</select>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('font-size-book-label')" [subtitle]="t('font-size-book-tooltip')">
<ng-template #view>
<span class="range-text">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span>
</ng-template>
<ng-template #edit>
<div class="row g-0">
<div class="col-10">
<input type="range" class="form-range" id="fontsize" min="50" max="300" step="10"
formControlName="bookReaderFontSize">
</div>
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span>
</div> </div>
</ng-template> </ng-template>
</app-setting-item> </app-setting-item>
</div> </div>
<div class="row g-0 mt-4 mb-4"> <div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('margin-book-label')" [subtitle]="t('margin-book-tooltip')"> <app-setting-item [title]="t('line-height-book-label')" [subtitle]="t('line-height-book-tooltip')">
<ng-template #view> <ng-template #view>
<span class="range-text">{{settingsForm.get('bookReaderMargin')?.value + '%'}}</span> <span class="range-text">{{settingsForm.get('bookReaderLineSpacing')?.value + '%'}}</span>
</ng-template> </ng-template>
<ng-template #edit> <ng-template #edit>
<div class="row g-0"> <div class="row g-0">
<div class="col-10"> <div class="col-10">
<input type="range" class="form-range" id="margin" min="0" max="30" step="5" <input type="range" class="form-range" id="linespacing" min="100" max="200" step="10"
formControlName="bookReaderMargin"> formControlName="bookReaderLineSpacing">
</div>
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderLineSpacing')?.value + '%'}}</span>
</div>
</ng-template>
</app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('margin-book-label')" [subtitle]="t('margin-book-tooltip')">
<ng-template #view>
<span class="range-text">{{settingsForm.get('bookReaderMargin')?.value + '%'}}</span>
</ng-template>
<ng-template #edit>
<div class="row g-0">
<div class="col-10">
<input type="range" class="form-range" id="margin" min="0" max="30" step="5"
formControlName="bookReaderMargin">
</div>
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderMargin')?.value + '%'}}</span>
</div> </div>
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderMargin')?.value + '%'}}</span> </ng-template>
</div> </app-setting-item>
</ng-template> </div>
</app-setting-item> </ng-container>
</div> </div>
</ng-container>
<div class="setting-section-break"></div> <div class="setting-section-break"></div>
<h4 id="pdf-reader-heading" class="mt-3">{{t('pdf-reader-settings-title')}}</h4> <div class="section">
<ng-container> <h4 id="pdf-reader-heading">{{t('pdf-reader-settings-title')}}</h4>
<div class="row g-0 mt-4 mb-4"> <ng-container>
<app-setting-item [title]="t('pdf-spread-mode-label')" [subtitle]="t('pdf-spread-mode-tooltip')"> <div class="row g-0 mt-4 mb-4">
<ng-template #view> <app-setting-item [title]="t('pdf-spread-mode-label')" [subtitle]="t('pdf-spread-mode-tooltip')">
{{settingsForm.get('pdfSpreadMode')!.value | pdfSpreadMode}} <ng-template #view>
</ng-template> {{settingsForm.get('pdfSpreadMode')!.value | pdfSpreadMode}}
<ng-template #edit> </ng-template>
<select class="form-select" aria-describedby="pdf-reader-heading" <ng-template #edit>
formControlName="pdfSpreadMode"> <select class="form-select" aria-describedby="pdf-reader-heading"
@for (opt of pdfSpreadModes; track opt) { formControlName="pdfSpreadMode">
<option [value]="opt.value">{{opt.value | pdfSpreadMode}}</option> @for (opt of pdfSpreadModes; track opt) {
} <option [value]="opt.value">{{opt.value | pdfSpreadMode}}</option>
</select> }
</ng-template> </select>
</app-setting-item> </ng-template>
</div> </app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('pdf-theme-label')" [subtitle]="t('pdf-theme-tooltip')"> <div class="row g-0 mt-4 mb-4">
<ng-template #view> <app-setting-item [title]="t('pdf-theme-label')" [subtitle]="t('pdf-theme-tooltip')">
{{settingsForm.get('pdfTheme')!.value | pdfTheme}} <ng-template #view>
</ng-template> {{settingsForm.get('pdfTheme')!.value | pdfTheme}}
<ng-template #edit> </ng-template>
<select class="form-select" aria-describedby="pdf-reader-heading" <ng-template #edit>
formControlName="pdfTheme"> <select class="form-select" aria-describedby="pdf-reader-heading"
@for (opt of pdfThemes; track opt) { formControlName="pdfTheme">
<option [value]="opt.value">{{opt.value | pdfTheme}}</option> @for (opt of pdfThemes; track opt) {
} <option [value]="opt.value">{{opt.value | pdfTheme}}</option>
</select> }
</ng-template> </select>
</app-setting-item> </ng-template>
</div> </app-setting-item>
</div>
<div class="row g-0 mt-4 mb-4">
<app-setting-item [title]="t('pdf-scroll-mode-label')" [subtitle]="t('pdf-scroll-mode-tooltip')"> <div class="row g-0 mt-4 mb-4">
<ng-template #view> <app-setting-item [title]="t('pdf-scroll-mode-label')" [subtitle]="t('pdf-scroll-mode-tooltip')">
{{settingsForm.get('pdfScrollMode')!.value | pdfScrollMode}} <ng-template #view>
</ng-template> {{settingsForm.get('pdfScrollMode')!.value | pdfScrollMode}}
<ng-template #edit> </ng-template>
<select class="form-select" aria-describedby="pdf-reader-heading" <ng-template #edit>
formControlName="pdfScrollMode"> <select class="form-select" aria-describedby="pdf-reader-heading"
@for (opt of pdfScrollModes; track opt) { formControlName="pdfScrollMode">
<option [value]="opt.value">{{opt.value | pdfScrollMode}}</option> @for (opt of pdfScrollModes; track opt) {
} <option [value]="opt.value">{{opt.value | pdfScrollMode}}</option>
</select> }
</ng-template> </select>
</app-setting-item> </ng-template>
</div> </app-setting-item>
</ng-container> </div>
</ng-container>
</div>
</form> </form>
} }