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

Fix playlist buttons accessibility

This commit is contained in:
Chocobozzz 2023-10-12 14:24:22 +02:00
parent 44e12dc809
commit e94160c770
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 16 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
View File

@ -19,23 +19,21 @@
</div> </div>
<div class="playlist-controls"> <div class="playlist-controls">
<my-global-icon <button
iconName="videos" class="border-0 p-0 me-2" [ngClass]="{ active: autoPlayNextVideoPlaylist }" (click)="switchAutoPlayNextVideoPlaylist()"
[class.active]="autoPlayNextVideoPlaylist" [ngbTooltip]="autoPlayNextVideoPlaylistSwitchText" [ariaLabel]="autoPlayNextVideoPlaylistSwitchText"
(click)="switchAutoPlayNextVideoPlaylist()" placement="bottom auto" container="body"
[ngbTooltip]="autoPlayNextVideoPlaylistSwitchText" >
placement="bottom auto" <my-global-icon iconName="videos"></my-global-icon>
container="body" </button>
></my-global-icon>
<my-global-icon <button
iconName="repeat" class="border-0 p-0" [ngClass]="{ active: loopPlaylist }" (click)="switchLoopPlaylist()"
[class.active]="loopPlaylist" [ngbTooltip]="loopPlaylistSwitchText" [ariaLabel]="loopPlaylistSwitchText"
(click)="switchLoopPlaylist()" placement="bottom auto" container="body"
[ngbTooltip]="loopPlaylistSwitchText" >
placement="bottom auto" <my-global-icon iconName="repeat"></my-global-icon>
container="body" </button>
></my-global-icon>
</div> </div>
</div> </div>

14
client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
View File

@ -46,18 +46,8 @@
display: flex; display: flex;
margin: 10px 0; margin: 10px 0;
my-global-icon:not(:last-child) { button:not(.active) {
@include margin-right(.5rem); opacity: .5;
}
my-global-icon {
&:not(.active) {
opacity: .5;
}
::ng-deep {
cursor: pointer;
}
} }
} }