- this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} />
+
- );
+ )
}
}
diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less
index 5e5cfd74..b8bab351 100644
--- a/src/components/Layout/Header.less
+++ b/src/components/Layout/Header.less
@@ -1,11 +1,17 @@
@import '~themes/vars.less';
+@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
+@LLightMode-backgroud: #fff;
+
+@LDarkMode-color: #fff;
+@LLightMode-color: #2F2E30;
.createMenu {
width: 30px;
margin: 0 auto 0 auto;
height: 190px;
+
}
.brand {
display: flex;
@@ -18,13 +24,19 @@
padding: 0;
}
}
+.containersWrappers{
+ display: flex;
+ &.collapsed {
+ width: ~'calc(100% - 80px)';
+ }
+}
.header {
-webkit-box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
-moz-box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
display: flex;
width: 100%;
- background-color: @DarkMode-backgroud;
+ background-color: #F3F3F3;
height: 45px;
z-index: 9;
align-items: center;
@@ -33,6 +45,16 @@
width: 100%;
z-index: 10;
transition: width 0.2s;
+ right: 0;
+ &.collapsed {
+ width: ~'calc(100% - 180px)';
+ background-color: rgb(80, 80, 80);
+ background-color: @LDarkMode-backgroud;
+ color: @DarkMode-color;
+ border-color: transparent;
+ box-shadow: none;
+ transition: box-shadow 1s linear;
+ }
:global {
.ant-menu-submenu-title {
@@ -82,10 +104,8 @@
margin: 0 50px;
}
.leftContainer {
- margin: 0 23px;
+ margin: 0 0 0 50px;
display: flex;
-
-
}
.button {
diff --git a/src/components/Layout/L_Sider.js b/src/components/Layout/L_Sider.js
new file mode 100644
index 00000000..01ac8192
--- /dev/null
+++ b/src/components/Layout/L_Sider.js
@@ -0,0 +1,190 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import * as antd from 'antd'
+import { withI18n, Trans } from '@lingui/react'
+import ScrollBar from '../ScrollBar'
+import { config } from 'utils'
+import styles from './L_Sider.less'
+import * as ycore from 'ycore';
+import router from 'umi/router';
+import {CustomIcons} from 'components'
+
+
+const userData = ycore.SDCP()
+
+@withI18n()
+class L_Sider extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isHover: false
+ };
+ this.hover = this.hover.bind(this);
+ }
+
+ hover(e) {
+ this.setState({
+ isHover: !this.state.isHover
+ });
+ }
+ Balancer() {
+ const { collapsed, } = this.props;
+ const { isHover } = this.state;
+ if (collapsed == false) {
+ return false
+ }
+ if (isHover == false ){
+ if (collapsed == true) {
+ return true
+ }
+ return true
+ }else{
+ return false
+ }
+ }
+
+ StrictMode = () =>{
+ const { theme } = this.props;
+ if (ycore.DevOptions.StrictLightMode == false) {
+ return "dark"
+ }
+ if (ycore.DevOptions.StrictLightMode == true && theme == "light") {
+ return "light"
+ }
+ if (ycore.DevOptions.StrictLightMode == true && theme == "dark") {
+ return "dark"
+ }
+ }
+ UserIsPro(){
+ if (userData.is_pro == 1){
+ return true
+ }
+ return false
+ }
+ UserIsAdmin(){
+ if (userData.admin == 1){
+ return true
+ }
+ return false
+ }
+ handleClickMenu = e => {
+ e.key === 'SignOut' && ycore.LogoutCall()
+ e.key === 'settingpage' && router.push('/settings')
+ e.key === 'accountpage' && router.push('/account')
+ }
+ isDarkMode(){
+ const { theme } = this.props
+ if (theme == 'dark'){
+ return true
+ }
+ return false
+ }
+
+ render() {
+ const {
+ i18n,
+ menus,
+ theme,
+ isMobile,
+ collapsed,
+ onThemeChange,
+ onCollapseChange,
+ } = this.props
+
+ return (
+
- {item.icon &&
}
>
{this.generateMenus(item.children)}
- );
+ )
}
return (
- {item.icon &&
- );
- });
+ )
+ })
}
render() {
diff --git a/src/components/Layout/R_Sider.js b/src/components/Layout/R_Sider.js
deleted file mode 100644
index eb044596..00000000
--- a/src/components/Layout/R_Sider.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { PureComponent, StrictMode } from 'react'
-import PropTypes from 'prop-types'
-import { Icons as LegacyIcon } from '@ant-design/compatible';
-import * as icon from '@ant-design/icons';
-import { Switch, Layout, Tag, Divider, Drawer, Avatar, Menu } from 'antd';
-import { withI18n, Trans } from '@lingui/react'
-import classNames from 'classnames'
-import router from 'umi/router'
-import { SDCP, LogoutCall, DevOptions} from 'ycore'
-
-import styles from './R_Sider.less'
-import ycstyle from 'ycstyle'
-
-let userData = SDCP()
-
-@withI18n()
-class R_Sider extends PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- isHover: false
- };
- this.hover = this.hover.bind(this);
- }
- hover(e) {
- this.setState({
- isHover: !this.state.isHover
- });
- }
- handleClickMenu = e => {
- e.key === 'SignOut' && LogoutCall()
- e.key === 'settingpage' && router.push('/settings')
- e.key === 'accountpage' && router.push('/account')
- }
- Balancer() {
- const { collapsed, } = this.props;
- const { isHover } = this.state;
- if (collapsed == false) {
- return false
- }
- if (isHover == false ){
- if (collapsed == true) {
- return true
- }
- return true
- }else{
- return false
- }
-
- }
- StrictMode = () =>{
- const { theme } = this.props;
- if (DevOptions.StrictLightMode == false) {
- return "dark"
- }
- if (DevOptions.StrictLightMode == true && theme == "light") {
- return "light"
- }
- if (DevOptions.StrictLightMode == true && theme == "dark") {
- return "dark"
- }
- }
- UserIsPro(){
- if (userData.is_pro == 1){
- return true
- }
- return false
- }
- UserIsAdmin(){
- if (userData.admin == 1){
- return true
- }
- return false
- }
- render() {
-
- const { theme, onThemeChange} = this.props;
-
- return (
-
- {item.icon &&
- );
+ )
}
}
- );
+ )
}
componentDidUpdate(){
@@ -89,7 +89,7 @@ class CustomMenu extends React.Component {
: {
openKeys: this.state.openKeys,
}
- return (
+ return (
{collapsed? null :
+
+
+
+ this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} />
+
+ 
+ onCollapseChange(!collapsed)} icon={collapsed? (this.Balancer()? "right" : "double-right") : (this.Balancer()? "left" : "double-left") } />
+
+
+ )
+ }
+}
+
+L_Sider.propTypes = {
+ menus: PropTypes.array,
+ theme: PropTypes.string,
+ isMobile: PropTypes.bool,
+ collapsed: PropTypes.bool,
+ onThemeChange: PropTypes.func,
+ onCollapseChange: PropTypes.func,
+}
+
+export default L_Sider
diff --git a/src/components/Layout/L_Sider.less b/src/components/Layout/L_Sider.less
new file mode 100644
index 00000000..44dcbd2a
--- /dev/null
+++ b/src/components/Layout/L_Sider.less
@@ -0,0 +1,287 @@
+@import '~themes/vars.less';
+
+@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
+@LLightMode-backgroud: #fff;
+
+@LDarkMode-color: #fff;
+@LLightMode-color: #2F2E30;
+
+.CollapserWrapperLight{
+ height: 100%;
+ position: absolute;
+ float: left;
+ top: 0;
+ left: 0;
+ z-index: 200;
+ vertical-align: middle;
+ :global{
+
+ .ant-btn {
+ border: none;
+ border-radius: unset;
+ vertical-align: middle;
+ height: 100%;
+ color: white;
+ background-color: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ transition: background-color 1s linear;
+ }
+ .ant-btn:hover{
+ background: rgb(255,255,255);
+ background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.57) 95%);
+
+ }
+ }
+}
+
+.CollapserWrapperDark{
+ height: 100%;
+ position: absolute;
+ float: left;
+ top: 0;
+ left: 0;
+ z-index: 200;
+ vertical-align: middle;
+ :global{
+
+ .ant-btn {
+ border: none;
+ border-radius: unset;
+ vertical-align: middle;
+ height: 100%;
+ color: white;
+ background-color: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ transition: background-color 1s linear;
+ }
+ .ant-btn:hover{
+ background: rgb(255,255,255);
+ background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.57) 95%);
+
+ }
+ }
+}
+
+.brand {
+ display: flex;
+ vertical-align: middle;
+ padding: 5px;
+ width: 100%;
+ max-height: 50px;
+
+}
+
+.userInfo{
+ font-family: "Poppins", sans-serif;
+ align-items: center;
+ text-align: center;
+ h2{
+ color: @LDarkMode-color
+ }
+}
+.avatarFull{
+ width: 120px;
+}
+.avatar{
+ margin: 0 0 15px 0;
+}
+
+.something_thats_pulling_me_down{
+ :global{
+ text-align: center;
+ bottom: 0;
+ position: absolute;
+ width: 100%;
+
+ }
+}
+
+.siderwrapper {
+ border-color: transparent;
+
+ font-size: 13px;
+ font-family: "Poppins", sans-serif;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ position: absolute;
+ :global {
+ .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+ :hover {
+ background-color: rgb(80, 80, 80);
+ color: #fff;
+ }
+ border-right: 1px solid transparent;
+ }
+ .ant-layout-sider-dark {
+ background-color: @LDarkMode-backgroud;
+ color: @DarkMode-color;
+ }
+ .ant-layout-sider-light {
+ background-color: @LightMode-backgroud;
+ color: @LightMode-color;
+ }
+ }
+}
+
+.sider {
+ height: 100%;
+ z-index: 50;
+ :global {
+ .ant-sider{
+ background-color: #fff;
+ }
+ .ant-menu-sub {
+ font-size: 14px;
+ -webkit-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
+ -moz-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
+ box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
+ }
+ .ant-menu-dark {
+ background-color: @LDarkMode-backgroud;
+ color: @LDarkMode-color;
+ }
+ .ant-menu-light {
+ background-color: @LLightMode-backgroud;
+ color: @LLightMode-color;
+ }
+ }
+ .siderhead{
+ font-family: 'Source Sans Pro', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ ::first-letter{
+ margin-left: 7px;
+ }
+ height: 60px;
+ font-size: 17px;
+ }
+ .sidercontainer{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .menuItems{
+ background-color: transparent;
+ color: @LDarkMode-color;
+ margin-bottom: 8px;
+ width: 100%;
+ animation: fadein 0.5s;
+ :global {
+ .ant-menu-item-selected{
+ background-color: rgba(82, 82, 82, 0.562);
+ }
+ }
+
+ }
+ .menuItemsCollapsed{
+ background-color: transparent;
+ color: @LDarkMode-color;
+
+ width: 100%;
+
+ animation: fadein 0.5s;
+ :global {
+ .ant-menu-item {
+ padding: 0 !important;
+ margin: 2px 0 2px 0;
+ width: 100%;
+ text-align: center;
+ font-size: 20px;
+ }
+ .ant-menu-item-selected{
+ background-color: rgba(82, 82, 82, 0.562);
+ }
+ }
+
+ }
+
+ .menuContainer {
+ height: 100%;
+ margin: 18px 0 8px 0;
+ .scrollbar-container {
+ position: initial;
+ height: 100%;
+ }
+ overflow-x: hidden;
+ flex: 1;
+
+ &::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ }
+
+ &:hover {
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(59, 59, 59, 0.2);
+ }
+ }
+
+ :global {
+ .ant-layout-sider-children {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .ant-layout-sider-collapsed {
+ .ant-menu-item {
+ left: 0;
+ margin: 0;
+ padding: 0;
+ }
+ .ant-menu-inline-collapsed > .ant-menu-item{
+ padding: 0;
+ left:0;
+ }
+ }
+ .scrollbar-container {
+ position: initial;
+ height: 100%;
+ }
+ .ant-menu-inline .ant-menu-item {
+ font-size: 14px;
+ font-family: 'Source Sans Pro', sans-serif;
+ }
+
+ .ant-menu-dark .ant-menu-item a {
+ color: rgb(197, 197, 197);
+ }
+
+ }
+
+ }
+}
+.scrollbar-container {
+ position: initial;
+ height: 100%;
+}
+
+@keyframes fadeLeftIn {
+ 0% {
+ transform: translateX(5px);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+.themeSwitcher {
+ :global {
+ .ant-switch-checked {
+ background-color: #2F2E30;
+ }
+ }
+ svg {
+ height: 100%;
+ vertical-align: middle;
+ }
+ span {
+ line-height: 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js
index 25d95526..975217da 100644
--- a/src/components/Layout/Menu.js
+++ b/src/components/Layout/Menu.js
@@ -1,7 +1,6 @@
import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
-import * as icon from '@ant-design/icons';
-import { Menu } from 'antd';
+import { Menu, Icon } from 'antd'
import Navlink from 'umi/navlink'
import withRouter from 'umi/withRouter'
import {SDCP} from 'ycore'
@@ -13,7 +12,6 @@ import {
} from 'utils'
import store from 'store'
import styles from './Menu.less'
-import { isTypeNode } from 'typescript';
const { SubMenu } = Menu
@@ -53,24 +51,24 @@ class SiderMenu extends PureComponent {
className={styles.SubMenuItems}
title={
+
+
+ {this.UserIsPro()?
+
+ Boosted Posts }
+
+ :
+
+ Upgrade to Pro }
+ }
+
+ Edit Profile }
+
+
+ General Settings }
+
+ {this.UserIsAdmin()?
+
+ Admin Area }
+
+ :
+ undefined
+ }
+
+
+
+
+
+
+
+ {collapsed?
+
+ Logout }
+
+
+ }
+
+
+
}
+
+
+ {collapsed? null : @{userData.username}
-
-
-
-
- );
- }
-}
-
-R_Sider.propTypes = {
- menus: PropTypes.array,
- theme: PropTypes.string,
- isMobile: PropTypes.bool,
- collapsed: PropTypes.bool,
- onThemeChange: PropTypes.func,
- onCollapseChange: PropTypes.func,
-}
-
-export default R_Sider
diff --git a/src/components/Layout/R_Sider.less b/src/components/Layout/R_Sider.less
deleted file mode 100644
index 328bbc62..00000000
--- a/src/components/Layout/R_Sider.less
+++ /dev/null
@@ -1,149 +0,0 @@
-@import '~themes/vars.less';
-
-@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
-@LLightMode-backgroud: #fff;
-
-@LDarkMode-color: #fff;
-@LLightMode-color: #2F2E30;
-
-.userInfo{
- font-family: "Poppins", sans-serif;
- align-items: center;
- text-align: center;
- h2{
- color: @LDarkMode-color
- }
-}
-.avatarFull{
- width: 120px;
-}
-.avatar{
- margin: 0 0 15px 0;
-}
-
-.something_thats_pulling_me_down{
- :global{
- text-align: center;
- bottom: 0;
- position: absolute;
- width: 100%;
-
- }
-}
-
-.siderwrapper {
- font-size: 13px;
- font-family: "Poppins", sans-serif;
- height: 100%;
- right: 0;
- position: absolute;
- :global {
- .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
- :hover {
- color: #ffca1d;
- }
- border-right: 1px solid transparent;
- }
- .ant-layout-sider-dark {
- background-color: @LDarkMode-backgroud;
- color: @DarkMode-color;
- }
- .ant-layout-sider-light {
- background-color: @LightMode-backgroud;
- color: @LightMode-color;
- }
- }
-}
-.sider {
- height: 100%;
- z-index: 50;
- :global {
- .ant-menu-sub {
- font-size: 14px;
- -webkit-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
- -moz-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
- box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
- }
- .ant-menu-dark {
- background-color: @LDarkMode-backgroud;
- color: @LDarkMode-color;
- }
- .ant-menu-light {
- background-color: @LLightMode-backgroud;
- color: @LLightMode-color;
- }
- }
- .siderhead{
- font-family: 'Source Sans Pro', sans-serif;
- display: flex;
- align-items: center;
- justify-content: center;
- ::first-letter{
- margin-left: 7px;
- }
- height: 60px;
- font-size: 17px;
- }
- .sidercontainer{
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .menuItems{
- background-color: transparent;
- color: @LDarkMode-color;
- margin-bottom: 8px;
- width: 100%;
- animation: fadein 0.5s;
- :global {
- .ant-menu-item-selected{
- background-color: rgba(82, 82, 82, 0.562);
- }
- }
-
- }
-
- .menuContainer {
- height: ~'calc(100vh - 120px)';
- overflow-x: hidden;
- flex: 1;
-
- &::-webkit-scrollbar-thumb {
- background-color: transparent;
- }
-
- &:hover {
- &::-webkit-scrollbar-thumb {
- background-color: rgba(59, 59, 59, 0.2);
- }
- }
-
- :global {
- .ant-menu-inline .ant-menu-item {
- font-size: 14px;
- font-family: 'Source Sans Pro', sans-serif;
- }
-
- .ant-menu-dark .ant-menu-item a {
- color: rgb(197, 197, 197);
- }
-
-
-
- }
-
- }
-}
-
-@keyframes fadeLeftIn {
- 0% {
- transform: translateX(5px);
- opacity: 0;
- }
-
- 100% {
- transform: translateX(0);
- opacity: 1;
- }
-}
\ No newline at end of file
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index cd5785a5..4f80a351 100644
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -1,5 +1,5 @@
import Header from './Header'
-import R_Sider from './R_Sider'
+import L_Sider from './L_Sider'
import Control from './Control'
-export { Header, R_Sider, Control }
+export { Header, L_Sider, Control }
diff --git a/src/components/Layout/local_components/CustomMenu/index.js b/src/components/Layout/local_components/CustomMenu/index.js
index ae04a1f8..2d17f50a 100644
--- a/src/components/Layout/local_components/CustomMenu/index.js
+++ b/src/components/Layout/local_components/CustomMenu/index.js
@@ -1,7 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { Icon as LegacyIcon } from '@ant-design/compatible';
-import { Menu, Button, Divider, Tooltip, message } from 'antd';
+import { Menu, Icon, Button, Divider, Tooltip, message } from 'antd'
import Navlink from 'umi/navlink'
import withRouter from 'umi/withRouter'
import { arrayToTree, addLangPrefix} from 'utils'
@@ -39,25 +38,26 @@ class CustomMenu extends React.Component {
return data.map(item => {
if (EditMode == true) {
return (
-
-
- {this.Balancer()?
-
- }
-
-
- @{userData.username}
- Points: {userData.points} -
-
-
-
-
-
-
-
-
-
-
- );
+
+
+
+
+ )
}else {
return (
@@ -114,10 +114,10 @@ class CustomMenu extends React.Component {
{this.generateMenus(menuTree)}
- {EditMode? (pins.length < 1)? : null : (pins.length < 1)? {
- static defaultProps = {
- defaultActiveFirstOption: false,
- onPressEnter: () => {},
- onSearch: () => {},
- onChange: () => {},
- className: '',
- placeholder: '',
- dataSource: [],
- defaultOpen: false,
- onVisibleChange: () => {},
- };
-
- static getDerivedStateFromProps(props: HeaderSearchProps) {
- if ('open' in props) {
- return {
- searchMode: props.open,
- };
- }
- return null;
- }
-
- private inputRef: Input | null = null;
-
- constructor(props: HeaderSearchProps) {
- super(props);
- this.state = {
- searchMode: props.defaultOpen,
- value: props.defaultValue,
- };
- // this.debouncePressEnter = debounce(this.debouncePressEnter, 500, {
- // leading: true,
- // trailing: false,
- // });
- }
-
- // onKeyDown = (e: React.KeyboardEvent) => {
- // if (e.key === 'Enter') {
- // this.debouncePressEnter();
- // }
- // };
-
- // onChange: AutoCompleteProps['onChange'] = value => {
- // if (typeof value === 'string') {
- // const { onSearch, onChange } = this.props;
- // this.setState({ value });
- // if (onSearch) {
- // onSearch(value);
- // }
- // if (onChange) {
- // onChange(value);
- // }
- // }
- // };
-
- // enterSearchMode = () => {
- // const { onVisibleChange } = this.props;
- // onVisibleChange(true);
- // this.setState({ searchMode: true }, () => {
- // const { searchMode } = this.state;
- // if (searchMode && this.inputRef) {
- // this.inputRef.focus();
- // }
- // });
- // };
-
- // leaveSearchMode = () => {
- // this.setState({
- // searchMode: false,
- // });
- // };
-
- // debouncePressEnter = () => {
- // const { onPressEnter } = this.props;
- // const { value } = this.state;
- // onPressEnter(value || '');
- // };
-
- render() {
- const { className, defaultValue, placeholder, open, ...restProps } = this.props;
- const { searchMode, value } = this.state;
- delete restProps.defaultOpen; // for rc-select not affected
- const inputClass = classNames(styles.input, {
- [styles.show]: searchMode,
- });
-
- return (
- {
- if (propertyName === 'width' && !searchMode) {
- const { onVisibleChange } = this.props;
- onVisibleChange(searchMode);
- }
- }}
- >
-
- {
- // this.inputRef = node;
- // }}
- defaultValue={defaultValue}
- aria-label={placeholder}
- placeholder={placeholder}
- // onKeyDown={this.onKeyDown}
- // onBlur={this.leaveSearchMode}
- />
-
-
- );
- }
-}
diff --git a/src/components/MainSidebar/index.js b/src/components/MainSidebar/index.js
index 9b08a8d5..a0e06b0d 100644
--- a/src/components/MainSidebar/index.js
+++ b/src/components/MainSidebar/index.js
@@ -12,11 +12,6 @@ class MainSidebar extends React.Component {
collapsed: false,
};
- toggleCollapsed = () => {
- this.setState({
- collapsed: !this.state.collapsed,
- });
- };
render(){
return(
diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js
new file mode 100644
index 00000000..79d1a2e8
--- /dev/null
+++ b/src/components/UserProfile/index.js
@@ -0,0 +1,70 @@
+import React from 'react'
+import styles from './styles.less'
+import * as ycore from 'ycore'
+import * as antd from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { string } from 'prop-types';
+
+const userData = ycore.SDCP();
+
+function isOwnProfile(id){
+ if(id == userData.username){
+ return true
+ }
+ return false
+}
+
+const UserHeader = ({ inputIO }) => {
+ return (
+
+
+ } />
+ );
+ };
+class UserProfile extends React.Component {
+ constructor(props){
+ super(props),
+ this.state = {
+ RenderValue: {},
+ }
+ }
+
+ componentDidMount(){
+ const { regx } = this.props
+ this.initUser(regx)
+ }
+ initUser = (e) => {
+ const parsed = e.shift()
+ const raw = parsed.toString()
+ const string = raw.replace('/@', "")
+
+ const uservalue = { id: '', userToken: userData.userToken }
+ // ycore.GetUserData()
+ let rendVal = { id: '0', username: string, avatar: '' }
+ this.setState({ RenderValue: rendVal})
+ console.log(`User => ${string} `)
+
+
+ }
+ render(){
+ const { regx } = this.props;
+ console.log( regx )
+ return(
+
+
+
+
+
+
+ {inputIO.username}
+ {userData.about} +
+ {isOwnProfile(regx)?
+ )
+ }
+}
+export default UserProfile;
diff --git a/src/components/UserProfile/styles.less b/src/components/UserProfile/styles.less
new file mode 100644
index 00000000..fd4943c6
--- /dev/null
+++ b/src/components/UserProfile/styles.less
@@ -0,0 +1,262 @@
+@import '~themes/default';
+
+.textOverflow() {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+ zoom: 1;
+ &::before,
+ &::after {
+ display: table;
+ content: ' ';
+ }
+ &::after {
+ clear: both;
+ height: 0;
+ font-size: 0;
+ visibility: hidden;
+ }
+}
+
+.activitiesList {
+ padding: 0 24px 8px 24px;
+ .username {
+ color: @text-color;
+ }
+ .event {
+ font-weight: normal;
+ }
+}
+
+.pageHeaderContent {
+ display: flex;
+ .avatar {
+ flex: 0 1 72px;
+ & > span {
+ display: block;
+ width: 92px;
+ height: 92px;
+ }
+ }
+ .content {
+ font-family: "Poppins", sans-serif;
+ position: relative;
+ top: 4px;
+ flex: 1 1 auto;
+ margin-left: 24px;
+ color: @text-color-secondary;
+ line-height: 22px;
+ .contentTitle {
+
+ color: @heading-color;
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 28px;
+ }
+ }
+}
+
+.extraContent {
+ .clearfix();
+
+ float: right;
+ white-space: nowrap;
+ .statItem {
+ position: relative;
+ display: inline-block;
+ padding: 0 32px;
+ > p:first-child {
+ margin-bottom: 4px;
+ color: @text-color-secondary;
+ font-size: @font-size-base;
+ line-height: 22px;
+ }
+ > p {
+ margin: 0;
+ color: @heading-color;
+ font-size: 30px;
+ line-height: 38px;
+ > span {
+ color: @text-color-secondary;
+ font-size: 20px;
+ }
+ }
+ &::after {
+ position: absolute;
+ top: 8px;
+ right: 0;
+ width: 1px;
+ height: 40px;
+ background-color: @border-color-split;
+ content: '';
+ }
+ &:last-child {
+ padding-right: 0;
+ &::after {
+ display: none;
+ }
+ }
+ }
+}
+
+.members {
+ a {
+ display: block;
+ height: 24px;
+ margin: 12px 0;
+ color: @text-color;
+ transition: all 0.3s;
+ .textOverflow();
+ .member {
+ margin-left: 12px;
+ font-size: @font-size-base;
+ line-height: 24px;
+ vertical-align: top;
+ }
+ &:hover {
+ color: @primary-color;
+ }
+ }
+}
+
+.projectList {
+ :global {
+ .ant-card-meta-description {
+ height: 44px;
+ overflow: hidden;
+ color: @text-color-secondary;
+ line-height: 22px;
+ }
+ }
+ .cardTitle {
+ font-size: 0;
+ a {
+ display: inline-block;
+ height: 24px;
+ margin-left: 12px;
+ color: @heading-color;
+ font-size: @font-size-base;
+ line-height: 24px;
+ vertical-align: top;
+ &:hover {
+ color: @primary-color;
+ }
+ }
+ }
+ .projectGrid {
+ width: 33.33%;
+ }
+ .projectItemContent {
+ display: flex;
+ height: 20px;
+ margin-top: 8px;
+ overflow: hidden;
+ font-size: 12px;
+ line-height: 20px;
+ .textOverflow();
+ a {
+ display: inline-block;
+ flex: 1 1 0;
+ color: @text-color-secondary;
+ .textOverflow();
+ &:hover {
+ color: @primary-color;
+ }
+ }
+ .datetime {
+ flex: 0 0 auto;
+ float: right;
+ color: @disabled-color;
+ }
+ }
+}
+
+.datetime {
+ color: @disabled-color;
+}
+
+@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
+ .activeCard {
+ margin-bottom: 24px;
+ }
+ .members {
+ margin-bottom: 0;
+ }
+ .extraContent {
+ margin-left: -44px;
+ .statItem {
+ padding: 0 16px;
+ }
+ }
+}
+
+@media screen and (max-width: @screen-lg) {
+ .activeCard {
+ margin-bottom: 24px;
+ }
+ .members {
+ margin-bottom: 0;
+ }
+ .extraContent {
+ float: none;
+ margin-right: 0;
+ .statItem {
+ padding: 0 16px;
+ text-align: left;
+ &::after {
+ display: none;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: @screen-md) {
+ .extraContent {
+ margin-left: -16px;
+ }
+ .projectList {
+ .projectGrid {
+ width: 50%;
+ }
+ }
+}
+
+@media screen and (max-width: @screen-sm) {
+ .pageHeaderContent {
+ display: block;
+ margin: 10px;
+ .content {
+ margin-left: 0;
+ }
+ }
+ .extraContent {
+ .statItem {
+ float: none;
+ }
+ }
+}
+
+@media screen and (max-width: @screen-xs) {
+ .projectList {
+ .projectGrid {
+ width: 100%;
+ }
+ }
+}
+
+
+
+.main_container {
+ width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+}
+.main_content {
+ padding: 10px 20px;
+}
\ No newline at end of file
diff --git a/src/components/YulioID/experimental/components/StatusBoxC.old.js b/src/components/YulioID/experimental/components/StatusBoxC.old.js
index b902ff53..6aaa2d25 100644
--- a/src/components/YulioID/experimental/components/StatusBoxC.old.js
+++ b/src/components/YulioID/experimental/components/StatusBoxC.old.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Icon } from 'antd';
import styles from '../yid.scss';
import PropTypes from 'prop-types';
@@ -22,13 +22,13 @@ class StatusBox extends Component {
if (Reactive == 'loading') {
return (
Your profile
: null} +
-
- );
+ )
}
if (Reactive == '200') {
return (
diff --git a/src/components/YulioID/experimental/index.js b/src/components/YulioID/experimental/index.js
index 4c60eed4..02052f8d 100644
--- a/src/components/YulioID/experimental/index.js
+++ b/src/components/YulioID/experimental/index.js
@@ -2,9 +2,7 @@ import React, { Component } from 'react'
import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore';
import PropTypes from 'prop-types';
import { connect } from 'dva';
-import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-import { Button, Input, Drawer, Collapse } from 'antd';
+import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd'
import styles from './yid.scss';
import formstyle from './formstyle.less'
@@ -106,7 +104,7 @@ class YulioID extends Component {
{ShowLoading ? (
Wait a sec...
- {StateIcon ? (
@@ -142,7 +140,7 @@ class YulioID extends Component {
@@ -185,7 +183,7 @@ class YulioID extends Component {
onClick={this.initFPassword}
style={{ top: '8px' }}
>
-
@@ -204,7 +202,7 @@ class YulioID extends Component {
- );
+ )
}
}
diff --git a/src/components/YulioID/legacy/forms.js b/src/components/YulioID/legacy/forms.js
index 138a4a52..1ae723e3 100644
--- a/src/components/YulioID/legacy/forms.js
+++ b/src/components/YulioID/legacy/forms.js
@@ -11,21 +11,7 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
-import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-import {
- Button,
- Row,
- Input,
- Drawer,
- Collapse,
- Select,
- Checkbox,
- Result,
- Layout,
- message,
- notification,
-} from 'antd';
+import { Button, Row, Form, Input, Drawer, Icon, Collapse, Select, Checkbox, Result, Layout, message, notification } from 'antd'
import { Trans, withI18n } from '@lingui/react'
import { setLocale } from 'utils'
import { UIFxPY, UIFxList, DevOptions } from 'ycore';
@@ -209,7 +195,7 @@ render() {
{StateMessage}
@@ -120,7 +118,7 @@ class YulioID extends Component {
@@ -194,7 +192,7 @@ class YulioID extends Component {
onClick={this.initRegister}
style={{ top: '8px' }}
>
-
-
+
{getFieldDecorator('Username', { rules: [{ required: true }] })(
{ this.handleUsername(text) }} />
)}
@@ -217,7 +203,7 @@ render() {
-
+
{getFieldDecorator('Password', { rules: [{ required: true }] })(
{ this.handlePassword(text) }} />
)}
@@ -226,11 +212,11 @@ render() {
Or
- - + +
-
@@ -259,21 +245,21 @@ render() {
{getFieldDecorator('rgUsername', { rules: [{ required: true }] })(
- } placeholder="Username" onChange={(text) => { this.handleRGUsername(text) }} />
+ } placeholder="Username" onChange={(text) => { this.handleRGUsername(text) }} />
)}
{getFieldDecorator('rgEmail', { rules: [{ required: true }] })(
- } placeholder="Email" onChange={(text) => { this.handleRGEmail(text) }} />
+ } placeholder="Email" onChange={(text) => { this.handleRGEmail(text) }} />
)}
{getFieldDecorator('rgPassword', { rules: [{ required: true }] })(
- } placeholder="Password" onChange={(text) => { this.handleRGPassword(text) }} />
+ } placeholder="Password" onChange={(text) => { this.handleRGPassword(text) }} />
)}
@@ -282,9 +268,9 @@ render() {
Wait a sec...
* Clicking the register button you accept our terms and conditions
Register
-
@@ -302,14 +288,14 @@ render() {
-