mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-14 02:26:55 -07:00
Err, this is a good one. Really happy with this. But please don't tell anyone
This commit is contained in:
tidusjar
parent
63b8984dbf
commit
18799f476a
13 changed files with 45 additions and 50 deletions
|
|
@ -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>
|
||||
{{ '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);
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
$mat-light-theme-background: map_merge($mat-light-theme-background, (background: $ombi-background-primary));
|
||||
|
||||
$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…
Add table
Add a link
Reference in a new issue