open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Some more UI Tweaks on the settings pages

Browse Source
pull/3595/head
twanariens 5 years ago
parent c488253c4e
commit cc06ebc7d3
9 changed files with 149 additions and 199 deletions
Show Stats Download Patch File Download Diff File

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

@ -4,8 +4,3 @@
width: 95%; width: 95%;
margin-top: 10px; 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
Unescape View File

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

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

@ -1,37 +1,16 @@
@import "~styles/shared.scss"; @import "~styles/shared.scss";
.col-12 {
display: grid;
}
textarea {
min-height: 100px;
height: auto;
max-height: 800px;
}
.small-middle-container { .small-middle-container {
margin: auto; margin: auto;
width: 95%; width: 95%;
margin-top: 10px; margin-top: 10px;
} }
.control-label { textarea {
font-weight: 400; min-height: 100px;
height: auto;
max-height: 800px;
} }
.row { .row {
display: block; 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
Unescape View File

@ -51,7 +51,7 @@
<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 mat-raised-button (click)="save()" type="submit" id="save" class="mat-stroked-button accent mat-accent">Submit</button>
</div> </div>
</div> </div>
</div> </div>

49
src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html
Unescape View File

@ -1,34 +1,31 @@
<settings-menu></settings-menu> <settings-menu></settings-menu>
<div class="small-middle-container"> <div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Ombi-Settings'"></wiki> <wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Ombi-Settings'"></wiki>
<fieldset *ngIf="form" class="container"> <fieldset *ngIf="form">
<legend>Ombi Configuration</legend> <legend>Ombi Configuration</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)"> <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<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> -->
<div class="col-12"> </mat-form-field>
<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> </div>
<br />
<div> <div>
<mat-checkbox formControlName="doNotSendNotificationsForAutoApprove"> <mat-checkbox formControlName="doNotSendNotificationsForAutoApprove">
Do not send Notifications if a User has the Auto Approve permission</mat-checkbox> Do not send Notifications if a User has the Auto Approve permission</mat-checkbox>
@ -66,10 +63,10 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<div> <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> </div>
</div> </div>
</form> </form>
</fieldset> </fieldset>
</div> </div>

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

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

98
src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html
Unescape View File

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

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

@ -5,45 +5,13 @@
margin-top: 10px; margin-top: 10px;
} }
.col-md-6 { .col-8 {
display: contents; display: inline-table;
} }
.col-md-5 { .col-md-5 {
display: contents; display: inline-table;
}
.col-md-4 {
display: contents;
}
.control-label {
font-weight: 400;
} }
.row { .row {
display: block; 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
Unescape View File

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

Write Preview
Loading…
Cancel
Save