toggle conversation pane

wasgxu · Aug 26, 2017 · 3a91fff · 3a91fff
1 parent 8c59b2b
commit 3a91fff
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 3 deletions.
diff --git a/main.js b/main.js
@@ -270,6 +270,17 @@ function createMenu() {
                         mainWindow.webContents.send('show-contacts');
                     }
                 },
+                {
+                    label: 'Toggle Conversation',
+                    accelerator: 'Shift+Cmd+M',
+                    click() {
+                        mainWindow.show();
+                        mainWindow.webContents.send('show-conversation');
+                    }
+                },
+                {
+                    type: 'separator',
+                },
                 {
                     role: 'toggledevtools'
                 },

diff --git a/src/app.js b/src/app.js
@@ -37,13 +37,23 @@ class App extends Component {
             stores.newchat.toggle(true);
         });
 
+        ipcRenderer.on('show-conversation', () => {
+            if (this.refs.navigator.state.location.pathname === '/'
+                && stores.chat.user) {
+                stores.chat.toggleConversation();
+            }
+        });
+
         ipcRenderer.on('show-search', () => {
             this.refs.navigator.router.push('/');
+            stores.chat.toggleConversation(true);
+
             setTimeout(() => document.querySelector('#search').focus());
         });
 
         ipcRenderer.on('show-messages', () => {
             this.refs.navigator.router.push('/');
+            stores.chat.toggleConversation(true);
         });
 
         ipcRenderer.on('show-contacts', () => {
@@ -52,11 +62,13 @@ class App extends Component {
 
         ipcRenderer.on('show-next', () => {
             this.refs.navigator.router.push('/');
+            stores.chat.toggleConversation(true);
             setTimeout(stores.chat.chatToNext);
         });
 
         ipcRenderer.on('show-previous', () => {
             this.refs.navigator.router.push('/');
+            stores.chat.toggleConversation(true);
             setTimeout(stores.chat.chatToPrev);
         });
 

diff --git a/src/js/pages/Home/ChatContent/index.js b/src/js/pages/Home/ChatContent/index.js
@@ -75,6 +75,8 @@ import { on, off } from 'utils/event';
     showAddFriend: (user) => stores.addfriend.toggle(true, user),
     recallMessage: stores.chat.recallMessage,
     downloads: stores.settings.downloads,
+    showConversation: stores.chat.showConversation,
+    toggleConversation: stores.chat.toggleConversation,
 }))
 @observer
 export default class ChatContent extends Component {
@@ -452,6 +454,15 @@ export default class ChatContent extends Component {
     showMenu() {
         var user = this.props.user;
         var menu = new remote.Menu.buildFromTemplate([
+            {
+                label: 'Toggle the conversation',
+                click: () => {
+                    this.props.toggleConversation();
+                }
+            },
+            {
+                type: 'separator',
+            },
             {
                 label: 'Empty Content',
                 click: () => {
@@ -548,14 +559,19 @@ export default class ChatContent extends Component {
     }
 
     render() {
-        var { loading, user, messages } = this.props;
+        var { loading, showConversation, user, messages } = this.props;
         var title = user.RemarkName || user.NickName;
         var signature = user.Signature;
 
         if (loading) return false;
 
         return (
-            <div className={clazz(classes.container, { [classes.notfound]: !user })} onClick={e => this.handleClick(e)}>
+            <div
+                className={clazz(classes.container, {
+                    [classes.notfound]: !user,
+                    [classes.hideConversation]: !showConversation,
+                })}
+                onClick={e => this.handleClick(e)}>
                 {
                     user ? (
                         <div>

diff --git a/src/js/pages/Home/ChatContent/style.css b/src/js/pages/Home/ChatContent/style.css
@@ -53,6 +53,13 @@
     }
 }
 
+.container.hideConversation {
+    & .signature,
+    & header p {
+        max-width: calc(100vw - 60px);
+    }
+}
+
 .inner {
     display: flex;
     justify-content: center;

diff --git a/src/js/pages/Home/index.js b/src/js/pages/Home/index.js
@@ -1,6 +1,7 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
+import clazz from 'classname';
 
 import classes from './style.css';
 import Loader from 'components/Loader';
@@ -10,15 +11,23 @@ import ChatContent from './ChatContent';
 
 @inject(stores => ({
     loading: stores.session.loading,
+    showConversation: stores.chat.showConversation,
+    toggleConversation: stores.chat.toggleConversation,
     newChat: () => stores.newchat.toggle(true),
 }))
 @observer
 export default class Home extends Component {
+    componentDidMount() {
+        this.props.toggleConversation(true);
+    }
+
     render() {
         return (
             <div className={classes.container}>
                 <Loader show={this.props.loading} fullscreen={true} />
-                <div className={classes.inner}>
+                <div className={clazz(classes.inner, {
+                    [classes.hideConversation]: !this.props.showConversation
+                })}>
                     <div className={classes.left}>
                         <SearchBar />
                         <Chats />

diff --git a/src/js/pages/Home/style.css b/src/js/pages/Home/style.css
@@ -4,6 +4,16 @@
     justify-content: space-between;
 }
 
+.inner.hideConversation {
+    & .left {
+        display: none;
+    }
+
+    & .right {
+        width: 100vw;
+    }
+}
+
 .left {
     position: relative;
     width: 311px;

diff --git a/src/js/stores/chat.js b/src/js/stores/chat.js
@@ -175,6 +175,11 @@ class Chat {
     @observable sessions = [];
     @observable messages = new Map();
     @observable user = false;
+    @observable showConversation = true;
+
+    @action toggleConversation(show = !self.showConversation) {
+        self.showConversation = show;
+    }
 
     @action async loadChats(chatSet) {
         var list = contacts.memberList;