specter/mastodon
1
0
Fork 0
forked from fedi/mastodon
Code Pull requests Activity

Improve hover and focus style in columns settings (#16222)

Browse source 
* Make focus visible on switches and text buttons in columns settings

* Make hover/focus visible on left/right arrows in columns settings

Use same style as for station action bar (reply/boost/fav/etc.)

* Tab first to “Pin/Unpin” before left/right arrows in columns settings
This commit is contained in:
Mélanie Chauvel 2021-10-01 00:55:51 +02:00 committed by GitHub
parent 24f9ea7818
commit 900481b7fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/mastodon/components/column_header.js
View file

@ -119,8 +119,8 @@ class ColumnHeader extends React.PureComponent {
moveButtons = (
<div key='move-buttons' className='column-header__setting-arrows'>
<button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button>
<button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button>
<button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button>
<button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button>
</div>
);
} else if (multiColumn && this.props.onPin) {
@ -141,8 +141,8 @@ class ColumnHeader extends React.PureComponent {
];
if (multiColumn) {
collapsedContent.push(moveButtons);
collapsedContent.push(pinButton);
collapsedContent.push(moveButtons);
}
if (children || (multiColumn && this.props.onPin)) {

20
app/javascript/styles/mastodon/components.scss
View file

@ -2822,7 +2822,7 @@ a.account__display-name {
transition: background-color 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
background-color: darken($ui-base-color, 10%);
}
@ -2830,7 +2830,7 @@ a.account__display-name {
background-color: $ui-highlight-color;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
background-color: lighten($ui-highlight-color, 10%);
}
@ -3548,12 +3548,17 @@ a.status-card.compact:hover {
}
.column-header__setting-btn {
&:hover {
&:hover,
&:focus {
color: $darker-text-color;
text-decoration: underline;
}
}
.column-header__collapsible__extra + .column-header__setting-btn {
padding-top: 5px;
}
.column-header__permission-btn {
display: inline;
font-weight: inherit;
@ -3564,10 +3569,15 @@ a.status-card.compact:hover {
float: right;
.column-header__setting-btn {
padding: 0 10px;
padding: 5px;
&:first-child {
padding-right: 7px;
}
&:last-child {
padding-right: 0;
padding-left: 7px;
margin-left: 5px;
}
}
}

19
app/javascript/styles/mastodon/rtl.scss
View file

@ -126,6 +126,20 @@ body.rtl {
.column-header__setting-arrows {
float: left;
.column-header__setting-btn {
&:first-child {
padding-left: 7px;
padding-right: 5px;
}
&:last-child {
padding-right: 7px;
padding-left: 5px;
margin-right: 5px;
margin-left: 0;
}
}
}
.setting-toggle__label {
@ -451,11 +465,6 @@ body.rtl {
margin-left: 5px;
}
.column-header__setting-arrows .column-header__setting-btn:last-child {
padding-left: 0;
padding-right: 10px;
}
.simple_form .input.radio_buttons .radio > label input {
left: auto;
right: 0;