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

Added a change theme button into the navbar, so now we can switch from light and dark themes

Browse Source
pull/3895/head
Jamie Rees 6 years ago
parent 5aeb0734b2
commit 2fe4c1f456
11 changed files with 84 additions and 180 deletions
Show Stats Download Patch File Download Diff File

3
src/Ombi/ClientApp/src/app/app.component.html
Unescape View File

@ -168,7 +168,8 @@
<div [ngClass]="user.name && roleClass()">
<app-my-nav [showNav]="showNav" [applicationName]="applicationName" [username]="user.name" (logoutClick)="logOut();"></app-my-nav>
<app-my-nav [showNav]="showNav" [applicationName]="applicationName" [username]="user.name" (logoutClick)="logOut();"
(themeChange)="onSetTheme($event)"></app-my-nav>
</div>

4
src/Ombi/ClientApp/src/app/app.module.ts
Unescape View File

@ -23,7 +23,7 @@ import {
import {
MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatAutocompleteModule, MatCheckboxModule, MatSnackBarModule
} from '@angular/material';
import { MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
import { MatCardModule, MatInputModule, MatTabsModule, MatSlideToggleModule } from "@angular/material";
import { MDBBootstrapModule, CardsFreeModule, NavbarModule } from "angular-bootstrap-md";
@ -139,7 +139,7 @@ export function JwtTokenGetter() {
},
}),
SidebarModule,
MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, LayoutModule,
MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, LayoutModule, MatSlideToggleModule
],
declarations: [
AppComponent,

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

@ -8,11 +8,18 @@
{{nav.name | translate}}
</a>
<a mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
<a class="bottom-nav-link" 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>
<a mat-list-item aria-label="Toggle sidenav" (click)="switchTheme();">
<mat-slide-toggle>
{{ 'NavigationBar.ChangeTheme' | translate }}
</mat-slide-toggle>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>

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

@ -1,6 +1,6 @@
@import "~styles/variables.scss";
.sidenav-container {
height: 100%;
min-height: 100vh;
}
.sidenav {
@ -44,4 +44,9 @@
.active-list-item {
background: $accent !important;
}
.bottom-nav-link {
bottom: 0;
position: absolute;
}

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

@ -1,4 +1,4 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@ -16,22 +16,41 @@ export class MyNavComponent {
map(result => result.matches)
);
@Input() public showNav: boolean;
@Input() public applicationName: string;
@Input() public username: string;
@Output() public logoutClick = new EventEmitter();
@Input() public showNav: boolean;
@Input() public applicationName: string;
@Input() public username: string;
@Output() public logoutClick = new EventEmitter();
@Output() public themeChange = new EventEmitter<string>();
constructor(private breakpointObserver: BreakpointObserver) {
}
public navItems: INavBar[] = [
{name: "NavigationBar.Discover", icon: "find_replace", link: "/discover"},
{name: "NavigationBar.Search", icon: "search", link: "/search"},
{name: "NavigationBar.Requests", icon: "list", link: "/requests"},
{name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About"},
]
{ name: "NavigationBar.Discover", icon: "find_replace", link: "/discover" },
{ name: "NavigationBar.Search", icon: "search", link: "/search" },
{ name: "NavigationBar.Requests", icon: "list", link: "/requests" },
{ name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About" },
]
public logOut() {
this.logoutClick.emit();
}
public switchTheme() {
const theme = localStorage.getItem("theme");
if (theme) {
localStorage.removeItem("theme");
let newTheme = "";
if (theme === "dark") {
newTheme = "light";
} else {
newTheme = "dark";
}
localStorage.setItem("theme", newTheme)
this.themeChange.emit(newTheme);
}
}
}

45
src/Ombi/ClientApp/src/app/request-grid/request-card.component.html
Unescape View File

@ -1,45 +0,0 @@
<style>
/*$bg-colour: #333333;*/
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
background: #4f4e4e;
border-bottom: #333333 solid 1px;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
}
img {
border-radius: 5px 5px 0 0;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card-container {
padding: 2px 16px;
}
.image-fill {
overflow: hidden;
background-size: cover;
background-position: center;
position: relative;
}
</style>
<div *ngIf="request" class="card" style="color: white;">
<div style="position: relative; overflow: hidden;">
<img src="{{request.posterPath}}" alt="poster" class="image-fill">
</div>
<div class="card-container">
{{request.title}}
</div>
</div>

11
src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts
Unescape View File

@ -1,11 +0,0 @@
// import { Component, Input } from "@angular/core";
// import { IMediaBase } from "../interfaces";
// @Component({
// selector: "request-card",
// templateUrl: "./request-card.component.html",
// })
// export class RequestCardComponent {
// @Input() public request: IMediaBase;
// }

54
src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html
Unescape View File

@ -1,54 +0,0 @@

<style>
.landing-box {
background: #333333 !important;
border-radius: 2%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
box-shadow: 5px 3px 5px black;
}
.dragula-container {
padding-bottom: 30px;
}
.gu-mirror {
margin-left: 100px !important;
transform: rotate(4deg);
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
text-align: center;
}
</style>
<div *ngIf="tvRequests">
<div class="col-md-4">
<h4 class="text-center">New Requests</h4>
<div class="landing-box">
<div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.new">
<request-card *ngFor="let item of tvRequests.new" [request]="item"></request-card>
</div>
</div>
</div>
<div class="col-md-4">
<h4 class="text-center">Approved Requests</h4>
<div class="landing-box">
<div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.approved">
<request-card *ngFor="let item of tvRequests.approved" [request]="item"></request-card>
</div>
</div>
</div>
<div class="col-md-4">
<h4 class="text-center">Available</h4>
<div class="landing-box">
<div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.available">
<request-card *ngFor="let item of tvRequests.available" [request]="item"></request-card>
</div>
</div>
</div>
</div>

28
src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts
Unescape View File

@ -1,28 +0,0 @@
//import { Component, OnInit } from '@angular/core';
//import { DragulaService } from 'ng2-dragula/ng2-dragula';
//import { RequestService } from '../services";
//import { ITvRequests, IMovieRequests, IRequestGrid } from '../interfaces";
//@Component({
// templateUrl: './request-grid.component.html'
//})
//export class RequestGridComponent implements OnInit {
// constructor(private dragulaService: DragulaService, private requestService: RequestService) {
// this.dragulaService.drop.subscribe((value: any) => {
// });
// }
// ngOnInit() {
// this.requestService.getMovieGrid().subscribe(x => {
// this.movieRequests = x;
// });
// this.requestService.getTvGrid().subscribe(x => {
// this.tvRequests = x;
// });
// }
// movieRequests: IRequestGrid<IMovieRequests>;
// tvRequests: IRequestGrid<ITvRequests>;
//}

61
src/Ombi/ClientApp/src/styles/shared.scss
Unescape View File

@ -1,45 +1,54 @@
@media (max-width: 978px) {
.top-spacing {
padding-top: 10%;
}
.top-spacing {
padding-top: 10%;
}
}
@media (min-width: 979px) {
.top-spacing {
padding-top: 4%;
}
.top-spacing {
padding-top: 4%;
}
}
html, body{
min-height: 100vh;
overflow: auto;
}
.spinner-container {
position: relative;
margin-left: 50%;
position: relative;
margin-left: 50%;
}
.bottom-page-gap {
height: 50px;
height: 50px;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 7px;
background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #41927b;
}
.sidenav ::-webkit-scrollbar-track {
display: none;
}
width: 7px;
background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #41927b;
}
.sidenav ::-webkit-scrollbar-track {
display: none;
}
.grow {
transition: all .2s ease-in-out;
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
color: black;
transform: scale(1.1);
color: black;
}

3
src/Ombi/wwwroot/translations/en.json
Unescape View File

@ -60,7 +60,8 @@
"UpdateDetails": "Update Details",
"Logout": "Logout",
"OpenMobileApp": "Open Mobile App",
"RecentlyAdded": "Recently Added"
"RecentlyAdded": "Recently Added",
"ChangeTheme":"Change Theme"
},
"Search": {
"Title": "Search",

Write Preview
Loading…
Cancel
Save