Fixes to search dropdown

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;