Skip to content

Commit

Permalink
change focus ui for keyboard only input (mastodon#25935)
Browse files Browse the repository at this point in the history
  • Loading branch information
Trevor Wolf authored Jul 21, 2023
1 parent 934c7b3 commit 59478a1
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 74 deletions.
2 changes: 1 addition & 1 deletion app/javascript/mastodon/components/dropdown_menu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
21 changes: 12 additions & 9 deletions app/javascript/mastodon/features/compose/components/navigation_bar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>

<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
<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>
Expand Down
15 changes: 11 additions & 4 deletions app/javascript/styles/mastodon/basics.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,22 @@ body {
}
}

button {
font-family: inherit;
cursor: pointer;

a {
&:focus {
border-radius: 4px;
outline: $ui-button-icon-focus-outline;
}

&:focus:not(:focus-visible) {
outline: none;
}
}

button {
font-family: inherit;
cursor: pointer;
}

.app-holder {
&,
& > div,
Expand Down
83 changes: 23 additions & 60 deletions app/javascript/styles/mastodon/components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@
background-color: $ui-button-focus-background-color;
}

&:focus {
outline: $ui-button-icon-focus-outline;
}

&--destructive {
&:active,
&:focus,
Expand All @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -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 {
Expand All @@ -225,32 +217,18 @@
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;

&:hover,
&: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 {
Expand Down Expand Up @@ -305,21 +283,20 @@
font-size: 11px;
padding: 0 3px;
line-height: 27px;
outline: 0;
transition: all 100ms ease-in;
transition-property: background-color, color;

&:hover,
&: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 {
Expand All @@ -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] {
Expand Down Expand Up @@ -728,7 +695,6 @@ body > [data-popper-placement] {
flex: 0 0 auto;

.compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 15px;
}
}
Expand Down Expand Up @@ -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);
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
}
}
Expand Down
4 changes: 4 additions & 0 deletions app/javascript/styles/mastodon/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 59478a1

Please sign in to comment.