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

Made some UI changes, reworked the Emby and Plex screens to make them more user friendly and no so fugly. #865

Browse source 
Also made the login page placeholder text slightly lighter
This commit is contained in:
Jamie.Rees 2017-09-13 16:27:21 +01:00
commit e34db987d7
6 changed files with 323 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Ombi/ClientApp/app/login/login.component.scss
View file

@ -8,7 +8,7 @@ $info-colour: #5bc0de;
$warning-colour: #f0ad4e; $warning-colour: #f0ad4e;
$danger-colour: #d9534f; $danger-colour: #d9534f;
$success-colour: #5cb85c; $success-colour: #5cb85c;
$placeholder-colour: #1b1b1b; $placeholder-colour: #3b3b3b;
body, html { body, html {
height: 100% !important; height: 100% !important;

13
src/Ombi/ClientApp/app/settings/emby/emby.component.html
View file

@ -29,6 +29,7 @@
</div> </div>
<br /> <br />
<br /> <br />
<div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="name" class="control-label">Server name</label> <label for="name" class="control-label">Server name</label>
<div> <div>
@ -56,7 +57,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <!--<div class="form-group">
<div class="checkbox"> <div class="checkbox">
@ -64,7 +65,7 @@
<label for="EnableTvEpisodeSearching">Enable Episode Searching</label> <label for="EnableTvEpisodeSearching">Enable Episode Searching</label>
</div> </div>
</div> </div>-->
<div class="form-group"> <div class="form-group">
@ -73,21 +74,25 @@
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.apiKey" placeholder="Emby Api Key" value="{{server.apiKey}}"> <input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.apiKey" placeholder="Emby Api Key" value="{{server.apiKey}}">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div> <div>
<button id="testPlex" type="submit" (click)="test()" class="btn btn-primary-outline">Test Connectivity <div id="spinner"></div></button> <button id="testPlex" type="submit" (click)="test()" class="btn btn-primary-outline">Test Connectivity <div id="spinner"></div></button>
</div> </div>
</div>
</div> </div>
</ng-template> </ng-template>
</ngb-tab> </ngb-tab>
</div> </div>
</ngb-tabset> </ngb-tabset>
<div class="row">
<div class="col-md-1 col-md-push-5">
<div class="form-group"> <div class="form-group">
<div> <div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button> <button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div> </div>
</div> </div>
</div>
</div>
</fieldset> </fieldset>
</div> </div>

91
src/Ombi/ClientApp/app/settings/plex/plex.component.html
View file

@ -4,10 +4,6 @@
<legend>Plex Configuration</legend> <legend>Plex Configuration</legend>
<div class="row"> <div class="row">
<div class="col-md-2 col-md-offset-10">
<span style="vertical-align: top;">Advanced</span>
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
</div>
<div class="form-group col-md-3"> <div class="form-group col-md-3">
<div class="checkbox"> <div class="checkbox">
@ -33,43 +29,8 @@
<br /> <br />
<br /> <br />
<div class="form-group"> <div class="col-md-6">
<label for="username" class="control-label">Username and Password</label> <!-- Main Content -->
<div>
<input type="text" class="form-control form-control-custom" id="username" [(ngModel)]="username" placeholder="username">
</div>
<br />
<div>
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div>
<button id="requestToken" (click)="requestServers(server)" class="btn btn-primary-outline">Load Servers <i class="fa fa-key"></i></button>
</div>
</div>
<br />
<br />
<div class="form-group">
<label for="username" class="control-label">Please select the server</label><br />
<div class="btn-group">
<div class="btn-group">
<a [attr.disabled]="!serversButton ? true : null" href="#" class="btn btn-info-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Servers
<span class="caret"></span>
</a>
<ul *ngIf="loadedServers" class="dropdown-menu">
<li *ngFor="let s of loadedServers.servers.server">
<a (click)="selectServer(s,server)">{{s.name}}</a>
</li>
</ul>
</div>
</div>
</div>
<div *ngIf="advanced">
<div class="form-group"> <div class="form-group">
<label for="name" class="control-label">Server name</label> <label for="name" class="control-label">Server name</label>
<div> <div>
@ -98,7 +59,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <!--<div class="form-group">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="EnableTvEpisodeSearching" [(ngModel)]="server.enableEpisodeSearching" [checked]="server.enableEpisodeSearching"> <input type="checkbox" id="EnableTvEpisodeSearching" [(ngModel)]="server.enableEpisodeSearching" [checked]="server.enableEpisodeSearching">
@ -108,7 +69,7 @@
If enabled then we will lookup all episodes on your Plex server and store them in the local database. This will stop episode requests that already exist on Plex (that might not be in Sonarr). If enabled then we will lookup all episodes on your Plex server and store them in the local database. This will stop episode requests that already exist on Plex (that might not be in Sonarr).
Please be aware that this is a very resource intensive process and while the Plex Episode Cacher job is running the application may appear slow (Depending on the size of your Plex library). Please be aware that this is a very resource intensive process and while the Plex Episode Cacher job is running the application may appear slow (Depending on the size of your Plex library).
</small> </small>
</div> </div>-->
<div class="form-group"> <div class="form-group">
<label for="authToken" class="control-label">Plex Authorization Token</label> <label for="authToken" class="control-label">Plex Authorization Token</label>
@ -124,6 +85,44 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6">
<div class="form-group">
<label for="username" class="control-label">Username and Password</label>
<div>
<input type="text" class="form-control form-control-custom" id="username" [(ngModel)]="username" placeholder="username">
</div>
<br />
<div>
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div>
<button id="requestToken" (click)="requestServers(server)" class="btn btn-primary-outline">Load Servers <i class="fa fa-key"></i></button>
</div>
</div>
<br />
<br />
<div class="form-group" *ngIf="loadedServers">
<label for="username" class="control-label">Please select the server</label><br />
<div class="btn-group">
<div class="btn-group">
<a [attr.disabled]="!serversButton ? true : null" href="#" class="btn btn-info-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Servers
<span class="caret"></span>
</a>
<ul *ngIf="loadedServers" class="dropdown-menu">
<li *ngFor="let s of loadedServers.servers.server">
<a (click)="selectServer(s,server)">{{s.name}}</a>
</li>
</ul>
</div>
</div>
</div>
<hr/>
<label>Please select the libraries you want Ombi to look in for content</label> <label>Please select the libraries you want Ombi to look in for content</label>
<br /> <br />
<small>Note: if nothing is selected, we will monitor all libraries</small> <small>Note: if nothing is selected, we will monitor all libraries</small>
@ -151,15 +150,19 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</ng-template> </ng-template>
</ngb-tab> </ngb-tab>
</div> </div>
</ngb-tabset> </ngb-tabset>
<div class="col-md-3">
<div class="form-group"> <div class="form-group">
<div> <div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button> <button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div> </div>
</div> </div>
</div>
</fieldset> </fieldset>
</div> </div>

3
src/Ombi/ClientApp/app/settings/plex/plex.component.ts
View file

@ -24,7 +24,6 @@ export class PlexComponent implements OnInit, OnDestroy {
private subscriptions = new Subject<void>(); private subscriptions = new Subject<void>();
username: string; username: string;
password: string; password: string;
advanced = false;
serversButton = false; serversButton = false;
ngOnInit(): void { ngOnInit(): void {
@ -42,7 +41,7 @@ export class PlexComponent implements OnInit, OnDestroy {
this.serversButton = true; this.serversButton = true;
this.notificationService.success("Loaded", "Found the servers! Please select one!") this.notificationService.success("Loaded", "Found the servers! Please select one!")
} else { } else {
this.notificationService.warning("Error When Requesting Plex Servers", x.message); this.notificationService.warning("Error When Requesting Plex Servers", "Please make sure your username and password are correct");
} }
}); });
} }

18
src/Ombi/ClientApp/app/settings/radarr/radarr.component.html
View file

@ -7,7 +7,7 @@
<span style="vertical-align: top;">Advanced</span> <span style="vertical-align: top;">Advanced</span>
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch> <p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
</div> </div>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)"> <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<div *ngIf="form.invalid" class="alert alert-danger"> <div *ngIf="form.invalid" class="alert alert-danger">
<div *ngIf="form.dirty"> <div *ngIf="form.dirty">
<div *ngIf="form.get('ip').hasError('required')">The IP/Hostname is required</div> <div *ngIf="form.get('ip').hasError('required')">The IP/Hostname is required</div>
@ -21,6 +21,7 @@
</div> </div>
</div> </div>
<div class="col-md-6">
<div class="form-group"> <div class="form-group">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled"> <input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled">
@ -33,7 +34,7 @@
<div class="form-group"> <div class="form-group">
<label for="Ip" class="control-label">Hostname or IP</label> <label for="Ip" class="control-label">Hostname or IP</label>
<div class=""> <div class="">
<input type="text" class="form-control form-control-custom "id="Ip" name="Ip" placeholder="localhost" formControlName="ip"> <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" formControlName="ip">
</div> </div>
</div> </div>
@ -41,7 +42,7 @@
<label for="portNumber" class="control-label">Port</label> <label for="portNumber" class="control-label">Port</label>
<div class=""> <div class="">
<input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number" > <input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number">
</div> </div>
</div> </div>
@ -65,6 +66,8 @@
<input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir"> <input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir">
</div> </div>
</div> </div>
</div>
<div class="col-md-6">
<div class="form-group"> <div class="form-group">
<div> <div>
<button type="submit" (click)="getProfiles(form)" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button> <button type="submit" (click)="getProfiles(form)" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button>
@ -74,7 +77,7 @@
<label for="select" class="control-label">Quality Profiles</label> <label for="select" class="control-label">Quality Profiles</label>
<div id="profiles"> <div id="profiles">
<select formControlName="defaultQualityProfile" class="form-control form-control-custom" id="select"> <select formControlName="defaultQualityProfile" class="form-control form-control-custom" id="select">
<option *ngFor='let quality of qualities' value='{{quality.id}}'>{{quality.name}}</option> <option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
</select> </select>
</div> </div>
</div> </div>
@ -90,7 +93,7 @@
<label for="rootFolders" class="control-label">Default Root Folders</label> <label for="rootFolders" class="control-label">Default Root Folders</label>
<div id="rootFolders"> <div id="rootFolders">
<select formControlName="defaultRootPath" class="form-control form-control-custom"> <select formControlName="defaultRootPath" class="form-control form-control-custom">
<option *ngFor='let folder of rootFolders' value='{{folder.path}}'>{{folder.path}}</option> <option *ngFor="let folder of rootFolders" value="{{folder.path}}">{{folder.path}}</option>
</select> </select>
</div> </div>
</div> </div>
@ -99,12 +102,12 @@
<label for="rootFolders" class="control-label">Default Minimum Availability</label> <label for="rootFolders" class="control-label">Default Minimum Availability</label>
<div id="rootFolders"> <div id="rootFolders">
<select formControlName="minimumAvailability" class="form-control form-control-custom"> <select formControlName="minimumAvailability" class="form-control form-control-custom">
<option *ngFor='let min of minimumAvailabilityOptions' value='{{min.value}}'>{{min.name}}</option> <option *ngFor="let min of minimumAvailabilityOptions" value="{{min.value}}">{{min.name}}</option>
</select> </select>
</div> </div>
</div> </div>
<div class="form-group" *ngIf="advanced"> <div class="form-group" *ngIf="advanced" style="color:#ff761b">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="addOnly" formControlName="addOnly"> <input type="checkbox" id="addOnly" formControlName="addOnly">
<label for="addOnly">Do not search</label> <label for="addOnly">Do not search</label>
@ -122,6 +125,7 @@
<button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button> <button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button>
</div> </div>
</div> </div>
</div>
</form> </form>
</fieldset> </fieldset>
</div> </div>

23
src/Ombi/ClientApp/app/settings/sonarr/sonarr.component.html
View file

@ -19,10 +19,10 @@
<div *ngIf="form.get('rootPath').hasError('required')">A Default Root Path is required</div> <div *ngIf="form.get('rootPath').hasError('required')">A Default Root Path is required</div>
</div> </div>
</div> </div>
<div class="col-md-6">
<div class="form-group"> <div class="form-group">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="enable" formControlName="enabled" > <input type="checkbox" id="enable" formControlName="enabled">
<label for="enable">Enable</label> <label for="enable">Enable</label>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
<div class="form-group"> <div class="form-group">
<label for="Ip" class="control-label">Sonarr Hostname or IP</label> <label for="Ip" class="control-label">Sonarr Hostname or IP</label>
<div class=""> <div class="">
<input type="text" class="form-control form-control-custom " formControlName="ip" id="Ip" name="Ip" placeholder="localhost" > <input type="text" class="form-control form-control-custom " formControlName="ip" id="Ip" name="Ip" placeholder="localhost">
</div> </div>
</div> </div>
@ -38,7 +38,7 @@
<label for="portNumber" class="control-label">Port</label> <label for="portNumber" class="control-label">Port</label>
<div class=""> <div class="">
<input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number" > <input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number">
</div> </div>
</div> </div>
@ -59,9 +59,11 @@
<div class="form-group"> <div class="form-group">
<label for="SubDir" class="control-label">Sonarr Base Url</label> <label for="SubDir" class="control-label">Sonarr Base Url</label>
<div> <div>
<input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir" > <input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir">
</div> </div>
</div> </div>
</div>
<div class="col-md-6">
<div class="form-group"> <div class="form-group">
<div> <div>
<button type="button" (click)="getProfiles(form)" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button> <button type="button" (click)="getProfiles(form)" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
@ -71,14 +73,14 @@
<label for="select" class="control-label">Quality Profiles</label> <label for="select" class="control-label">Quality Profiles</label>
<div id="profiles"> <div id="profiles">
<select class="form-control form-control-custom" id="select" formControlName="qualityProfile"> <select class="form-control form-control-custom" id="select" formControlName="qualityProfile">
<option *ngFor='let quality of qualities' value='{{quality.id}}'>{{quality.name}}</option> <option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
</select> </select>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div> <div>
<button type="button" (click)="getRootFolders(form)" class="btn btn-primary-outline">Get Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin" ></span></button> <button type="button" (click)="getRootFolders(form)" class="btn btn-primary-outline">Get Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
</div> </div>
@ -87,7 +89,7 @@
<label for="rootFolders" class="control-label">Default Root Folders</label> <label for="rootFolders" class="control-label">Default Root Folders</label>
<div id="rootFolders"> <div id="rootFolders">
<select class="form-control form-control-custom" formControlName="rootPath"> <select class="form-control form-control-custom" formControlName="rootPath">
<option *ngFor='let folder of rootFolders' value='{{folder.id}}'>{{folder.path}}</option> <option *ngFor="let folder of rootFolders" value="{{folder.id}}">{{folder.path}}</option>
</select> </select>
</div> </div>
</div> </div>
@ -95,13 +97,13 @@
<div class="form-group"> <div class="form-group">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="SeasonFolders" name="SeasonFolders"formControlName="seasonFolders"> <input type="checkbox" id="SeasonFolders" name="SeasonFolders" formControlName="seasonFolders">
<label for="SeasonFolders">Enable season folders</label> <label for="SeasonFolders">Enable season folders</label>
</div> </div>
<label>Enabled Season Folders to organize seasons into individual folders within a show.</label> <label>Enabled Season Folders to organize seasons into individual folders within a show.</label>
</div> </div>
<div class="form-group" *ngIf="advanced"> <div class="form-group" *ngIf="advanced" style="color:#ff761b">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="addOnly" formControlName="addOnly"> <input type="checkbox" id="addOnly" formControlName="addOnly">
<label for="addOnly">Do not search</label> <label for="addOnly">Do not search</label>
@ -120,6 +122,7 @@
<button type="submit" class="btn btn-primary-outline ">Submit</button> <button type="submit" class="btn btn-primary-outline ">Submit</button>
</div> </div>
</div> </div>
</div>
</form> </form>
</fieldset> </fieldset>
</div> </div>