mirror of
				https://github.com/paperless-ngx/paperless-ngx.git
				synced 2025-10-30 03:56:23 -05:00 
			
		
		
		
	better selection
This commit is contained in:
		| @@ -1,11 +1,11 @@ | |||||||
| <div class="card mb-3 bg-light shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable"> | <div class="card mb-3 bg-light shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable"> | ||||||
|   <div class="row no-gutters"> |   <div class="row no-gutters"> | ||||||
|     <div class="col-md-2 d-none d-lg-block doc-img-background" [class.doc-img-background-selected]="selected"> |     <div class="col-md-2 d-none d-lg-block doc-img-background" [class.doc-img-background-selected]="selected"> | ||||||
|       <img [src]="getThumbUrl()" class="card-img doc-img border-right" (click)="selected = selectable ? !selected : false"> |       <img [src]="getThumbUrl()" class="card-img doc-img border-right" (click)="setSelected(selectable ? !selected : false)"> | ||||||
|  |  | ||||||
|       <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected"> |       <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected"> | ||||||
|         <div class="custom-control custom-checkbox"> |         <div class="custom-control custom-checkbox"> | ||||||
|           <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked"> |           <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)"> | ||||||
|           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label> |           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label> | ||||||
|         </div> |         </div> | ||||||
|       </div> |       </div> | ||||||
|   | |||||||
| @@ -12,15 +12,11 @@ export class DocumentCardLargeComponent implements OnInit { | |||||||
|  |  | ||||||
|   constructor(private documentService: DocumentService, private sanitizer: DomSanitizer) { } |   constructor(private documentService: DocumentService, private sanitizer: DomSanitizer) { } | ||||||
|  |  | ||||||
|   _selected = false |  | ||||||
|  |  | ||||||
|   get selected() { |  | ||||||
|     return this._selected |  | ||||||
|   } |  | ||||||
|  |  | ||||||
|   @Input() |   @Input() | ||||||
|   set selected(value: boolean) { |   selected = false | ||||||
|     this._selected = value |  | ||||||
|  |   setSelected(value: boolean) { | ||||||
|  |     this.selected = value | ||||||
|     this.selectedChange.emit(value) |     this.selectedChange.emit(value) | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   | |||||||
| @@ -1,11 +1,11 @@ | |||||||
| <div class="col p-2 h-100 document-card"> | <div class="col p-2 h-100 document-card"> | ||||||
|   <div class="card h-100 shadow-sm" [class.card-selected]="selected"> |   <div class="card h-100 shadow-sm" [class.card-selected]="selected"> | ||||||
|     <div class="border-bottom" [class.doc-img-background-selected]="selected"> |     <div class="border-bottom" [class.doc-img-background-selected]="selected"> | ||||||
|       <img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !selected"> |       <img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!selected)"> | ||||||
|  |  | ||||||
|       <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected"> |       <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected"> | ||||||
|         <div class="custom-control custom-checkbox"> |         <div class="custom-control custom-checkbox"> | ||||||
|           <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked"> |           <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)"> | ||||||
|           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label> |           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label> | ||||||
|         </div> |         </div> | ||||||
|       </div> |       </div> | ||||||
|   | |||||||
| @@ -12,15 +12,11 @@ export class DocumentCardSmallComponent implements OnInit { | |||||||
|  |  | ||||||
|   constructor(private documentService: DocumentService) { } |   constructor(private documentService: DocumentService) { } | ||||||
|  |  | ||||||
|   _selected = false |  | ||||||
|  |  | ||||||
|   get selected() { |  | ||||||
|     return this._selected |  | ||||||
|   } |  | ||||||
|  |  | ||||||
|   @Input() |   @Input() | ||||||
|   set selected(value: boolean) { |   selected = false | ||||||
|     this._selected = value |  | ||||||
|  |   setSelected(value: boolean) { | ||||||
|  |     this.selected = value | ||||||
|     this.selectedChange.emit(value) |     this.selectedChange.emit(value) | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 jonaswinkler
					jonaswinkler