amorfo77/paperless-ngx
1
0 Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2026-10-20 23:08:14 +00:00
Code Issues Projects Releases Wiki Activity

Make the floating controls movable

Browse Source
This commit is contained in:
shamoon committed 2026-10-20 07:15:18 -07:00
1 parent d2ed0c55a4
commit 9b42170554
3 files changed
+21 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html
+15 -10
View File
@@ -225,7 +225,7 @@
}
</div>
}
<div class="position-relative">
<div #previewContainer class="position-relative">
<div class="zone-preview-scroll overflow-auto border" [attr.aria-busy]="previewStatus === 'loading'">
@if (previewStatus === 'error') {
<div class="py-5 px-3 text-center" role="alert">
@@ -323,15 +323,20 @@
}
</div>
@if (previewDocId && previewStatus !== 'error') {
<div class="position-absolute bottom-0 start-50 translate-middle-x z-1 mb-3 d-flex gap-2 p-1 bg-body border rounded shadow">
<div class="input-group input-group-sm w-auto flex-nowrap">
<input class="form-control flex-grow-0 preview-page-input" type="number" min="1" [max]="previewPageCount" [(ngModel)]="previewPageDisplay" [disabled]="previewStatus === 'loading'" aria-label="Page" i18n-aria-label />
<span class="input-group-text" i18n>of {{ previewPageCount ?? '?' }}</span>
</div>
<div class="input-group input-group-sm w-auto flex-nowrap" role="group" aria-label="Zoom" i18n-aria-label>
<button type="button" class="btn btn-outline-secondary" aria-label="Zoom out" i18n-aria-label [disabled]="!imageLoaded || zoom <= 0.5" (click)="zoomOut()"><i-bs name="dash"></i-bs></button>
<button type="button" class="btn btn-outline-secondary preview-zoom" title="Reset zoom" i18n-title [disabled]="!imageLoaded" (click)="resetZoom()">{{ zoom | percent: '1.0-0' }}</button>
<button type="button" class="btn btn-outline-secondary" aria-label="Zoom in" i18n-aria-label [disabled]="!imageLoaded || zoom >= 4" (click)="zoomIn()"><i-bs name="plus"></i-bs></button>
<div class="position-absolute bottom-0 start-50 translate-middle-x z-1 mb-3">
<div cdkDrag [cdkDragBoundary]="previewContainer" class="d-flex gap-2 p-1 bg-body border rounded shadow">
<span cdkDragHandle class="d-flex align-items-center text-secondary" title="Move preview controls" i18n-title aria-label="Move preview controls" i18n-aria-label>
<i-bs name="grip-vertical"></i-bs>
</span>
<div class="input-group input-group-sm w-auto flex-nowrap">
<input class="form-control flex-grow-0 preview-page-input" type="number" min="1" [max]="previewPageCount" [(ngModel)]="previewPageDisplay" [disabled]="previewStatus === 'loading'" aria-label="Page" i18n-aria-label />
<span class="input-group-text" i18n>of {{ previewPageCount ?? '?' }}</span>
</div>
<div class="input-group input-group-sm w-auto flex-nowrap" role="group" aria-label="Zoom" i18n-aria-label>
<button type="button" class="btn btn-outline-secondary" aria-label="Zoom out" i18n-aria-label [disabled]="!imageLoaded || zoom <= 0.5" (click)="zoomOut()"><i-bs name="dash"></i-bs></button>
<button type="button" class="btn btn-outline-secondary preview-zoom" title="Reset zoom" i18n-title [disabled]="!imageLoaded" (click)="resetZoom()">{{ zoom | percent: '1.0-0' }}</button>
<button type="button" class="btn btn-outline-secondary" aria-label="Zoom in" i18n-aria-label [disabled]="!imageLoaded || zoom >= 4" (click)="zoomIn()"><i-bs name="plus"></i-bs></button>
</div>
</div>
</div>
}
src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss
+4
View File
@@ -14,6 +14,10 @@
min-width: 4rem;
}
.cdk-drag-handle {
cursor: move;
}
// The typeahead popup is appended to body.
::ng-deep .ocr-template-document-results {
max-height: min(24rem, 60vh);
src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts
+2
View File
@@ -1,3 +1,4 @@
import { DragDropModule } from '@angular/cdk/drag-drop'
import { CommonModule } from '@angular/common'
import {
ChangeDetectorRef,
@@ -126,6 +127,7 @@ const RESIZE_CURSOR: Record<ResizeHandle, string> = {
selector: 'pngx-ocr-template-editor',
standalone: true,
imports: [
DragDropModule,
PageHeaderComponent,
NumberComponent,
TextComponent,