pull/3776/head
tidusjar 4 years ago
parent 9c64e3693a
commit 342f01be12

@ -1,29 +1,42 @@
<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-nav-list>
<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>
<i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}" style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
&nbsp;{{nav.name | translate}}
</a>
<a *ngIf="!nav.externalLink" mat-list-item [routerLink]="nav.link" [style]="nav.color" [routerLinkActive]="getTheme()">
<mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style">{{nav.icon}}
</mat-icon>
<i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}"
style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
&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>
&nbsp;{{nav.name | translate}}
</a>
</div>
<mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
&nbsp;{{nav.name | translate}}
</a>
</div>
</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>
{{ 'NavigationBar.Logout' | translate }}
&nbsp;{{ 'NavigationBar.Logout' | translate }}
</a>
@ -31,28 +44,20 @@
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
<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>
<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>
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<div class="col-10">
<span class="justify-content-center align-items-center">
<!-- Search Bar -->
<div>
<app-nav-search></app-nav-search>
</div>
</span>
</div>
</mat-toolbar>
<!-- Page -->

@ -55,6 +55,15 @@
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
/*.active-list-item-dark {
background: $accent-dark !important;

@ -36,6 +36,7 @@ export class MyNavComponent implements OnInit {
public async ngOnInit() {
this.issuesEnabled = await this.settingsService.issueEnabled().toPromise();
const customizationSettings = await this.settingsService.getCustomization().toPromise();
console.log("issues enabled: " + this.issuesEnabled);
this.theme = this.store.get("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.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: 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.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 },
@ -71,10 +73,4 @@ export class MyNavComponent implements OnInit {
this.themeChange.emit(newTheme);
}
}
// @TIDUSJAR Don't know if we need this method anymore?
public getTheme(){
return 'active-list-item';
}
}

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

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

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

Loading…
Cancel
Save