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

use wrapper

Browse Source
This commit is contained in:
srgooglo 2022-10-25 12:09:53 +00:00
parent 44fb448f3a
commit c552a6a345
2 changed files with 134 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/app/src/components/Settings/index.jsx
View File

@ -24,7 +24,7 @@ const ItemTypes = {
SliderColorPicker: SliderPicker, SliderColorPicker: SliderPicker,
} }
const SettingsFooter = () => { const SettingsFooter = (props) => {
const isDevMode = window.__evite?.env?.NODE_ENV !== "production" const isDevMode = window.__evite?.env?.NODE_ENV !== "production"
return <div className="footer" > return <div className="footer" >
@ -43,7 +43,7 @@ const SettingsFooter = () => {
</div> </div>
</div> </div>
<div> <div>
<antd.Button type="link" onClick={this.onClickAppAbout}> <antd.Button type="link" onClick={props.onClickAppAbout}>
<Translation> <Translation>
{t => t("about")} {t => t("about")}
</Translation> </Translation>
@ -425,17 +425,19 @@ export default class SettingsMenu extends React.PureComponent {
} }
render() { render() {
return <div className="settings"> return <div className="settings_wrapper">
<antd.Tabs <div className="settings">
activeKey={this.state.activeKey} <antd.Tabs
centered activeKey={this.state.activeKey}
destroyInactiveTabPane centered
onTabClick={this.handlePageTransition} destroyInactiveTabPane
> onTabClick={this.handlePageTransition}
{this.generateSettingsTabs()} >
</antd.Tabs> {this.generateSettingsTabs()}
</antd.Tabs>
<SettingsFooter /> <SettingsFooter onClickAppAbout={this.onClickAppAbout} />
</div>
</div> </div>
} }
} }

238
packages/app/src/components/Settings/index.less
View File

@ -1,138 +1,140 @@
.settings { .settings_wrapper {
display : flex; .settings {
flex-direction: column; display: flex;
>div {
margin-bottom: 25px;
}
.group {
display : flex;
flex-direction: column; flex-direction: column;
color : var(--background-color-contrast);
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--background-color-contrast);
}
.content {
>div {
margin-bottom: 25px;
}
}
}
.settingItem {
padding: 0 20px;
>div { >div {
margin-bottom: 10px; margin-bottom: 25px;
} }
.header { .group {
display : inline-flex; display: flex;
flex-direction: row;
align-items : center;
justify-content: space-between;
width: 100%;
.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;
}
}
.extraActions {
display: inline-flex;
align-items: center;
> div {
margin-right: 10px;
}
}
}
.component {
display : flex;
flex-direction: column; flex-direction: column;
color: var(--background-color-contrast);
--ignore-dragger: true; h1,
padding : 0 20px; h2,
h3,
span { h4,
h5,
h6 {
color: var(--background-color-contrast); color: var(--background-color-contrast);
} }
> div { .content {
margin-bottom: 10px; >div {
margin-bottom: 25px;
}
} }
} }
}
.footer { .settingItem {
position: relative; padding: 0 20px;
width : 100%;
padding-top : 20px;
padding-bottom: 20px;
display : flex;
flex-direction: column;
justify-content: center;
align-items : center;
>div {
margin-bottom: 10px;
font-family: "Space Mono", monospace;
font-size : 10px;
display : flex;
flex-direction: row;
align-items : center;
justify-content: center;
.ant-tag {
height : 18px;
line-height: 18px;
font-size : 10px;
}
>div { >div {
padding: 0 7px; margin-bottom: 10px;
}
.header {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
.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;
}
}
.extraActions {
display: inline-flex;
align-items: center;
>div {
margin-right: 10px;
}
}
}
.component {
display: flex;
flex-direction: column;
--ignore-dragger: true;
padding: 0 20px;
span {
color: var(--background-color-contrast);
}
>div {
margin-bottom: 10px;
}
} }
} }
}
.ant-tabs-nav-list { .footer {
width : 100%; position: relative;
justify-content: space-evenly; width: 100%;
padding-top: 20px;
padding-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
>div {
margin-bottom: 10px;
font-family: "Space Mono", monospace;
font-size: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.ant-tag {
height: 18px;
line-height: 18px;
font-size: 10px;
}
>div {
padding: 0 7px;
}
}
}
.ant-tabs-nav-list {
width: 100%;
justify-content: space-evenly;
}
} }
} }