mirror of https://github.com/Chocobozzz/PeerTube
Fix global buttons accessibility
parent
d3ae2e9c80
commit
c6d2384aa7
|
@ -1,7 +1,10 @@
|
|||
<ng-template #modal>
|
||||
<div class="modal-header">
|
||||
<h1 i18n class="modal-title">Contact the administrator(s)<p class="modal-subtitle">{{ instanceName }}</p></h1>
|
||||
<my-global-icon iconName="cross" aria-label="Close" tabindex="0" role="button" (click)="hide()" (keydown.enter)="hide()"></my-global-icon>
|
||||
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Follow</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -5,7 +5,9 @@
|
|||
<ng-container *ngIf="isReject()">Reject {{ registration.username }} registration</ng-container>
|
||||
</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form novalidate [formGroup]="form" (ngSubmit)="processRegistration()">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<h1 i18n class="title-page-v2">
|
||||
<h1 class="title-page-v2">
|
||||
<strong class="underline-orange">{{ instanceName }}</strong>
|
||||
>
|
||||
Login
|
||||
|
||||
<ng-container i18n>Login</ng-container>
|
||||
</h1>
|
||||
|
||||
<div class="margin-content">
|
||||
|
@ -120,7 +120,9 @@
|
|||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Forgot your password</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hideForgotPasswordModal()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body text-start">
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="modal-header">
|
||||
<h1 i18n class="modal-title">Accept ownership</h1>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" [formGroup]="form">
|
||||
|
|
|
@ -2,14 +2,20 @@
|
|||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Change ownership</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" [formGroup]="form">
|
||||
<div class="form-group">
|
||||
<label i18n for="next-ownership-username">Select the next owner</label>
|
||||
<p-autoComplete formControlName="username" [suggestions]="usernamePropositions"
|
||||
(completeMethod)="search($event)" id="next-ownership-username"></p-autoComplete>
|
||||
|
||||
<p-autoComplete
|
||||
formControlName="username" [suggestions]="usernamePropositions"
|
||||
(completeMethod)="search($event)" id="next-ownership-username"
|
||||
></p-autoComplete>
|
||||
|
||||
<div *ngIf="formErrors.username" class="form-error" role="alert">
|
||||
{{ formErrors.username }}
|
||||
</div>
|
||||
|
|
|
@ -3,7 +3,9 @@
|
|||
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Add caption</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-container [formGroup]="form">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Edit caption</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -3,11 +3,13 @@
|
|||
<my-actor-avatar [actor]="user?.account" [actorType]="getAvatarActorType()" size="25"></my-actor-avatar>
|
||||
|
||||
<div class="textarea-wrapper">
|
||||
<textarea i18n-placeholder placeholder="Add comment..." myAutoResize
|
||||
<textarea
|
||||
i18n-placeholder placeholder="Add comment..." myAutoResize
|
||||
[readonly]="(user === null) ? true : false"
|
||||
(click)="openVisitorModal($event)"
|
||||
formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
|
||||
(keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
|
||||
(keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea
|
||||
>
|
||||
</textarea>
|
||||
|
||||
<my-help
|
||||
|
@ -57,7 +59,10 @@
|
|||
<ng-template #visitorModal let-modal>
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
|
||||
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hideModals()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
@ -81,8 +86,12 @@
|
|||
<ng-template #emojiModal>
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modal-basic-title" i18n>Markdown Emoji List</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
|
||||
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hideModals()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="emoji-flex">
|
||||
<div class="emoji-flex-item" *ngFor="let emojiMarkup of getEmojiMarkupList()">
|
||||
|
|
|
@ -40,7 +40,9 @@
|
|||
<div [innerHTML]="broadcastMessage.message"></div>
|
||||
|
||||
<button
|
||||
*ngIf="broadcastMessage.dismissable" (click)="hideBroadcastMessage()" class="border-0" title="Close this message" i18n-title>
|
||||
*ngIf="broadcastMessage.dismissable" (click)="hideBroadcastMessage()"
|
||||
class="border-0" title="Close this message" i18n-title
|
||||
>
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Change the language</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Welcome to {{ instanceName }}, dear user!</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Welcome to PeerTube, dear administrator!</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -3,7 +3,9 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ title }}</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" >
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{title}}</h4>
|
||||
<my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
|
||||
|
||||
<button *ngIf="close" class="border-0 p-0" title="Close this modal" i18n-title (click)="onCloseClick()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" [innerHTML]="content"></div>
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Configuration warning!</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">My settings</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -5,7 +5,9 @@
|
|||
<ng-container i18n *ngIf="!isAdminView">Messages with the moderation team</ng-container>
|
||||
</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Moderation comment</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ action }}</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal>
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ modalTitle }}</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal>
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Report video "{{ video.name }}"</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">{{ getModalTitle() }}</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -9,7 +9,9 @@
|
|||
<h4 i18n class="modal-title" *ngIf="getSingleVideo().isLive">Block live "{{ getSingleVideo().name }}"</h4>
|
||||
</ng-container>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Support {{ displayName }}</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" [innerHTML]="htmlSupport"></div>
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Live information</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" *ngIf="live">
|
||||
|
|
|
@ -11,7 +11,9 @@
|
|||
</div>
|
||||
</h4>
|
||||
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
<button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
|
||||
<my-global-icon iconName="cross"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -53,10 +53,13 @@
|
|||
|
||||
<my-edit-button *ngIf="owned && touchScreenEditButton" [ptRouterLink]="[ '/my-library', 'video-playlists', playlist.uuid ]"></my-edit-button>
|
||||
|
||||
<div *ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
|
||||
<div
|
||||
*ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
|
||||
(openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
|
||||
>
|
||||
<my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
|
||||
<button class="border-0 p-0 more-button" (click)="$event.preventDefault()" ngbDropdownToggle>
|
||||
<my-global-icon iconName="more-vertical"></my-global-icon>
|
||||
</button>
|
||||
|
||||
<div ngbDropdownMenu>
|
||||
<ng-container *ngIf="playlistElement.video">
|
||||
|
|
|
@ -29,24 +29,6 @@ my-video-thumbnail,
|
|||
padding: 10px;
|
||||
border-bottom: 1px solid $separator-border-color;
|
||||
|
||||
.more {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
.more {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (hover: hover) and (pointer: fine) {
|
||||
.more {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.playing {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
@ -87,20 +69,38 @@ my-video-thumbnail,
|
|||
}
|
||||
|
||||
.more {
|
||||
opacity: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
|
||||
display: flex;
|
||||
.more-button {
|
||||
opacity: 0;
|
||||
|
||||
&::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
.show {
|
||||
.more-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (hover: hover) and (pointer: fine) {
|
||||
.more-button {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -183,7 +183,7 @@ my-video-thumbnail,
|
|||
my-edit-button {
|
||||
display: none;
|
||||
|
||||
+ .more {
|
||||
+ .more-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
@ -204,7 +204,7 @@ my-video-thumbnail,
|
|||
}
|
||||
}
|
||||
|
||||
my-edit-button + .more {
|
||||
my-edit-button + .more-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue