Improve hover and focus style in columns settings (#16222)
* 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 settingspull/1616/head
parent
24f9ea7818
commit
900481b7fa
|
@ -119,8 +119,8 @@ class ColumnHeader extends React.PureComponent {
|
||||||
|
|
||||||
moveButtons = (
|
moveButtons = (
|
||||||
<div key='move-buttons' className='column-header__setting-arrows'>
|
<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.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='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></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>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (multiColumn && this.props.onPin) {
|
} else if (multiColumn && this.props.onPin) {
|
||||||
|
@ -141,8 +141,8 @@ class ColumnHeader extends React.PureComponent {
|
||||||
];
|
];
|
||||||
|
|
||||||
if (multiColumn) {
|
if (multiColumn) {
|
||||||
collapsedContent.push(moveButtons);
|
|
||||||
collapsedContent.push(pinButton);
|
collapsedContent.push(pinButton);
|
||||||
|
collapsedContent.push(moveButtons);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (children || (multiColumn && this.props.onPin)) {
|
if (children || (multiColumn && this.props.onPin)) {
|
||||||
|
|
|
@ -2822,7 +2822,7 @@ a.account__display-name {
|
||||||
transition: background-color 0.2s ease;
|
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%);
|
background-color: darken($ui-base-color, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2830,7 +2830,7 @@ a.account__display-name {
|
||||||
background-color: $ui-highlight-color;
|
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%);
|
background-color: lighten($ui-highlight-color, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3548,12 +3548,17 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-header__setting-btn {
|
.column-header__setting-btn {
|
||||||
&:hover {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $darker-text-color;
|
color: $darker-text-color;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.column-header__collapsible__extra + .column-header__setting-btn {
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.column-header__permission-btn {
|
.column-header__permission-btn {
|
||||||
display: inline;
|
display: inline;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
|
@ -3564,10 +3569,15 @@ a.status-card.compact:hover {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
||||||
.column-header__setting-btn {
|
.column-header__setting-btn {
|
||||||
padding: 0 10px;
|
padding: 5px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-right: 0;
|
padding-left: 7px;
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -126,6 +126,20 @@ body.rtl {
|
||||||
|
|
||||||
.column-header__setting-arrows {
|
.column-header__setting-arrows {
|
||||||
float: left;
|
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 {
|
.setting-toggle__label {
|
||||||
|
@ -451,11 +465,6 @@ body.rtl {
|
||||||
margin-left: 5px;
|
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 {
|
.simple_form .input.radio_buttons .radio > label input {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
Loading…
Reference in New Issue