github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-20 21:33:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed #3760 and #3690

Browse source
This commit is contained in:
tidusjar 2020-09-17 21:39:14 +01:00
commit 342f01be12
6 changed files with 67 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
View file

@ -1,29 +1,42 @@
<mat-sidenav-container *ngIf="showNav" class="sidenav-container"> <mat-sidenav-container *ngIf="showNav" class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)"> <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>{{applicationName}}</mat-toolbar> <mat-toolbar>{{applicationName}}</mat-toolbar>
<mat-nav-list> <mat-nav-list>
<span *ngFor="let nav of navItems"> <span *ngFor="let nav of navItems">
<div *ngIf="(nav.requiresAdmin && isAdmin || !nav.requiresAdmin) && nav.enabled"> <div *ngIf="(nav.requiresAdmin && isAdmin || !nav.requiresAdmin) && nav.enabled">
<a *ngIf="nav.externalLink" mat-list-item [href]="nav.link" target="_blank" matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right" [routerLinkActive]="getTheme()"> <a *ngIf="nav.externalLink" mat-list-item [href]="nav.link" target="_blank"
matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right"
[routerLinkActive]="'active-list-item'">
<mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style" >{{nav.icon}}</mat-icon> <mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style">{{nav.icon}}
<i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}" style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i> </mat-icon>
&nbsp;{{nav.name | translate}} <i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}"
</a> style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
<a *ngIf="!nav.externalLink" mat-list-item [routerLink]="nav.link" [style]="nav.color" [routerLinkActive]="getTheme()"> &nbsp;{{nav.name | translate}}
</a>
<a *ngIf="!nav.externalLink" mat-list-item [routerLink]="nav.link" [style]="nav.color"
[routerLinkActive]="'active-list-item'">
<mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon> <mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
&nbsp;{{nav.name | translate}} &nbsp;{{nav.name | translate}}
</a> </a>
</div> </div>
</span> </span>
<a id="nav-logout" class="bottom-nav-link" mat-list-item [routerLinkActive]="getTheme()" aria-label="Toggle sidenav" (click)="logOut();"> <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" 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> <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
{{ 'NavigationBar.Logout' | translate }} &nbsp;{{ 'NavigationBar.Logout' | translate }}
</a> </a>
@ -31,28 +44,20 @@
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content> <mat-sidenav-content>
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async"> <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon> *ngIf="isHandset$ | async">
</button> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<div class="col-md-10 offset-md-1 col-8">
<span class="middle justify-content-center align-items-center">
<!-- Search Bar -->
<div style="width: 50%;">
<app-nav-search></app-nav-search>
</div>
</span>
<div class="col-10">
<span class="justify-content-center align-items-center">
<!-- Search Bar -->
<div>
<app-nav-search></app-nav-search>
</div>
</span>
</div> </div>
<div class="col-1">
<div class="float-right">
<a 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>
</a>
</div>
</div>
</mat-toolbar> </mat-toolbar>
<!-- Page --> <!-- Page -->

9
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
View file

@ -55,6 +55,15 @@
font-weight:500; font-weight:500;
} }
.mat-drawer-content {
position: relative;
overflow: hidden;
z-index: 1;
display: block;
height: 100%;
/* overflow: auto; */
}
// Changed color with !important and changed the font weight // Changed color with !important and changed the font weight
/*.active-list-item-dark { /*.active-list-item-dark {
background: $accent-dark !important; background: $accent-dark !important;

8
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
View file

@ -36,6 +36,7 @@ export class MyNavComponent implements OnInit {
public async ngOnInit() { public async ngOnInit() {
this.issuesEnabled = await this.settingsService.issueEnabled().toPromise(); this.issuesEnabled = await this.settingsService.issueEnabled().toPromise();
const customizationSettings = await this.settingsService.getCustomization().toPromise();
console.log("issues enabled: " + this.issuesEnabled); console.log("issues enabled: " + this.issuesEnabled);
this.theme = this.store.get("theme"); this.theme = this.store.get("theme");
if(!this.theme) { if(!this.theme) {
@ -48,6 +49,7 @@ export class MyNavComponent implements OnInit {
{ name: "NavigationBar.UserManagement", icon: "account_circle", link: "/usermanagement", requiresAdmin: true, enabled: true, faIcon: null }, { name: "NavigationBar.UserManagement", icon: "account_circle", link: "/usermanagement", requiresAdmin: true, enabled: true, faIcon: null },
// { name: "NavigationBar.Calendar", icon: "calendar_today", link: "/calendar", requiresAdmin: false, enabled: true }, // { name: "NavigationBar.Calendar", icon: "calendar_today", link: "/calendar", requiresAdmin: false, enabled: true },
{ name: "NavigationBar.Donate", icon: "attach_money", link: "https://www.paypal.me/PlexRequestsNet", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, style: "color:red;", toolTipMessage: 'NavigationBar.DonateTooltip', faIcon: null }, { name: "NavigationBar.Donate", icon: "attach_money", link: "https://www.paypal.me/PlexRequestsNet", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, style: "color:red;", toolTipMessage: 'NavigationBar.DonateTooltip', faIcon: null },
{ name: "NavigationBar.Donate", icon: "attach_money", link: customizationSettings.customDonationUrl, externalLink: true, requiresAdmin: false, enabled: customizationSettings.enableCustomDonations, toolTip: true, toolTipMessage: customizationSettings.customDonationMessage, faIcon: null },
{ name: "NavigationBar.FeatureSuggestion", icon: null, link: "https://features.ombi.io/", externalLink: true, requiresAdmin: false, enabled: true, toolTip: true, toolTipMessage: 'NavigationBar.FeatureSuggestionTooltip', faIcon: "fa-lightbulb-o" }, { name: "NavigationBar.FeatureSuggestion", icon: null, link: "https://features.ombi.io/", externalLink: true, requiresAdmin: false, enabled: true, toolTip: true, toolTipMessage: 'NavigationBar.FeatureSuggestionTooltip', faIcon: "fa-lightbulb-o" },
{ name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About", requiresAdmin: true, enabled: true, faIcon: null }, { name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About", requiresAdmin: true, enabled: true, faIcon: null },
{ name: "NavigationBar.UserPreferences", icon: "person", link: "/user-preferences", requiresAdmin: false, enabled: true, faIcon: null }, { name: "NavigationBar.UserPreferences", icon: "person", link: "/user-preferences", requiresAdmin: false, enabled: true, faIcon: null },
@ -71,10 +73,4 @@ export class MyNavComponent implements OnInit {
this.themeChange.emit(newTheme); this.themeChange.emit(newTheme);
} }
} }
// @TIDUSJAR Don't know if we need this method anymore?
public getTheme(){
return 'active-list-item';
}
} }

3
src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
View file

@ -43,4 +43,5 @@ $ombi-accent: #258a6d;
.options { .options {
margin-bottom: 5px; margin-bottom: 5px;
} }

28
src/Ombi/ClientApp/src/app/settings/customization/customization.component.html
View file

@ -6,21 +6,21 @@
<div class="col-md-12 col-12 col-sm-12"> <div class="col-md-12 col-12 col-sm-12">
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always> <mat-form-field appearance="outline">
<mat-label>Application Name</mat-label> <mat-label>Application Name</mat-label>
<input matInput placeholder="Application Name" [(ngModel)]="settings.applicationName"> <input matInput [(ngModel)]="settings.applicationName">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always> <mat-form-field appearance="outline">
<mat-label>Application URL</mat-label> <mat-label>Application URL</mat-label>
<input matInput placeholder="Application URL" [(ngModel)]="settings.applicationUrl"> <input matInput [(ngModel)]="settings.applicationUrl">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always> <mat-form-field appearance="outline" >
<mat-label>Custom Logo</mat-label> <mat-label>Custom Logo</mat-label>
<input matInput placeholder="Custom Logo" type="url"[(ngModel)]="settings.logo"> <input matInput type="url"[(ngModel)]="settings.logo">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
@ -37,15 +37,15 @@
</mat-checkbox> </mat-checkbox>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline" floatLabel=always> <mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline">
<mat-label>Custom Donation URL</mat-label> <mat-label>Custom Donation URL</mat-label>
<input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationUrl" matTooltip="A link to a Paypal address, or your custom donation url."> <input matInput [(ngModel)]="settings.customDonationUrl" matTooltip="A link to a Paypal address, or your custom donation url.">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline" floatLabel=always> <mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline">
<mat-label>Custom Donation URL</mat-label> <mat-label>Custom Donation Message</mat-label>
<input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationMessage" matTooltip="Set a custom message to be displayed in the navigation bar."> <input matInput [(ngModel)]="settings.customDonationMessage" matTooltip="Set a custom message to be displayed in the navigation bar.">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
@ -53,10 +53,10 @@
Enable Custom Page Enable Custom Page
</mat-checkbox> </mat-checkbox>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always> <mat-form-field appearance="outline">
<mat-label>Custom CSS</mat-label> <mat-label>Custom CSS</mat-label>
<textarea matInput [(ngModel)]="settings.customCss" placeholder="Custom CSS"></textarea> <textarea matInput [(ngModel)]="settings.customCss"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="form-group"> <div class="form-group">

8
src/Ombi/ClientApp/src/styles/shared.scss
View file

@ -43,13 +43,7 @@ body {
scrollbar-width: thin; //firefox scrollbar-width: thin; //firefox
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
#main-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.spinner-container { .spinner-container {
position: relative; position: relative;
margin-left: 50%; margin-left: 50%;