Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-16 08:15:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved filters into expansion panels

Browse Source
This commit is contained in:
grimsi
2022-08-14 15:46:45 +02:00
parent acd9e79fce
commit 1f24aa73e5
3 changed files with 66 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/app.module.ts
+39 -37
View File
@@ -49,6 +49,7 @@ import {MatListModule} from "@angular/material/list";
import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {MatAutocompleteModule} from "@angular/material/autocomplete";
import { NgModelChangeDebouncedDirective } from './directives/ng-model-change-debounced.directive'; import { NgModelChangeDebouncedDirective } from './directives/ng-model-change-debounced.directive';
import { FooterComponent } from './components/footer/footer.component'; import { FooterComponent } from './components/footer/footer.component';
import {MatExpansionModule} from "@angular/material/expansion";
@NgModule({ @NgModule({
declarations: [ declarations: [
@@ -69,43 +70,44 @@ import { FooterComponent } from './components/footer/footer.component';
NgModelChangeDebouncedDirective, NgModelChangeDebouncedDirective,
FooterComponent FooterComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
BrowserAnimationsModule, BrowserAnimationsModule,
FormsModule, FormsModule,
MatFormFieldModule, MatFormFieldModule,
MatCardModule, MatCardModule,
MatTabsModule, MatTabsModule,
MatToolbarModule, MatToolbarModule,
MatMenuModule, MatMenuModule,
MatIconModule, MatIconModule,
HttpClientModule, HttpClientModule,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
MatDialogModule, MatDialogModule,
MatButtonModule, MatButtonModule,
MatInputModule, MatInputModule,
FlexModule, FlexModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatTableModule, MatTableModule,
MatPaginatorModule, MatPaginatorModule,
MatSortModule, MatSortModule,
MatSnackBarModule, MatSnackBarModule,
MatGridListModule, MatGridListModule,
FlexLayoutModule, FlexLayoutModule,
GridModule, GridModule,
YouTubePlayerModule, YouTubePlayerModule,
MatChipsModule, MatChipsModule,
MatTooltipModule, MatTooltipModule,
MatSlideToggleModule, MatSlideToggleModule,
MatCheckboxModule, MatCheckboxModule,
A11yModule, A11yModule,
MatTableFilterModule, MatTableFilterModule,
MatDividerModule, MatDividerModule,
MatListModule, MatListModule,
MatAutocompleteModule MatAutocompleteModule,
], MatExpansionModule
],
providers: [ providers: [
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
frontend/src/app/components/library-overview/library-overview.component.html
+27 -17
View File
@@ -27,7 +27,7 @@
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="6px"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="6px">
<mat-icon matTooltip="Search for games by title">search</mat-icon> <mat-icon matTooltip="Search for games by title">search</mat-icon>
<mat-form-field fxFlex="80" class="filter-category-content"> <mat-form-field fxFlex="100" class="filter-category-content">
<input type="text" matInput [matAutocomplete]="librarySearchAutocomplete" [(ngModel)]="searchTerm" (ngModelChange)="filterGames()"> <input type="text" matInput [matAutocomplete]="librarySearchAutocomplete" [(ngModel)]="searchTerm" (ngModelChange)="filterGames()">
<mat-autocomplete #librarySearchAutocomplete="matAutocomplete"> <mat-autocomplete #librarySearchAutocomplete="matAutocomplete">
<mat-option *ngFor="let game of games" [value]="game.title"> <mat-option *ngFor="let game of games" [value]="game.title">
@@ -37,12 +37,15 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div> <mat-expansion-panel>
<div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="6px"> <mat-expansion-panel-header>
<h3 class="filter-category-title">Gamemodes</h3> <mat-panel-title fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="6px">
<mat-icon matTooltip="Filter may not work correctly, working on a fix" color="warn">error</mat-icon> <h3 class="filter-category-title">Gamemodes</h3>
</div> <mat-icon matTooltip="Filter may not work correctly, working on a fix" color="warn">error</mat-icon>
<div fxLayout="column" class="filter-category-content"> </mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="column">
<mat-checkbox [(ngModel)]="offlineCoopFilterEnabled" (change)="filterGames()" color="primary">Offline Co-op <mat-checkbox [(ngModel)]="offlineCoopFilterEnabled" (change)="filterGames()" color="primary">Offline Co-op
</mat-checkbox> </mat-checkbox>
<mat-checkbox [(ngModel)]="onlineCoopFilterEnabled" (change)="filterGames()" color="primary">Online Co-op <mat-checkbox [(ngModel)]="onlineCoopFilterEnabled" (change)="filterGames()" color="primary">Online Co-op
@@ -50,28 +53,35 @@
<mat-checkbox [(ngModel)]="lanSupportFilterEnabled" (change)="filterGames()" color="primary">LAN Support <mat-checkbox [(ngModel)]="lanSupportFilterEnabled" (change)="filterGames()" color="primary">LAN Support
</mat-checkbox> </mat-checkbox>
</div> </div>
</div> </mat-expansion-panel>
<div *ngIf="availableGenres.length > 0"> <mat-expansion-panel *ngIf="availableGenres.length > 0">
<h3 class="filter-category-title">Genres</h3> <mat-expansion-panel-header>
<div fxLayout="column" class="filter-category-content"> <h3 class="filter-category-title">Genres</h3>
</mat-expansion-panel-header>
<div fxLayout="column">
<mat-checkbox *ngFor="let genre of availableGenres" (change)="toggleGenreFilter(genre.slug)" <mat-checkbox *ngFor="let genre of availableGenres" (change)="toggleGenreFilter(genre.slug)"
[checked]="activeGenreFilters.includes(genre.slug)" [checked]="activeGenreFilters.includes(genre.slug)"
color="primary">{{genre.name}}</mat-checkbox> color="primary">{{genre.name}}</mat-checkbox>
</div> </div>
</div> </mat-expansion-panel>
<div *ngIf="availableThemes.length > 0"> <mat-expansion-panel *ngIf="availableThemes.length > 0">
<h3 class="filter-category-title">Themes</h3> <mat-expansion-panel-header>
<div fxLayout="column" class="filter-category-content"> <h3 class="filter-category-title">Themes</h3>
</mat-expansion-panel-header>
<div fxLayout="column">
<mat-checkbox *ngFor="let theme of availableThemes" (change)="toggleThemeFilter(theme.slug)" <mat-checkbox *ngFor="let theme of availableThemes" (change)="toggleThemeFilter(theme.slug)"
[checked]="activeThemeFilters.includes(theme.slug)" [checked]="activeThemeFilters.includes(theme.slug)"
color="primary">{{theme.name}}</mat-checkbox> color="primary">{{theme.name}}</mat-checkbox>
</div> </div>
</div> </mat-expansion-panel>
</div> </div>
<div fxFlex="0 1 1" fxHide fxShow.gt-lg><!--SPACER--></div>
<div fxFlex fxLayout="row wrap" fxLayoutGap="16px grid"> <div fxFlex fxLayout="row wrap" fxLayoutGap="16px grid">
<div *ngFor="let game of games"> <div *ngFor="let game of games">
<game-cover [game]="game"></game-cover> <game-cover [game]="game"></game-cover>
frontend/src/app/components/library-overview/library-overview.component.scss
-4
View File
@@ -44,10 +44,6 @@
margin-bottom: 0; margin-bottom: 0;
} }
.filter-category-content {
margin-left: 6px;
}
::ng-deep .mat-checkbox-frame { ::ng-deep .mat-checkbox-frame {
$config: mat.get-color-config($custom-theme); $config: mat.get-color-config($custom-theme);
$primary-palette: map.get($config, 'primary'); $primary-palette: map.get($config, 'primary');