selection for small cards

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -1,12 +1,12 @@
 <div class="col p-2 h-100 document-card" style="width: 16rem;">
-  <div class="card h-100 shadow-sm">
-    <div class="border-bottom">
-      <img class="card-img doc-img" [src]="getThumbUrl()">
+  <div class="card h-100 shadow-sm" [class.card-selected]="selected">
+    <div class="border-bottom" [class.doc-img-background-selected]="selected">
+      <img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !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">
-          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [(ngModel)]="selected">
-          <label class="custom-control-label" for="smallCardCheck{{document.id}}">L</label>
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked">
+          <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>
 

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -1,7 +1,10 @@
+@import "/src/theme";
+
 .doc-img {
   object-fit: cover;
   object-position: top;
   height: 200px;
+  mix-blend-mode: multiply;
 }
 
 .document-card-check {
@@ -10,4 +13,12 @@
 
 .document-card:hover .document-card-check {
   display: block;
+}
+
+.card-selected {
+  border-color: $primary;
+}
+
+.doc-img-background-selected {
+  background-color: $primaryFaded;
 }

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -13,7 +13,20 @@ export class DocumentCardSmallComponent implements OnInit {
 
   constructor(private documentService: DocumentService) { }
 
-  selected = false
+  _selected = false
+
+  get selected() {
+    return this._selected
+  }
+
+  @Input()
+  set selected(value: boolean) {
+    this._selected = value
+    this.selectedChange.emit(value)
+  }
+
+  @Output()
+  selectedChange = new EventEmitter<boolean>()
 
   @Input()
   document: PaperlessDocument

src-ui/src/app/components/document-list/document-list.component.html

@@ -155,5 +155,5 @@
 
 
 <div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)"></app-document-card-small>    
+  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)"></app-document-card-small>    
 </div>

src-ui/src/theme.scss

@@ -1,5 +1,6 @@
 $paperless-green: #17541f;
 $primary: #17541f;
+$primaryFaded: #d1ddd2;
 
 $theme-colors: (
   "primary": $primary