mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-03 06:57:54 +02:00
Code Issues Releases Wiki Activity

chore: accessible avatar edit

Browse Source
This commit is contained in:
Sami Mazouz
2025-04-18 13:47:10 +01:00
parent 42904fee35
commit 540475f83f
3 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
framework/core/js/src/forum/components/AvatarEditor.js
View File

@@ -42,9 +42,10 @@ export default class AvatarEditor extends Component {
return ( return (
<div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}> <div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}>
<Avatar user={user} loading="eager" /> <Avatar user={user} loading="eager" />
<a <button
className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'} className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
title={app.translator.trans('core.forum.user.avatar_upload_tooltip')} title={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
ariaLabel={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
data-toggle="dropdown" data-toggle="dropdown"
onclick={this.quickUpload.bind(this)} onclick={this.quickUpload.bind(this)}
ondragover={this.enableDragover.bind(this)} ondragover={this.enableDragover.bind(this)}
@@ -60,7 +61,7 @@ export default class AvatarEditor extends Component {
) : ( ) : (
<Icon name={'fas fa-plus-circle'} /> <Icon name={'fas fa-plus-circle'} />
)} )}
</a> </button>
<ul className="Dropdown-menu Menu">{listItems(this.controlItems().toArray())}</ul> <ul className="Dropdown-menu Menu">{listItems(this.controlItems().toArray())}</ul>
</div> </div>
); );

2
framework/core/js/src/forum/components/DiscussionListItem.tsx
View File

@@ -312,7 +312,7 @@ export default class DiscussionListItem<CustomAttrs extends IDiscussionListItemA
className="DiscussionListItem-count" className="DiscussionListItem-count"
icon={showUnread ? [<Icon name={'fas fa-check _checkmark'} />, <Icon name={'fas fa-comment _comment'} />] : <Icon name={'far fa-comment'} />} icon={showUnread ? [<Icon name={'fas fa-check _checkmark'} />, <Icon name={'fas fa-comment _comment'} />] : <Icon name={'far fa-comment'} />}
label={showUnread ? abbreviateNumber(discussion.unreadCount()) : abbreviateNumber(discussion.replyCount())} label={showUnread ? abbreviateNumber(discussion.unreadCount()) : abbreviateNumber(discussion.replyCount())}
a11yLabel={app.translator.trans(a11yKey, { count: discussion.unreadCount() })} ariaLabel={app.translator.trans(a11yKey, { count: discussion.unreadCount() })}
onclick={showUnread ? this.markAsRead.bind(this) : undefined} onclick={showUnread ? this.markAsRead.bind(this) : undefined}
/> />
); );

3
framework/core/less/forum/AvatarEditor.less
View File

@@ -15,6 +15,8 @@
inset: 0; inset: 0;
border-radius: 100%; border-radius: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
border: 0; border: 0;
@@ -23,6 +25,7 @@
opacity: 0.7; opacity: 0.7;
} }
&:hover .Dropdown-toggle, &:hover .Dropdown-toggle,
.Dropdown-toggle:focus,
&.open .Dropdown-toggle, &.open .Dropdown-toggle,
&.loading .Dropdown-toggle, &.loading .Dropdown-toggle,
&.dragover .Dropdown-toggle { &.dragover .Dropdown-toggle {