change focus ui for keyboard only input (#25935)
This commit is contained in:
Trevor Wolf
GitHub
parent
c5b79558e2
commit
e1c5bed7b4
5 changed files with 50 additions and 73 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<span>
|
||||
<Link to={`/@${username}`}>
|
||||
<strong className='navigation-bar__profile-account'>@{username}</strong>
|
||||
</Link>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue