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

Polish Round 2 (#2411)

Browse source
This commit is contained in:
Joe Milazzo 2023-11-07 17:42:17 -06:00 • committed by GitHub
parent ba3e760b31
commit a2fd87c454
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 213 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

10
UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html
View file

@ -13,11 +13,13 @@
<div class="d-flex justify-content-center">
<div class="d-flex justify-content-evenly">
<a style="padding-right:0px" href="javascript:void(0)" (click)="changeMode('url')"><span class="phone-hidden">Enter a </span>Url</a>
<a class="pe-0" href="javascript:void(0)" (click)="changeMode('url')">
<span class="phone-hidden">{{t('enter-an-url-pre-title', {url: ''})}}</span>{{t('url')}}
</a>
<span class="ps-1 pe-1">•</span>
<span style="padding-right:0px" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
<span class="ps-1 pe-1" style="padding-right:0px">•</span>
<a style="padding-right:0px" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
<span class="pe-0" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
<span class="ps-1 pe-1">•</span>
<a class="pe-0" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
</div>
</div>
</div>

29
UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts
View file

@ -1,4 +1,14 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, DestroyRef,
EventEmitter,
inject,
Inject,
Input,
OnInit,
Output
} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {NgxFileDropEntry, FileSystemFileEntry, NgxFileDropModule} from 'ngx-file-drop';
import { fromEvent, Subject } from 'rxjs';
@ -25,7 +35,14 @@ import {translate, TranslocoModule} from "@ngneat/transloco";
styleUrls: ['./cover-image-chooser.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CoverImageChooserComponent implements OnInit, OnDestroy {
export class CoverImageChooserComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly cdRef = inject(ChangeDetectorRef);
public readonly imageService = inject(ImageService);
public readonly fb = inject(FormBuilder);
public readonly toastr = inject(ToastrService);
public readonly uploadService = inject(UploadService);
/**
* If buttons show under images to allow immediate selection of cover images.
@ -70,10 +87,8 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp'].join(',');
mode: 'file' | 'url' | 'all' = 'all';
private readonly onDestroy = new Subject<void>();
constructor(public imageService: ImageService, private fb: FormBuilder, private toastr: ToastrService, private uploadService: UploadService,
@Inject(DOCUMENT) private document: Document, private readonly cdRef: ChangeDetectorRef) { }
constructor(@Inject(DOCUMENT) private document: Document) { }
ngOnInit(): void {
this.form = this.fb.group({
@ -83,10 +98,6 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
this.cdRef.markForCheck();
}
ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}
/**
* Generates a base64 encoding for an Image. Used in manual file upload flow.