diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss index f945ef69d..f7c62d6d6 100644 --- a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss @@ -1,15 +1,16 @@ -$ombi-primary:#3f3f3f; -$ombi-primary-700:#313131; -$ombi-accent-700:#166d50; +@import "~styles/variables.scss"; .poster { max-width: 100%; border-radius: 2%; } .details { - background: $ombi-primary-700; padding: 2%; border-radius: 10px; + background: $background; + div.dark & { + background: $backgroundTint-dark; + } } .details strong { @@ -20,16 +21,11 @@ h3 strong { font-weight: bold; } -.request-btn { - background-color: $ombi-accent-700; - color: white; -} - .action-buttons-right { width: 100%; text-align: right; } .btn-spacing { - margin-right:1%; + margin-right: 1%; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts index 766063b15..b9f680e14 100644 --- a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from "@angular/core"; +import { Component, Inject, OnInit, ViewEncapsulation } from "@angular/core"; import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from "@angular/material"; import { IDiscoverCardResult } from "../interfaces"; import { SearchV2Service, RequestService, MessageService } from "../../services"; @@ -12,6 +12,7 @@ import { EpisodeRequestComponent } from "../../shared/episode-request/episode-re selector: "discover-card-details", templateUrl: "./discover-card-details.component.html", styleUrls: ["./discover-card-details.component.scss"], + encapsulation: ViewEncapsulation.None, }) export class DiscoverCardDetailsComponent implements OnInit { diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss index 00dfc9a5f..d0ca84cb8 100644 --- a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss @@ -44,7 +44,7 @@ $border-width: 3px; } ::ng-deep mat-dialog-container.mat-dialog-container { - background-color: $ombi-primary; - color: white; + // background-color: $ombi-primary; + // color: white; border-radius: 2% } diff --git a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html index 434953410..65d936b9c 100644 --- a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html @@ -10,7 +10,8 @@
-

{{tv.title}} ({{tv.firstAired | amLocal | amDateFormat: 'YYYY'}}) +

{{tv.title}} ({{tv.firstAired | amLocal | amDateFormat: 'YYYY'}})

{{tv.certification}}
@@ -26,8 +27,7 @@ @@ -100,7 +89,7 @@
First Aired: {{tv.firstAired | date: 'mediumDate'}}
- +
Rating: {{tv.rating}}/10
@@ -257,7 +246,7 @@ - +
diff --git a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts index d57dcb64a..412b3d2e4 100644 --- a/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts +++ b/src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts @@ -5,6 +5,7 @@ import { DomSanitizer } from "@angular/platform-browser"; import { ISearchTvResultV2 } from "../../interfaces/ISearchTvResultV2"; import { MatDialog } from "@angular/material"; import { YoutubeTrailerComponent } from "../youtube-trailer.component"; +import { EpisodeRequestComponent } from "../../shared/episode-request/episode-request.component"; @Component({ templateUrl: "./tv-details.component.html", @@ -17,8 +18,7 @@ export class TvDetailsComponent { constructor(private searchService: SearchV2Service, private route: ActivatedRoute, private sanitizer: DomSanitizer, private imageService: ImageService, - public dialog: MatDialog, private requestService: RequestService, - public messageService: MessageService) { + public dialog: MatDialog, public messageService: MessageService) { this.route.params.subscribe((params: any) => { this.tvdbId = params.tvdbId; this.load(); @@ -32,13 +32,7 @@ export class TvDetailsComponent { } public async request() { - // var result = await this.requestService.requestTv({}).toPromise(); - // if (result.result) { - // this.movie.requested = true; - // this.messageService.send(result.message, "Ok"); - // } else { - // this.messageService.send(result.errorMessage, "Ok"); - // } + this.dialog.open(EpisodeRequestComponent, { width: "700px", data: this.tv }) } public openDialog() { diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css deleted file mode 100644 index c6eb0f3f3..000000000 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css +++ /dev/null @@ -1,41 +0,0 @@ -.sidenav-container { - height: 100%; -} - -.sidenav { - width: 200px; -} - -.sidenav .mat-toolbar { - background: inherit; -} - -.mat-toolbar.mat-primary { - position: sticky; - top: 0; - z-index: 1; -} -.middle { - display: flex; -} - -.example-form { - min-width: 150px; - max-width: 500px; - width: 100%; -} - -.quater-width { - width: 25%; -} - -.autocomplete-img { - vertical-align: middle; - height: 63px; -} - -.mat-option { - height: 50px; - line-height: 50px; - padding: 0px 5px; -} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html index 0f0a626bb..04cf472bb 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html @@ -3,21 +3,21 @@ [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)"> Ombi - + find_replace Discover - + search Search - + list Requests - + settings Settings - + exit_to_app {{ 'NavigationBar.Logout' | translate }} diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss new file mode 100644 index 000000000..e2cffe077 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss @@ -0,0 +1,47 @@ +@import "~styles/variables.scss"; +.sidenav-container { + height: 100%; +} + +.sidenav { + width: 200px; +} + +.sidenav .mat-toolbar { + background: inherit; +} + +.mat-toolbar.mat-primary { + position: sticky; + top: 0; + z-index: 1; +} + +.middle { + display: flex; +} + +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.quater-width { + width: 25%; +} + +.autocomplete-img { + vertical-align: middle; + height: 63px; +} + +.mat-option { + height: 50px; + line-height: 50px; + padding: 0px 5px; +} + +.active-list-item { + background: $accent !important; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts index 0a9c89583..17454bb9f 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts @@ -6,7 +6,7 @@ import { map } from 'rxjs/operators'; @Component({ selector: 'app-my-nav', templateUrl: './my-nav.component.html', - styleUrls: ['./my-nav.component.css'], + styleUrls: ['./my-nav.component.scss'], }) export class MyNavComponent { diff --git a/src/Ombi/ClientApp/src/app/services/message.service.ts b/src/Ombi/ClientApp/src/app/services/message.service.ts index 452318c59..0886e6b78 100644 --- a/src/Ombi/ClientApp/src/app/services/message.service.ts +++ b/src/Ombi/ClientApp/src/app/services/message.service.ts @@ -3,7 +3,7 @@ import { MatSnackBar, MatSnackBarConfig } from "@angular/material"; @Injectable() export class MessageService { - constructor(private snackBar: MatSnackBar) { + constructor(private snackBar: MatSnackBar) { this.config = { duration: 4000, } @@ -12,6 +12,10 @@ export class MessageService { public send(message: string, action?: string) { - this.snackBar.open(message, action.toUpperCase(), this.config) + if (action) { + this.snackBar.open(message, action.toUpperCase(), this.config) + } else { + this.snackBar.open(message, "OK", this.config) + } } } diff --git a/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.html b/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.html index 4f9b181bf..4165fbdb0 100644 --- a/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.html +++ b/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.html @@ -64,7 +64,7 @@
- diff --git a/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.ts b/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.ts index 0d0c5e080..d99128b8a 100644 --- a/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.ts +++ b/src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Inject } from "@angular/core"; import { MatDialogRef, MAT_DIALOG_DATA, MatCheckboxChange } from "@angular/material"; import { ISearchTvResultV2 } from "../../interfaces/ISearchTvResultV2"; -import { RequestService, NotificationService } from "../../services"; +import { RequestService, MessageService } from "../../services"; import { ITvRequestViewModel, ISeasonsViewModel, IEpisodesRequests, INewSeasonRequests } from "../../interfaces"; @@ -14,7 +14,7 @@ export class EpisodeRequestComponent implements OnInit { public loading: boolean; constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public series: ISearchTvResultV2, - private requestService: RequestService, private notificationService: NotificationService) { } + private requestService: RequestService, private notificationService: MessageService) { } public ngOnInit() { this.loading = true; @@ -22,7 +22,7 @@ export class EpisodeRequestComponent implements OnInit { this.loading = false; } - public submitRequests() { + public async submitRequests() { // Make sure something has been selected const selected = this.series.seasonRequests.some((season) => { return season.episodes.some((ep) => { @@ -31,7 +31,7 @@ export class EpisodeRequestComponent implements OnInit { }); if (!selected) { - this.notificationService.error("You need to select some episodes!"); + this.notificationService.send("You need to select some episodes!", "OK"); return; } @@ -53,22 +53,22 @@ export class EpisodeRequestComponent implements OnInit { viewModel.seasons.push(seasonsViewModel); }); - this.requestService.requestTv(viewModel) - .subscribe(x => { - if (x.result) { - this.notificationService.success( - `Request for ${this.series.title} has been added successfully`); + const requestResult = await this.requestService.requestTv(viewModel).toPromise(); - this.series.seasonRequests.forEach((season) => { - season.episodes.forEach((ep) => { - ep.selected = false; - }); - }); + if (requestResult.result) { + this.notificationService.send( + `Request for ${this.series.title} has been added successfully`); - } else { - this.notificationService.warning("Request Added", x.errorMessage ? x.errorMessage : x.message); - } + this.series.seasonRequests.forEach((season) => { + season.episodes.forEach((ep) => { + ep.selected = false; + }); }); + + } else { + this.notificationService.send("Request Added", requestResult.errorMessage ? requestResult.errorMessage : requestResult.message); + } + this.dialogRef.close(); } public addRequest(episode: IEpisodesRequests) { diff --git a/src/Ombi/ClientApp/src/styles/Styles.scss b/src/Ombi/ClientApp/src/styles/Styles.scss index a690417a4..41539ca61 100644 --- a/src/Ombi/ClientApp/src/styles/Styles.scss +++ b/src/Ombi/ClientApp/src/styles/Styles.scss @@ -1,47 +1,26 @@ @import '~@angular/material/theming'; -@import "./mat-palette.scss"; +@import "./variables.scss"; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core(); -// Define the palettes for your theme using the Material Design palettes available in palette.scss -// (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes: https://material.io/design/color/ -$ombi-app-primary: mat-palette($ombi-primary, 500); -$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400); -$panel: white; -$text:black; -$background: white; -// The warn palette is optional (defaults to red). -$ombi-app-warn : mat-palette($mat-deep-orange); -// Create the theme object (a Sass map containing all of the palettes). -$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn); + // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. +// Create the theme object (a Sass map containing all of the palettes). +$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn); @include angular-material-theme($ombi-app-theme); -// Define an alternate dark theme. -$ombi-dark-app-primary: mat-palette($mat-grey, 800); -$ombi-dark-app-accent : mat-palette($mat-amber, A200, A100, A400); -$ombi-dark-app-warn : mat-palette($mat-deep-orange); -$dark-theme : mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn); + +$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn); -$primary: mat-color($ombi-app-primary); -$accent: mat-color($ombi-app-accent); -$warn: mat-color($ombi-app-warn); // Include the alternative theme styles inside of a block with a CSS class. You can make this // CSS class whatever you want. In this example, any component inside of an element with // `.dark` will be affected by this alternate dark theme instead of the default theme. .dark { @include angular-material-theme($dark-theme); - $panel: mat-color(mat-palette($mat-grey, 800)); - $primary: mat-color($ombi-dark-app-primary); - $accent: mat-color($ombi-dark-app-accent); - $warn: mat-color($ombi-dark-app-warn); - $background: #424242; - $text: white; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/styles/variables.scss b/src/Ombi/ClientApp/src/styles/variables.scss new file mode 100644 index 000000000..8388ee4e7 --- /dev/null +++ b/src/Ombi/ClientApp/src/styles/variables.scss @@ -0,0 +1,39 @@ +@import "./mat-palette.scss"; +@import '~@angular/material/theming'; +// BASE +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. Available color palettes: https://material.io/design/color/ +$ombi-app-primary: mat-palette($ombi-primary, 500); +$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400); +// The warn palette is optional (defaults to red). +$ombi-app-warn : mat-palette($mat-deep-orange); + +// Define an alternate dark theme. +$ombi-dark-app-primary: mat-palette($mat-grey, 800); +$ombi-dark-app-accent: mat-palette($mat-amber, A200, A100, A400); +$ombi-dark-app-warn: mat-palette($mat-deep-orange); + + + +// CUSTOM LIGHT +$panel: white; +$text:black; +$background: white; +$backgroundTint: mat-color(mat-palette($ombi-primary, 50)); + +$primary: mat-color($ombi-app-primary); +$accent: mat-color($ombi-app-accent); +$warn: mat-color($ombi-app-warn); + + + +// DARK + +$background-dark: at-color(mat-palette($mat-grey, 800));; +$backgroundTint-dark: mat-color(mat-palette($mat-grey, 900)); +$text-dark: white; +$panel: mat-color(mat-palette($mat-grey, 800)); +$primary-dark: mat-color($ombi-dark-app-primary); +$accent-dark: mat-color($ombi-dark-app-accent); +$warn-dark: mat-color($ombi-dark-app-warn); \ No newline at end of file