Skip to content

Commit 0df4c28

Browse files
mcpiercemcpierce
committed
Added viewing the list of comics as a grid [#2523]
1 parent 0d0480c commit 0df4c28

File tree

10 files changed

+517
-266
lines changed

10 files changed

+517
-266
lines changed

‎comixed-webui/src/app/comic-books/components/comic-grid-item/comic-grid-item.component.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div [class.cx-border-primary-5]="selected">
2+
<mat-card
3+
(click)="comicClicked.emit(comic)"
4+
[class.cx-detail-card-selected]="selected"
5+
>
6+
<mat-card-title>
7+
<span class="cx-text-nowrap" [matTooltip]="comic | comicTitle">
8+
{{ comic | comicTitle }}
9+
</span>
10+
</mat-card-title>
11+
<mat-card-content>
12+
<cx-comic-page [imageUrl]="comic | comicCoverUrl"></cx-comic-page>
13+
</mat-card-content>
14+
<mat-card-footer>
15+
<ul class="cx-grid-item-details-list">
16+
<li>
17+
<span
18+
class="cx-width-100 cx-text-nowrap"
19+
[matTooltip]="comic.filename"
20+
>
21+
{{ comic.baseFilename }}
22+
</span>
23+
</li>
24+
<li>
25+
{{
26+
"comic-grid-view.label.added-date"
27+
| translate: { date: comic.addedDate | date: "medium" }
28+
}}
29+
</li>
30+
</ul>
31+
</mat-card-footer>
32+
</mat-card>
33+
</div>

‎comixed-webui/src/app/comic-books/components/comic-grid-item/comic-grid-item.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.cx-grid-item-details-list {
2+
list-style-type: none;
3+
}

‎comixed-webui/src/app/comic-books/components/comic-grid-item/comic-grid-item.component.spec.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
* ComiXed - A digital comic book library management application.
3+
* Copyright (C) 2023, The ComiXed Project
4+
*
5+
* This program is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU General Public License as published by
7+
* the Free Software Foundation, either version 3 of the License, or
8+
* (at your option) any later version.
9+
*
10+
* This program is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU General Public License
16+
* along with this program. If not, see <http://www.gnu.org/licenses>
17+
*/
18+
19+
import { ComponentFixture, TestBed } from '@angular/core/testing';
20+
import { ComicGridItemComponent } from './comic-grid-item.component';
21+
import { LoggerModule } from '@angular-ru/cdk/logger';
22+
import { TranslateModule } from '@ngx-translate/core';
23+
import { DISPLAYABLE_COMIC_4 } from '@app/comic-books/comic-books.fixtures';
24+
25+
describe('ComicGridItemComponent', () => {
26+
const initialState = {};
27+
28+
let component: ComicGridItemComponent;
29+
let fixture: ComponentFixture<ComicGridItemComponent>;
30+
31+
beforeEach(async () => {
32+
await TestBed.configureTestingModule({
33+
imports: [
34+
ComicGridItemComponent,
35+
LoggerModule.forRoot(),
36+
TranslateModule.forRoot()
37+
]
38+
}).compileComponents();
39+
40+
fixture = TestBed.createComponent(ComicGridItemComponent);
41+
component = fixture.componentInstance;
42+
component.comic = DISPLAYABLE_COMIC_4;
43+
fixture.detectChanges();
44+
});
45+
46+
it('should create', () => {
47+
expect(component).toBeTruthy();
48+
});
49+
});

‎comixed-webui/src/app/comic-books/components/comic-grid-item/comic-grid-item.component.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* ComiXed - A digital comic book library management application.
3+
* Copyright (C) 2025, The ComiXed Project
4+
*
5+
* This program is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU General Public License as published by
7+
* the Free Software Foundation, either version 3 of the License, or
8+
* (at your option) any later version.
9+
*
10+
* This program is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU General Public License
16+
* along with this program. If not, see <http://www.gnu.org/licenses>
17+
*/
18+
19+
import { Component, EventEmitter, Input, Output } from '@angular/core';
20+
import { DisplayableComic } from '@app/comic-books/models/displayable-comic';
21+
import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component';
22+
import { ComicCoverUrlPipe } from '@app/comic-books/pipes/comic-cover-url.pipe';
23+
import {
24+
MatCard,
25+
MatCardContent,
26+
MatCardFooter,
27+
MatCardTitle
28+
} from '@angular/material/card';
29+
import { ComicTitlePipe } from '@app/comic-books/pipes/comic-title.pipe';
30+
import { MatTooltip } from '@angular/material/tooltip';
31+
import { TranslatePipe } from '@ngx-translate/core';
32+
import { DatePipe } from '@angular/common';
33+
34+
@Component({
35+
selector: 'cx-comic-grid-item',
36+
imports: [
37+
ComicPageComponent,
38+
ComicCoverUrlPipe,
39+
MatCard,
40+
MatCardContent,
41+
MatCardTitle,
42+
ComicTitlePipe,
43+
MatCardFooter,
44+
MatTooltip,
45+
TranslatePipe,
46+
DatePipe
47+
],
48+
templateUrl: './comic-grid-item.component.html',
49+
styleUrl: './comic-grid-item.component.scss'
50+
})
51+
export class ComicGridItemComponent {
52+
@Input() comic: DisplayableComic;
53+
@Input() selected = false;
54+
55+
@Output() comicClicked = new EventEmitter<DisplayableComic>();
56+
}

0 commit comments

Comments
 (0)