mirror of
				https://github.com/paperless-ngx/paperless-ngx.git
				synced 2025-11-04 03:27:12 -05:00 
			
		
		
		
	better selection
This commit is contained in:
		
							parent
							
								
									99b5e25731
								
							
						
					
					
						commit
						25fb9fb185
					
				@ -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)
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user