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

UX Pass 7 (#3135)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-08-29 08:46:17 -05:00 • committed by GitHub
parent 5bf5558212
commit 79eb98a3bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
67 changed files with 1398 additions and 1006 deletions
Download patch file Download diff file Expand all files Collapse all files

46
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html
View file

@ -1,33 +1,35 @@
<ng-container *transloco="let t; read: 'bulk-operations'">
@if (bulkSelectionService.selections$ | async; as selectionCount) {
@if (selectionCount > 0) {
<div class="bulk-select mb-3 {{modalMode ? '' : 'fixed-top'}}" [ngStyle]="{'margin-top': topOffset + 'px'}">
<div class="d-flex justify-content-around align-items-center">
<div class="bulk-select-container">
<div class="bulk-select mb-3 {{modalMode ? '' : 'fixed-top'}}" [ngStyle]="{'margin-top': topOffset + 'px'}">
<div class="d-flex justify-content-around align-items-center">
<span class="highlight">
<i class="fa fa-check me-1" aria-hidden="true"></i>
{{t('items-selected',{num: selectionCount | number})}}
</span>
<span class="highlight">
<i class="fa fa-check me-1" aria-hidden="true"></i>
{{t('items-selected',{num: selectionCount | number})}}
</span>
<span>
@if (hasMarkAsUnread) {
<button class="btn btn-icon" (click)="executeAction(Action.MarkAsUnread)" [ngbTooltip]="t('mark-as-unread')" placement="bottom">
<i class="fa-regular fa-circle-check" aria-hidden="true"></i>
<span class="visually-hidden">{{t('mark-as-unread')}}</span>
</button>
}
@if (hasMarkAsRead) {
<button class="btn btn-icon" (click)="executeAction(Action.MarkAsRead)" [ngbTooltip]="t('mark-as-read')" placement="bottom">
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
<span class="visually-hidden">{{t('mark-as-read')}}</span>
</button>
<span>
@if (hasMarkAsUnread) {
<button class="btn btn-icon" (click)="executeAction(Action.MarkAsUnread)" [ngbTooltip]="t('mark-as-unread')" placement="bottom">
<i class="fa-regular fa-circle-check" aria-hidden="true"></i>
<span class="visually-hidden">{{t('mark-as-unread')}}</span>
</button>
}
<app-card-actionables [actions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" (actionHandler)="performAction($event)"></app-card-actionables>
</span>
@if (hasMarkAsRead) {
<button class="btn btn-icon" (click)="executeAction(Action.MarkAsRead)" [ngbTooltip]="t('mark-as-read')" placement="bottom">
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
<span class="visually-hidden">{{t('mark-as-read')}}</span>
</button>
}
<app-card-actionables [actions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" (actionHandler)="performAction($event)"></app-card-actionables>
</span>
<span id="bulk-actions-header" class="visually-hidden">Bulk Actions</span>
<span id="bulk-actions-header" class="visually-hidden">Bulk Actions</span>
<button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
<button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
</div>
</div>
</div>
}

18
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss
View file

@ -1,13 +1,17 @@
.bulk-select {
background-color: var(--bulk-background-color);
border-bottom: 2px solid var(--primary-color);
color: var(--bulk-selection-text-color) !important;
.bulk-select-container {
position: absolute;
.btn-icon {
color: var(--bulk-selection-text-color);
.bulk-select {
background-color: var(--bulk-selection-bg-color);
border-bottom: 2px solid var(--primary-color);
color: var(--bulk-selection-text-color) !important;
.btn-icon {
color: var(--bulk-selection-text-color);
}
}
}
.highlight {
color: var(--bulk-selection-highlight-text-color) !important;
}
}

6
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
View file

@ -48,12 +48,12 @@
flex-shrink: 0;
font-size: 13px;
overflow: hidden;
padding: 0 10px;
padding: 0 5px;
align-items: center;
justify-content: space-around;
@media (max-width: 576px) {
padding: 0 10px 0 5px;
padding: 0 5px 0 5px;
}
.btn {
@ -133,7 +133,7 @@ h2 {
cursor: pointer;
padding: 0;
margin: 0;
width: 40px;
width: 25px;
height: 25px;
position: relative;
overflow: hidden;

16
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
View file

@ -3,7 +3,7 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChild,
ContentChild, DestroyRef,
ElementRef,
EventEmitter,
HostListener,
@ -17,7 +17,7 @@ import {
TrackByFunction,
ViewChild
} from '@angular/core';
import {Router} from '@angular/router';
import {NavigationEnd, NavigationStart, Router} from '@angular/router';
import {VirtualScrollerComponent, VirtualScrollerModule} from '@iharbeck/ngx-virtual-scroller';
import {FilterSettings} from 'src/app/metadata-filter/filter-settings';
import {FilterUtilitiesService} from 'src/app/shared/_services/filter-utilities.service';
@ -36,6 +36,9 @@ import {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.com
import {TranslocoDirective} from "@jsverse/transloco";
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
import {filter, map} from "rxjs/operators";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {tap} from "rxjs";
const ANIMATION_TIME_MS = 0;
@ -56,6 +59,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
private readonly cdRef = inject(ChangeDetectorRef);
private readonly jumpbarService = inject(JumpbarService);
private readonly router = inject(Router);
private readonly destroyRef = inject(DestroyRef);
protected readonly Breakpoint = Breakpoint;
@ -138,6 +142,14 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
this.virtualScroller.refresh();
});
}
this.router.events.pipe(
filter(event => event instanceof NavigationStart),
takeUntilDestroyed(this.destroyRef),
map(evt => evt as NavigationStart),
tap(_ => this.tryToSaveJumpKey()),
).subscribe();
}

6
UI/Web/src/app/cards/card-item/card-item.component.html
View file

@ -77,7 +77,11 @@
<span class="card-title" placement="top" id="{{title}}_{{entity.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
<app-promoted-icon [promoted]="isPromoted()"></app-promoted-icon>
<app-series-format [format]="format"></app-series-format>
{{title}}
@if (linkUrl) {
<a class="dark-exempt btn-icon" href="javascript:void(0);" [routerLink]="linkUrl">{{title}}</a>
} @else {
{{title}}
}
</span>
@if (actions && actions.length > 0) {
<span class="card-actions float-end">

4
UI/Web/src/app/cards/card-item/card-item.component.ts
View file

@ -145,6 +145,10 @@ export class CardItemComponent implements OnInit {
* Will generate a button to instantly read
*/
@Input() hasReadButton = false;
/**
* A method that if defined will return the url
*/
@Input() linkUrl?: string;
/**
* Event emitted when item is clicked
*/