forks/peertube
1
0
Fork 0
Code Releases Activity

Use ng-select for jobs list

Browse source
This commit is contained in:
Chocobozzz 2024-03-11 11:19:51 +01:00
parent 29873257e7
commit cb77bfcd0f
No known key found for this signature in database
GPG key ID: 583A612D890159BE
2 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
client/src/app/+admin/system/jobs/jobs.component.html
View file

@ -1,17 +1,23 @@
<div class="admin-sub-header">
<div class="select-filter-block">
<label for="jobType" i18n>Job type</label>
<div class="peertube-select-container">
<select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
<option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option>
</select>
</div>
<ng-select
class="select-job-type"
labelForId="jobType"
[(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()"
[searchable]="true"
[clearable]="false"
>
<ng-option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</ng-option>
</ng-select>
</div>
<div class="select-filter-block">
<label for="jobState" i18n>Job state</label>
<ng-select
class="select-job-state"
labelForId="jobState"
[(ngModel)]="jobState"
(ngModelChange)="onJobStateOrTypeChanged()"
[clearable]="false"

10
client/src/app/+admin/system/jobs/jobs.component.scss
View file

@ -5,6 +5,16 @@
min-width: 120px;
}
.select-job-type {
min-width: 240px;
::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items {
@media screen and (min-height: 500px) {
max-height: calc(90vh - 250px);
}
}
}
@media screen and (min-width: $primeng-breakpoint) {
.job-id {
max-width: 30vw !important;