Added custom favicon

This commit is contained in:
Maarten Heebink 2022-01-04 00:34:27 +01:00
commit f947d852f0
6 changed files with 94 additions and 70 deletions

View file

@ -12,6 +12,7 @@
public bool RecentlyAddedPage { get; set; } public bool RecentlyAddedPage { get; set; }
public bool UseCustomPage { get; set; } public bool UseCustomPage { get; set; }
public bool HideAvailableFromDiscover { get; set; } public bool HideAvailableFromDiscover { get; set; }
public string Favicon { get; set; }
public string AddToUrl(string part) public string AddToUrl(string part)
{ {

View file

@ -1,4 +1,4 @@
import { OverlayContainer } from '@angular/cdk/overlay'; import { OverlayContainer } from '@angular/cdk/overlay';
import { Component, OnInit, HostBinding, Inject } from "@angular/core"; import { Component, OnInit, HostBinding, Inject } from "@angular/core";
import { NavigationStart, Router } from "@angular/router"; import { NavigationStart, Router } from "@angular/router";
@ -34,6 +34,7 @@ export class AppComponent implements OnInit {
public userName: string; public userName: string;
public userEmail: string; public userEmail: string;
public accessToken: string; public accessToken: string;
public favicon: string;
private hubConnected: boolean; private hubConnected: boolean;
@ -88,9 +89,15 @@ export class AppComponent implements OnInit {
this.customizationFacade.settings$().subscribe(x => { this.customizationFacade.settings$().subscribe(x => {
this.customizationSettings = x; this.customizationSettings = x;
if (this.customizationSettings && this.customizationSettings.applicationName) { if (this.customizationSettings && this.customizationSettings.applicationName) {
this.applicationName = this.customizationSettings.applicationName; this.applicationName = this.customizationSettings.applicationName;
this.document.getElementsByTagName('title')[0].innerText = this.applicationName; this.document.getElementsByTagName('title')[0].innerText = this.applicationName;
} }
if (this.customizationSettings && this.customizationSettings.favicon) {
this.favicon = this.customizationSettings.favicon;
this.document.getElementById('favicon').setAttribute('href', this.favicon);
}
if (this.customizationSettings && this.customizationSettings.customCss) { if (this.customizationSettings && this.customizationSettings.customCss) {
var dom = this.document.getElementsByTagName('head')[0]; var dom = this.document.getElementsByTagName('head')[0];
var css = document.createElement("style"); var css = document.createElement("style");

View file

@ -1,4 +1,4 @@
import { ISettings } from "./ICommon"; import { ISettings } from "./ICommon";
import { RequestLimitType } from "."; import { RequestLimitType } from ".";
export interface IExternalSettings extends ISettings { export interface IExternalSettings extends ISettings {
@ -193,6 +193,7 @@ export interface ICustomizationSettings extends ISettings {
recentlyAddedPage: boolean; recentlyAddedPage: boolean;
useCustomPage: boolean; useCustomPage: boolean;
hideAvailableFromDiscover: boolean; hideAvailableFromDiscover: boolean;
favicon: string;
} }
export interface IJobSettings { export interface IJobSettings {

View file

@ -5,71 +5,80 @@
<legend>Customization</legend> <legend>Customization</legend>
<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"> <mat-form-field appearance="outline">
<mat-label>Application Name</mat-label> <mat-label>Application Name</mat-label>
<input matInput [(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-hint>The application url should be your Externally Accessible URL (the address you use to reach Ombi from outside your system). For example, 'https://example.com/requests'. <br />Please ensure this field is correct as it drives a lot of functionality, including the QR code for the <mat-hint>The application url should be your Externally Accessible URL (the address you use to reach Ombi from outside your system). For example, 'https://example.com/requests'. <br />Please ensure this field is correct as it drives a lot of functionality, including the QR code for the
mobile app, and the way email notifications are sent. mobile app, and the way email notifications are sent.
</mat-hint> </mat-hint>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Application URL</mat-label> <mat-label>Application URL</mat-label>
<input matInput [(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" > <mat-form-field appearance="outline" >
<mat-label>Custom Logo</mat-label> <mat-label>Custom Logo</mat-label>
<input matInput 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"> <mat-hint>
<div *ngIf="settings.logo" class="form-group"> The favicon url should be an externally accesible URL.
<label for="logo" class="control-label">Logo Preview:</label> </mat-hint>
<div> <div class="md-form-field">
<img [src]="settings.logo" style="width: 300px" /> <mat-form-field appearance="outline">
</div> <mat-label>Custom Favicon</mat-label>
</div> <input matInput type="url" [(ngModel)]="settings.favicon">
</div> </mat-form-field>
<div class="md-form-field"> </div>
<mat-slide-toggle [(ngModel)]="settings.hideAvailableFromDiscover" matTooltip="Any media content that is available will now be hidden on the discover page, the user still can search for it"> <div class="md-form-field">
Hide Available Content On The Discover Page <div *ngIf="settings.logo" class="form-group">
</mat-slide-toggle> <label for="logo" class="control-label">Logo Preview:</label>
</div> <div>
<div class="md-form-field"> <img [src]="settings.logo" style="width: 300px" />
<mat-slide-toggle [(ngModel)]="settings.enableCustomDonations" matTooltip="Enable to show a custom donation link in the navigation bar"> </div>
Enable Custom Donation Link
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline">
<mat-label>Custom Donation URL</mat-label>
<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">
<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">
<mat-slide-toggle [(ngModel)]="settings.useCustomPage" matTooltip="Enabled a custom page where you can fully edit. You will need the Edit Custom Page role.">
Enable Custom Page
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Custom CSS</mat-label>
<textarea matInput [(ngModel)]="settings.customCss"></textarea>
</mat-form-field>
</div>
<div class="form-group">
<button mat-raised-button (click)="save()" type="submit" type="submit" id="save" color="accent">Submit</button>
</div> </div>
</div>
<div class="md-form-field">
<mat-slide-toggle [(ngModel)]="settings.hideAvailableFromDiscover" matTooltip="Any media content that is available will now be hidden on the discover page, the user still can search for it">
Hide Available Content On The Discover Page
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-slide-toggle [(ngModel)]="settings.enableCustomDonations" matTooltip="Enable to show a custom donation link in the navigation bar">
Enable Custom Donation Link
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline">
<mat-label>Custom Donation URL</mat-label>
<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">
<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">
<mat-slide-toggle [(ngModel)]="settings.useCustomPage" matTooltip="Enabled a custom page where you can fully edit. You will need the Edit Custom Page role.">
Enable Custom Page
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Custom CSS</mat-label>
<textarea matInput [(ngModel)]="settings.customCss"></textarea>
</mat-form-field>
</div>
<div class="form-group">
<button mat-raised-button (click)="save()" type="submit" type="submit" id="save" color="accent">Submit</button>
</div>
</div> </div>
<!-- <div class="col-7"> --> <!-- <div class="col-7"> -->

View file

@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<script type='text/javascript'>window["baseHref"] = '/';</script> <script type='text/javascript'>window["baseHref"] = '/';</script>
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="icon" type="image/png" href="images/favicon/favicon.ico"/> <link id="favicon" rel="icon" type="image/png" href="images/favicon/favicon.ico"/>
<link rel="apple-touch-icon" type="image/png" href="images/favicon/apple-touch-icon.png"/> <link rel="apple-touch-icon" type="image/png" href="images/favicon/apple-touch-icon.png"/>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

View file

@ -23,6 +23,12 @@
appName = "Ombi"; appName = "Ombi";
} }
var favicon = customization.Favicon;
if (string.IsNullOrEmpty(favicon))
{
favicon = "images/favicon/favicon.ico";
}
} }
<!DOCTYPE html> <!DOCTYPE html>