added sub-sections in settings

This commit is contained in:
unknown 2021-07-31 19:53:08 +05:30
parent 7459896bac
commit a82e74381f
3 changed files with 92 additions and 29 deletions

View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
S16.4,20,12,20z"/>
<g>
<polygon points="12.8,15.5 12.8,10 12.2,10 11.3,10 10,10 10,11 11.3,11.5 11.3,15.5 10,16 10,17 14,17 14,16 "/>
<circle cx="12" cy="8" r="1"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 749 B

View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './Settings.scss'; import './Settings.scss';
@ -9,43 +9,96 @@ import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'; 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 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'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
function AppearanceSection() {
return (
<div className="settings-content">
<SettingTile
title="Theme"
content={(
<SegmentedControls
selected={settings.getThemeIndex()}
segments={[
{ text: 'Light' },
{ text: 'Silver' },
{ text: 'Dark' },
{ text: 'Butter' },
]}
onSelect={(index) => settings.setTheme(index)}
/>
)}
/>
</div>
);
}
function SecuritySection() {
return <div className="settings-content" />;
}
function AboutSection() {
return (
<div className="settings-content">
<Text className="settings__about" variant="b1">
<a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a>
</Text>
<Text className="settings__about">Version: 1.0.0</Text>
<Text className="settings__about">{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
</div>
);
}
function Settings({ isOpen, onRequestClose }) { function Settings({ isOpen, onRequestClose }) {
const settingSections = [{
name: 'Appearance',
iconSrc: SunIC,
render() {
return <AppearanceSection />;
},
}, {
name: 'Security & Privacy',
iconSrc: LockIC,
render() {
return <SecuritySection />;
},
}, {
name: 'Help & About',
iconSrc: InfoIC,
render() {
return <AboutSection />;
},
}];
const [selectedSection, setSelectedSection] = useState(settingSections[0]);
return ( return (
<PopupWindow <PopupWindow
className="settings-window" className="settings-window"
isOpen={isOpen} isOpen={isOpen}
onRequestClose={onRequestClose} onRequestClose={onRequestClose}
title="Settings" title="Settings"
contentTitle={selectedSection.name}
drawer={
settingSections.map((section) => (
<PWContentSelector
key={section.name}
selected={selectedSection.name === section.name}
onClick={() => setSelectedSection(section)}
iconSrc={section.iconSrc}
>
{section.name}
</PWContentSelector>
))
}
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />} contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
> >
<div className="settings-content"> {selectedSection.render()}
<SettingTile
title="Theme"
content={(
<SegmentedControls
selected={settings.getThemeIndex()}
segments={[
{ text: 'Light' },
{ text: 'Silver' },
{ text: 'Dark' },
{ text: 'Butter' },
]}
onSelect={(index) => settings.setTheme(index)}
/>
)}
/>
<div style={{ flex: '1' }} />
<Text className="settings__about" variant="b1">
<a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a>
</Text>
<Text className="settings__about">Version: 1.0.0</Text>
<Text className="settings__about">{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
</div>
</PopupWindow> </PopupWindow>
); );
} }

View file

@ -11,10 +11,6 @@
margin-left: var(--sp-extra-tight); margin-left: var(--sp-extra-tight);
margin-right: var(--sp-normal); margin-right: var(--sp-normal);
} }
display: flex;
flex-direction: column;
height: 100%;
} }
.settings__about { .settings__about {