github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Some more UI Tweaks on the settings pages

Browse source
This commit is contained in:
twanariens 2020-05-30 23:23:06 +02:00
commit cc06ebc7d3
9 changed files with 151 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/Ombi/ClientApp/src/app/settings/couchpotato/couchpotato.component.scss
View file

@ -4,8 +4,3 @@
width: 95%;
margin-top: 10px;
}
::ng-deep .dark .btn:hover {
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

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

@ -4,48 +4,61 @@
<fieldset *ngIf="settings">
<legend>Customization</legend>
<div class="col-12">
<mat-form-field>
<input matInput placeholder="Application Name" [(ngModel)]="settings.applicationName">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Application URL" [(ngModel)]="settings.applicationUrl">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Custom Logo" type="url"[(ngModel)]="settings.logo">
</mat-form-field>
<div *ngIf="settings.logo" class="form-group">
<label for="logo" class="control-label">Logo Preview:</label>
<div>
<img [src]="settings.logo" style="width: 300px" />
<div class="col-md-12 col-12 col-sm-12">
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Application Name</mat-label>
<input matInput placeholder="Application Name" [(ngModel)]="settings.applicationName">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Application URL</mat-label>
<input matInput placeholder="Application URL" [(ngModel)]="settings.applicationUrl">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Custom Logo</mat-label>
<input matInput placeholder="Custom Logo" type="url"[(ngModel)]="settings.logo">
</mat-form-field>
</div>
<div class="md-form-field">
<div *ngIf="settings.logo" class="form-group">
<label for="logo" class="control-label">Logo Preview:</label>
<div>
<img [src]="settings.logo" style="width: 300px" />
</div>
</div>
</div>
<mat-checkbox [(ngModel)]="settings.enableCustomDonations" matTooltip="Enable to show a custom donation link in the navigation bar">
Enable Custom Donation Link
</mat-checkbox>
<mat-form-field *ngIf="settings.enableCustomDonations">
<input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationUrl" matTooltip="A link to a Paypal address, or your custom donation url.">
</mat-form-field>
<mat-form-field *ngIf="settings.enableCustomDonations">
<input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.enableCustomDonations" matTooltip="Set a custom message to be displayed in the navigation bar.">
</mat-form-field>
<mat-checkbox [(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-checkbox>
<mat-form-field>
<textarea matInput [(ngModel)]="settings.customCss" placeholder="Custom CSS"></textarea>
</mat-form-field>
<div class="md-form-field">
<mat-checkbox [(ngModel)]="settings.enableCustomDonations" matTooltip="Enable to show a custom donation link in the navigation bar">
Enable Custom Donation Link
</mat-checkbox>
</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.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.enableCustomDonations" matTooltip="Set a custom message to be displayed in the navigation bar.">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-checkbox [(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-checkbox>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Custom CSS</mat-label>
<textarea matInput [(ngModel)]="settings.customCss" placeholder="Custom CSS"></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>

29
src/Ombi/ClientApp/src/app/settings/customization/customization.component.scss
View file

@ -1,6 +1,8 @@
@import "~styles/shared.scss";
.col-12 {
display: grid;
.small-middle-container {
margin: auto;
width: 95%;
margin-top: 10px;
}
textarea {
@ -9,29 +11,6 @@ textarea {
max-height: 800px;
}
.small-middle-container {
margin: auto;
width: 95%;
margin-top: 10px;
}
.control-label {
font-weight: 400;
}
.row {
display: block;
}
.btn-danger-outline {
background-color: #E84C3D;
}
.btn-success-outline {
background-color: #1b9d1b;
}
::ng-deep .dark .btn:hover {
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

2
src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.html
View file

@ -51,7 +51,7 @@
<div class="form-group">
<div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
<button mat-raised-button (click)="save()" type="submit" id="save" class="mat-stroked-button accent mat-accent">Submit</button>
</div>
</div>
</div>

51
src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html
View file

@ -1,34 +1,31 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Ombi-Settings'"></wiki>
<fieldset *ngIf="form" class="container">
<fieldset *ngIf="form">
<legend>Ombi Configuration</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<div class="col-12">
<mat-form-field>
<input matInput placeholder="Base Url" formControlName="baseUrl">
</mat-form-field>
<div class="form-group">
<label for="ApiKey" class="control-label">Api Key</label>
<div class="input-group">
<input type="text" class="form-control form-control-custom" id="ApiKey" name="ApiKey" formControlName="apiKey" readonly="readonly" #apiKey>
<div class="input-group-addon">
<div (click)="refreshApiKey()" id="refreshKey" class="fa fa-refresh" title="Reset API Key" pTooltip="This will invalidate the old API key"></div>
</div>
<div class="input-group-addon">
<div ngxClipboard [ngxClipboard]="apiKey" class="fa fa-clipboard" (cbOnSuccess)="successfullyCopied()"></div>
</div>
</div>
<div class="col-md-12 col-12 col-sm-12">
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Base URL</mat-label>
<input matInput placeholder="Base Url" formControlName="baseUrl">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Api Key</mat-label>
<input matInput id="ApiKey" name="ApiKey" placeholder="Api Key" formControlName="apiKey" readonly="readonly">
<button type="button" matSuffix (click)="refreshApiKey()" style="display:inline-block;">
<mat-icon class="fa fa-refresh"></mat-icon>
</button>
<!-- THIS IS NOT WORKING
<button type="button" mat-icon-button matSuffix [cdkCopyToClipboard]="apiKey" style="display:inline-block">
<mat-icon class="fa fa-clipboard"></mat-icon>
</button> -->
</mat-form-field>
</div>
<br />
<div>
<mat-checkbox formControlName="doNotSendNotificationsForAutoApprove">
Do not send Notifications if a User has the Auto Approve permission</mat-checkbox>
@ -66,10 +63,10 @@
</div>
<div class="form-group">
<div>
<button mat-raised-button [disabled]="form.invalid" type="submit" id="save" color="accent">Submit</button>
<button mat-raised-button [disabled]="form.invalid" type="submit" id="save" class="mat-stroked-button accent mat-accent">Submit</button>
</div>
</div>
</div>
</form>
</fieldset>
</div>
</div>

30
src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.scss
View file

@ -1,21 +1,27 @@
.col-12 {
display:grid;
@import "~styles/shared.scss";
.small-middle-container {
margin: auto;
width: 95%;
margin-top: 10px;
}
textarea {
min-height:100px;
min-height: 100px;
height: auto;
max-height:800px;
max-height: 800px;
}
.small-middle-container{
margin: auto;
width: 85%;
margin-top:10px;
.row {
display: block;
}
@media (min-width: 1600px) {
.container {
max-width: 1500px;
}
button, [type="button"]{
padding: 0;
border: none;
background: transparent;
color: white;
}
::ng-deep .mat-form-field-suffix .mat-icon{
font-size:120%;
}

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

@ -2,53 +2,52 @@
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Radarr Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div style="float: right;">
<div class="md-form-field">
<mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<div class="row">
<div class="col-md-12 col-12 col-sm-12" style="float: right; width:100%; text-align:right;">
<div style="float: right; text-align: left; margin-left:20px;">
<div class="md-form-field">
<mat-slide-toggle formControlName="enabled" id="enable">Enable</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-slide-toggle [(ngModel)]="advanced" [ngModelOptions]="{standalone: true}">Advanced</mat-slide-toggle>
</div>
</div>
</div>
<div class="md-form-field">
<mat-slide-toggle [(ngModel)]="advanced" [ngModelOptions]="{standalone: true}">Advanced</mat-slide-toggle>
</div>
</div>
<div class="col-md-12">
<div class="col-md-5">
<div class="row">
<div class="col-md-7 col-8 col-sm-12">
<label for="username" class="control-label"><h3>Server Configuration</h3></label>
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="Hostname or IP" formControlName="ip">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Hostname or IP</mat-label>
<input matInput placeholder="Hostname or IP" formControlName="ip" placeholder="localhost">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="Port" formControlName="port">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Port</mat-label>
<input matInput placeholder="Port" formControlName="port" placeholder="Port Number">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="API Key" formControlName="apiKey">
</mat-form-field>
</div>
<div>
<mat-slide-toggle formControlName="ssl">
Enable SSL
SSL
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field>
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>API key</mat-label>
<input matInput placeholder="API Key" formControlName="apiKey" placeholder="API key">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Base URL</mat-label>
<input matInput placeholder="Base Url" formControlName="subDir">
</mat-form-field>
</div>
</div>
<div class="col-md-5">
<div class="col-md-5 col-4 col-sm-12">
<label for="username" class="control-label"><h3>Interface</h3></label>
<div class="md-form-field">
<mat-form-field>
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Quality Profiles</mat-label>
<mat-select formControlName="defaultQualityProfile" required>
<mat-option *ngFor="let quality of qualities" [value]="quality.id">
@ -56,12 +55,12 @@
</mat-option>
</mat-select>
</mat-form-field>
<div><button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
*ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button></div>
<div class="md-form-field" style="display:inline;margin-left:20px;">
<button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div>
<div class="md-form-field">
<mat-form-field>
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Default Root Folder</mat-label>
<mat-select formControlName="defaultRootPath" required>
<mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
@ -69,12 +68,12 @@
</mat-option>
</mat-select>
</mat-form-field>
<div><button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
*ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button></div>
<div class="md-form-field" style="display:inline;margin-left:20px;">
<button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div>
<div class="md-form-field">
<mat-form-field>
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Default Minimum Availability</mat-label>
<mat-select formControlName="minimumAvailability" required>
<mat-option *ngFor="let min of minimumAvailabilityOptions" [value]="min.value">
@ -88,27 +87,20 @@
Do not search
</mat-slide-toggle>
</div>
</div>
<div class="col">
</div>
<div class="row">
<div class="col-12">
<div class="md-form-field">
<div>
<button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
Connectivity <span id="spinner"></span></button>
<button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test Connectivity <span id="spinner"></span></button>
</div>
</div>
<div class="md-form-field">
</div>
<div class="md-form-field" style="margin-top:1em;">
<div>
<button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
</div>
</div>
</div>
</div>
</form>

38
src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.scss
View file

@ -5,45 +5,13 @@
margin-top: 10px;
}
.col-md-6 {
display: contents;
.col-8 {
display: inline-table;
}
.col-md-5 {
display: contents;
}
.col-md-4 {
display: contents;
}
.control-label {
font-weight: 400;
display: inline-table;
}
.row {
display: block;
}
::ng-deep .dark .btn:hover {
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
::ng-deep .load {
max-width: fit-content;
margin-left: 3em;
padding: 0.5rem 1.14rem;
}
@media (min-width:1440px) {
.col-md-6 {
display: inline-table;
}
.col-md-5 {
display: inline-table;
}
.col-md-4 {
display: inline-table;
}
}

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

@ -1,5 +1,5 @@
@import "~styles/variables.scss";
@media (max-width: 978px) {
/*@media (max-width: 978px) {
.top-spacing {
padding-top: 2%;
}
@ -14,7 +14,7 @@
.top-spacing {
padding-top: 2%;
}
}
}*/
html,
body {