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 {
onClear,
submitted,
value: { length },
value,
} = this.props;
e.preventDefault(); // Prevents focus change ??
if (onClear && (submitted || length)) {
if (onClear && (submitted || value && value.length)) {
onClear();
}
},
@ -100,7 +100,8 @@ export default class DrawerSearch extends React.PureComponent {
value,
} = this.props;
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 (
<div className={computedClass}>
@ -126,11 +127,11 @@ export default class DrawerSearch extends React.PureComponent {
tabIndex='0'
>
<Icon icon='search' />
<Icon icon='fa-times-circle' />
<Icon icon='times-circle' />
</div>
<Overlay
placement='bottom'
show={expanded && !(value || '').length && !submitted}
show={expanded && !active}
target={this}
><DrawerSearchPopout /></Overlay>
</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.
return (
<Motion
defaultStyle={{
opacity: 0,
scaleX: 0.85,
scaleY: 0.75,
}}
<div
className='drawer--search--popout'
style={{
opacity: motionSpring,
scaleX: motionSpring,
scaleY: motionSpring,
...style,
position: 'absolute',
width: 285,
}}
>
{({ opacity, scaleX, scaleY }) => (
<div
className='drawer--search--popout'
style={{
...style,
position: 'absolute',
width: 285,
opacity: opacity,
transform: `scale(${scaleX}, ${scaleY})`,
}}
>
<h4><FormattedMessage {...messages.format} /></h4>
<ul>
<li>
<em>#example</em>
{' '}
<FormattedMessage {...messages.hashtag} />
</li>
<li>
<em>@username@domain</em>
{' '}
<FormattedMessage {...messages.user} />
</li>
<li>
<em>URL</em>
{' '}
<FormattedMessage {...messages.user} />
</li>
<li>
<em>URL</em>
{' '}
<FormattedMessage {...messages.status} />
</li>
</ul>
<FormattedMessage {...messages.text} />
</div>
)}
</Motion>
<Motion
defaultStyle={{
opacity: 0,
scaleX: 0.85,
scaleY: 0.75,
}}
style={{
opacity: motionSpring,
scaleX: motionSpring,
scaleY: motionSpring,
}}
>
{({ opacity, scaleX, scaleY }) => (
<div
style={{
opacity: opacity,
transform: `scale(${scaleX}, ${scaleY})`,
}}
>
<h4><FormattedMessage {...messages.format} /></h4>
<ul>
<li>
<em>#example</em>
{' '}
<FormattedMessage {...messages.hashtag} />
</li>
<li>
<em>@username@domain</em>
{' '}
<FormattedMessage {...messages.user} />
</li>
<li>
<em>URL</em>
{' '}
<FormattedMessage {...messages.user} />
</li>
<li>
<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 {
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 {
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
width: 18px;
height: 18px;
color: $ui-secondary-color;
font-size: 18px;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
cursor: default;
pointer-events: none;
z-index: 2;
transition: all 100ms linear;
}
@ -136,14 +144,15 @@
}
.fa-times-circle {
top: 11px;
transform: rotate(-90deg);
cursor: pointer;
&:hover { color: $primary-text-color }
}
}
&.active {
&.active {
& > .icon {
.fa-search {
opacity: 0;
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 {
padding: 10px;
color: $ui-primary-color;

31
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -3918,37 +3918,6 @@
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 {
text-align: center;