mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
0.2.12A2
This commit is contained in:
parent
0c1d9e1f8b
commit
59f570394b
@ -8,14 +8,7 @@ module.exports = {
|
|||||||
DarkFullLogoPath: '/dark_full_logo.svg',
|
DarkFullLogoPath: '/dark_full_logo.svg',
|
||||||
DarkLogoPath: '/dark_logo.svg',
|
DarkLogoPath: '/dark_logo.svg',
|
||||||
|
|
||||||
apiPrefix: '/api/v1',
|
|
||||||
fixedHeader: true, // sticky primary layout header
|
|
||||||
resource_bundle: 'light_ng',
|
resource_bundle: 'light_ng',
|
||||||
|
|
||||||
App_Config: {
|
|
||||||
InitRes: { width: 1000, height: 900},
|
|
||||||
InitOpenConsole: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
/* Layout configuration, specify which layout to use for route. */
|
/* Layout configuration, specify which layout to use for route. */
|
||||||
layouts: [
|
layouts: [
|
||||||
@ -29,13 +22,10 @@ module.exports = {
|
|||||||
// Disused Variables, exported from yCoreWorker
|
// Disused Variables, exported from yCoreWorker
|
||||||
// Global Server Key (Requiered for RS-YIBTP), Not autogenerated, must be included on. (Recommended not modify this constants)
|
// Global Server Key (Requiered for RS-YIBTP), Not autogenerated, must be included on. (Recommended not modify this constants)
|
||||||
server_key: "f706b0a535b6c2d36545c4137a0a3a26853ea8b5-1223c9ba7923152cae28e5a2e7501b2b-50600768",
|
server_key: "f706b0a535b6c2d36545c4137a0a3a26853ea8b5-1223c9ba7923152cae28e5a2e7501b2b-50600768",
|
||||||
openwheater_apiKey:'2acf34be0b8f033b89ba4de1e674d42a',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/* I18n configuration, `languages` and `defaultLanguage` are required currently. */
|
|
||||||
i18n: {
|
i18n: {
|
||||||
/* Countrys flags: https://www.flaticon.com/packs/countrys-flags */
|
|
||||||
languages: [
|
languages: [
|
||||||
{
|
{
|
||||||
key: 'en',
|
key: 'en',
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
"@material-ui/icons": "^4.9.1",
|
"@material-ui/icons": "^4.9.1",
|
||||||
"@steveeeie/react-page-transition": "^1.1.2",
|
"@steveeeie/react-page-transition": "^1.1.2",
|
||||||
"ant-design-pro": "^2.3.2",
|
"ant-design-pro": "^2.3.2",
|
||||||
"antd": "^4.0.1",
|
"antd": "^4.0.2",
|
||||||
"autoprefixer": "9.7.4",
|
"autoprefixer": "9.7.4",
|
||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
"babel-core": "7.0.0-bridge.0",
|
"babel-core": "7.0.0-bridge.0",
|
||||||
|
@ -152,7 +152,7 @@ export const crouter = {
|
|||||||
export function notifyError(err){
|
export function notifyError(err){
|
||||||
antd.notification.error({
|
antd.notification.error({
|
||||||
message: 'Wopss',
|
message: 'Wopss',
|
||||||
description: (<div><span>An wild error appear! : </span><br/><br/><div style={{ position: 'absolute', width: '100%',backgroundColor: 'rgba(243, 19, 19, 0.329)', bottom: '0', color: 'black', padding: '3px' }} >{err.toString()}</div></div>),
|
description: (<div><span>An wild error appear! : </span><br/><br/><div style={{ position: 'relative', width: '100%',backgroundColor: 'rgba(243, 19, 19, 0.329)', bottom: '0', color: 'black', padding: '3px' }} >{err.toString()}</div></div>),
|
||||||
placement: 'bottomLeft'
|
placement: 'bottomLeft'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -106,22 +106,35 @@ class Sider extends PureComponent {
|
|||||||
<Icons.CompassOutlined />
|
<Icons.CompassOutlined />
|
||||||
<Trans><span>Explore</span></Trans>
|
<Trans><span>Explore</span></Trans>
|
||||||
</antd.Menu.Item>
|
</antd.Menu.Item>
|
||||||
|
|
||||||
|
<antd.Menu.Item key="general_settings">
|
||||||
|
<Icons.ReadOutlined />
|
||||||
|
<Trans><span>Journal</span></Trans>
|
||||||
|
</antd.Menu.Item>
|
||||||
|
|
||||||
|
<antd.Menu.Item key="general_settings">
|
||||||
|
<Icons.ReconciliationOutlined />
|
||||||
|
<Trans><span>Marketplace</span></Trans>
|
||||||
|
</antd.Menu.Item>
|
||||||
|
|
||||||
|
|
||||||
|
</antd.Menu>
|
||||||
|
|
||||||
|
<div className={styles.something_thats_pulling_me_down}>
|
||||||
|
<antd.Menu selectable={false} className={collapsed ? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
|
||||||
|
|
||||||
<antd.Menu.Item key="general_settings">
|
<antd.Menu.Item key="general_settings">
|
||||||
<Icons.SettingOutlined/>
|
<Icons.SettingOutlined/>
|
||||||
<Trans><span>Settings</span></Trans>
|
<Trans><span>Settings</span></Trans>
|
||||||
</antd.Menu.Item>
|
</antd.Menu.Item>
|
||||||
{ycore.booleanFix(userData.admin)?
|
{ycore.booleanFix(userData.admin)?
|
||||||
<antd.Menu.Item key="admin_area">
|
<antd.Menu.Item key="admin_area">
|
||||||
<Icons.ToolOutlined />
|
<Icons.ThunderboltOutlined />
|
||||||
<Trans><span>Admin Area</span></Trans>
|
<Trans><span>{userData.username}</span></Trans>
|
||||||
</antd.Menu.Item>
|
</antd.Menu.Item>
|
||||||
:
|
:
|
||||||
undefined
|
undefined
|
||||||
}
|
}
|
||||||
</antd.Menu>
|
|
||||||
|
|
||||||
<div className={styles.something_thats_pulling_me_down}>
|
|
||||||
<antd.Menu selectable={false} className={collapsed ? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
|
|
||||||
<antd.Menu.Item style={{ fontSize: '15px' }} key="LightMode" disabled={false} >
|
<antd.Menu.Item style={{ fontSize: '15px' }} key="LightMode" disabled={false} >
|
||||||
{collapsed? <Icons.BulbOutlined /> :
|
{collapsed? <Icons.BulbOutlined /> :
|
||||||
<div className={styles.themeSwitcher}>
|
<div className={styles.themeSwitcher}>
|
||||||
|
@ -15,6 +15,7 @@ class MainFeed extends React.Component {
|
|||||||
super(props)
|
super(props)
|
||||||
window.MainFeedComponent = this;
|
window.MainFeedComponent = this;
|
||||||
this.state = {
|
this.state = {
|
||||||
|
invalid: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
data: [],
|
data: [],
|
||||||
fkey: 0
|
fkey: 0
|
||||||
@ -38,7 +39,17 @@ class MainFeed extends React.Component {
|
|||||||
}
|
}
|
||||||
this.toogleLoader()
|
this.toogleLoader()
|
||||||
ycore.GetPosts(uid, get, '0', (err, result) => {
|
ycore.GetPosts(uid, get, '0', (err, result) => {
|
||||||
|
if (err) {
|
||||||
|
ycore.notifyError('Error when get data from this input')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log(result)
|
||||||
|
if (JSON.parse(result).api_status == '400') {
|
||||||
|
this.setState({ invalid: true })
|
||||||
|
return
|
||||||
|
}
|
||||||
const parsed = JSON.parse(result)['data']
|
const parsed = JSON.parse(result)['data']
|
||||||
|
|
||||||
const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false
|
const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false
|
||||||
this.setState({ isEnd: isEnd, data: parsed, loading: false })
|
this.setState({ isEnd: isEnd, data: parsed, loading: false })
|
||||||
})
|
})
|
||||||
@ -105,10 +116,17 @@ class MainFeed extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
const { loading } = this.state;
|
const { loading, invalid } = this.state;
|
||||||
return (
|
return (
|
||||||
<div id='mainfeed'>
|
<div id='mainfeed'>
|
||||||
{ loading?
|
{invalid?
|
||||||
|
<antd.Card style={{ borderRadius: "10px", maxWidth: '26.5vw', margin: 'auto', textAlign: 'center' }} >
|
||||||
|
|
||||||
|
<h2><Icons.ExclamationCircleOutlined /> Invalid Data </h2>
|
||||||
|
<span>If this error has occurred several times, try restarting the app</span>
|
||||||
|
</antd.Card>
|
||||||
|
:
|
||||||
|
loading?
|
||||||
<antd.Card style={{ maxWidth: '26.5vw', margin: 'auto' }} >
|
<antd.Card style={{ maxWidth: '26.5vw', margin: 'auto' }} >
|
||||||
<antd.Skeleton avatar paragraph={{ rows: 4 }} active />
|
<antd.Skeleton avatar paragraph={{ rows: 4 }} active />
|
||||||
</antd.Card>
|
</antd.Card>
|
||||||
|
@ -23,6 +23,7 @@ class UserProfile extends React.Component {
|
|||||||
constructor(props){
|
constructor(props){
|
||||||
super(props),
|
super(props),
|
||||||
this.state = {
|
this.state = {
|
||||||
|
invalid: false,
|
||||||
UUID: '',
|
UUID: '',
|
||||||
RenderValue: {},
|
RenderValue: {},
|
||||||
loading: true,
|
loading: true,
|
||||||
@ -57,7 +58,9 @@ class UserProfile extends React.Component {
|
|||||||
if (!rp['0']) {
|
if (!rp['0']) {
|
||||||
ycore.yconsole.log('Bad response / User not found')
|
ycore.yconsole.log('Bad response / User not found')
|
||||||
const val = { id: null, username: 'User not found!'}
|
const val = { id: null, username: 'User not found!'}
|
||||||
this.setState({ RenderValue: val, loading: false })
|
this.setState({ invalid: true, RenderValue: val, loading: false })
|
||||||
|
ycore.crouter.native(`main`)
|
||||||
|
antd.message.warning(`Its seams like @${string} not exist`);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const c1 = rp['0'].username.toLowerCase()
|
const c1 = rp['0'].username.toLowerCase()
|
||||||
@ -111,12 +114,12 @@ class UserProfile extends React.Component {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
render(){
|
render(){
|
||||||
const { loading, UUID } = this.state
|
const { loading, UUID, invalid } = this.state
|
||||||
return(
|
return(
|
||||||
<div>
|
<div>
|
||||||
{loading? <antd.Skeleton active /> :
|
{loading? <antd.Skeleton active /> :
|
||||||
(<div>
|
(<div>
|
||||||
{this.UserHeader(this.state.RenderValue)}
|
{invalid? null: this.UserHeader(this.state.RenderValue)}
|
||||||
<MainFeed get='user' uid={UUID} />
|
<MainFeed get='user' uid={UUID} />
|
||||||
</div>)
|
</div>)
|
||||||
}
|
}
|
||||||
|
@ -66,6 +66,20 @@ export default class __m extends React.Component {
|
|||||||
</antd.Card>
|
</antd.Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.titleHeader}>
|
||||||
|
<h1><Icons.DeploymentUnitOutlined /> Test yCore™</h1>
|
||||||
|
</div>
|
||||||
|
<div className={styles.sectionWrapper}>
|
||||||
|
<antd.Button onClick={() => ycore.notifyError('Yep, its not empty, jeje funny')} > Send empty notifyError() </antd.Button>
|
||||||
|
<antd.Button onClick={() => ycore.notifyError(`ycore.GetPosts(uid, get, '0', (err, result) => {
|
||||||
|
const parsed = JSON.parse(result)['data']
|
||||||
|
const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false
|
||||||
|
this.setState({ isEnd: isEnd, data: parsed, loading: false })
|
||||||
|
})
|
||||||
|
|
||||||
|
`)} > Send mock notifyError() </antd.Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className={styles.titleHeader}>
|
<div className={styles.titleHeader}>
|
||||||
<h1><Icons.DatabaseOutlined /> SDCP™</h1>
|
<h1><Icons.DatabaseOutlined /> SDCP™</h1>
|
||||||
</div>
|
</div>
|
||||||
|
97
src/pages/g/$group/index.js
Normal file
97
src/pages/g/$group/index.js
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
import React, { PureComponent } from 'react'
|
||||||
|
import { pathMatchRegexp } from 'utils'
|
||||||
|
import { SearchCard } from 'components'
|
||||||
|
import styles from './styles.less'
|
||||||
|
import * as ycore from 'ycore'
|
||||||
|
import * as antd from 'antd'
|
||||||
|
import * as Icons from '@ant-design/icons';
|
||||||
|
import Icon from '@ant-design/icons'
|
||||||
|
|
||||||
|
const userData = ycore.SDCP()
|
||||||
|
|
||||||
|
class GroupIndexer extends PureComponent {
|
||||||
|
constructor(props){
|
||||||
|
super(props),
|
||||||
|
this.state = {
|
||||||
|
SearchResult: '',
|
||||||
|
loading: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
toogleLoading(){
|
||||||
|
this.setState({loading: !this.state.loading})
|
||||||
|
}
|
||||||
|
componentDidMount(){
|
||||||
|
try {
|
||||||
|
const {location} = this.props
|
||||||
|
const matchSearch = pathMatchRegexp("/s/:id", location.pathname);
|
||||||
|
const parsed = matchSearch.shift()
|
||||||
|
const raw = parsed.toString()
|
||||||
|
const string = raw.replace('/s/', "")
|
||||||
|
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
ycore.notifyError(err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
EntryComponent = (t, source) => {
|
||||||
|
try {
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<antd.Typography.Title level={2} ><Icons.TeamOutlined /> {t} </antd.Typography.Title>
|
||||||
|
<div className={styles.searchEntry}>
|
||||||
|
<antd.List
|
||||||
|
grid={{
|
||||||
|
gutter: 16,
|
||||||
|
xs: 1,
|
||||||
|
sm: 2,
|
||||||
|
md: 4,
|
||||||
|
lg: 4,
|
||||||
|
xl: 6,
|
||||||
|
xxl: 3,
|
||||||
|
}}
|
||||||
|
dataSource={source}
|
||||||
|
renderItem={item => (
|
||||||
|
<SearchCard type={t} source={item} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
return <center><h2>Render Error</h2></center>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {location} = this.props
|
||||||
|
const matchSearch = pathMatchRegexp("/g/:id", location.pathname);
|
||||||
|
|
||||||
|
const parsed = matchSearch.shift()
|
||||||
|
const raw = parsed.toString()
|
||||||
|
const string = raw.replace('/g/', "")
|
||||||
|
|
||||||
|
|
||||||
|
if (matchSearch) {
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<h1 className={styles.searchHeader}><Icons.SearchOutlined /> Results of {string} </h1>
|
||||||
|
<antd.Card>
|
||||||
|
<div className={styles.results}>
|
||||||
|
{this.state.loading? null : this.renderResult(this.state.SearchResult)}
|
||||||
|
</div>
|
||||||
|
</antd.Card>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return(<div><center> Render Error </center></div>)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GroupIndexer
|
18
src/pages/g/$group/styles.less
Normal file
18
src/pages/g/$group/styles.less
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
|
.searchHeader {
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 7px;
|
||||||
|
}
|
||||||
|
.results {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.searchEntry {
|
||||||
|
:global{
|
||||||
|
.antd-card{
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,14 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import * as ycore from 'ycore'
|
|
||||||
|
|
||||||
export default class Hamza extends React.PureComponent {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>
|
|
||||||
Españita Hola
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
@ -4,6 +4,7 @@ import { AppSettings } from '../../../../globals/settings.js'
|
|||||||
import { DevOptions, ControlBar } from 'ycore'
|
import { DevOptions, ControlBar } from 'ycore'
|
||||||
import * as ycore from "ycore"
|
import * as ycore from "ycore"
|
||||||
import * as Icons from '@ant-design/icons'
|
import * as Icons from '@ant-design/icons'
|
||||||
|
import Icon from '@ant-design/icons'
|
||||||
import { CustomIcons } from 'components'
|
import { CustomIcons } from 'components'
|
||||||
|
|
||||||
class Base extends Component {
|
class Base extends Component {
|
||||||
@ -107,6 +108,8 @@ class Base extends Component {
|
|||||||
<Fragment>
|
<Fragment>
|
||||||
<div>
|
<div>
|
||||||
<h1><Icons.PullRequestOutlined /> Behaviors</h1>
|
<h1><Icons.PullRequestOutlined /> Behaviors</h1>
|
||||||
|
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
|
||||||
|
|
||||||
{this.SettingRender(this.state.SettingRepo)}
|
{this.SettingRender(this.state.SettingRepo)}
|
||||||
</div>
|
</div>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
@ -1,48 +1,16 @@
|
|||||||
import * as antd from 'antd';
|
import React from 'react';
|
||||||
import React, { Component, Fragment } from 'react';
|
import * as ycore from "ycore"
|
||||||
|
import * as Icons from '@ant-design/icons'
|
||||||
|
import styles from './notification.less'
|
||||||
|
|
||||||
class NotificationView extends Component {
|
|
||||||
getData = () => {
|
|
||||||
const Action = (
|
|
||||||
<antd.Switch
|
|
||||||
checkedChildren={'open'}
|
|
||||||
unCheckedChildren={'close'}
|
|
||||||
defaultChecked
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
title: 'Title 1',
|
|
||||||
description: 'Description 1',
|
|
||||||
actions: [Action],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Title 2',
|
|
||||||
description: 'Description 2',
|
|
||||||
actions: [Action],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Title 3',
|
|
||||||
description: 'Description 3',
|
|
||||||
actions: [Action],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
class NotificationView extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const data = this.getData();
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<div className={styles.main}>
|
||||||
<antd.List
|
<h2><Icons.NotificationOutlined /> Notifications</h2>
|
||||||
itemLayout="horizontal"
|
</div>
|
||||||
dataSource={data}
|
)
|
||||||
renderItem={item => (
|
|
||||||
<antd.List.Item actions={item.actions}>
|
|
||||||
<antd.List.Item.Meta title={item.title} description={item.description} />
|
|
||||||
</antd.List.Item>
|
|
||||||
)} />
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
16
src/pages/settings/components/notification.less
Normal file
16
src/pages/settings/components/notification.less
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
|
.main{
|
||||||
|
|
||||||
|
:global{
|
||||||
|
h2{
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.anticon{
|
||||||
|
color: #2d2d2d;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
@ -1,84 +1,15 @@
|
|||||||
import React, { Component, Fragment } from 'react';
|
import React from 'react';
|
||||||
import { List } from 'antd';
|
import * as ycore from "ycore"
|
||||||
|
import * as Icons from '@ant-design/icons'
|
||||||
const passwordStrength = {
|
import styles from './security.less'
|
||||||
strong: (
|
|
||||||
<span className="strong">
|
|
||||||
Strong
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
medium: (
|
|
||||||
<span className="medium">
|
|
||||||
Medium
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
weak: (
|
|
||||||
<span className="weak">
|
|
||||||
Weak
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
class SecurityView extends Component {
|
|
||||||
getData = () => [
|
|
||||||
{
|
|
||||||
title: <h1>Password</h1>,
|
|
||||||
description: (
|
|
||||||
<Fragment>
|
|
||||||
<p>Something</p>
|
|
||||||
{passwordStrength.strong}
|
|
||||||
</Fragment>
|
|
||||||
),
|
|
||||||
actions: [
|
|
||||||
<a key="Modify">
|
|
||||||
Modify
|
|
||||||
</a>,
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: <h1>Security question</h1>,
|
|
||||||
description: 'Security cuesting seting',
|
|
||||||
actions: [
|
|
||||||
<a key="Set">
|
|
||||||
Set
|
|
||||||
</a>,
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Mail',
|
|
||||||
description: 'YourEmail@jeje.com',
|
|
||||||
actions: [
|
|
||||||
<a key="Modify">
|
|
||||||
Modify
|
|
||||||
</a>,
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'mfa',
|
|
||||||
description: 'mfa settings',
|
|
||||||
actions: [
|
|
||||||
<a key="bind">
|
|
||||||
Bind
|
|
||||||
</a>,
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
|
class SecurityView extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const data = this.getData();
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<div className={styles.main}>
|
||||||
<List
|
<h2><Icons.LockOutlined /> Your Security & Privacy</h2>
|
||||||
itemLayout="horizontal"
|
</div>
|
||||||
dataSource={data}
|
)
|
||||||
renderItem={item => (
|
|
||||||
<List.Item actions={item.actions}>
|
|
||||||
<List.Item.Meta title={item.title} description={item.description} />
|
|
||||||
</List.Item>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
16
src/pages/settings/components/security.less
Normal file
16
src/pages/settings/components/security.less
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
|
.main{
|
||||||
|
|
||||||
|
:global{
|
||||||
|
h2{
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.anticon{
|
||||||
|
color: #2d2d2d;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
@ -14,20 +14,18 @@ import Earnings from './components/earnings.js'
|
|||||||
|
|
||||||
const { Item } = Menu;
|
const { Item } = Menu;
|
||||||
const menuMap = {
|
const menuMap = {
|
||||||
base: 'General',
|
base: (<span><Icons.ControlOutlined /> General</span>),
|
||||||
security: 'Security & Privacity',
|
security: (<span><Icons.SafetyCertificateOutlined /> Security & Privacity</span>),
|
||||||
notification: 'Notification',
|
notification: (<span><Icons.MailOutlined /> Notification</span>),
|
||||||
earnings: 'Earnings',
|
earnings: (<span><Icons.DollarCircleOutlined /> Earnings</span>),
|
||||||
about: 'About'
|
about: (<span><Icons.ContainerOutlined /> About</span>)
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const { Title } = Typography;
|
|
||||||
class GeneralSettings extends React.Component {
|
class GeneralSettings extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
mode: 'inline',
|
|
||||||
selectKey: 'base',
|
selectKey: 'base',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -62,33 +60,22 @@ class GeneralSettings extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { mode, selectKey } = this.state;
|
const { selectKey } = this.state;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.main}>
|
||||||
<Title className={styles.titleHead}> {this.getMenu()} </Title>
|
<div className={styles.leftMenu}>
|
||||||
<GridContent>
|
<h2><Icons.SettingOutlined /> Settings </h2>
|
||||||
<div
|
<Menu
|
||||||
className={styles.main}
|
mode="inline"
|
||||||
ref={ref => {
|
selectedKeys={[selectKey]}
|
||||||
if (ref) {
|
onClick={({ key }) => this.selectKey(key)}
|
||||||
this.main = ref;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div className={styles.leftMenu}>
|
{this.getMenu()}
|
||||||
<Menu
|
</Menu>
|
||||||
mode={mode}
|
</div>
|
||||||
selectedKeys={[selectKey]}
|
<div className={styles.right}>
|
||||||
onClick={({ key }) => this.selectKey(key)}
|
{this.renderChildren()}
|
||||||
>
|
</div>
|
||||||
{this.getMenu()}
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
<div className={styles.right}>
|
|
||||||
{this.renderChildren()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</GridContent>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,21 +1,21 @@
|
|||||||
@import '~themes/vars.less';
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
.titleHead{
|
|
||||||
font-family: "Nunito", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
margin: 20px 0 0 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: @DarkMode-color_container;
|
color: @DarkMode-color_container;
|
||||||
background-color: transparent;
|
background-color: #ffffff;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
.leftMenu {
|
.leftMenu {
|
||||||
width: 224px;
|
width: 224px;
|
||||||
border-right: @border-width-base @border-style-base @border-color-split;
|
|
||||||
:global {
|
:global {
|
||||||
|
|
||||||
.ant-menu-inline {
|
.ant-menu-inline {
|
||||||
color: @DarkMode-color_container;
|
color: @DarkMode-color_container;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@ -41,43 +41,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
:global {
|
:global {
|
||||||
.ant-list-split .ant-list-item:last-child {
|
|
||||||
border-bottom: 1px solid @border-color-split;
|
|
||||||
}
|
|
||||||
.ant-list-item {
|
.ant-list-item {
|
||||||
padding-top: 14px;
|
padding-top: 7px;
|
||||||
padding-bottom: 14px;
|
padding-bottom: 7px;
|
||||||
|
}
|
||||||
|
.ant-list-split .ant-list-item {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.ant-list-item-meta-title {
|
||||||
|
color: rgba(0, 0, 0, 0.733);
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:global {
|
|
||||||
.ant-list-item-meta {
|
|
||||||
// 账号绑定图标
|
|
||||||
.taobao {
|
|
||||||
display: block;
|
|
||||||
color: #ff4000;
|
|
||||||
font-size: 48px;
|
|
||||||
line-height: 48px;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
}
|
|
||||||
.dingding {
|
|
||||||
margin: 2px;
|
|
||||||
padding: 6px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 32px;
|
|
||||||
background-color: #2eabff;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
}
|
|
||||||
.alipay {
|
|
||||||
color: #2eabff;
|
|
||||||
font-size: 48px;
|
|
||||||
line-height: 48px;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: @screen-md) {
|
@media screen and (max-width: @screen-md) {
|
||||||
.main {
|
.main {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user