RageStudio/relic
1
0
Fork 0
mirror of https://github.com/ragestudio/relic.git synced 2025-06-09 10:34:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve settings

Browse Source
This commit is contained in:
SrGooglo 2024-01-27 15:39:23 +01:00
parent c74395be5f
commit a64a198411
2 changed files with 60 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/renderer/src/pages/settings/index.jsx
View File

@ -121,6 +121,37 @@ const SettingItem = (props) => {
</div>
}
const SettingsList = ({ settings }) => {
return settings.map((setting, index) => {
const isGroup = Array.isArray(setting.children)
if (isGroup) {
return <div
id={setting.id}
className="app_settings-list-group"
>
<div className="app_settings-list-group_label">
{
setting.icon && <Icon icon={setting.icon} />
}
<h1>
{setting.name}
</h1>
</div>
<SettingsList
settings={setting.children}
/>
</div>
}
return <SettingItem
key={index}
setting={setting}
/>
})
}
const Settings = () => {
return <div className="app_settings">
<div className="app_settings-header">
@ -140,19 +171,11 @@ const Settings = () => {
</div>
<div className="app_settings-list">
{
settingsList.map((setting, index) => {
return <SettingItem
key={index}
setting={setting}
/>
})
}
<SettingsList
settings={settingsList}
/>
</div>
<div className="software_info">
</div>
</div>
}

28
src/renderer/src/pages/settings/index.less
View File

@ -48,9 +48,31 @@
display: flex;
flex-direction: column;
background-color: var(--background-color-secondary);
gap: 10px;
border-radius: 12px;
.app_settings-list-group {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 7px;
background-color: var(--background-color-secondary);
border-radius: 12px;
.app_settings-list-group_label {
display: inline-flex;
flex-direction: row;
align-items: center;
font-size: 1rem;
font-weight: 700;
gap: 7px;
}
}
.app_settings-list-item {
display: flex;
@ -66,6 +88,8 @@
padding: 10px;
opacity: 0.9;
.app_settings-list-item-info {
display: flex;
flex-direction: column;