Fixes to search dropdown

This commit is contained in:
kibigo! 2018-01-06 15:34:01 -08:00
parent 61ef8d643e
commit b5874c1428
4 changed files with 102 additions and 92 deletions

View file

@ -45,10 +45,10 @@ const handlers = {
const { const {
onClear, onClear,
submitted, submitted,
value: { length }, value,
} = this.props; } = this.props;
e.preventDefault(); // Prevents focus change ?? e.preventDefault(); // Prevents focus change ??
if (onClear && (submitted || length)) { if (onClear && (submitted || value && value.length)) {
onClear(); onClear();
} }
}, },
@ -100,7 +100,8 @@ export default class DrawerSearch extends React.PureComponent {
value, value,
} = this.props; } = this.props;
const { expanded } = this.state; const { expanded } = this.state;
const computedClass = classNames('drawer--search', { active: value.length || submitted }); const active = value && value.length || submitted;
const computedClass = classNames('drawer--search', { active });
return ( return (
<div className={computedClass}> <div className={computedClass}>
@ -126,11 +127,11 @@ export default class DrawerSearch extends React.PureComponent {
tabIndex='0' tabIndex='0'
> >
<Icon icon='search' /> <Icon icon='search' />
<Icon icon='fa-times-circle' /> <Icon icon='times-circle' />
</div> </div>
<Overlay <Overlay
placement='bottom' placement='bottom'
show={expanded && !(value || '').length && !submitted} show={expanded && !active}
target={this} target={this}
><DrawerSearchPopout /></Overlay> ><DrawerSearchPopout /></Overlay>
</div> </div>

View file

@ -42,6 +42,14 @@ export default function DrawerSearchPopout ({ style }) {
// The result. // The result.
return ( return (
<div
className='drawer--search--popout'
style={{
...style,
position: 'absolute',
width: 285,
}}
>
<Motion <Motion
defaultStyle={{ defaultStyle={{
opacity: 0, opacity: 0,
@ -56,11 +64,7 @@ export default function DrawerSearchPopout ({ style }) {
> >
{({ opacity, scaleX, scaleY }) => ( {({ opacity, scaleX, scaleY }) => (
<div <div
className='drawer--search--popout'
style={{ style={{
...style,
position: 'absolute',
width: 285,
opacity: opacity, opacity: opacity,
transform: `scale(${scaleX}, ${scaleY})`, transform: `scale(${scaleX}, ${scaleY})`,
}} }}
@ -92,6 +96,7 @@ export default function DrawerSearchPopout ({ style }) {
</div> </div>
)} )}
</Motion> </Motion>
</div>
); );
} }

View file

@ -114,8 +114,7 @@
} }
& > .icon { & > .icon {
.fa { display: block;
display: inline-block;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@ -123,10 +122,19 @@
height: 18px; height: 18px;
color: $ui-secondary-color; color: $ui-secondary-color;
font-size: 18px; font-size: 18px;
line-height: 18px;
z-index: 2;
.fa {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0; opacity: 0;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
z-index: 2;
transition: all 100ms linear; transition: all 100ms linear;
} }
@ -136,14 +144,15 @@
} }
.fa-times-circle { .fa-times-circle {
top: 11px;
transform: rotate(-90deg); transform: rotate(-90deg);
cursor: pointer; cursor: pointer;
&:hover { color: $primary-text-color } &:hover { color: $primary-text-color }
} }
}
&.active { &.active {
& > .icon {
.fa-search { .fa-search {
opacity: 0; opacity: 0;
transform: rotate(90deg); transform: rotate(90deg);
@ -158,6 +167,32 @@
} }
} }
.drawer--search--popout {
box-sizing: border-box;
margin-top: 10px;
border-radius: 4px;
padding: 10px 14px 14px 14px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
color: $ui-primary-color;
background: $simple-background-color;
h4 {
margin-bottom: 10px;
color: $ui-primary-color;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
ul { margin-bottom: 10px }
li { padding: 4px 0 }
em {
color: $ui-base-color;
font-weight: 500;
}
}
.drawer--account { .drawer--account {
padding: 10px; padding: 10px;
color: $ui-primary-color; color: $ui-primary-color;

View file

@ -3918,37 +3918,6 @@
border-radius: 0; border-radius: 0;
} }
.drawer--search--popout {
background: $simple-background-color;
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $ui-primary-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 {
text-transform: uppercase;
color: $ui-primary-color;
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
}
li {
padding: 4px 0;
}
ul {
margin-bottom: 10px;
}
em {
font-weight: 500;
color: $ui-base-color;
}
}
noscript { noscript {
text-align: center; text-align: center;