RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve settings ui style

Browse Source
This commit is contained in:
SrGooglo 2023-06-07 01:27:49 +00:00
parent 9504b40419
commit 1027d37205
2 changed files with 128 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/app/src/pages/settings/index.jsx
View File

@ -304,9 +304,9 @@ const SettingItem = (props) => {
...props.ctx, ...props.ctx,
} }
return <div key={item.id} className="settingItem"> return <div key={item.id} className="settings_content_group_item">
<div className="header"> <div className="settings_content_group_item_header">
<div className="title"> <div className="settings_content_group_item_header_title">
<div> <div>
<h4> <h4>
{Icons[item.icon] ? React.createElement(Icons[item.icon]) : null} {Icons[item.icon] ? React.createElement(Icons[item.icon]) : null}
@ -323,7 +323,7 @@ const SettingItem = (props) => {
</div> </div>
</div> </div>
{item.extraActions && {item.extraActions &&
<div className="extraActions"> <div className="settings_content_group_item_header_actions">
{item.extraActions.map((action, index) => { {item.extraActions.map((action, index) => {
if (typeof action === "function") { if (typeof action === "function") {
return React.createElement(action, { return React.createElement(action, {
@ -351,7 +351,7 @@ const SettingItem = (props) => {
</div> </div>
} }
</div> </div>
<div className="component"> <div className="settings_content_group_item_component">
<div> <div>
{ {
loading loading
@ -398,18 +398,20 @@ const SettingGroup = React.memo((props) => {
return null return null
} }
return <div index={groupKey} key={groupKey} className="group"> return <div index={groupKey} key={groupKey} className="settings_content_group">
<h1> <div className="settings_content_group_header">
{ <h1>
fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
}
<Translation>
{ {
t => t(fromDecoratorTitle ?? groupKey) fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
} }
</Translation> <Translation>
</h1> {
<div className="content"> t => t(fromDecoratorTitle ?? groupKey)
}
</Translation>
</h1>
</div>
<div className="settings_content_group_settings">
{ {
settings.map((item) => <SettingItem settings.map((item) => <SettingItem
item={item} item={item}

176
packages/app/src/pages/settings/index.less
View File

@ -1,14 +1,20 @@
@import "theme/vars.less";
.settings_wrapper { .settings_wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
padding-bottom: 20px;
.settings_menu { .settings_menu {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: fit-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -16,6 +22,7 @@
align-items: center; align-items: center;
width: 30%; width: 30%;
max-width: 300px;
padding: 0 30px; padding: 0 30px;
@ -34,92 +41,131 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 70%; width: 100%;
max-width: 700px;
gap: 20px;
.settings_content_group {
position: relative;
.group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--background-color-contrast); color: var(--background-color-contrast);
background-color: var(--background-color-accent);
h1, border-radius: 12px;
h2,
h3,
h4,
h5,
h6 {
color: var(--background-color-contrast);
}
.content { padding: 20px;
>div {
margin-bottom: 25px;
}
}
}
.settingItem { gap: 20px;
padding: 0 20px;
>div { .settings_content_group_header {
margin-bottom: 10px; position: absolute;
}
.header {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%; width: 100%;
.title { top: 0;
display: flex; left: 0;
align-items: center;
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: var(--background-color-contrast); color: var(--background-color-contrast);
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: var(--background-color-contrast);
}
p {
font-size: 11px;
color: var(--background-color-contrast);
margin: 0;
}
>div {
margin-right: 10px;
}
} }
.extraActions { //-webkit-box-shadow: @card-shadow;
display: inline-flex; //-moz-box-shadow: @card-shadow;
align-items: center; //box-shadow: @card-shadow;
>div { padding: 20px;
margin-right: 10px;
} border-radius: 12px;
}
} }
.component { .settings_content_group_settings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
--ignore-dragger: true; margin-top: 50px;
padding: 0 20px;
span { gap: 30px;
color: var(--background-color-contrast);
}
>div { .settings_content_group_item {
margin-bottom: 10px; display: flex;
flex-direction: column;
padding: 0 20px;
.settings_content_group_item_header {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
.settings_content_group_item_header_title {
display: flex;
align-items: center;
color: var(--background-color-contrast);
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: var(--background-color-contrast);
}
p {
font-size: 11px;
color: var(--background-color-contrast);
margin: 0;
}
>div {
margin-right: 10px;
}
}
.settings_content_group_item_header_actions {
display: inline-flex;
align-items: center;
gap: 10px;
.ant-btn {
background-color: var(--background-color-primary-2);
}
.ant-btn:not([disabled]) {
&:hover {
color: var(--colorPrimary);
border: 1px solid var(--colorPrimary);
}
}
}
}
.settings_content_group_item_component {
display: flex;
flex-direction: column;
--ignore-dragger: true;
padding: 6px 20px;
span {
color: var(--background-color-contrast);
}
}
} }
} }
} }