open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More on the dark

Browse Source
pull/3895/head
TidusJar 5 years ago
parent ee17d4dff1
commit 65d1672d2b
14 changed files with 159 additions and 151 deletions
Show Stats Download Patch File Download Diff File

16
src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss
Unescape View File

@ -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%;
}

3
src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts
Unescape View File

@ -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 {

4
src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss
Unescape View File

@ -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%
}

59
src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.html
Unescape View File

@ -10,7 +10,8 @@
<div class="row">
<div
class="col-xl-12 col-lg-11 offset-lg-1 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6">
<h1>{{tv.title}} <span *ngIf="tv.firstAired" class="grey-text align-middle">({{tv.firstAired | amLocal | amDateFormat: 'YYYY'}})</span>
<h1>{{tv.title}} <span *ngIf="tv.firstAired"
class="grey-text align-middle">({{tv.firstAired | amLocal | amDateFormat: 'YYYY'}})</span>
</h1>
<h5 class="tagline grey-text">{{tv.certification}}</h5>
@ -26,8 +27,7 @@
<div class="col-md-2 col-sm-3 hidden-xs">
<div class="sidebar sidebar-poster affixable affix-top" style="width: 173px;">
<div class="poster">
<img class="real" [src]="tv.images.medium" alt="Poster"
style="display: block;">
<img class="real" [src]="tv.images.medium" alt="Poster" style="display: block;">
</div>
<!--Underneith poster-->
<br />
@ -41,52 +41,41 @@
<i matTooltip="Homepage" class="fa fa-home fa-2x grow"></i>
</a>
<a *ngIf="tv.id" href="https://www.thetvdb.org/tv/{{tv.id}}" class="media-icons"
target="_blank">
<a *ngIf="tv.id" href="https://www.thetvdb.org/tv/{{tv.id}}" class="media-icons" target="_blank">
<i matTooltip="The TV DB" class="fa fa-tv fa-2x grow"></i>
</a>
<a *ngIf="tv.trailer" class="media-icons" (click)="openDialog()"><i
matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow"></i></a>
<a *ngIf="tv.trailer" class="media-icons" (click)="openDialog()"><i matTooltip="Trailer"
class="fa fa-youtube-play fa-2x grow"></i></a>
<a *ngIf="tv.imdbId" class="media-icons" href="https://imdb.com/title/{{tv.imdbId}}"
target="_blank">
<i matTooltip="Imdb" class="fa fa-imdb fa-2x grow"></i>
</a>
</div>
<div class="col-12 col-lg-7 col-xl-7 media-row">
<button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing mat-warn" (click)="request()"
><i class="fa fa-plus"></i>
{{ 'Common.Request' | translate }}</button>
<button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing mat-primary" [disabled]>
<i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
<button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{
'Common.Available' | translate }}</button>
<span *ngIf="!tv.available">
<span *ngIf="tv.requested || tv.approved; then requestedBtn else notRequestedBtn"></span>
<ng-template #requestedBtn>
<button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
class="fa fa-check"></i>
{{ 'Common.Requested' | translate }}</button>
</ng-template>
<ng-template #notRequestedBtn>
<button mat-raised-button class="btn-spacing" (click)="request()">
<i *ngIf="tv.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
*ngIf="!tv.requestProcessing && !tv.processed" class="fa fa-plus"></i>
<i *ngIf="tv.processed && !tv.requestProcessing" class="fa fa-check"></i> {{
'Common.Request' | translate }}</button>
</ng-template>
</span>
<span *ngIf="tv.available">
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
<span *ngIf="tv.available">
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
translate}}</a>
<a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing"
href="{{tv.embyUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
<a *ngIf="tv.embyUrl" mat-raised-button class="mat-accent btn-spacing" href="{{tv.embyUrl}}"
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
translate}}</a>
</span>
</span>
</div>
</div>
@ -100,7 +89,7 @@
<div>
<span><strong>First Aired:</strong>
{{tv.firstAired | date: 'mediumDate'}}</span></div>
<div>
<span *ngIf="tv.rating"><strong>Rating:</strong> {{tv.rating}}/10</span>
</div>
@ -257,7 +246,7 @@
<div class="bottom-page-gap">
</div>
</section>

12
src/Ombi/ClientApp/src/app/media-details/tv/tv-details.component.ts
Unescape View File

@ -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() {

41
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css
Unescape View File

@ -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;
}

10
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
Unescape View File

@ -3,21 +3,21 @@
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
<mat-toolbar>Ombi</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/discover">
<a mat-list-item routerLink="/discover" [routerLinkActive]="['active-list-item']" >
<mat-icon aria-label="Side nav toggle icon">find_replace</mat-icon>
Discover
</a>
<a mat-list-item [routerLinkActive]="['active']" routerLink="/search">
<a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/search">
<mat-icon aria-label="Side nav toggle icon">search</mat-icon> Search
</a>
<a mat-list-item [routerLinkActive]="['active']" routerLink="/requests">
<a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/requests">
<mat-icon aria-label="Side nav toggle icon">list</mat-icon> Requests
</a>
<a mat-list-item [routerLinkActive]="['active']" routerLink="/Settings/About">
<a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/Settings/About">
<mat-icon aria-label="Side nav toggle icon">settings</mat-icon> Settings
</a>
<a mat-list-item [routerLinkActive]="['active']" aria-label="Toggle sidenav" (click)="logOut();">
<a mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
<mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
{{ 'NavigationBar.Logout' | translate }}
</a>

47
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
Unescape View File

@ -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;
}

2
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
Unescape View File

@ -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 {

8
src/Ombi/ClientApp/src/app/services/message.service.ts
Unescape View File

@ -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)
}
}
}

2
src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.html
Unescape View File

@ -64,7 +64,7 @@
<div mat-dialog-actions>
<div class="action-buttons-right">
<div class="col-md-12">
<button mat-raised-button class="btn-spacing btn-orange">{{
<button (click)="submitRequests()" mat-raised-button class="btn-spacing btn-orange">{{
'Common.Request' | translate }}</button>

34
src/Ombi/ClientApp/src/app/shared/episode-request/episode-request.component.ts
Unescape View File

@ -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<EpisodeRequestComponent>, @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) {

33
src/Ombi/ClientApp/src/styles/Styles.scss
Unescape View File

@ -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;
}

39
src/Ombi/ClientApp/src/styles/variables.scss
Unescape View File

@ -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);
Write Preview
Loading…
Cancel
Save