This commit is contained in:
srgooglo 2020-03-12 19:51:45 +01:00
parent 0c1d9e1f8b
commit 59f570394b
17 changed files with 263 additions and 227 deletions

View File

@ -8,14 +8,7 @@ module.exports = {
DarkFullLogoPath: '/dark_full_logo.svg',
DarkLogoPath: '/dark_logo.svg',
apiPrefix: '/api/v1',
fixedHeader: true, // sticky primary layout header
resource_bundle: 'light_ng',
App_Config: {
InitRes: { width: 1000, height: 900},
InitOpenConsole: true,
},
/* Layout configuration, specify which layout to use for route. */
layouts: [
@ -29,13 +22,10 @@ module.exports = {
// Disused Variables, exported from yCoreWorker
// Global Server Key (Requiered for RS-YIBTP), Not autogenerated, must be included on. (Recommended not modify this constants)
server_key: "f706b0a535b6c2d36545c4137a0a3a26853ea8b5-1223c9ba7923152cae28e5a2e7501b2b-50600768",
openwheater_apiKey:'2acf34be0b8f033b89ba4de1e674d42a',
},
/* I18n configuration, `languages` and `defaultLanguage` are required currently. */
i18n: {
/* Countrys flags: https://www.flaticon.com/packs/countrys-flags */
languages: [
{
key: 'en',

View File

@ -15,7 +15,7 @@
"@material-ui/icons": "^4.9.1",
"@steveeeie/react-page-transition": "^1.1.2",
"ant-design-pro": "^2.3.2",
"antd": "^4.0.1",
"antd": "^4.0.2",
"autoprefixer": "9.7.4",
"axios": "^0.19.2",
"babel-core": "7.0.0-bridge.0",

View File

@ -152,7 +152,7 @@ export const crouter = {
export function notifyError(err){
antd.notification.error({
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'
})
}

View File

@ -106,22 +106,35 @@ class Sider extends PureComponent {
<Icons.CompassOutlined />
<Trans><span>Explore</span></Trans>
</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">
<Icons.SettingOutlined/>
<Trans><span>Settings</span></Trans>
</antd.Menu.Item>
{ycore.booleanFix(userData.admin)?
<antd.Menu.Item key="admin_area">
<Icons.ToolOutlined />
<Trans><span>Admin Area</span></Trans>
<Icons.ThunderboltOutlined />
<Trans><span>{userData.username}</span></Trans>
</antd.Menu.Item>
:
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} >
{collapsed? <Icons.BulbOutlined /> :
<div className={styles.themeSwitcher}>

View File

@ -15,6 +15,7 @@ class MainFeed extends React.Component {
super(props)
window.MainFeedComponent = this;
this.state = {
invalid: false,
loading: false,
data: [],
fkey: 0
@ -38,7 +39,17 @@ class MainFeed extends React.Component {
}
this.toogleLoader()
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 isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false
this.setState({ isEnd: isEnd, data: parsed, loading: false })
})
@ -105,10 +116,17 @@ class MainFeed extends React.Component {
}
render(){
const { loading } = this.state;
const { loading, invalid } = this.state;
return (
<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.Skeleton avatar paragraph={{ rows: 4 }} active />
</antd.Card>

View File

@ -23,6 +23,7 @@ class UserProfile extends React.Component {
constructor(props){
super(props),
this.state = {
invalid: false,
UUID: '',
RenderValue: {},
loading: true,
@ -57,7 +58,9 @@ class UserProfile extends React.Component {
if (!rp['0']) {
ycore.yconsole.log('Bad response / 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
}
const c1 = rp['0'].username.toLowerCase()
@ -111,12 +114,12 @@ class UserProfile extends React.Component {
);
};
render(){
const { loading, UUID } = this.state
const { loading, UUID, invalid } = this.state
return(
<div>
{loading? <antd.Skeleton active /> :
(<div>
{this.UserHeader(this.state.RenderValue)}
{invalid? null: this.UserHeader(this.state.RenderValue)}
<MainFeed get='user' uid={UUID} />
</div>)
}

View File

@ -66,6 +66,20 @@ export default class __m extends React.Component {
</antd.Card>
</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}>
<h1><Icons.DatabaseOutlined /> SDCP</h1>
</div>

View 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

View 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;
}
}
}

View File

@ -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>
)
}
}

View File

@ -4,6 +4,7 @@ import { AppSettings } from '../../../../globals/settings.js'
import { DevOptions, ControlBar } from 'ycore'
import * as ycore from "ycore"
import * as Icons from '@ant-design/icons'
import Icon from '@ant-design/icons'
import { CustomIcons } from 'components'
class Base extends Component {
@ -107,6 +108,8 @@ class Base extends Component {
<Fragment>
<div>
<h1><Icons.PullRequestOutlined /> Behaviors</h1>
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
{this.SettingRender(this.state.SettingRepo)}
</div>
</Fragment>

View File

@ -1,48 +1,16 @@
import * as antd from 'antd';
import React, { Component, Fragment } from 'react';
import React 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() {
const data = this.getData();
return (
<Fragment>
<antd.List
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<antd.List.Item actions={item.actions}>
<antd.List.Item.Meta title={item.title} description={item.description} />
</antd.List.Item>
)} />
</Fragment>
);
<div className={styles.main}>
<h2><Icons.NotificationOutlined /> Notifications</h2>
</div>
)
}
}

View File

@ -0,0 +1,16 @@
@import '~themes/vars.less';
.main{
:global{
h2{
font-weight: 500;
}
.anticon{
color: #2d2d2d;
}
}
}

View File

@ -1,84 +1,15 @@
import React, { Component, Fragment } from 'react';
import { List } from 'antd';
const passwordStrength = {
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>,
],
},
];
import React from 'react';
import * as ycore from "ycore"
import * as Icons from '@ant-design/icons'
import styles from './security.less'
class SecurityView extends React.Component {
render() {
const data = this.getData();
return (
<Fragment>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<List.Item actions={item.actions}>
<List.Item.Meta title={item.title} description={item.description} />
</List.Item>
)}
/>
</Fragment>
);
<div className={styles.main}>
<h2><Icons.LockOutlined /> Your Security & Privacy</h2>
</div>
)
}
}

View File

@ -0,0 +1,16 @@
@import '~themes/vars.less';
.main{
:global{
h2{
font-weight: 500;
}
.anticon{
color: #2d2d2d;
}
}
}

View File

@ -14,20 +14,18 @@ import Earnings from './components/earnings.js'
const { Item } = Menu;
const menuMap = {
base: 'General',
security: 'Security & Privacity',
notification: 'Notification',
earnings: 'Earnings',
about: 'About'
base: (<span><Icons.ControlOutlined /> General</span>),
security: (<span><Icons.SafetyCertificateOutlined /> Security & Privacity</span>),
notification: (<span><Icons.MailOutlined /> Notification</span>),
earnings: (<span><Icons.DollarCircleOutlined /> Earnings</span>),
about: (<span><Icons.ContainerOutlined /> About</span>)
};
const { Title } = Typography;
class GeneralSettings extends React.Component {
constructor(props) {
super(props);
this.state = {
mode: 'inline',
selectKey: 'base',
};
}
@ -62,33 +60,22 @@ class GeneralSettings extends React.Component {
};
render() {
const { mode, selectKey } = this.state;
const { selectKey } = this.state;
return (
<div>
<Title className={styles.titleHead}> {this.getMenu()} </Title>
<GridContent>
<div
className={styles.main}
ref={ref => {
if (ref) {
this.main = ref;
}
}}
<div className={styles.main}>
<div className={styles.leftMenu}>
<h2><Icons.SettingOutlined /> Settings </h2>
<Menu
mode="inline"
selectedKeys={[selectKey]}
onClick={({ key }) => this.selectKey(key)}
>
<div className={styles.leftMenu}>
<Menu
mode={mode}
selectedKeys={[selectKey]}
onClick={({ key }) => this.selectKey(key)}
>
{this.getMenu()}
</Menu>
</div>
<div className={styles.right}>
{this.renderChildren()}
</div>
</div>
</GridContent>
{this.getMenu()}
</Menu>
</div>
<div className={styles.right}>
{this.renderChildren()}
</div>
</div>
);
}

View File

@ -1,21 +1,21 @@
@import '~themes/vars.less';
.titleHead{
font-family: "Nunito", sans-serif;
}
.main {
font-family: "Nunito", sans-serif;
margin: 20px 0 0 0;
display: flex;
width: 100%;
height: 100%;
overflow: auto;
color: @DarkMode-color_container;
background-color: transparent;
background-color: #ffffff;
padding: 15px;
border-radius: 10px;
.leftMenu {
width: 224px;
border-right: @border-width-base @border-style-base @border-color-split;
:global {
.ant-menu-inline {
color: @DarkMode-color_container;
background-color: transparent;
@ -41,43 +41,19 @@
}
}
:global {
.ant-list-split .ant-list-item:last-child {
border-bottom: 1px solid @border-color-split;
}
.ant-list-item {
padding-top: 14px;
padding-bottom: 14px;
padding-top: 7px;
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) {
.main {