RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +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,
}
const SettingsFooter = () => {
const SettingsFooter = (props) => {
const isDevMode = window.__evite?.env?.NODE_ENV !== "production"
return <div className="footer" >
@ -43,7 +43,7 @@ const SettingsFooter = () => {
</div>
</div>
<div>
<antd.Button type="link" onClick={this.onClickAppAbout}>
<antd.Button type="link" onClick={props.onClickAppAbout}>
<Translation>
{t => t("about")}
</Translation>
@ -425,17 +425,19 @@ export default class SettingsMenu extends React.PureComponent {
}
render() {
return <div className="settings">
<antd.Tabs
activeKey={this.state.activeKey}
centered
destroyInactiveTabPane
onTabClick={this.handlePageTransition}
>
{this.generateSettingsTabs()}
</antd.Tabs>
return <div className="settings_wrapper">
<div className="settings">
<antd.Tabs
activeKey={this.state.activeKey}
centered
destroyInactiveTabPane
onTabClick={this.handlePageTransition}
>
{this.generateSettingsTabs()}
</antd.Tabs>
<SettingsFooter />
<SettingsFooter onClickAppAbout={this.onClickAppAbout} />
</div>
</div>
}
}

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

@ -1,138 +1,140 @@
.settings {
display : flex;
flex-direction: column;
>div {
margin-bottom: 25px;
}
.group {
display : flex;
.settings_wrapper {
.settings {
display: flex;
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 {
margin-bottom: 10px;
margin-bottom: 25px;
}
.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;
.group {
display: flex;
flex-direction: column;
color: var(--background-color-contrast);
--ignore-dragger: true;
padding : 0 20px;
span {
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--background-color-contrast);
}
> div {
margin-bottom: 10px;
.content {
>div {
margin-bottom: 25px;
}
}
}
}
.footer {
position: relative;
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;
}
.settingItem {
padding: 0 20px;
>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 {
width : 100%;
justify-content: space-evenly;
.footer {
position: relative;
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;
}
}
}