fix bug 🐞

main.js

@@ -92,14 +92,6 @@ let mainMenu = [
                     mainWindow.webContents.send('show-emoji');
                 }
             },
-            {
-                label: 'Insert file',
-                accelerator: 'Cmd+O',
-                click() {
-                    mainWindow.show();
-                    mainWindow.webContents.send('show-uploader');
-                }
-            },
             {
                 type: 'separator',
             },

src/app.js

@@ -87,12 +87,6 @@ class App extends Component {
             }
         });
 
-        ipcRenderer.on('show-uploader', () => {
-            if (this.canisend()) {
-                document.querySelector('#uploader').click();
-            }
-        });
-
         // Show contacts page
         ipcRenderer.on('show-contacts', () => {
             this.refs.navigator.router.push('/contacts');

src/global.css

@@ -60,6 +60,7 @@ label {
 .link {
     padding: 0;
     margin: 0;
+    outline: 0;
     text-decoration: none;
 }
 

src/js/pages/Footer/Home.js

@@ -22,7 +22,7 @@ import Emoji from './Emoji';
     },
     process: stores.chat.process,
 }))
-export default class Input extends Component {
+export default class Home extends Component {
     async handleEnter(e) {
         var message = this.refs.input.value.trim();
 

src/js/pages/Footer/Suggestion/index.js

@@ -0,0 +1,55 @@
+
+import React, { Component, PropTypes } from 'react';
+import clazz from 'classname';
+
+import './style.global.css';
+import TransitionPortal from 'components/TransitionPortal';
+
+export default class Suggestion extends Component {
+    static propTypes = {
+        show: PropTypes.bool.isRequired,
+        list: PropTypes.array.isRequired,
+    };
+
+    renderContent() {
+        var { show, list, selected } = this.props;
+
+        if (!show) {
+            return false;
+        }
+
+        console.log(window.event);
+
+        return (
+            <div className="Suggestion">
+                {
+                    list.map((e, index) => {
+                        return (
+                            <div
+                                key={index}
+                                className={clazz('Suggestion-item', {
+                                    'Suggestion--selected': e.UserName === selected
+                                })}>
+                                <img src={e.HeadImgUrl} />
+
+                                <div className="Suggestion-user">
+                                    <p className="Suggestion-username" dangerouslySetInnerHTML={{__html: e.RemarkName || e.NickName}} />
+                                </div>
+                            </div>
+                        );
+                    })
+                }
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <TransitionPortal transitionEnterTimeout={0} transitionLeaveTimeout={150} transitionName="Suggestion">
+                {
+                    this.renderContent()
+                }
+            </TransitionPortal>
+        );
+    };
+}

src/js/pages/Footer/Suggestion/style.global.css

@@ -0,0 +1,125 @@
+
+.Suggestion {
+    position: fixed;
+    bottom: 60px;
+    left: 311px;
+    height: calc(100vh - 200px);
+    background: #fff;
+    box-shadow: 0 0 24px 0 rgba(0, 0, 0, .2);
+    border-radius: 1px;
+    overflow: hidden;
+    overflow-y: auto;
+}
+
+.Suggestion-item {
+    display: flex;
+    padding: 6px 12px;
+    justify-content: flex-start;
+    align-items: center;
+    cursor: pointer;
+}
+
+.Suggestion--selected,
+.Suggestion-item:hover {
+    background: #405de6;
+}
+
+.Suggestion--selected .Suggestion-username,
+.Suggestion-item:hover .Suggestion-username {
+    color: #fff;
+}
+
+.Suggestion-item img {
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+}
+
+.Suggestion-username {
+    padding: 0;
+    margin: 0;
+}
+
+.Suggestion-username {
+    color: #777;
+    margin-bottom: 2px;
+}
+
+.Suggestion-enter {
+    transform: translateY(24px);
+    opacity: 0;
+    transition: .2s cubic-bezier(.5, -.55, .4, 1.55);
+}
+
+.Suggestion-enter.Suggestion-enter-active {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.Suggestion-leave {
+    opacity: 1;
+    transition: .14s;
+}
+
+.Suggestion-leave.Suggestion-leave-active {
+    transform: translateY(-24px);
+    opacity: 0;
+}
+
+.Suggestion-input-user {
+    display: flex;
+    padding: 0 23px;
+    margin: 0 2px;
+    height: 32px;
+    align-items: center;
+    background: rgba(230, 230, 230, 1);
+    color: #777;
+    border-radius: 32px;
+    white-space: nowrap;
+}
+
+.Suggestion-input-user img {
+    height: 20px;
+    width: 20px;
+    margin-right: 2px;
+}
+
+.Suggestion-input-user * {
+    display: inline-block;
+    white-space: nowrap;
+}
+
+@media (width <= 800px) {
+    .Suggestion {
+        bottom: 48px;
+        left: 280px;
+    }
+
+    .Suggestion-item {
+        display: flex;
+        padding: 6px 12px;
+    }
+
+    .Suggestion-item img {
+        width: 24px;
+        height: 24px;
+        margin-right: 12px;
+    }
+
+    .Suggestion-username {
+        margin-bottom: 2px;
+    }
+
+    .Suggestion-input-user {
+        padding: 0 23px;
+        margin: 0 2px;
+        height: 32px;
+        border-radius: 32px;
+    }
+
+    .Suggestion-input-user img {
+        height: 20px;
+        width: 20px;
+        margin-right: 2px;
+    }
+}

src/js/pages/Footer/index.js

@@ -19,19 +19,19 @@ export default class Footer extends Component {
         return (
             <footer className={classes.footer}>
                 <nav>
-                    <Link className="link" to="/">
+                    <Link className="link" to="/" tabIndex="-1">
                         <span className={pathname === '/' && classes.active}>
                             <i className="icon-ion-android-chat" />
                         </span>
                     </Link>
 
-                    <Link className="link" to="/contacts">
+                    <Link className="link" to="/contacts" tabIndex="-1">
                         <span className={pathname === '/contacts' && classes.active}>
                             <i className="icon-ion-ios-book-outline" />
                         </span>
                     </Link>
 
-                    <Link className="link" to="/settings">
+                    <Link className="link" to="/settings" tabIndex="-1">
                         <span className={pathname === '/settings' && classes.active}>
                             <i className="icon-ion-android-more-vertical" />
                         </span>