treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fixes to search dropdown

lolsob-rspec
kibigo! 2018-01-06 15:34:01 -08:00
parent cd8d0d7b85
commit a38bd57f8a
4 changed files with 102 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/flavours/glitch/features/drawer/search/index.js
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>

99
app/javascript/flavours/glitch/features/drawer/search/popout/index.js
View File

@ -42,56 +42,61 @@ export default function DrawerSearchPopout ({ style }) {
// The result. // The result.
return ( return (
<Motion <div
defaultStyle={{ className='drawer--search--popout'
opacity: 0,
scaleX: 0.85,
scaleY: 0.75,
}}
style={{ style={{
opacity: motionSpring, ...style,
scaleX: motionSpring, position: 'absolute',
scaleY: motionSpring, width: 285,
}} }}
> >
{({ opacity, scaleX, scaleY }) => ( <Motion
<div defaultStyle={{
className='drawer--search--popout' opacity: 0,
style={{ scaleX: 0.85,
...style, scaleY: 0.75,
position: 'absolute', }}
width: 285, style={{
opacity: opacity, opacity: motionSpring,
transform: `scale(${scaleX}, ${scaleY})`, scaleX: motionSpring,
}} scaleY: motionSpring,
> }}
<h4><FormattedMessage {...messages.format} /></h4> >
<ul> {({ opacity, scaleX, scaleY }) => (
<li> <div
<em>#example</em> style={{
{' '} opacity: opacity,
<FormattedMessage {...messages.hashtag} /> transform: `scale(${scaleX}, ${scaleY})`,
</li> }}
<li> >
<em>@username@domain</em> <h4><FormattedMessage {...messages.format} /></h4>
{' '} <ul>
<FormattedMessage {...messages.user} /> <li>
</li> <em>#example</em>
<li> {' '}
<em>URL</em> <FormattedMessage {...messages.hashtag} />
{' '} </li>
<FormattedMessage {...messages.user} /> <li>
</li> <em>@username@domain</em>
<li> {' '}
<em>URL</em> <FormattedMessage {...messages.user} />
{' '} </li>
<FormattedMessage {...messages.status} /> <li>
</li> <em>URL</em>
</ul> {' '}
<FormattedMessage {...messages.text} /> <FormattedMessage {...messages.user} />
</div> </li>
)} <li>
</Motion> <em>URL</em>
{' '}
<FormattedMessage {...messages.status} />
</li>
</ul>
<FormattedMessage {...messages.text} />
</div>
)}
</Motion>
</div>
); );
} }

53
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@ -114,19 +114,27 @@
} }
& > .icon { & > .icon {
display: block;
position: absolute;
top: 10px;
right: 10px;
width: 18px;
height: 18px;
color: $ui-secondary-color;
font-size: 18px;
line-height: 18px;
z-index: 2;
.fa { .fa {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 10px; top: 0;
right: 10px; bottom: 0;
width: 18px; left: 0;
height: 18px; right: 0;
color: $ui-secondary-color;
font-size: 18px;
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;

31
app/javascript/flavours/glitch/styles/components/index.scss
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;