Settings UI

Turtus · Feb 14, 2020 · 01cf3a0 · 01cf3a0
1 parent f0b1874
commit 01cf3a0
Show file tree

Hide file tree

Showing 22 changed files with 470 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "homepage": "http://evgeny-nadymov.github.io/telegram-react",
   "name": "telegram_react",
-  "version": "0.0.573",
+  "version": "0.0.574",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.8.0",

diff --git a/src/Actions/Client.js b/src/Actions/Client.js
@@ -7,6 +7,12 @@
 
 import TdLibController from '../Controllers/TdLibController';
 
+export function openArchive() {
+    TdLibController.clientUpdate({
+        '@type': 'clientUpdateOpenArchive'
+    });
+}
+
 export function editMessage(chatId, messageId) {
     TdLibController.clientUpdate({
         '@type': 'clientUpdateEditMessage',

diff --git a/src/Assets/Icons/Close.js b/src/Assets/Icons/Close.js
@@ -4,7 +4,6 @@
  * This source code is licensed under the GPL v.3.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import React from 'react';
 import createSvgIcon from '@material-ui/core/esm/internal/svg-icons/createSvgIcon';
 

diff --git a/src/Assets/Icons/Data.js b/src/Assets/Icons/Data.js
@@ -0,0 +1,13 @@
+/*
+ *  Copyright (c) 2018-present, Evgeny Nadymov
+ *
+ * This source code is licensed under the GPL v.3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import createSvgIcon from '@material-ui/core/esm/internal/svg-icons/createSvgIcon';
+
+export default createSvgIcon(
+    <path d='M12,1 C14.6887547,1 16.8818181,3.12230671 16.9953805,5.78311038 L17,6 L17,8 C18.6568542,8 20,9.34314575 20,11 L20,19 C20,20.6568542 18.6568542,22 17,22 L7,22 C5.34314575,22 4,20.6568542 4,19 L4,11 C4,9.34314575 5.34314575,8 7,8 L7,6 C7,3.23857625 9.23857625,1 12,1 Z M17,10 L7,10 C6.44771525,10 6,10.4477153 6,11 L6,19 C6,19.5522847 6.44771525,20 7,20 L17,20 C17.5522847,20 18,19.5522847 18,19 L18,11 C18,10.4477153 17.5522847,10 17,10 Z M12,13.5 C12.8284271,13.5 13.5,14.1715729 13.5,15 C13.5,15.8284271 12.8284271,16.5 12,16.5 C11.1715729,16.5 10.5,15.8284271 10.5,15 C10.5,14.1715729 11.1715729,13.5 12,13.5 Z M12.1762728,3.00509269 L12,3 C10.4023191,3 9.09633912,4.24891996 9.00509269,5.82372721 L9,6 L9,8 L15,8 L15,6 C15,4.40231912 13.75108,3.09633912 12.1762728,3.00509269 L12,3 L12.1762728,3.00509269 Z' />,
+    'Data'
+);
diff --git a/src/Assets/Icons/Edit.js b/src/Assets/Icons/Edit.js
@@ -0,0 +1,13 @@
+/*
+ *  Copyright (c) 2018-present, Evgeny Nadymov
+ *
+ * This source code is licensed under the GPL v.3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import createSvgIcon from '@material-ui/core/esm/internal/svg-icons/createSvgIcon';
+
+export default createSvgIcon(
+    <path d='M7.70710678,20.7071068 C7.5195704,20.8946432 7.26521649,21 7,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,17 C3,16.7347835 3.10535684,16.4804296 3.29289322,16.2928932 L16.5857864,3 C17.3257272,2.26005924 18.5012114,2.22111499 19.2869988,2.88316725 L19.4142136,3 L21,4.58578644 C21.7399408,5.3257272 21.778885,6.50121136 21.1168328,7.28699879 L21,7.41421356 L7.70710678,20.7071068 Z M5,17.4142136 L5,19 L6.58578644,19 L16.5857864,9 L15,7.41421356 L5,17.4142136 Z M18,4.41421356 L16.414,5.99921356 L18,7.58521356 L19.5857864,6 L18,4.41421356 Z' />,
+    'Edit'
+);
diff --git a/src/Assets/Icons/Group.js b/src/Assets/Icons/Group.js
diff --git a/src/Assets/Icons/More.js b/src/Assets/Icons/More.js
@@ -0,0 +1,13 @@
+/*
+ *  Copyright (c) 2018-present, Evgeny Nadymov
+ *
+ * This source code is licensed under the GPL v.3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import createSvgIcon from '@material-ui/core/esm/internal/svg-icons/createSvgIcon';
+
+export default createSvgIcon(
+    <path d='M12,16 C13.1045695,16 14,16.8954305 14,18 C14,19.1045695 13.1045695,20 12,20 C10.8954305,20 10,19.1045695 10,18 C10,16.8954305 10.8954305,16 12,16 Z M12,10 C13.1045695,10 14,10.8954305 14,12 C14,13.1045695 13.1045695,14 12,14 C10.8954305,14 10,13.1045695 10,12 C10,10.8954305 10.8954305,10 12,10 Z M12,4 C13.1045695,4 14,4.8954305 14,6 C14,7.1045695 13.1045695,8 12,8 C10.8954305,8 10,7.1045695 10,6 C10,4.8954305 10.8954305,4 12,4 Z' />,
+    'More'
+);
diff --git a/src/Assets/Icons/Mute.js b/src/Assets/Icons/Mute.js
diff --git a/src/Assets/Icons/Unmute.js b/src/Assets/Icons/Unmute.js
@@ -0,0 +1,13 @@
+/*
+ *  Copyright (c) 2018-present, Evgeny Nadymov
+ *
+ * This source code is licensed under the GPL v.3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import createSvgIcon from '@material-ui/core/esm/internal/svg-icons/createSvgIcon';
+
+export default createSvgIcon(
+    <path d='M13,20 C13.5522847,20 14,20.4477153 14,21 C14,21.5522847 13.5522847,22 13,22 L13,22 L11,22 C10.4477153,22 10,21.5522847 10,21 C10,20.4477153 10.4477153,20 11,20 L11,20 Z M12,2 C15.8659932,2 19,5.13400675 19,9 L19,14.6972244 L20.8320503,17.4452998 C21.2750868,18.1098545 20.7986954,19 20,19 L4,19 C3.20130462,19 2.72491322,18.1098545 3.16794971,17.4452998 L5,14.6972244 L5,9 C5,5.13400675 8.13400675,2 12,2 Z M12,4 C9.23857625,4 7,6.23857625 7,9 L7,14.6972244 C7,15.0920743 6.88312395,15.4780897 6.66410059,15.8066248 L5.86851709,17 L18.1314829,17 L17.3358994,15.8066248 C17.1168761,15.4780897 17,15.0920743 17,14.6972244 L17,9 C17,6.23857625 14.7614237,4 12,4 Z' />,
+    'Unmute'
+);
diff --git a/src/Assets/Icons/User.js b/src/Assets/Icons/User.js
@@ -0,0 +1,13 @@
+/*
+ *  Copyright (c) 2018-present, Evgeny Nadymov
+ *
+ * This source code is licensed under the GPL v.3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import createSvgIcon from '@material-ui/core/esm/internal/svg-icons/createSvgIcon';
+
+export default createSvgIcon(
+    <path d='M12,12 C15.9072418,12 18.715318,13.0364023 20.3351717,15.1788288 C20.7665758,15.7493929 21,16.4451545 21,17.1604559 L21,18.2857143 C21,19.7847729 19.7847729,21 18.2857143,21 L5.71428571,21 C4.21522711,21 3,19.7847729 3,18.2857143 L3,17.160494 C3,16.445199 3.23340019,15.7494497 3.66478123,15.178891 C5.28463457,13.0364199 8.09272555,12 12,12 Z M12,14 C8.66170181,14 6.44476079,14.8182362 5.26012276,16.3850773 C5.09133017,16.6083279 5,16.8805766 5,17.160494 L5,18.2857143 C5,18.6802034 5.31979661,19 5.71428571,19 L18.2857143,19 C18.6802034,19 19,18.6802034 19,18.2857143 L19,17.1604559 C19,16.8805572 18.9086617,16.6083073 18.7398491,16.38504 C17.5552048,14.8182236 15.3382718,14 12,14 Z M12,2 C14.209139,2 16,3.790861 16,6 C16,8.209139 14.209139,10 12,10 C9.790861,10 8,8.209139 8,6 C8,3.790861 9.790861,2 12,2 Z M12,4 C10.8954305,4 10,4.8954305 10,6 C10,7.1045695 10.8954305,8 12,8 C13.1045695,8 14,7.1045695 14,6 C14,4.8954305 13.1045695,4 12,4 Z' />,
+    'User'
+);
diff --git a/src/Components/ColumnLeft/Dialogs.js b/src/Components/ColumnLeft/Dialogs.js
@@ -10,6 +10,7 @@ import classNames from 'classnames';
 import Search from './Search/Search';
 import DialogsHeader from './DialogsHeader';
 import DialogsList from './DialogsList';
+import Settings from './Settings/Settings';
 import UpdatePanel from './UpdatePanel';
 import { openChat } from '../../Actions/Client';
 import { getArchiveTitle } from '../../Utils/Archive';
@@ -59,6 +60,7 @@ class Dialogs extends Component {
             archiveItems,
             isChatDetailsVisible,
             openSearch,
+            openSettings,
             openArchive,
             searchChatId,
             searchText
@@ -92,6 +94,10 @@ class Dialogs extends Component {
             return true;
         }
 
+        if (nextState.openSettings !== openSettings) {
+            return true;
+        }
+
         if (nextState.openArchive !== openArchive) {
             return true;
         }
@@ -122,6 +128,8 @@ class Dialogs extends Component {
         ChatStore.on('updateChatLastMessage', this.onUpdateChatOrder);
         ChatStore.on('updateChatOrder', this.onUpdateChatOrder);
 
+        ChatStore.on('clientUpdateOpenSettings', this.onClientUpdateOpenSettings);
+        ChatStore.on('clientUpdateCloseSettings', this.onClientUpdateCloseSettings);
         ChatStore.on('clientUpdateOpenArchive', this.onClientUpdateOpenArchive);
         ChatStore.on('clientUpdateCloseArchive', this.onClientUpdateCloseArchive);
     }
@@ -139,6 +147,8 @@ class Dialogs extends Component {
         ChatStore.off('updateChatLastMessage', this.onUpdateChatOrder);
         ChatStore.off('updateChatOrder', this.onUpdateChatOrder);
 
+        ChatStore.off('clientUpdateOpenSettings', this.onClientUpdateOpenSettings);
+        ChatStore.off('clientUpdateCloseSettings', this.onClientUpdateCloseSettings);
         ChatStore.off('clientUpdateOpenArchive', this.onClientUpdateOpenArchive);
         ChatStore.off('clientUpdateCloseArchive', this.onClientUpdateCloseArchive);
     }
@@ -227,6 +237,14 @@ class Dialogs extends Component {
         }
     };
 
+    onClientUpdateOpenSettings = update => {
+        this.setState({ openSettings: true, meChatId: update.chatId });
+    };
+
+    onClientUpdateCloseSettings = update => {
+        this.setState({ openSettings: false });
+    };
+
     onClientUpdateOpenArchive = update => {
         this.setState({ openArchive: true });
     };
@@ -332,6 +350,8 @@ class Dialogs extends Component {
             mainItems,
             archiveItems,
             isChatDetailsVisible,
+            openSettings,
+            meChatId,
             openArchive,
             openSearch,
             searchChatId,
@@ -348,6 +368,7 @@ class Dialogs extends Component {
                 })}>
                 <DialogsHeader
                     ref={this.dialogsHeaderRef}
+                    openSettings={openSettings}
                     openArchive={openArchive}
                     openSearch={openSearch}
                     onClick={this.handleHeaderClick}
@@ -381,6 +402,7 @@ class Dialogs extends Component {
                             onClose={this.handleClose}
                         />
                     )}
+                    {openSettings && <Settings chatId={meChatId} />}
                 </div>
                 <UpdatePanel />
             </div>

diff --git a/src/Components/ColumnLeft/DialogsHeader.js b/src/Components/ColumnLeft/DialogsHeader.js
@@ -29,6 +29,7 @@ import { ANIMATION_DURATION_100MS } from '../../Constants';
 import AppStore from '../../Stores/ApplicationStore';
 import TdLibController from '../../Controllers/TdLibController';
 import '../ColumnMiddle/Header.css';
+import SettingsMenuButton from './Settings/SettingsMenuButton';
 
 class DialogsHeader extends React.Component {
     constructor(props) {
@@ -93,15 +94,6 @@ class DialogsHeader extends React.Component {
         this.setState({ open: true });
     };
 
-    handleDone = () => {
-        this.handleClose();
-        TdLibController.logOut();
-    };
-
-    handleClose = () => {
-        this.setState({ open: false });
-    };
-
     handleSearch = () => {
         const { onSearch, openSearch } = this.props;
         const { authorizationState } = this.state;
@@ -145,28 +137,17 @@ class DialogsHeader extends React.Component {
         });
     };
 
+    handleCloseSettings = () => {
+        TdLibController.clientUpdate({
+            '@type': 'clientUpdateCloseSettings'
+        });
+    };
+
     render() {
-        const { onClick, openArchive, openSearch, t } = this.props;
-        const { open } = this.state;
-
-        const confirmLogoutDialog = open ? (
-            <Dialog transitionDuration={0} open={open} onClose={this.handleClose} aria-labelledby='form-dialog-title'>
-                <DialogTitle id='form-dialog-title'>{t('Confirm')}</DialogTitle>
-                <DialogContent>
-                    <DialogContentText style={{ whiteSpace: 'pre-wrap' }}>{t('AreYouSureLogout')}</DialogContentText>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.handleClose} color='primary'>
-                        {t('Cancel')}
-                    </Button>
-                    <Button onClick={this.handleDone} color='primary'>
-                        {t('Ok')}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        ) : null;
+        const { onClick, openArchive, openSearch, openSettings, t } = this.props;
 
         let content = null;
+        let showRightButton = true;
         if (openSearch) {
             content = (
                 <>
@@ -195,11 +176,23 @@ class DialogsHeader extends React.Component {
                     </div>
                 </>
             );
+        } else if (openSettings) {
+            showRightButton = false;
+            content = (
+                <>
+                    <IconButton className='header-left-button' onClick={this.handleCloseSettings}>
+                        <ArrowBackIcon />
+                    </IconButton>
+                    <div className='header-status grow cursor-pointer' onClick={onClick}>
+                        <span className='header-status-content'>{t('Settings')}</span>
+                    </div>
+                    <SettingsMenuButton />
+                </>
+            );
         } else {
             content = (
                 <>
-                    <MainMenuButton onLogOut={this.handleLogOut} />
-                    {confirmLogoutDialog}
+                    <MainMenuButton />
                     <div className='header-status grow cursor-pointer' onClick={onClick}>
                         <span className='header-status-content'>{t('AppName')}</span>
                     </div>
@@ -210,9 +203,14 @@ class DialogsHeader extends React.Component {
         return (
             <div className='header-master'>
                 {content}
-                <IconButton className='header-right-button' aria-label={t('Search')} onMouseDown={this.handleSearch}>
-                    <SpeedDialIcon open={openSearch} icon={<SearchIcon />} openIcon={<CloseIcon />} />
-                </IconButton>
+                {showRightButton && (
+                    <IconButton
+                        className='header-right-button'
+                        aria-label={t('Search')}
+                        onMouseDown={this.handleSearch}>
+                        <SpeedDialIcon open={openSearch} icon={<SearchIcon />} openIcon={<CloseIcon />} />
+                    </IconButton>
+                )}
             </div>
         );
     }
@@ -221,6 +219,7 @@ class DialogsHeader extends React.Component {
 DialogsHeader.propTypes = {
     openSearch: PropTypes.bool.isRequired,
     openArchive: PropTypes.bool.isRequired,
+    openSettings: PropTypes.bool.isRequired,
     onClick: PropTypes.func.isRequired,
     onSearch: PropTypes.func.isRequired,
     onSearchTextChange: PropTypes.func.isRequired