change focus ui for keyboard only input (#25935)

This commit is contained in:
Trevor Wolf 2023-07-21 21:20:14 +10:00 committed by GitHub
parent 934c7b33d1
commit 59478a1b46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 73 deletions

View file

@ -297,7 +297,7 @@ export default class Dropdown extends PureComponent {
onKeyPress: this.handleKeyPress,
}) : (
<IconButton
icon={icon}
icon={!open ? icon : 'close'}
title={title}
active={open}
disabled={disabled}

View file

@ -8,7 +8,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { Avatar } from '../../../components/avatar';
import { IconButton } from '../../../components/icon_button';
import ActionBar from './action_bar';
@ -21,23 +20,27 @@ export default class NavigationBar extends ImmutablePureComponent {
};
render () {
const username = this.props.account.get('acct')
return (
<div className='navigation-bar'>
<Link to={`/@${this.props.account.get('acct')}`}>
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
<Link to={`/@${username}`}>
<span style={{ display: 'none' }}>{username}</span>
<Avatar account={this.props.account} size={46} />
</Link>
<div className='navigation-bar__profile'>
<Link to={`/@${this.props.account.get('acct')}`}>
<strong className='navigation-bar__profile-account'>@{this.props.account.get('acct')}</strong>
</Link>
<span>
<Link to={`/@${username}`}>
<strong className='navigation-bar__profile-account'>@{username}</strong>
</Link>
</span>
<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
<span>
<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
</span>
</div>
<div className='navigation-bar__actions'>
<IconButton className='close' title='' icon='close' onClick={this.props.onClose} />
<ActionBar account={this.props.account} onLogout={this.props.onLogout} />
</div>
</div>

View file

@ -161,13 +161,20 @@ body {
}
}
a {
&:focus {
border-radius: 4px;
outline: $ui-button-icon-focus-outline;
}
&:focus:not(:focus-visible) {
outline: none;
}
}
button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.app-holder {

View file

@ -74,6 +74,10 @@
background-color: $ui-button-focus-background-color;
}
&:focus {
outline: $ui-button-icon-focus-outline;
}
&--destructive {
&:active,
&:focus,
@ -98,16 +102,6 @@
transition: none;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-secondary {
color: $ui-button-secondary-color;
background: transparent;
@ -197,7 +191,7 @@
border-radius: 4px;
background: transparent;
cursor: pointer;
transition: all 100ms ease-in;
transition: all 100ms ease-out;
transition-property: background-color, color;
text-decoration: none;
@ -209,14 +203,12 @@
&:hover,
&:active,
&:focus {
color: lighten($action-button-color, 7%);
background-color: rgba($action-button-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
color: lighten($action-button-color, 20%);
background-color: $ui-button-icon-hover-background-color;
}
&:focus {
background-color: rgba($action-button-color, 0.3);
outline: $ui-button-icon-focus-outline;
}
&.disabled {
@ -225,20 +217,6 @@
cursor: default;
}
&.active {
color: $highlight-text-color;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.inverted {
color: $lighter-text-color;
@ -246,11 +224,11 @@
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15);
background-color: $ui-button-icon-hover-background-color;
}
&:focus {
background-color: rgba($lighter-text-color, 0.3);
outline: $ui-button-icon-focus-outline;
}
&.disabled {
@ -305,7 +283,6 @@
font-size: 11px;
padding: 0 3px;
line-height: 27px;
outline: 0;
transition: all 100ms ease-in;
transition-property: background-color, color;
@ -313,13 +290,13 @@
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15);
background-color: $ui-button-icon-hover-background-color;
transition: all 200ms ease-out;
transition-property: background-color, color;
}
&:focus {
background-color: rgba($lighter-text-color, 0.3);
outline: $ui-button-icon-focus-outline;
}
&.disabled {
@ -331,16 +308,6 @@
&.active {
color: $highlight-text-color;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
}
body > [data-popper-placement] {
@ -728,7 +695,6 @@ body > [data-popper-placement] {
flex: 0 0 auto;
.compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 15px;
}
}
@ -1929,13 +1895,6 @@ a.account__display-name {
.navigation-bar__actions {
position: relative;
.icon-button.close {
position: absolute;
pointer-events: none;
transform: scale(0, 1) translate(-100%, 0);
opacity: 0;
}
.compose__action-bar .icon-button {
pointer-events: auto;
transform: scale(1, 1) translate(0, 0);
@ -1945,19 +1904,21 @@ a.account__display-name {
}
.navigation-bar__profile {
display: flex;
flex-direction: column;
flex: 1 1 auto;
line-height: 20px;
overflow: hidden;
}
.navigation-bar__profile-account {
display: block;
display: inline;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.navigation-bar__profile-edit {
display: inline;
color: inherit;
text-decoration: none;
}
@ -4740,11 +4701,6 @@ a.status-card.compact:hover {
outline: 0;
cursor: pointer;
&:active,
&:focus {
outline: 0 !important;
}
img {
filter: grayscale(100%);
opacity: 0.8;
@ -4760,6 +4716,13 @@ a.status-card.compact:hover {
img {
opacity: 1;
filter: none;
border-radius: 100%;
}
}
&:focus {
img {
outline: $ui-button-icon-focus-outline;
}
}
}

View file

@ -5,6 +5,7 @@ $red-600: #b7253d !default; // Deep Carmine
$red-500: #df405a !default; // Cerise
$blurple-600: #563acc; // Iris
$blurple-500: #6364ff; // Brand purple
$blurple-400: #7477fd; // Medium slate blue
$blurple-300: #858afa; // Faded Blue
$grey-600: #4e4c5a; // Trout
$grey-100: #dadaf3; // Topaz
@ -56,6 +57,9 @@ $ui-button-tertiary-focus-color: $white !default;
$ui-button-destructive-background-color: $red-500 !default;
$ui-button-destructive-focus-background-color: $red-600 !default;
$ui-button-icon-focus-outline: solid 2px $blurple-400 !default;
$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
// Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default;