MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixes to search dropdown

Browse Source
master
kibigo! 7 years ago
parent 61ef8d643e
commit b5874c1428
4 changed files with 102 additions and 92 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 11
      app/javascript/flavours/glitch/features/drawer/search/index.js
  2. 99
      app/javascript/flavours/glitch/features/drawer/search/popout/index.js
  3. 53
      app/javascript/flavours/glitch/styles/components/drawer.scss
  4. 31
      app/javascript/flavours/glitch/styles/components/index.scss

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

Write Preview
Loading…
Cancel
Save