Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
Co-authored-by: Fesaa <77553571+Fesaa@users.noreply.github.com>
This commit is contained in:
Joe Milazzo 2025-02-20 19:29:05 -06:00 committed by GitHub
parent 158c119247
commit 83c63a7904
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 126 additions and 61 deletions

View file

@ -54,7 +54,7 @@ export class ServerService {
}
checkHowOutOfDate() {
return this.http.get<string>(this.baseUrl + 'server/checkHowOutOfDate', TextResonse)
return this.http.get<string>(this.baseUrl + 'server/check-out-of-date', TextResonse)
.pipe(map(r => parseInt(r, 10)));
}

View file

@ -9,7 +9,7 @@
<form [formGroup]="formGroup">
<div class="mt-2">
<app-setting-item [title]="t('title')" (editMode)="updateEditMode($event)" [isEditMode]="!isViewMode" [showEdit]="hasLicense">
<app-setting-item [title]="t('title')" (editMode)="updateEditMode($event)" [isEditMode]="!isViewMode" [showEdit]="hasLicense" [fixedExtras]="true">
<ng-template #titleExtra>
<button class="btn btn-icon btn-sm" (click)="loadLicenseInfo(true)">
@if (isChecking) {
@ -75,10 +75,10 @@
</div>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
<!-- <button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header"-->
<!-- (click)="deleteLicense()">-->
<!-- {{t('activate-delete')}}-->
<!-- </button>-->
<button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header"
(click)="deleteLicense()">
{{t('activate-delete')}}
</button>
<button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header"
[ngbTooltip]="t('activate-reset-tooltip')"
[disabled]="!formGroup.get('email')?.value || !formGroup.get('licenseKey')?.value" (click)="resetLicense()">

View file

@ -1,7 +1,7 @@
<ng-container *transloco="let t;">
<div>
<div class="settings-row g-0 row">
<div class="col-auto setting-title edit">
<div class="col-auto {{fixedExtras ? 'setting-title no-anim edit' : 'setting-title edit'}}">
<h6 class="section-title">
@if (labelId) {
<label class="reset-label" [for]="labelId">{{title}}</label>

View file

@ -12,23 +12,23 @@
cursor: pointer;
}
.setting-title.edit:hover ~ .edit-btn{
opacity: 1;
transition: opacity 0.3s ease-out;
}
.edit-btn {
opacity: 0;
transition: opacity 0.5s ease-out;
transition-delay: 0.5s;
&:hover {
opacity: 1;
transition: opacity 0.3s ease-out;
}
.btn {
margin-bottom: 0.5em;
line-height: 1.2;
}
}
//.setting-title.no-anim.edit:hover ~ .edit-btn {
// opacity: 1;
// transition: none;
//}
//
//.edit-btn {
// opacity: 0;
// transition: opacity 0.5s ease-out;
// transition-delay: 0.5s;
//
// &:hover {
// opacity: 1;
// transition: opacity 0.3s ease-out;
// }
//}
//
//.setting-title.no-anim + .edit-btn,
//.setting-title.no-anim.edit:hover ~ .edit-btn {
// transition: none !important;
//}

View file

@ -11,7 +11,7 @@ import {TranslocoDirective} from "@jsverse/transloco";
import {NgTemplateOutlet} from "@angular/common";
import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe";
import {filter, fromEvent, tap} from "rxjs";
import {AbstractControl, FormControl} from "@angular/forms";
import {AbstractControl} from "@angular/forms";
@Component({
selector: 'app-setting-item',
@ -37,6 +37,10 @@ export class SettingItemComponent implements OnChanges {
@Input() subtitle: string | undefined = undefined;
@Input() labelId: string | undefined = undefined;
@Input() toggleOnViewClick: boolean = true;
/**
* When true, the hover animation will not be present and the titleExtras will be always visible
*/
@Input() fixedExtras: boolean = false;
@Input() control: AbstractControl<any> | null = null;
@Output() editMode = new EventEmitter<boolean>();

View file

@ -12,17 +12,14 @@ import {SiteTheme, ThemeProvider} from 'src/app/_models/preferences/site-theme';
import { User } from 'src/app/_models/user';
import { AccountService } from 'src/app/_services/account.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import { SiteThemeProviderPipe } from '../../_pipes/site-theme-provider.pipe';
import { SentenceCasePipe } from '../../_pipes/sentence-case.pipe';
import { AsyncPipe, NgTemplateOutlet} from '@angular/common';
import {translate, TranslocoDirective} from "@jsverse/transloco";
import {shareReplay} from "rxjs/operators";
import {CarouselReelComponent} from "../../carousel/_components/carousel-reel/carousel-reel.component";
import {SeriesCardComponent} from "../../cards/series-card/series-card.component";
import {ImageComponent} from "../../shared/image/image.component";
import {DownloadableSiteTheme} from "../../_models/theme/downloadable-site-theme";
import {DefaultValuePipe} from "../../_pipes/default-value.pipe";
import {SafeUrlPipe} from "../../_pipes/safe-url.pipe";
import {ScrobbleProvider} from "../../_services/scrobbling.service";
import {ConfirmService} from "../../shared/confirm.service";
import {FileSystemFileEntry, NgxFileDropEntry, NgxFileDropModule} from "ngx-file-drop";
@ -46,8 +43,8 @@ interface ThemeContainer {
styleUrls: ['./theme-manager.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [AsyncPipe, SentenceCasePipe, SiteThemeProviderPipe, TranslocoDirective, CarouselReelComponent,
SeriesCardComponent, ImageComponent, DefaultValuePipe, NgTemplateOutlet, SafeUrlPipe, NgxFileDropModule,
imports: [AsyncPipe, SentenceCasePipe, TranslocoDirective, CarouselReelComponent,
ImageComponent, DefaultValuePipe, NgTemplateOutlet, NgxFileDropModule,
ReactiveFormsModule, Select2Module, LoadingComponent]
})
export class ThemeManagerComponent {