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

Side Nav Redesign (#2310)

Browse source
This commit is contained in:
Joe Milazzo 2023-10-14 10:07:53 -05:00 • committed by GitHub
parent 5c2ebb87cc
commit 00dddaefae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
88 changed files with 5971 additions and 572 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,8 +4,8 @@
<ng-template #tooltip>{{tooltipText}}</ng-template>
<div class="input-group">
<input #apiKey [type]="InputType" readonly class="form-control" id="api-key--{{title}}" aria-describedby="button-addon4" [value]="key" (click)="selectAll()">
<button class="btn btn-outline-secondary" type="button" (click)="show()" [title]="t('show')" *ngIf="hideData">
<span class="visually-hidden">t('show')</span><i class="fa fa-eye" aria-hidden="true"></i>
<button class="btn btn-outline-secondary" type="button" (click)="toggleVisibility()" [title]="isDataHidden ? t('show') : t('hide')" *ngIf="hideData">
<span class="visually-hidden">{{isDataHidden ? t('show') : t('hide')}}</span><i class="fa {{isDataHidden ? 'fa-eye' : 'fa-eye-slash'}}" aria-hidden="true"></i>
</button>
<button class="btn btn-outline-secondary" type="button" (click)="copy()" [title]="t('copy')">
<span class="visually-hidden">Copy</span><i class="fa fa-copy" aria-hidden="true"></i>

8
UI/Web/src/app/user-settings/api-key/api-key.component.ts
View file

@ -35,8 +35,10 @@ export class ApiKeyComponent implements OnInit {
key: string = '';
private readonly destroyRef = inject(DestroyRef);
isDataHidden: boolean = this.hideData;
get InputType() {
return this.hideData ? 'password' : 'text';
return (this.hideData && this.isDataHidden) ? 'password' : 'text';
}
constructor(private confirmService: ConfirmService, private accountService: AccountService, private toastr: ToastrService, private clipboard: Clipboard,
@ -83,8 +85,8 @@ export class ApiKeyComponent implements OnInit {
}
}
show() {
this.inputElem.nativeElement.setAttribute('type', 'text');
toggleVisibility() {
this.isDataHidden = !this.isDataHidden;
this.cdRef.markForCheck();
}

11
UI/Web/src/app/user-settings/manage-smart-filters/manage-smart-filters.component.html
View file

@ -1,11 +0,0 @@
<ul>
<li class="list-group-item" *ngFor="let f of filters">
<span (click)="loadFilter(f)">{{f.name}}</span>
<button class="btn btn-danger float-end" (click)="deleteFilter(f)">
<i class="fa-solid fa-trash" aria-hidden="true"></i>
<span class="visually-hidden">Delete</span>
</button>
</li>
<li class="list-group-item" *ngIf="filters.length === 0">No Smart Filters created</li>
</ul>

21
UI/Web/src/app/user-settings/manage-smart-filters/manage-smart-filters.component.scss
View file

@ -1,21 +0,0 @@
ul {
margin:0;
padding: 0;
li {
padding: 0.5rem 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-radius: 5px;
margin: 5px 0;
color: var(--list-group-hover-text-color);
background-color: var(--list-group-hover-bg-color);
span {
cursor: pointer;
}
}
}

51
UI/Web/src/app/user-settings/manage-smart-filters/manage-smart-filters.component.ts
View file

@ -1,51 +0,0 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FilterService} from "../../_services/filter.service";
import {SmartFilter} from "../../_models/metadata/v2/smart-filter";
import {Router} from "@angular/router";
import {ConfirmService} from "../../shared/confirm.service";
import {translate} from "@ngneat/transloco";
import {ToastrService} from "ngx-toastr";
@Component({
selector: 'app-manage-smart-filters',
standalone: true,
imports: [CommonModule],
templateUrl: './manage-smart-filters.component.html',
styleUrls: ['./manage-smart-filters.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ManageSmartFiltersComponent {
private readonly filterService = inject(FilterService);
private readonly confirmService = inject(ConfirmService);
private readonly router = inject(Router);
private readonly cdRef = inject(ChangeDetectorRef);
private readonly toastr = inject(ToastrService);
filters: Array<SmartFilter> = [];
constructor() {
this.loadData();
}
loadData() {
this.filterService.getAllFilters().subscribe(filters => {
this.filters = filters;
this.cdRef.markForCheck();
});
}
async loadFilter(f: SmartFilter) {
await this.router.navigateByUrl('all-series?' + f.filter);
}
async deleteFilter(f: SmartFilter) {
if (!await this.confirmService.confirm(translate('toasts.confirm-delete-smart-filter'))) return;
this.filterService.deleteFilter(f.id).subscribe(() => {
this.toastr.success(translate('toasts.smart-filter-deleted'));
this.loadData();
});
}
}

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

@ -428,9 +428,6 @@
<ng-container *ngIf="tab.fragment === FragmentID.Stats">
<app-user-stats></app-user-stats>
</ng-container>
<ng-container *ngIf="tab.fragment === FragmentID.SmartFilters">
<app-manage-smart-filters></app-manage-smart-filters>
</ng-container>
<ng-container *ngIf="tab.fragment === FragmentID.Scrobbling">
<app-user-scrobble-history></app-user-scrobble-history>
<app-user-holds></app-user-holds>

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

@ -48,8 +48,7 @@ import { NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLink, NgbNavContent, NgbAccor
import { SideNavCompanionBarComponent } from '../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
import {LocalizationService} from "../../_services/localization.service";
import {Language} from "../../_models/metadata/language";
import {translate, TranslocoDirective, TranslocoService} from "@ngneat/transloco";
import {ManageSmartFiltersComponent} from "../manage-smart-filters/manage-smart-filters.component";
import {translate, TranslocoDirective} from "@ngneat/transloco";
enum AccordionPanelID {
ImageReader = 'image-reader',
@ -64,9 +63,7 @@ enum FragmentID {
Theme = 'theme',
Devices = 'devices',
Stats = 'stats',
SmartFilters = 'smart-filters',
Scrobbling = 'scrobbling'
}
@Component({
@ -79,7 +76,7 @@ enum FragmentID {
ChangePasswordComponent, ChangeAgeRestrictionComponent, AnilistKeyComponent, ReactiveFormsModule, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader,
NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, NgbTooltip, NgTemplateOutlet, ColorPickerModule, ApiKeyComponent,
ThemeManagerComponent, ManageDevicesComponent, UserStatsComponent, UserScrobbleHistoryComponent, UserHoldsComponent, NgbNavOutlet, TitleCasePipe, SentenceCasePipe,
TranslocoDirective, ManageSmartFiltersComponent]
TranslocoDirective]
})
export class UserPreferencesComponent implements OnInit, OnDestroy {
@ -110,7 +107,6 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
{title: '3rd-party-clients-tab', fragment: FragmentID.Clients},
{title: 'theme-tab', fragment: FragmentID.Theme},
{title: 'devices-tab', fragment: FragmentID.Devices},
{title: 'smart-filters-tab', fragment: FragmentID.SmartFilters},
{title: 'stats-tab', fragment: FragmentID.Stats},
];
locales: Array<Language> = [{title: 'English', isoCode: 'en'}];