{{t('instructions-alt')}}
diff --git a/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss b/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss
index 69aaabed4..5ffa69d41 100644
--- a/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss
+++ b/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss
@@ -61,6 +61,12 @@
width: 100%;
}
+.accessibility-padding {
+ padding-top: 12px;
+}
+.bulk-padding {
+ padding-top: 20px;
+}
.virtual-scroller, virtual-scroller {
@@ -71,3 +77,7 @@
virtual-scroller.empty {
display: none;
}
+
+.manual-input {
+ width: 83px;
+}
diff --git a/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.ts b/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.ts
index d341c349b..36935c18b 100644
--- a/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.ts
+++ b/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.ts
@@ -1,8 +1,22 @@
import { CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, TemplateRef, TrackByFunction } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ContentChild,
+ EventEmitter,
+ inject,
+ Input,
+ Output,
+ TemplateRef,
+ TrackByFunction
+} from '@angular/core';
import { VirtualScrollerModule } from '@iharbeck/ngx-virtual-scroller';
-import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import {NgIf, NgFor, NgTemplateOutlet, NgClass} from '@angular/common';
import {TranslocoDirective} from "@ngneat/transloco";
+import {BulkSelectionService} from "../../../cards/bulk-selection.service";
+import {SeriesCardComponent} from "../../../cards/series-card/series-card.component";
+import {SideNavStream} from "../../../_models/sidenav/sidenav-stream";
export interface IndexUpdateEvent {
fromPosition: number;
@@ -22,10 +36,14 @@ export interface ItemRemoveEvent {
styleUrls: ['./draggable-ordered-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
- imports: [NgIf, VirtualScrollerModule, NgFor, NgTemplateOutlet, CdkDropList, CdkDrag, CdkDragHandle, TranslocoDirective]
+ imports: [NgIf, VirtualScrollerModule, NgFor, NgTemplateOutlet, CdkDropList, CdkDrag, CdkDragHandle, TranslocoDirective, NgClass, SeriesCardComponent]
})
export class DraggableOrderedListComponent {
+ /**
+ * After this many elements, drag and drop is disabled and we use a virtualized list instead
+ */
+ @Input() virtualizeAfter = 100;
@Input() accessibilityMode: boolean = false;
/**
* Shows the remove button on the list item
@@ -40,11 +58,17 @@ export class DraggableOrderedListComponent {
* Disables drag and drop functionality. Useful if a filter is present which will skew actual index.
*/
@Input() disabled: boolean = false;
+ /**
+ * When enabled, draggability is disabled and a checkbox renders instead of order box or drag handle
+ */
+ @Input() bulkMode: boolean = false;
@Input() trackByIdentity: TrackByFunction{{t('title-' + activeTab)}}