Skip to content

Commit

Permalink
Changed file import to use columns [#965]
Browse files Browse the repository at this point in the history
  • Loading branch information
mcpierce committed Oct 24, 2021
1 parent 11263f3 commit dd77508
Show file tree
Hide file tree
Showing 17 changed files with 185 additions and 650 deletions.
Expand Up @@ -5,11 +5,11 @@
<mat-card-content>
<div
class="cx-detail-card cx-padding-2 cx-margin-2"
[class.comic-detail-card-selected]="selected"
[class.cx-detail-card-selected]="selected"
>
<img
*ngIf="!!imageUrl"
[class.comic-detail-card-blurred]="blurred"
[class.cx-detail-card-blurred]="blurred"
[src]="imageUrl"
[style.width]="'100%'"
[style.height]="'auto'"
Expand Down
Expand Up @@ -12,17 +12,6 @@
color: var(--text-primary-lighter-color);
}

.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%;
Expand Down
8 changes: 5 additions & 3 deletions comixed-webui/src/app/comic-files/comic-file.module.ts
Expand Up @@ -20,7 +20,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ImportComicsPageComponent } from './pages/import-comics-page/import-comics-page.component';
import { ComicFileToolbarComponent } from './components/comic-file-toolbar/comic-file-toolbar.component';
import { ComicFileListComponent } from './components/comic-file-list/comic-file-list.component';
import { ComicFileCoversComponent } from './components/comic-file-covers/comic-file-covers.component';
import { ComicFileDetailsComponent } from './components/comic-file-details/comic-file-details.component';
import { ComicFileCoverUrlPipe } from './pipes/comic-file-cover-url.pipe';
import { ComicFileRouting } from './comic-file.routing';
Expand Down Expand Up @@ -62,12 +62,13 @@ import {
SCRAPE_METADATA_FEATURE_KEY
} from '@app/comic-files/reducers/scrape-metadata.reducer';
import { ScrapeMetadataEffects } from '@app/comic-files/effects/scrape-metadata.effects';
import { FlexModule } from '@angular/flex-layout';

@NgModule({
declarations: [
ImportComicsPageComponent,
ComicFileToolbarComponent,
ComicFileListComponent,
ComicFileCoversComponent,
ComicFileDetailsComponent,
ComicFileCoverUrlPipe,
ComicFileLookupComponent
Expand Down Expand Up @@ -103,7 +104,8 @@ import { ScrapeMetadataEffects } from '@app/comic-files/effects/scrape-metadata.
MatCardModule,
LibraryModule,
MatProgressBarModule,
ComicBooksModule
ComicBooksModule,
FlexModule
],
exports: [CommonModule]
})
Expand Down
@@ -0,0 +1,14 @@
<div class="cx-detail-card-container">
<div
*ngFor="let file of files"
fxFlex.gt-lg="10%"
fxFlex.lg="20%"
fxFlex.md="50%"
fxFlex.lt-md="100%"
>
<cx-comic-file-details
[file]="file"
[selected]="isFileSelected(file)"
></cx-comic-file-details>
</div>
</div>
@@ -0,0 +1,79 @@
/*
* ComiXed - A digital comic book library management application.
* Copyright (C) 2020, The ComiXed Project
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses>
*/

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComicFileCoversComponent } from './comic-file-covers.component';
import { LoggerModule } from '@angular-ru/logger';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import {
COMIC_FILE_1,
COMIC_FILE_2,
COMIC_FILE_3,
COMIC_FILE_4
} from '@app/comic-files/comic-file.fixtures';
import {
COMIC_IMPORT_FEATURE_KEY,
initialState as initialComicImportState
} from '@app/comic-files/reducers/comic-import.reducer';
import { TranslateModule } from '@ngx-translate/core';

describe('ComicFileCoversComponent', () => {
const initialState = { [COMIC_IMPORT_FEATURE_KEY]: initialComicImportState };
const FILES = [COMIC_FILE_1, COMIC_FILE_2, COMIC_FILE_3, COMIC_FILE_4];
const FILE = COMIC_FILE_4;

let component: ComicFileCoversComponent;
let fixture: ComponentFixture<ComicFileCoversComponent>;
let store: MockStore<any>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ComicFileCoversComponent],
imports: [TranslateModule.forRoot(), LoggerModule.forRoot()],
providers: [provideMockStore({ initialState })]
}).compileComponents();

fixture = TestBed.createComponent(ComicFileCoversComponent);
component = fixture.componentInstance;
store = TestBed.inject(MockStore);
spyOn(store, 'dispatch');
fixture.detectChanges();
}));

it('should create', () => {
expect(component).toBeTruthy();
});

describe('checking a selection', () => {
const SELECTED_FILE = FILES[1];
const NOT_SELECTED_FILE = FILES[2];

beforeEach(() => {
component.files = FILES;
component.selectedFiles = [SELECTED_FILE];
});

it('returns true for an selected file', () => {
expect(component.isFileSelected(SELECTED_FILE)).toBeTrue();
});

it('returns false for an unselected file', () => {
expect(component.isFileSelected(NOT_SELECTED_FILE)).toBeFalse();
});
});
});
@@ -0,0 +1,40 @@
/*
* ComiXed - A digital comic book library management application.
* Copyright (C) 2020, The ComiXed Project
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses>
*/

import { Component, Input, OnInit } from '@angular/core';
import { ComicFile } from '@app/comic-files/models/comic-file';
import { LoggerService } from '@angular-ru/logger';
import { Store } from '@ngrx/store';

@Component({
selector: 'cx-comic-file-covers',
templateUrl: './comic-file-covers.component.html',
styleUrls: ['./comic-file-covers.component.scss']
})
export class ComicFileCoversComponent implements OnInit {
@Input() files: ComicFile[] = [];
@Input() selectedFiles: ComicFile[] = [];

constructor(private logger: LoggerService, private store: Store<any>) {}

ngOnInit(): void {}

isFileSelected(file: ComicFile): boolean {
return this.selectedFiles.includes(file);
}
}
@@ -1,12 +1,21 @@
<mat-card *ngIf="file" [style.width]="cardWidth">
<mat-card *ngIf="file" class="cx-width-100">
<mat-card-title class="cx-text-nowrap" [matTooltip]="file.baseFilename">
{{ file.baseFilename }}
</mat-card-title>
<mat-card-content>
<cx-comic-page
[imageUrl]="file | comicFileCoverUrl"
[pageSize]="pageSize"
></cx-comic-page>
<p>selected: {{ selected }}</p>
<div
class="cx-detail-card cx-padding-2 cx-margin-2"
[class.cx-detail-card-selected]="selected"
>
<img
[src]="file | comicFileCoverUrl"
[alt]="file | comicFileCoverUrl"
[style.width]="'100%'"
[style.height]="'auto'"
(click)="onSelectFile()"
/>
</div>
</mat-card-content>
<mat-card-footer>
<div class="cx-width-100 cx-text-nowrap">
Expand All @@ -16,43 +25,4 @@
}}
</div>
</mat-card-footer>
<mat-card-actions>
<div class="cx-align-content-center">
<button
id="previous-comic-file-button"
mat-icon-button
color="accent"
[disabled]="noPreviousFile"
(click)="onPreviousFile()"
>
<mat-icon>arrow_back</mat-icon>
</button>
<button
*ngIf="selected"
mat-icon-button
color="warn"
(click)="onSelectFile(false)"
>
<mat-icon>remove</mat-icon>
</button>
<button
id="select-comic-file-button"
*ngIf="!selected"
mat-icon-button
color="primary"
(click)="onSelectFile(true)"
>
<mat-icon>add_box</mat-icon>
</button>
<button
id="next-comic-file-button"
mat-icon-button
color="accent"
[disabled]="noNextFile"
(click)="onNextFile()"
>
<mat-icon>arrow_forward</mat-icon>
</button>
</div>
</mat-card-actions>
</mat-card>

0 comments on commit dd77508

Please sign in to comment.