OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix video filter pastille accessibility

pull/6449/head
Chocobozzz 2024-06-10 11:46:26 +02:00
parent f027bdb4b0
commit 77c002f07f
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/app/shared/shared-video-miniature/video-filters-header.component.html
View File

@ -23,8 +23,8 @@
<my-global-icon iconName="chevrons-up"></my-global-icon> <my-global-icon iconName="chevrons-up"></my-global-icon>
</button> </button>
<button <div
*ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)" *ngFor="let activeFilter of filters.getActiveFilters()"
class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)" class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
> >
<span> <span>
@ -33,8 +33,14 @@
<ng-container *ngIf="activeFilter.value">: {{ activeFilter.value }}</ng-container> <ng-container *ngIf="activeFilter.value">: {{ activeFilter.value }}</ng-container>
</span> </span>
<my-global-icon *ngIf="activeFilter.canRemove" iconName="cross"></my-global-icon> <button
</button> *ngIf="activeFilter.canRemove" type="button" class="remove-button"
(click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
i18n-title title="Remove this filter"
>
<my-global-icon iconName="cross"></my-global-icon>
</button>
</div>
</div> </div>
<ng-select <ng-select

11
client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
View File

@ -94,11 +94,16 @@
opacity: 0.9; opacity: 0.9;
} }
my-global-icon { > .remove-button {
@include margin-left(10px); @include margin-left(10px);
width: 16px; border: 0;
color: pvar(--greyForegroundColor); padding: 0;
my-global-icon {
width: 16px;
color: pvar(--greyForegroundColor);
}
} }
} }