mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-03-18 02:30:55 +03:00
Updated to material design v15
This commit is contained in:
Isaac Abadi
@@ -18,6 +18,6 @@ i {
|
||||
|
||||
.logo-image {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
@@ -5,73 +5,77 @@
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<mat-card class="mat-elevation-z6">
|
||||
<h6 i18n="Simulated args title">Simulated new args</h6>
|
||||
<mat-chip-list class="example-chip" #chipList aria-label="Args array" cdkDropList cdkDropListDisabled
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)">
|
||||
<mat-chip [matTooltip]="argsByKey[arg] ? argsByKey[arg]['description'] : null" *ngFor="let arg of args_array; let i = index;" [selectable]="selectable" [removable]="removable" (removed)="remove(i)" cdkDrag>
|
||||
{{arg}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
<mat-form-field style="width: 100%" color="accent">
|
||||
|
||||
<input #chipper style="width: 100%;" [formControl]="chipCtrl" matInput [matAutocomplete]="autochip" [matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
[matChipInputAddOnBlur]="addOnBlur"
|
||||
(matChipInputTokenEnd)="add($event)">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #autochip="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredChipOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : chipCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
<mat-card-content>
|
||||
<h6 i18n="Simulated args title">Simulated new args</h6>
|
||||
<mat-chip-grid class="example-chip" #chipList aria-label="Args array" cdkDropList cdkDropListDisabled
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)">
|
||||
<mat-chip-row [matTooltip]="argsByKey[arg] ? argsByKey[arg]['description'] : null" *ngFor="let arg of args_array; let i = index;" [selectable]="selectable" [removable]="removable" (removed)="remove(i)" cdkDrag>
|
||||
{{arg}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip-row>
|
||||
</mat-chip-grid>
|
||||
<mat-form-field style="width: 100%" color="accent">
|
||||
|
||||
<input #chipper style="width: 100%;" [formControl]="chipCtrl" matInput [matAutocomplete]="autochip" [matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
[matChipInputAddOnBlur]="addOnBlur"
|
||||
(matChipInputTokenEnd)="add($event)">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #autochip="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredChipOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : chipCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<mat-card class="mat-elevation-z6 my-2">
|
||||
<h6 i18n="Add arg card title">Add an arg</h6>
|
||||
<form >
|
||||
<div>
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input matInput placeholder="Arg" [matAutocomplete]="auto" [formControl]="stateCtrl">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : stateCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<mat-card-content>
|
||||
<h6 i18n="Add arg card title">Add an arg</h6>
|
||||
<form >
|
||||
<div>
|
||||
<mat-menu #argsByCategoryMenu="matMenu">
|
||||
<ng-container *ngFor="let argsInCategory of argsByCategory | keyvalue">
|
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu">{{argsInfo[argsInCategory.key].label}}</button>
|
||||
<mat-menu #subMenu="matMenu">
|
||||
<button mat-menu-item *ngFor="let arg of argsInCategory.value" (click)="setFirstArg(arg.key)"><div style="display: inline-block;">{{arg.key}}</div> <div class="info-menu-icon"><mat-icon [matTooltip]="arg.description">info</mat-icon></div></button>
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input matInput placeholder="Arg" [matAutocomplete]="auto" [formControl]="stateCtrl">
|
||||
</mat-form-field>
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option *ngFor="let arg of filteredOptions | async" [value]="arg.key">
|
||||
<span [innerHTML]="arg.key | highlight : stateCtrl.value"></span>
|
||||
<button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<div>
|
||||
<mat-menu #argsByCategoryMenu="matMenu">
|
||||
<ng-container *ngFor="let argsInCategory of argsByCategory | keyvalue">
|
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu">{{argsInfo[argsInCategory.key].label}}</button>
|
||||
<mat-menu #subMenu="matMenu">
|
||||
<button mat-menu-item *ngFor="let arg of argsInCategory.value" (click)="setFirstArg(arg.key)"><div style="display: inline-block;">{{arg.key}}</div> <div class="info-menu-icon"><mat-icon [matTooltip]="arg.description">info</mat-icon></div></button>
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
|
||||
|
||||
<button style="margin-bottom: 15px" mat-stroked-button [matMenuTriggerFor]="argsByCategoryMenu"><ng-container i18n="Search args by category button">Search by category</ng-container></button>
|
||||
|
||||
|
||||
<button style="margin-bottom: 15px" mat-stroked-button [matMenuTriggerFor]="argsByCategoryMenu"><ng-container i18n="Search args by category button">Search by category</ng-container></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mat-checkbox color="accent" [ngModelOptions]="{standalone: true}" [(ngModel)]="secondArgEnabled"><ng-container i18n="Use arg value checkbox">Use arg value</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div *ngIf="secondArgEnabled">
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" placeholder="Arg value" i18n-placeholder="Arg value placeholder" [(ngModel)]="secondArg">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<mat-checkbox color="accent" [ngModelOptions]="{standalone: true}" [(ngModel)]="secondArgEnabled"><ng-container i18n="Use arg value checkbox">Use arg value</ng-container></mat-checkbox>
|
||||
<button (click)="addArg()" [disabled]="!canAddArg()" mat-stroked-button color="accent"><ng-container i18n="Search args by category button">Add arg</ng-container></button>
|
||||
</div>
|
||||
<div *ngIf="secondArgEnabled">
|
||||
<mat-form-field style="width: 75%" color="accent">
|
||||
<input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" placeholder="Arg value" i18n-placeholder="Arg value placeholder" [(ngModel)]="secondArg">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<button (click)="addArg()" [disabled]="!canAddArg()" mat-stroked-button color="accent"><ng-container i18n="Search args by category button">Add arg</ng-container></button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.spacer {flex: 1 1 auto;}
|
||||
|
||||
.mat-spinner {
|
||||
.mat-mdc-progress-spinner {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class="col-12" *ngIf="!download_all && editor_initialized">
|
||||
<ng-container i18n="Download time range prefix">Download videos uploaded in the last</ng-container>
|
||||
<mat-form-field color="accent" style="width: 50px; text-align: center; margin-left: 10px;">
|
||||
<mat-form-field color="accent" class="amount-select">
|
||||
<input type="number" matInput [(ngModel)]="timerange_amount" (ngModelChange)="timerangeChanged($event, false)">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="unit-select">
|
||||
@@ -29,23 +29,26 @@
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Max quality" i18n-placeholder="Max quality placeholder" [disabled]="new_sub.type === 'audio'" [(ngModel)]="new_sub.maxQuality">
|
||||
<mat-label i18n="Max quality">Max quality</mat-label>
|
||||
<mat-select [disabled]="new_sub.type === 'audio'" [(ngModel)]="new_sub.maxQuality">
|
||||
<mat-option *ngFor="let available_quality of available_qualities" [value]="available_quality['value']">{{available_quality['label']}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="new_sub.custom_args" matInput placeholder="Custom args" i18n-placeholder="Subscription custom args placeholder">
|
||||
<mat-label i18n="Custom args">Custom args</mat-label>
|
||||
<input [(ngModel)]="new_sub.custom_args" matInput>
|
||||
<button class="args-edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
|
||||
<mat-hint>
|
||||
<ng-container i18n="Custom args hint">These are added after the standard args.</ng-container>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="new_sub.custom_output" matInput placeholder="Custom file output" i18n-placeholder="Subscription custom file output placeholder">
|
||||
<mat-label i18n="Custom file output">Custom file output</mat-label>
|
||||
<input [(ngModel)]="new_sub.custom_output" matInput>
|
||||
<mat-hint>
|
||||
<a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
|
||||
<ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.
|
||||
|
||||
@@ -3,7 +3,13 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.amount-select {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.unit-select {
|
||||
width: 75px;
|
||||
width: 110px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@@ -3,9 +3,10 @@
|
||||
<mat-dialog-content>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="col-12 mb-3">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="url" matInput placeholder="URL" i18n-placeholder="Subscription URL input placeholder" required aria-required="true">
|
||||
<mat-label i18n="URL">URL</mat-label>
|
||||
<input [(ngModel)]="url" matInput required aria-required="true">
|
||||
<mat-hint><ng-container i18n="Subscription URL input hint">The playlist or channel URL</ng-container></mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -14,12 +15,13 @@
|
||||
<mat-divider></mat-divider>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="name" matInput placeholder="Custom name" i18n-placeholder="Subscription custom name placeholder">
|
||||
<mat-label i18n="Custom name">Custom name</mat-label>
|
||||
<input [(ngModel)]="name" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-12 mt-3">
|
||||
<div class="col-12">
|
||||
<mat-checkbox [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12" *ngIf="!download_all">
|
||||
@@ -37,7 +39,8 @@
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Max quality" i18n-placeholder="Max quality placeholder" [disabled]="audioOnlyMode" [(ngModel)]="maxQuality">
|
||||
<mat-label i18n="Max quality">Max quality</mat-label>
|
||||
<mat-select [disabled]="audioOnlyMode" [(ngModel)]="maxQuality">
|
||||
<mat-option *ngFor="let available_quality of available_qualities" [value]="available_quality['value']">{{available_quality['label']}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@@ -47,9 +50,10 @@
|
||||
<mat-checkbox [(ngModel)]="audioOnlyMode"><ng-container i18n="Streaming-only mode">Audio-only mode</ng-container></mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="col-12 mb-4">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="customArgs" matInput placeholder="Custom args" i18n-placeholder="Subscription custom args placeholder">
|
||||
<mat-label i18n="Custom args">Custom args</mat-label>
|
||||
<input [(ngModel)]="customArgs" matInput>
|
||||
<button class="args-edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
|
||||
<mat-hint>
|
||||
<ng-container i18n="Custom args hint">These are added after the standard args.</ng-container>
|
||||
@@ -58,7 +62,8 @@
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<mat-form-field color="accent">
|
||||
<input [(ngModel)]="customFileOutput" matInput placeholder="Custom file output" i18n-placeholder="Subscription custom file output placeholder">
|
||||
<mat-label i18n="Custom file output">Custom file output</mat-label>
|
||||
<input [(ngModel)]="customFileOutput" matInput>
|
||||
<mat-hint>
|
||||
<a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
|
||||
<ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mat-spinner {
|
||||
.mat-mdc-progress-spinner {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user