Err, this is a good one. Really happy with this. But please don't tell anyone

pull/3996/head
tidusjar 3 years ago
parent 63b8984dbf
commit 18799f476a

@ -25,8 +25,10 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles/_imports.scss",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css",
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css",

@ -54,6 +54,7 @@
"primeicons": "^4.0.0",
"primeng": "^11.0.0",
"rxjs": "^6.5.2",
"sass-recursive-map-merge": "^1.0.1",
"spinkit": "^1.2.5",
"store": "^2.0.12",
"ts-md5": "^1.2.7",

@ -170,7 +170,7 @@
<div>
<app-my-nav id="main-container dark" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [applicationLogo]="customizationSettings?.logo" [username]="username" [email]="user?.email " (logoutClick)="logOut();" (themeChange)="onSetTheme($event)">
<app-my-nav id="main-container dark" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [applicationLogo]="customizationSettings?.logo" [username]="username" [email]="user?.email " (logoutClick)="logOut();">
</app-my-nav>

@ -85,8 +85,6 @@ export class AppComponent implements OnInit {
public ngOnInit() {
window["loading_screen"].finish();
const theme = this.storage.get("theme");
this.onSetTheme(theme);
this.settingsService.getCustomization().subscribe(x => {
this.customizationSettings = x;
@ -131,11 +129,4 @@ export class AppComponent implements OnInit {
this.authService.logout();
this.router.navigate(["login"]);
}
public onSetTheme(theme: string) {
if (theme) {
this.overlayContainer.getContainerElement().classList.add(theme);
this.componentCssClass = theme;
}
}
}

@ -42,11 +42,6 @@
</div>
</span>
<a id="nav-theme" mat-list-item (click)="switchTheme()">
<mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">wb_incandescent</mat-icon>
<mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
&nbsp;{{ 'NavigationBar.ChangeTheme' | translate }}
</a>
<a id="nav-logout" 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>

@ -114,7 +114,7 @@
// New CSS for new style //
.sidenav-container .sidenav{
background: #1b242f;
background: $ombi-background-accent;
color:#FFF;
width: 23rem;
font-family: 'Montserrat', sans-serif;
@ -167,7 +167,7 @@
.top-bar-container{
background: $ombi-background-primary;
color:$ombi-background-primary-accent;
color:$ombi-background-primary-accent;
}
}

@ -37,7 +37,6 @@ export class MyNavComponent implements OnInit {
@Input() public isAdmin: string;
@Input() public email: string;
@Output() public logoutClick = new EventEmitter();
@Output() public themeChange = new EventEmitter<string>();
public theme: string;
public issuesEnabled: boolean = false;
public navItems: INavBar[];
@ -98,20 +97,6 @@ export class MyNavComponent implements OnInit {
this.logoutClick.emit();
}
public switchTheme() {
if (this.theme) {
let newTheme = "";
if (this.theme === "dark") {
newTheme = "light";
} else {
newTheme = "dark";
}
this.store.save("theme", newTheme)
this.theme = newTheme;
this.themeChange.emit(newTheme);
}
}
public changeFilter(event: MatSlideToggleChange, searchFilterType: SearchFilterType) {
switch (searchFilterType) {
case SearchFilterType.Movie:

@ -4,7 +4,7 @@
background: $accent-dark !important;
font-size: 1em;
font-weight: bold;
color: #303030;
color: $ombi-background-primary-accent;
}
.mat-form-field {
@ -23,7 +23,7 @@
::ng-deep .dark .mat-tab-label-active{
background: $accent-dark !important;
color: #303030 !important;
color: $ombi-background-primary-accent !important;
font-weight:bold;
}

@ -57,7 +57,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
</head>
<body class="mat-typography custom-background">
<body class="mat-typography my-theme">
<app-ombi>
<script type="text/javascript">

@ -10,15 +10,14 @@
// 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);
$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);
$mat-light-theme-background: map_merge($mat-light-theme-background, (background: $ombi-background-primary));
// 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);
}
$theme: mat-dark-theme((
color: (
primary: $ombi-dark-app-primary,
accent: $ombi-dark-app-accent,
)
), $ombi-dark-app-accent);
@include angular-material-theme($theme);

@ -1,3 +1,5 @@
@import "./variables.scss";
.lg-form-field .mat-form-field-infix {
width: 480px;
}
@ -12,4 +14,19 @@ td.mat-cell {
.mat-form-field {
display: block !important;
}
.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
background-color: $ombi-background-accent;
}
// lighter bg
.mat-expansion-panel, .mat-card, .mat-dialog-container, .mat-menu-content{
background: $ombi-background-accent !important;
}
// Dark bg
.mat-sidenav-container {
background: $ombi-background-primary;
}

@ -8,12 +8,12 @@
$ombi-app-primary: mat-palette($ombi-primary);
$ombi-app-accent : mat-palette($ombi-accent);
// The warn palette is optional (defaults to red).
$ombi-app-warn : mat-palette($mat-deep-orange);
$ombi-app-warn : mat-palette($ombi-accent);
// Define an alternate dark theme.
$ombi-dark-app-primary: mat-palette($ombi-primary);
$ombi-dark-app-accent: mat-palette($ombi-accent);
$ombi-dark-app-warn: mat-palette($mat-deep-orange);
$ombi-dark-app-primary: mat-palette($ombi-primary, 500);
$ombi-dark-app-accent: mat-palette($ombi-accent, 500);
$ombi-dark-app-warn: mat-palette($ombi-accent, 500);
@ -32,7 +32,7 @@ $warn: mat-color($ombi-app-warn);
// DARK
$background-dark: mat-color( mat-palette($ombi-background));
$backgroundTint-dark: mat-color(mat-palette($mat-grey, 900));
$backgroundTint-dark: mat-color(mat-palette($ombi-background, 900));
$text-dark: white;
$panel: mat-color($ombi-dark-app-primary);
$primary-dark: mat-color($ombi-dark-app-primary);

@ -7720,6 +7720,11 @@ sass-loader@8.0.2:
schema-utils "^2.6.1"
semver "^6.3.0"
sass-recursive-map-merge@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/sass-recursive-map-merge/-/sass-recursive-map-merge-1.0.1.tgz#d5460b9fe10df62d246ca27c48d823f25c2290cb"
integrity sha512-OuDTGVGx2o2sPeaSgGob5s2Qf6LxoMU4LG7n6vCzNgfXyBz/y8tKzcEYdmvgyhjvGQVcGA1g2UJnP7WMmahuVg==
sass@1.26.3:
version "1.26.3"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.3.tgz#412df54486143b76b5a65cdf7569e86f44659f46"

Loading…
Cancel
Save