From 2fe4c1f45651a921580a54bb36e00b973f2b39fb Mon Sep 17 00:00:00 2001 From: Jamie Rees Date: Fri, 15 Mar 2019 12:08:35 +0000 Subject: [PATCH] Added a change theme button into the navbar, so now we can switch from light and dark themes --- src/Ombi/ClientApp/src/app/app.component.html | 3 +- src/Ombi/ClientApp/src/app/app.module.ts | 4 +- .../src/app/my-nav/my-nav.component.html | 9 ++- .../src/app/my-nav/my-nav.component.scss | 7 ++- .../src/app/my-nav/my-nav.component.ts | 39 +++++++++--- .../request-grid/request-card.component.html | 45 -------------- .../request-grid/request-card.component.ts | 11 ---- .../request-grid/request-grid.component.html | 54 ---------------- .../request-grid/request-grid.component.ts | 28 --------- src/Ombi/ClientApp/src/styles/shared.scss | 61 +++++++++++-------- src/Ombi/wwwroot/translations/en.json | 3 +- 11 files changed, 84 insertions(+), 180 deletions(-) delete mode 100644 src/Ombi/ClientApp/src/app/request-grid/request-card.component.html delete mode 100644 src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts delete mode 100644 src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html delete mode 100644 src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts diff --git a/src/Ombi/ClientApp/src/app/app.component.html b/src/Ombi/ClientApp/src/app/app.component.html index f265c4320..c547721fa 100644 --- a/src/Ombi/ClientApp/src/app/app.component.html +++ b/src/Ombi/ClientApp/src/app/app.component.html @@ -168,7 +168,8 @@
- +
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts index 691ae1a61..d2b38d782 100644 --- a/src/Ombi/ClientApp/src/app/app.module.ts +++ b/src/Ombi/ClientApp/src/app/app.module.ts @@ -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, 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 e1bca5542..75decb3de 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 @@ -8,11 +8,18 @@ {{nav.name | translate}} - + exit_to_app {{ 'NavigationBar.Logout' | translate }} + + + {{ 'NavigationBar.ChangeTheme' | 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 index e2cffe077..763acbfdb 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss @@ -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; } \ 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 da7aabab6..183f81184 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 @@ -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(); + 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); + } + } + } diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.html b/src/Ombi/ClientApp/src/app/request-grid/request-card.component.html deleted file mode 100644 index f51a9f898..000000000 --- a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.html +++ /dev/null @@ -1,45 +0,0 @@ - - -
-
- poster -
-
- {{request.title}} -
-
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts b/src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts deleted file mode 100644 index aa267ecdb..000000000 --- a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts +++ /dev/null @@ -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; -// } diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html b/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html deleted file mode 100644 index eecd799ed..000000000 --- a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html +++ /dev/null @@ -1,54 +0,0 @@ - - - -
-
-

New Requests

-
-
- -
-
-
- -
-

Approved Requests

-
-
- -
-
-
- -
-

Available

-
-
- -
-
-
-
diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts b/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts deleted file mode 100644 index 142bbf5a1..000000000 --- a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts +++ /dev/null @@ -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; -// tvRequests: IRequestGrid; - -//} diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss index b9fc09046..14e94f4d0 100644 --- a/src/Ombi/ClientApp/src/styles/shared.scss +++ b/src/Ombi/ClientApp/src/styles/shared.scss @@ -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); +} - .grow { - transition: all .2s ease-in-out; +::-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:hover { - transform: scale(1.1); - color: black; + transform: scale(1.1); + color: black; } diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json index 513c67336..63facda83 100644 --- a/src/Ombi/wwwroot/translations/en.json +++ b/src/Ombi/wwwroot/translations/en.json @@ -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",