PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fix outline on RoomSubList badges

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-10-17 16:21:33 +01:00
parent 8b5d3b93f4
commit f09a3b4281
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_RoomSubList.scss
View file

@ -67,7 +67,7 @@ limitations under the License.
margin-left: 8px; margin-left: 8px;
} }
.mx_RoomSubList_badge { .mx_RoomSubList_badge > div {
flex: 0 0 auto; flex: 0 0 auto;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
@ -103,7 +103,7 @@ limitations under the License.
} }
} }
.mx_RoomSubList_badgeHighlight { .mx_RoomSubList_badgeHighlight > div {
color: $accent-fg-color; color: $accent-fg-color;
background-color: $warning-color; background-color: $warning-color;
} }

9
src/components/structures/RoomSubList.js
View file

@ -238,17 +238,22 @@ const RoomSubList = createReactClass({
'mx_RoomSubList_badge': true, 'mx_RoomSubList_badge': true,
'mx_RoomSubList_badgeHighlight': subListNotifHighlight, 'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
}); });
// Wrap the contents in a div and apply styles to the child div so that the browser default outline works
if (subListNotifCount > 0) { if (subListNotifCount > 0) {
badge = ( badge = (
<AccessibleButton className={badgeClasses} onClick={this._onNotifBadgeClick} aria-label={_t("Jump to first unread room.")}> <AccessibleButton className={badgeClasses} onClick={this._onNotifBadgeClick} aria-label={_t("Jump to first unread room.")}>
{ FormattingUtils.formatCount(subListNotifCount) } <div>
{ FormattingUtils.formatCount(subListNotifCount) }
</div>
</AccessibleButton> </AccessibleButton>
); );
} else if (this.props.isInvite && this.props.list.length) { } else if (this.props.isInvite && this.props.list.length) {
// no notifications but highlight anyway because this is an invite badge // no notifications but highlight anyway because this is an invite badge
badge = ( badge = (
<AccessibleButton className={badgeClasses} onClick={this._onInviteBadgeClick} aria-label={_t("Jump to first invite.")}> <AccessibleButton className={badgeClasses} onClick={this._onInviteBadgeClick} aria-label={_t("Jump to first invite.")}>
{ this.props.list.length } <div>
{ this.props.list.length }
</div>
</AccessibleButton> </AccessibleButton>
); );
} }