RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +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,
}
return <div key={item.id} className="settingItem">
<div className="header">
<div className="title">
return <div key={item.id} className="settings_content_group_item">
<div className="settings_content_group_item_header">
<div className="settings_content_group_item_header_title">
<div>
<h4>
{Icons[item.icon] ? React.createElement(Icons[item.icon]) : null}
@ -323,7 +323,7 @@ const SettingItem = (props) => {
</div>
</div>
{item.extraActions &&
<div className="extraActions">
<div className="settings_content_group_item_header_actions">
{item.extraActions.map((action, index) => {
if (typeof action === "function") {
return React.createElement(action, {
@ -351,7 +351,7 @@ const SettingItem = (props) => {
</div>
}
</div>
<div className="component">
<div className="settings_content_group_item_component">
<div>
{
loading
@ -398,18 +398,20 @@ const SettingGroup = React.memo((props) => {
return null
}
return <div index={groupKey} key={groupKey} className="group">
<h1>
{
fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
}
<Translation>
return <div index={groupKey} key={groupKey} className="settings_content_group">
<div className="settings_content_group_header">
<h1>
{
t => t(fromDecoratorTitle ?? groupKey)
fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
}
</Translation>
</h1>
<div className="content">
<Translation>
{
t => t(fromDecoratorTitle ?? groupKey)
}
</Translation>
</h1>
</div>
<div className="settings_content_group_settings">
{
settings.map((item) => <SettingItem
item={item}

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

@ -1,14 +1,20 @@
@import "theme/vars.less";
.settings_wrapper {
display: flex;
flex-direction: row;
justify-content: center;
padding-bottom: 20px;
.settings_menu {
position: sticky;
top: 0;
left: 0;
height: 100%;
height: fit-content;
display: flex;
flex-direction: column;
@ -16,6 +22,7 @@
align-items: center;
width: 30%;
max-width: 300px;
padding: 0 30px;
@ -34,92 +41,131 @@
display: flex;
flex-direction: column;
width: 70%;
width: 100%;
max-width: 700px;
gap: 20px;
.settings_content_group {
position: relative;
.group {
display: flex;
flex-direction: column;
color: var(--background-color-contrast);
background-color: var(--background-color-accent);
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--background-color-contrast);
}
border-radius: 12px;
.content {
>div {
margin-bottom: 25px;
}
}
}
padding: 20px;
.settingItem {
padding: 0 20px;
gap: 20px;
>div {
margin-bottom: 10px;
}
.settings_content_group_header {
position: absolute;
.header {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
.title {
display: flex;
align-items: center;
top: 0;
left: 0;
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
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 {
display: inline-flex;
align-items: center;
//-webkit-box-shadow: @card-shadow;
//-moz-box-shadow: @card-shadow;
//box-shadow: @card-shadow;
>div {
margin-right: 10px;
}
}
padding: 20px;
border-radius: 12px;
}
.component {
.settings_content_group_settings {
display: flex;
flex-direction: column;
--ignore-dragger: true;
padding: 0 20px;
margin-top: 50px;
span {
color: var(--background-color-contrast);
}
gap: 30px;
>div {
margin-bottom: 10px;
.settings_content_group_item {
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);
}
}
}
}
}