moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'no-emoji-selector-outline-but-this-time-it-actually-works' into 'develop' 

No outline for emoji selector when invisible, but this time it actually works

See merge request soapbox-pub/soapbox-fe!651
This commit is contained in:
Alex Gleason 2021-07-30 13:54:47 +00:00
parent 1a9335d494 33c7fcdcb7
commit 073871248f
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
View File

@ -2,6 +2,7 @@
exports[`<EmojiSelector /> renders correctly 1`] = ` exports[`<EmojiSelector /> renders correctly 1`] = `
<div <div
className="emoji-react-selector-container"
onBlur={[Function]} onBlur={[Function]}
onFocus={[Function]} onFocus={[Function]}
tabIndex="-1" tabIndex="-1"

1
app/soapbox/components/emoji_selector.js
View File

@ -81,6 +81,7 @@ class EmojiSelector extends ImmutablePureComponent {
return ( return (
<HotKeys <HotKeys
handlers={this.handlers} handlers={this.handlers}
className='emoji-react-selector-container'
> >
<div <div
className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })} className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}

9
app/styles/components/emoji-reacts.scss
View File

@ -68,6 +68,13 @@
transform: translateY(2px); transform: translateY(2px);
} }
.emoji-react-selector-container {
&:hover,
&:focus {
outline: 0;
}
}
.emoji-react-selector { .emoji-react-selector {
position: absolute; position: absolute;
display: flex; display: flex;
@ -76,7 +83,6 @@
border-radius: 9999px; border-radius: 9999px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
opacity: 0; opacity: 0;
outline: 0;
pointer-events: none; pointer-events: none;
transition: 0.1s; transition: 0.1s;
z-index: 999; z-index: 999;
@ -84,7 +90,6 @@
&--visible, &--visible,
&--focused { &--focused {
opacity: 1; opacity: 1;
outline: unset;
pointer-events: all; pointer-events: all;
} }