diff options
4 files changed, 102 insertions, 92 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/search/index.js b/app/javascript/flavours/glitch/features/drawer/search/index.js index 2d739349c..8cbb0906c 100644 --- a/app/javascript/flavours/glitch/features/drawer/search/index.js +++ b/app/javascript/flavours/glitch/features/drawer/search/index.js @@ -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> diff --git a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js index b5ea86ff1..6219f46ca 100644 --- a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js +++ b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js @@ -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> ); } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index ebf996907..865ab4343 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -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; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 67c95eb93..967620397 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -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; |