Added styling to indicate a selected comic [#584]

comixed · Mar 1, 2021 · 450b95b · 450b95b
1 parent d5d6455
commit 450b95b
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 10 deletions.
diff --git a/comixed-web/src/app/core/components/comic-detail-card/comic-detail-card.component.html b/comixed-web/src/app/core/components/comic-detail-card/comic-detail-card.component.html
@@ -4,14 +4,19 @@
     ><a [routerLink]="detailLink">{{ "text.view-details" | translate }}</a>
   </mat-card-subtitle>
   <mat-card-content>
-    <img
-      *ngIf="!!imageUrl"
-      [class.comic-detail-card-blurred]="blurred"
-      [src]="imageUrl"
-      [style.width]="'100%'"
-      [style.height]="'auto'"
-      [alt]="title"
-    />
+    <div
+      class="comic-detail-card cx-padding-2 cx-margin-2"
+      [class.comic-detail-card-selected]="selected"
+    >
+      <img
+        *ngIf="!!imageUrl"
+        [class.comic-detail-card-blurred]="blurred"
+        [src]="imageUrl"
+        [style.width]="'100%'"
+        [style.height]="'auto'"
+        [alt]="title"
+      />
+    </div>
     <div *ngIf="!!description" [innerHTML]="description"></div>
     <mat-progress-spinner
       *ngIf="busy"

diff --git a/comixed-web/src/app/core/components/comic-detail-card/comic-detail-card.component.scss b/comixed-web/src/app/core/components/comic-detail-card/comic-detail-card.component.scss
@@ -1,8 +1,21 @@
+@import '~styles.scss';
+
+.comic-detail-card {
+  position: relative;
+  display: inline-block;
+}
+
 .comic-detail-card-blurred {
   filter: grayscale(75%);
   filter: blur(3px);
 }
 
+.comic-detail-card-selected {
+  filter: sepia(100%) !important;
+  background-color: $cx-selected-comic-background-color !important;
+  color: $cx-selected-comic-color;
+}
+
 .comic-detail-card-busy-indicator {
   position: absolute;
   top: 50%;

diff --git a/comixed-web/src/app/core/components/comic-detail-card/comic-detail-card.component.ts b/comixed-web/src/app/core/components/comic-detail-card/comic-detail-card.component.ts
@@ -37,6 +37,7 @@ export class ComicDetailCardComponent implements OnInit, OnDestroy {
   @Input() imageHeight = '100%';
   @Input() busy = false;
   @Input() blurred = false;
+  @Input() selected = false;
 
   displayOptionSubscription: Subscription;
 

diff --git a/comixed-web/src/app/library/components/comic-covers/comic-covers.component.html b/comixed-web/src/app/library/components/comic-covers/comic-covers.component.html
@@ -33,6 +33,7 @@
           [detailLink]="['/library', 'comics', comic.id]"
           [blurred]="!comic.fileDetails"
           [busy]="!comic.fileDetails"
+          [selected]="isSelected(comic)"
         ></cx-comic-detail-card>
       </div>
     </div>

diff --git a/comixed-web/src/app/library/components/comic-covers/comic-covers.component.ts b/comixed-web/src/app/library/components/comic-covers/comic-covers.component.ts
@@ -47,6 +47,8 @@ import { TranslateService } from '@ngx-translate/core';
 export class ComicCoversComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
+  @Input() selected: Comic[] = [];
+
   readonly paginationOptions = PAGINATION_OPTIONS;
 
   langChangeSubscription: Subscription;
@@ -107,6 +109,10 @@ export class ComicCoversComponent implements OnInit, OnDestroy, AfterViewInit {
     );
   }
 
+  isSelected(comic: Comic): boolean {
+    return this.selected.includes(comic);
+  }
+
   private loadTranslations(): void {
     this.logger.debug('Loading translations');
     this.paginator._intl.itemsPerPageLabel = this.translateService.instant(

diff --git a/comixed-web/src/app/library/pages/library-group/library-group.component.html b/comixed-web/src/app/library/pages/library-group/library-group.component.html
@@ -2,4 +2,4 @@
   [comics]="comics"
   [selected]="selected"
 ></cx-library-toolbar>
-<cx-comic-covers [comics]="comics"></cx-comic-covers>
+<cx-comic-covers [comics]="comics" [selected]="selected"></cx-comic-covers>
diff --git a/comixed-web/src/app/library/pages/library/library.component.html b/comixed-web/src/app/library/pages/library/library.component.html
@@ -2,4 +2,4 @@
   [comics]="comics"
   [selected]="selected"
 ></cx-library-toolbar>
-<cx-comic-covers [comics]="comics"></cx-comic-covers>
+<cx-comic-covers [comics]="comics" [selected]="selected"></cx-comic-covers>
diff --git a/comixed-web/src/styles.scss b/comixed-web/src/styles.scss
@@ -15,6 +15,10 @@ h3 {
   text-transform: uppercase;
 }
 
+// colors
+$cx-selected-comic-background-color: #0033cc;
+$cx-selected-comic-color: #ffffff;
+
 // component sizes
 .cx-width-20 {
   width: 20%;
@@ -58,6 +62,10 @@ h3 {
   padding-right: 50px !important;
 }
 
+.cx-padding-2 {
+  padding: 2px;
+}
+
 // margins
 
 .cx-margin-left-5 {
@@ -72,6 +80,10 @@ h3 {
   margin-right: 50px !important;
 }
 
+.cx-margin-2 {
+  margin: 2px;
+}
+
 // table column widths
 
 $cx-column-small: 50px;