From a82e74381f896b86d4c0cdf9d5c65152d8417f7e Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 31 Jul 2021 19:53:08 +0530 Subject: [PATCH] added sub-sections in settings --- public/res/ic/outlined/info.svg | 14 +++ src/app/organisms/settings/Settings.jsx | 103 +++++++++++++++++------ src/app/organisms/settings/Settings.scss | 4 - 3 files changed, 92 insertions(+), 29 deletions(-) create mode 100644 public/res/ic/outlined/info.svg diff --git a/public/res/ic/outlined/info.svg b/public/res/ic/outlined/info.svg new file mode 100644 index 0000000..30a5788 --- /dev/null +++ b/public/res/ic/outlined/info.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 49b3fca..dbb6bae 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/src/app/organisms/settings/Settings.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import './Settings.scss'; @@ -9,43 +9,96 @@ import Text from '../../atoms/text/Text'; import IconButton from '../../atoms/button/IconButton'; import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'; -import PopupWindow from '../../molecules/popup-window/PopupWindow'; +import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow'; import SettingTile from '../../molecules/setting-tile/SettingTile'; +import SunIC from '../../../../public/res/ic/outlined/sun.svg'; +import LockIC from '../../../../public/res/ic/outlined/lock.svg'; +import InfoIC from '../../../../public/res/ic/outlined/info.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; +function AppearanceSection() { + return ( +
+ settings.setTheme(index)} + /> + )} + /> +
+ ); +} + +function SecuritySection() { + return
; +} + +function AboutSection() { + return ( +
+ + About + + Version: 1.0.0 + {`Device ID: ${initMatrix.matrixClient.getDeviceId()}`} +
+ ); +} + function Settings({ isOpen, onRequestClose }) { + const settingSections = [{ + name: 'Appearance', + iconSrc: SunIC, + render() { + return ; + }, + }, { + name: 'Security & Privacy', + iconSrc: LockIC, + render() { + return ; + }, + }, { + name: 'Help & About', + iconSrc: InfoIC, + render() { + return ; + }, + }]; + const [selectedSection, setSelectedSection] = useState(settingSections[0]); + return ( ( + setSelectedSection(section)} + iconSrc={section.iconSrc} + > + {section.name} + + )) + } contentOptions={} > -
- settings.setTheme(index)} - /> - )} - /> -
- - About - - Version: 1.0.0 - {`Device ID: ${initMatrix.matrixClient.getDeviceId()}`} -
+ {selectedSection.render()} ); } diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss index 7414883..f96baf6 100644 --- a/src/app/organisms/settings/Settings.scss +++ b/src/app/organisms/settings/Settings.scss @@ -11,10 +11,6 @@ margin-left: var(--sp-extra-tight); margin-right: var(--sp-normal); } - - display: flex; - flex-direction: column; - height: 100%; } .settings__about {