RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

0.1.12

Browse Source
This commit is contained in:
srgooglo 2020-02-12 16:50:51 +01:00
parent 5f27d3999a
commit bc8124f2f2
39 changed files with 1182 additions and 818 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.umirc.js
View File

@ -63,8 +63,8 @@ export default {
theme: './config/theme.config.js', theme: './config/theme.config.js',
// Webpack Configuration // Webpack Configuration
alias: { alias: {
ycore: resolve(__dirname, './src/ycore_worker.js'), ycore: resolve(__dirname, './src/@ycore/ycore_worker.js'),
ycstyle: resolve(__dirname, './src/ycore_style.scss'), ycstyle: resolve(__dirname, './src/@ycore/ycore_style.scss'),
api: resolve(__dirname, './src/services/'), api: resolve(__dirname, './src/services/'),
components: resolve(__dirname, './src/components'), components: resolve(__dirname, './src/components'),
config: resolve(__dirname, './config/ycore.config.js'), config: resolve(__dirname, './config/ycore.config.js'),

1
config/ycore.config.js
View File

@ -26,6 +26,7 @@ module.exports = {
openwheater_apiKey:'2acf34be0b8f033b89ba4de1e674d42a', openwheater_apiKey:'2acf34be0b8f033b89ba4de1e674d42a',
}, },
Endpoints: { Endpoints: {
search_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/search?access_token=",
get_sessions: "https://api.ragestudio.net/RS-YIBTP/yid/session_id?access_token=", get_sessions: "https://api.ragestudio.net/RS-YIBTP/yid/session_id?access_token=",
auth_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/auth", auth_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/auth",
new_post: "https://api.ragestudio.net/RS-YIBTP/yid/new_post?access_token=", new_post: "https://api.ragestudio.net/RS-YIBTP/yid/new_post?access_token=",

128
mock/route.js
View File

@ -15,134 +15,6 @@ const database = [
route: '/main', route: '/main',
}, },
// ACCOUNT SECTION
{
id: '2',
breadcrumbParentId: '1',
name: 'Account',
icon: 'user',
},
{
id: '21',
breadcrumbParentId: '2',
menuParentId: '2',
name: 'YulioID™',
icon: 'user',
route: '/account',
},
{
id: '22',
breadcrumbParentId: '2',
menuParentId: '2',
name: 'YulioPay™',
icon: 'wallet',
route: '/wallet',
},
{
id: '23',
breadcrumbParentId: '2',
menuParentId: '2',
name: 'Vault',
icon: 'save',
route: '/account',
},
// RESOURCES SECTION
{
id: '3',
breadcrumbParentId: '1',
name: 'Resources',
icon: 'compass',
},
{
id: '31',
breadcrumbParentId: '3',
menuParentId: '3',
name: 'Marketplace',
icon: 'shopping-cart',
route: '/resources/marketplace',
},
{
id: '32',
breadcrumbParentId: '3',
menuParentId: '3',
name: 'Apps',
icon: 'desktop',
route: '/resources/apps',
},
{
id: '33',
breadcrumbParentId: '3',
menuParentId: '3',
name: 'Download Manager',
icon: 'build',
route: '/resources/dl',
},
{
id: '34',
breadcrumbParentId: '3',
menuParentId: '3',
name: 'Other Services',
icon: 'compass',
route: '/resources/otherservices',
},
// CloudStudio
{
id: '4',
breadcrumbParentId: '1',
name: 'Cloud Studio',
icon: 'cloud',
},
{
id: '42',
breadcrumbParentId: '4',
menuParentId: '4',
name: 'Workspaces',
icon: 'deployment-unit',
route: '/changelogs',
},
{
id: '43',
breadcrumbParentId: '4',
menuParentId: '4',
name: 'Cloud Computing',
icon: 'cloud-server',
route: '/help',
},
{
id: '44',
breadcrumbParentId: '4',
menuParentId: '4',
name: 'GIT',
icon: 'branches',
route: '/about',
},
// Project Manager
{
id: '5',
breadcrumbParentId: '1',
name: 'Project Manager',
icon: 'team',
},
{
id: '51',
breadcrumbParentId: '5',
menuParentId: '5',
name: 'Project Manager',
icon: 'reconciliation',
route: '/help',
},
{
id: '52',
breadcrumbParentId: '5',
menuParentId: '5',
name: 'Teams',
icon: 'team',
route: '/changelogs',
},
] ]
module.exports = { module.exports = {

8
package.json
View File

@ -1,17 +1,15 @@
{ {
"name": "comty-development", "name": "comty-development",
"version": "0.1.09", "version": "0.1.10",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"author": "", "author": "RageStudio",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@ant-design/compatible": "0.0.1-rc.1",
"@ant-design/icons": "^2.1.1",
"@ant-design/pro-layout": "^4.9.11", "@ant-design/pro-layout": "^4.9.11",
"@lingui/react": "^2.9.0", "@lingui/react": "^2.9.0",
"ant-design-pro": "^2.3.2", "ant-design-pro": "^2.3.2",
"antd": "^4.0.0-rc.0", "antd": "^3.26.3",
"autoprefixer": "7.1.6", "autoprefixer": "7.1.6",
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",

0
src/ycore_style.scss → src/@ycore/ycore_style.scss
View File

31
src/ycore_worker.js → src/@ycore/ycore_worker.js
View File

@ -1,12 +1,11 @@
import Cookies from "ts-cookies"; import Cookies from "ts-cookies";
import axios from "axios"; import axios from "axios";
import {SetControls, CloseControls} from "./components/Layout/Control" import {SetControls, CloseControls} from ".././components/Layout/Control"
import {secretOrKey} from "../config/keys.js" import {secretOrKey} from "../../config/keys.js"
import * as antd from "antd" import * as antd from "antd"
import { func } from "prop-types";
var react = require("react"); var react = require("react");
var package_json = require("../package.json"); var package_json = require("../../package.json");
var jquery = require("jquery"); var jquery = require("jquery");
var uifx = require("uifx"); var uifx = require("uifx");
var config = require("config"); var config = require("config");
@ -39,7 +38,7 @@ export const UIFxList = {
notifyWarning: (ycore_worker.FXapiProvider + 'NotifyWarning.wav'), notifyWarning: (ycore_worker.FXapiProvider + 'NotifyWarning.wav'),
notifySuccess: (ycore_worker.FXapiProvider + 'notifySuccess.wav') notifySuccess: (ycore_worker.FXapiProvider + 'notifySuccess.wav')
}; };
export const infoServer = (ycore_worker.ServerType + ' Server | v' + ycore_worker.ServerVersion);
export function notifyError(err){ export function notifyError(err){
antd.notification.error({ antd.notification.error({
@ -600,28 +599,6 @@ export function UIFxPY(value, customVLM) {
beep.setVolume(VLM || customVLM).play(); beep.setVolume(VLM || customVLM).play();
} }
export function WeatherAPI() {
let city = 'pamplona';
let country = 'spain';
var Api_Key = yConfig.openwheater_apiKey;
var _this = this;
var urlOBJ = ("http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + country + "&appid=2acf34be0b8f033b89ba4de1e674d42a");
var returnData;
var AjaxRequest = {
"url": urlOBJ,
"method": "POST",
"timeout": 0,
"processData": true,
"contentType": false
};
jquery.ajax(AjaxRequest)
.done(function (response) {
returnData = response;
});
return (returnData);
}
export function RefreshONCE(){ export function RefreshONCE(){
window.location.reload(); window.location.reload();
} }

5
src/components/CustomIcons/index.js
View File

@ -1,6 +1,7 @@
const VerifiedBadge = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="#55acee" width="15" height="15" viewBox="0 0 24 24"> <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12m-13 5l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>) const VerifiedBadge = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="#55acee" width="15" height="15" viewBox="0 0 24 24"> <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12m-13 5l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>)
const CommonThings = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff5991" d="M15,2C16.94,2 18.59,2.7 19.95,4.05C21.3,5.41 22,7.06 22,9C22,10.56 21.5,11.96 20.58,13.2C19.64,14.43 18.44,15.27 16.97,15.7L17,15.38V15C17,12.81 16.23,10.93 14.65,9.35C13.07,7.77 11.19,7 9,7H8.63L8.3,7.03C8.73,5.56 9.57,4.36 10.8,3.42C12.04,2.5 13.44,2 15,2M9,8A7,7 0 0,1 16,15A7,7 0 0,1 9,22A7,7 0 0,1 2,15A7,7 0 0,1 9,8M9,10A5,5 0 0,0 4,15A5,5 0 0,0 9,20A5,5 0 0,0 14,15A5,5 0 0,0 9,10Z"></path></svg>) const CommonThings = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff5991" d="M15,2C16.94,2 18.59,2.7 19.95,4.05C21.3,5.41 22,7.06 22,9C22,10.56 21.5,11.96 20.58,13.2C19.64,14.43 18.44,15.27 16.97,15.7L17,15.38V15C17,12.81 16.23,10.93 14.65,9.35C13.07,7.77 11.19,7 9,7H8.63L8.3,7.03C8.73,5.56 9.57,4.36 10.8,3.42C12.04,2.5 13.44,2 15,2M9,8A7,7 0 0,1 16,15A7,7 0 0,1 9,22A7,7 0 0,1 2,15A7,7 0 0,1 9,8M9,10A5,5 0 0,0 4,15A5,5 0 0,0 9,20A5,5 0 0,0 14,15A5,5 0 0,0 9,10Z"></path></svg>)
const SunSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd"><path fill="#fff" fill-rule="nonzero" d="M21 10.5l-3 3V18h-4.5l-3 3-3-3H3v-4.5l-3-3 3-3V3h4.5l3-3 3 3H18v4.5z"></path><circle stroke="#000" stroke-width="1.5" cx="10.5" cy="10.5" r="4"></circle></g></svg>)
const MoonSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd"><circle fill="#fff" cx="10.5" cy="10.5" r="10.5"></circle><path d="M13.396 11c0-3.019-1.832-5.584-4.394-6.566A6.427 6.427 0 0111.304 4C15.002 4 18 7.135 18 11c0 3.866-2.998 7-6.698 7A6.42 6.42 0 019 17.566c2.564-.98 4.396-3.545 4.396-6.566z" fill="#2F2E30" fill-rule="nonzero"></path></g></svg>)
const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG}
const CustomIcons = {VerifiedBadge, CommonThings}
export default CustomIcons export default CustomIcons

9
src/components/DropOption/DropOption.js
View File

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as icon from '@ant-design/icons'; import { Dropdown, Button, Icon, Menu } from 'antd'
import { Dropdown, Button, Menu } from 'antd';
const DropOption = ({ const DropOption = ({
onMenuClick, onMenuClick,
@ -18,11 +17,11 @@ const DropOption = ({
} {...dropdownProps}> } {...dropdownProps}>
<Button style={{ border: 'none', ...buttonStyle }}> <Button style={{ border: 'none', ...buttonStyle }}>
<icon.BarsOutline style={{ marginRight: 2 }} /> <Icon style={{ marginRight: 2 }} type="bars" />
<icon.DownOutline /> <Icon type="down" />
</Button> </Button>
</Dropdown> </Dropdown>
); )
} }
DropOption.propTypes = { DropOption.propTypes = {

45
src/components/Layout/Header.js
View File

@ -1,17 +1,6 @@
import React, { PureComponent, Fragment } from 'react' import React, { PureComponent, Fragment } from 'react'
import * as icon from '@ant-design/icons'; import { Menu, Icon, Layout, Avatar, Popover, Badge, List, Switch, Tooltip, Dropdown, Button } from 'antd'
import { import HeaderSearch from './local_components/HeaderSearch/index.js'
Menu,
Layout,
Avatar,
Popover,
Badge,
List,
Switch,
Tooltip,
Dropdown,
Button,
} from 'antd';
import { Trans, withI18n } from '@lingui/react' import { Trans, withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro' import { Ellipsis } from 'ant-design-pro'
import classnames from 'classnames' import classnames from 'classnames'
@ -44,7 +33,7 @@ class Header extends PureComponent {
handleOpenMenu() { handleOpenMenu() {
let ListControls = [ let ListControls = [
(<div> (<div>
<Button type="dashed" icon={<icon.CloseOutline />} shape="circle" onClick={() => ycore.ControlBar.close()}></Button> <Button type="dashed" icon="close" shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
</div> </div>
) )
] ]
@ -90,7 +79,10 @@ class Header extends PureComponent {
} }
description={moment(item.date).fromNow()} description={moment(item.date).fromNow()}
/> />
<icon.RightOutlined /> <Icon
style={{ fontSize: '15px', color: '#ccc' }}
type="right"
/>
</List.Item> </List.Item>
)} )}
/> />
@ -111,24 +103,25 @@ class Header extends PureComponent {
offset={[-10, 10]} offset={[-10, 10]}
className={styles.iconButton} className={styles.iconButton}
> >
<icon.BellOutlined /> <Icon className={styles.iconFont} type="bell" />
</Badge> </Badge>
</Popover> </Popover>
) )
return ( return (
<Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed})} > <Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed}, {[styles.collapsed]: !collapsed} )} >
<div className={styles.leftContainer}> <div className={classnames(styles.containersWrappers, {[styles.collapsed]: !collapsed})} >
<img className={styles.brand} src={config.FullLogoPath} /> <div className={styles.leftContainer}>
<Tooltip title={'Main'}><a target="_blank" href="" rel="noopener noreferrer"><icon.HomeOutline className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip> <Tooltip title={'Main'}><Icon type="home" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
<Tooltip title={'Search'}><a target="_blank" href="" rel="noopener noreferrer"><icon.SearchOutline className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip> <Tooltip title={'Search'}><Icon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
</div> </div>
<div className={styles.rightContainer}> <div className={styles.rightContainer}>
<Tooltip title={'Create'}><icon.PlusCircleOutline onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip> <Tooltip title={'Create'}><Icon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
{notificationIcon} {notificationIcon}
</div>
</div> </div>
</Layout.Header> </Layout.Header>
); )
} }
} }

28
src/components/Layout/Header.less
View File

@ -1,11 +1,17 @@
@import '~themes/vars.less'; @import '~themes/vars.less';
@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
@LLightMode-backgroud: #fff;
@LDarkMode-color: #fff;
@LLightMode-color: #2F2E30;
.createMenu { .createMenu {
width: 30px; width: 30px;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
height: 190px; height: 190px;
} }
.brand { .brand {
display: flex; display: flex;
@ -18,13 +24,19 @@
padding: 0; padding: 0;
} }
} }
.containersWrappers{
display: flex;
&.collapsed {
width: ~'calc(100% - 80px)';
}
}
.header { .header {
-webkit-box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82); -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); -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); box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
display: flex; display: flex;
width: 100%; width: 100%;
background-color: @DarkMode-backgroud; background-color: #F3F3F3;
height: 45px; height: 45px;
z-index: 9; z-index: 9;
align-items: center; align-items: center;
@ -33,6 +45,16 @@
width: 100%; width: 100%;
z-index: 10; z-index: 10;
transition: width 0.2s; 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 { :global {
.ant-menu-submenu-title { .ant-menu-submenu-title {
@ -82,10 +104,8 @@
margin: 0 50px; margin: 0 50px;
} }
.leftContainer { .leftContainer {
margin: 0 23px; margin: 0 0 0 50px;
display: flex; display: flex;
} }
.button { .button {

190
src/components/Layout/L_Sider.js Normal file
View File

@ -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 (
<div className={styles.siderwrapper}>
<antd.Layout.Sider
breakpoint="lg"
trigger={null}
collapsible
onBreakpoint={isMobile ? null : onCollapseChange}
collapsedWidth={this.Balancer()? "35" : "90"}
theme={this.StrictMode()}
width="180"
collapsed={collapsed || false}
className={styles.sider}
onMouseEnter={this.hover}
onMouseLeave={this.hover}
>
<img className={styles.brand} src={collapsed? config.logoPath : config.FullLogoPath} />
<div className={this.StrictMode()? styles.CollapserWrapperLight : styles.CollapserWrapperDark} ><antd.Button width={'20px'} onClick={() => onCollapseChange(!collapsed)} icon={collapsed? (this.Balancer()? "right" : "double-right") : (this.Balancer()? "left" : "double-left") } /></div>
<div className={styles.menuContainer}>
<ScrollBar
options={{
// Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
suppressScrollX: true,
}}
>
<antd.Menu selectable={false} className={collapsed? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
{this.UserIsPro()?
<antd.Menu.Item key="boosted_pages">
<antd.Icon style={{ fontSize: '15px' }} type="thunderbolt" />
{collapsed ? null : <Trans> Boosted Posts </Trans> }
</antd.Menu.Item>
:
<antd.Menu.Item key="upgrade_pro">
<antd.Icon style={{ fontSize: '15px' }} type="star" />
{collapsed ? null : <Trans> Upgrade to Pro </Trans>}
</antd.Menu.Item>}
<antd.Menu.Item key="edit_profile">
<antd.Icon style={{ fontSize: '15px' }} type="profile" />
{collapsed ? null : <Trans>Edit Profile</Trans>}
</antd.Menu.Item>
<antd.Menu.Item key="general_settings">
<antd.Icon style={{ fontSize: '15px' }} type="setting" />
{collapsed ? null : <Trans>General Settings</Trans>}
</antd.Menu.Item>
{this.UserIsAdmin()?
<antd.Menu.Item key="admin_area">
<antd.Icon style={{ fontSize: '15px' }} type="tool" />
{collapsed ? null : <Trans>Admin Area</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? <antd.Icon type="bulb" /> :
<div className={styles.themeSwitcher}>
<antd.Switch
onChange={onThemeChange.bind(
this,
theme === 'light' ? 'dark' : 'light'
)}
checkedChildren={<CustomIcons.MoonSVG style={{ vertialAlign: 'middle'}} />}
unCheckedChildren={<CustomIcons.SunSVG style={{ vertialAlign: 'middle'}}/>}
defaultChecked={theme === 'dark'}
/>
</div>}
</antd.Menu.Item>
<antd.Menu.Item key="SignOut">
<antd.Icon type="logout" style={{ color: 'red' }} />
{collapsed ? null : <Trans>Logout</Trans>}
</antd.Menu.Item>
</antd.Menu>
<div className={styles.siderhead}>
<antd.Avatar size={collapsed? "small" : "large"} shape={collapsed? "circle" : "square"} src={userData.avatar} className={collapsed? styles.avatar : styles.avatarFull} />
</div>
{collapsed? null : <div className={styles.userInfo}><h2>@{userData.username}</h2></div> }
</div>
</ScrollBar>
</div>
</antd.Layout.Sider>
</div>
)
}
}
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

287
src/components/Layout/L_Sider.less Normal file
View File

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

14
src/components/Layout/Menu.js
View File

@ -1,7 +1,6 @@
import React, { PureComponent, Fragment } from 'react' import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as icon from '@ant-design/icons'; import { Menu, Icon } from 'antd'
import { Menu } from 'antd';
import Navlink from 'umi/navlink' import Navlink from 'umi/navlink'
import withRouter from 'umi/withRouter' import withRouter from 'umi/withRouter'
import {SDCP} from 'ycore' import {SDCP} from 'ycore'
@ -13,7 +12,6 @@ import {
} from 'utils' } from 'utils'
import store from 'store' import store from 'store'
import styles from './Menu.less' import styles from './Menu.less'
import { isTypeNode } from 'typescript';
const { SubMenu } = Menu const { SubMenu } = Menu
@ -53,24 +51,24 @@ class SiderMenu extends PureComponent {
className={styles.SubMenuItems} className={styles.SubMenuItems}
title={ title={
<Fragment> <Fragment>
{item.icon && <item.icon />} {item.icon && <Icon type={item.icon} />}
<span className={styles.SubItemTitle}>{item.name}</span> <span className={styles.SubItemTitle}>{item.name}</span>
</Fragment> </Fragment>
} }
> >
{this.generateMenus(item.children)} {this.generateMenus(item.children)}
</SubMenu> </SubMenu>
); )
} }
return ( return (
<Menu.Item key={item.id} > <Menu.Item key={item.id} >
<Navlink to={addLangPrefix(item.route) || '#'}> <Navlink to={addLangPrefix(item.route) || '#'}>
{item.icon && <item.icon />} {item.icon && <Icon type={item.icon} />}
<span>{item.name}</span> <span>{item.name}</span>
</Navlink> </Navlink>
</Menu.Item> </Menu.Item>
); )
}); })
} }
render() { render() {

172
src/components/Layout/R_Sider.js
View File

@ -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 (
<div className={styles.siderwrapper}>
<Layout.Sider
collapsedWidth="30"
theme={this.StrictMode()}
width="180"
collapsed={this.Balancer()}
className={styles.sider}
style={this.Balancer()? {backgroundColor: 'rgba(0, 0, 0, 0.1)'} : null}
onMouseEnter={this.hover}
onMouseLeave={this.hover}
>
<div className={styles.siderhead}>
<Avatar size={this.Balancer()? "small" : "large"} shape={this.Balancer()? "circle" : "square"} src={userData.avatar} className={this.Balancer()? styles.avatar : styles.avatarFull} />
</div>
{this.Balancer()? <div style={{ height: "100%", textAlign: "center" }} ><LegacyIcon onClick={this.hover} type="left" style={{ color: "#2F2E30", position: "absolute", bottom: "50%" }} /></div> :
<div>
<div className={styles.userInfo}>
<h2>@{userData.username}</h2>
<span>Points: {userData.points} </span>
</div>
<Divider dashed style={{margin: '10px 0 2px 0', borderWidth: '0.8px 0 0.8px 0', letterSpacing: '0.6px'}} />
<div className={styles.sidercontainer}>
<Menu className={styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
{this.UserIsPro()?
<Menu.Item key="boosted_pages">
<LegacyIcon style={{ fontSize: '15px' }} type="thunderbolt" />
<Trans> Boosted Posts </Trans>
</Menu.Item>
:
<Menu.Item key="upgrade_pro">
<LegacyIcon style={{ fontSize: '15px' }} type="star" />
<Trans> Upgrade to Pro </Trans>
</Menu.Item>}
<Menu.Item key="edit_profile">
<LegacyIcon style={{ fontSize: '15px' }} type="profile" />
<Trans>Edit Profile</Trans>
</Menu.Item>
<Menu.Item key="general_settings">
<LegacyIcon style={{ fontSize: '15px' }} type="setting" />
<Trans>General Settings</Trans>
</Menu.Item>
<Divider dashed style={{margin: '0 0 0 0', borderWidth: '1px 0 1px 0', letterSpacing: '0.6px'}} />
{this.UserIsAdmin()?
<Menu.Item key="admin_area">
<LegacyIcon style={{ fontSize: '15px' }} type="tool" />
<Trans>Admin Area</Trans>
</Menu.Item>
:
undefined
}
</Menu>
<div className={styles.something_thats_pulling_me_down}>
<Menu className={styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
<Menu.Item style={{ fontSize: '15px' }} key="LightMode" disabled={false} >
<LegacyIcon type="bg-colors" />
<Switch
onChange={onThemeChange.bind(
this,
theme === 'light' ? 'dark' : 'light'
)}
checkedChildren="Dark"
unCheckedChildren="Light"
defaultChecked={theme === 'dark'}
/>
</Menu.Item>
<Menu.Item key="SignOut">
<LegacyIcon type="logout" style={{ color: 'red' }} />
<Trans>Logout</Trans>
</Menu.Item>
</Menu>
</div>
</div>
</div>
}
</Layout.Sider>
</div>
);
}
}
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

149
src/components/Layout/R_Sider.less
View File

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

4
src/components/Layout/index.js
View File

@ -1,5 +1,5 @@
import Header from './Header' import Header from './Header'
import R_Sider from './R_Sider' import L_Sider from './L_Sider'
import Control from './Control' import Control from './Control'
export { Header, R_Sider, Control } export { Header, L_Sider, Control }

32
src/components/Layout/local_components/CustomMenu/index.js
View File

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Icon as LegacyIcon } from '@ant-design/compatible'; import { Menu, Icon, Button, Divider, Tooltip, message } from 'antd'
import { Menu, Button, Divider, Tooltip, message } from 'antd';
import Navlink from 'umi/navlink' import Navlink from 'umi/navlink'
import withRouter from 'umi/withRouter' import withRouter from 'umi/withRouter'
import { arrayToTree, addLangPrefix} from 'utils' import { arrayToTree, addLangPrefix} from 'utils'
@ -39,25 +38,26 @@ class CustomMenu extends React.Component {
return data.map(item => { return data.map(item => {
if (EditMode == true) { if (EditMode == true) {
return ( return (
<div className={styles.RemovePin} key={item.id}> <div className={styles.RemovePin} key={item.id}>
<Button className={styles.RemovePin} onClick={ () => this.DeletePin(item)} type='dashed'> <Button className={styles.RemovePin} onClick={ () => this.DeletePin(item)} type='dashed'>
<LegacyIcon type="delete" style={{ color: 'rgb(245, 48, 48)' }} /> <Icon type="delete" style={{ color: 'rgb(245, 48, 48)' }} />
<span>{item.name}</span> <span>{item.name}</span>
</Button> </Button>
</div> </div>
);
)
}else { }else {
return ( return (
<Menu.Item key={item.id} > <Menu.Item key={item.id} >
<Navlink to={addLangPrefix(item.route) || '#'}> <Navlink to={addLangPrefix(item.route) || '#'}>
{item.icon && <LegacyIcon type={item.icon} />} {item.icon && <Icon type={item.icon} />}
<span>{item.name}</span> <span>{item.name}</span>
</Navlink> </Navlink>
</Menu.Item> </Menu.Item>
); )
} }
} }
); )
} }
componentDidUpdate(){ componentDidUpdate(){
@ -89,7 +89,7 @@ class CustomMenu extends React.Component {
: { : {
openKeys: this.state.openKeys, openKeys: this.state.openKeys,
} }
return ( return (
<Menu <Menu
theme={theme} theme={theme}
mode="inline" mode="inline"
@ -105,7 +105,7 @@ class CustomMenu extends React.Component {
<div className={styles.DividerZT}><Divider dashed className={ styles.DividerZT } style={{ margin: '15px 0 5px 0' }} /></div> <div className={styles.DividerZT}><Divider dashed className={ styles.DividerZT } style={{ margin: '15px 0 5px 0' }} /></div>
{collapsed? null : <div className={styles.EditBTN}> {collapsed? null : <div className={styles.EditBTN}>
<Button className={EditMode? styles.edit_pins_active : styles.edit_pins} onClick={this.HandleEditMode} id={this.isDarkMode()? styles.edit_btn_dark : styles.edit_btn_light} type="link"> <Button className={EditMode? styles.edit_pins_active : styles.edit_pins} onClick={this.HandleEditMode} id={this.isDarkMode()? styles.edit_btn_dark : styles.edit_btn_light} type="link">
<span className={styles.circle}><LegacyIcon className={EditMode? styles.icon_active : styles.icon} type={EditMode? "save" : "pushpin"}/> </span> <span className={styles.circle}><Icon className={EditMode? styles.icon_active : styles.icon} type={EditMode? "save" : "pushpin"}/> </span>
<span className={styles.button_text}>{EditMode? 'Save' : 'Edit pins'}</span> <span className={styles.button_text}>{EditMode? 'Save' : 'Edit pins'}</span>
</Button> </Button>
@ -114,10 +114,10 @@ class CustomMenu extends React.Component {
{this.generateMenus(menuTree)} {this.generateMenus(menuTree)}
{EditMode? (pins.length < 1)? <div style={{ marginTop: '15px', textAlign: 'center', }} ><Button type='ghost' style={{ width: 'auto' }} onClick={() => this.SetDefaultPins()}>Set Default Pins</Button></div> : null : (pins.length < 1)? <LegacyIcon style={{ marginTop: '15px', width: '100%', fontSize: '20px', color: '#666' }} type="unordered-list" /> : null } {EditMode? (pins.length < 1)? <div style={{ marginTop: '15px', textAlign: 'center', }} ><Button type='ghost' style={{ width: 'auto' }} onClick={() => this.SetDefaultPins()}>Set Default Pins</Button></div> : null : (pins.length < 1)? <Icon style={{ marginTop: '15px', width: '100%', fontSize: '20px', color: '#666' }} type="unordered-list" /> : null }
</Menu> </Menu>
); )
} }
} }

41
src/components/Layout/local_components/HeaderSearch/index.js Normal file
View File

@ -0,0 +1,41 @@
import { AutoComplete, Icon, Input } from 'antd';
import { AutoCompleteProps, DataSourceItemType } from 'antd/es/auto-complete';
import React, { Component } from 'react';
import classNames from 'classnames';
import styles from './index.less'
export default class HeaderSearch extends Component {
constructor(props) {
super(props);
this.state = {
searchMode: '',
value: ''
};
}
render() {
const { className, defaultValue, placeholder, open, ...restProps } = this.props;
const { searchMode, value } = this.state;
return (
<span className={styles.headerSearch}>
<Icon type="search" key="Icon" />
<Input
defaultValue={defaultValue}
aria-label={placeholder}
placeholder={placeholder}
// onKeyDown={this.onKeyDown}
// onBlur={this.leaveSearchMode}
/>
</span>
);
}
}

148
src/components/Layout/local_components/HeaderSearch/index.tsx
View File

@ -1,148 +0,0 @@
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { AutoComplete, Input } from 'antd';
import { AutoCompleteProps, DataSourceItemType } from 'antd/es/auto-complete';
import React, { Component } from 'react';
import classNames from 'classnames';
import debounce from 'lodash/debounce';
var styles = require('./index.less')
export interface HeaderSearchProps {1
onPressEnter: (value: string) => void;
onSearch: (value: string) => void;
onChange: (value: string) => void;
onVisibleChange: (b: boolean) => void;
className: string;
placeholder: string;
defaultActiveFirstOption: boolean;
dataSource: DataSourceItemType[];
defaultOpen: boolean;
open?: boolean;
defaultValue?: string;
}
interface HeaderSearchState {
value?: string;
searchMode: boolean;
}
export default class HeaderSearch extends Component<HeaderSearchProps, HeaderSearchState> {
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 (
<span
className={classNames(className, styles.headerSearch)}
// onClick={this.enterSearchMode}
onTransitionEnd={({ propertyName }) => {
if (propertyName === 'width' && !searchMode) {
const { onVisibleChange } = this.props;
onVisibleChange(searchMode);
}
}}
>
<LegacyIcon type="search" key="Icon" />
<AutoComplete
key="AutoComplete"
{...restProps}
className={inputClass}
value={value}
// onChange={this.onChange}
>
<Input
// ref={node => {
// this.inputRef = node;
// }}
defaultValue={defaultValue}
aria-label={placeholder}
placeholder={placeholder}
// onKeyDown={this.onKeyDown}
// onBlur={this.leaveSearchMode}
/>
</AutoComplete>
</span>
);
}
}

5
src/components/MainSidebar/index.js
View File

@ -12,11 +12,6 @@ class MainSidebar extends React.Component {
collapsed: false, collapsed: false,
}; };
toggleCollapsed = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render(){ render(){
return( return(

70
src/components/UserProfile/index.js Normal file
View File

@ -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 (
<PageHeaderWrapper content={
<div className={styles.pageHeaderContent}>
<div className={styles.avatar}>
<antd.Avatar shape="square" size="large" src={userData.avatar} />
</div>
<div className={styles.content}>
<div className={styles.contentTitle}>
<h1 style={{ marginBottom: '0px' }} >{inputIO.username}</h1>
<span style={{ fontSize: '14px', fontWeight: '100', lineHeight: '0', marginBottom: '5px' }}>{userData.about}</span>
</div>
</div>
</div>
} />
);
};
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(
<div>
{isOwnProfile(regx)? <h1>Your profile</h1> : null}
<UserHeader inputIO={this.state.RenderValue} />
</div>
)
}
}
export default UserProfile;

262
src/components/UserProfile/styles.less Normal file
View File

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

6
src/components/YulioID/experimental/components/StatusBoxC.old.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Icon as LegacyIcon } from '@ant-design/compatible'; import { Icon } from 'antd';
import styles from '../yid.scss'; import styles from '../yid.scss';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -22,13 +22,13 @@ class StatusBox extends Component {
if (Reactive == 'loading') { if (Reactive == 'loading') {
return ( return (
<div className={styles.spinner__wrapper} id="loadingspn" > <div className={styles.spinner__wrapper} id="loadingspn" >
<div><LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div> <div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
<div> <div>
<br /><br /><br /> <br /><br /><br />
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div> <div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
</div> </div>
</div> </div>
); )
} }
if (Reactive == '200') { if (Reactive == '200') {
return ( return (

16
src/components/YulioID/experimental/index.js
View File

@ -2,9 +2,7 @@ import React, { Component } from 'react'
import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore'; import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'dva'; import { connect } from 'dva';
import { Form, Icon as LegacyIcon } from '@ant-design/compatible'; import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd'
import '@ant-design/compatible/assets/index.css';
import { Button, Input, Drawer, Collapse } from 'antd';
import styles from './yid.scss'; import styles from './yid.scss';
import formstyle from './formstyle.less' import formstyle from './formstyle.less'
@ -106,7 +104,7 @@ class YulioID extends Component {
{ShowLoading ? ( {ShowLoading ? (
<div style={{ height: '329px' }}> <div style={{ height: '329px' }}>
<div className={styles.spinner__wrapper} id="loadingspn"> <div className={styles.spinner__wrapper} id="loadingspn">
{StateIcon ? (<LegacyIcon type={StateIcon} className={StateException? styles.StateIcon_exception : styles.StateIcon} /> ) : (<LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin />)} {StateIcon ? (<Icon type={StateIcon} className={StateException? styles.StateIcon_exception : styles.StateIcon} /> ) : (<Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin />)}
<div><br/><br/><br/> <div><br/><br/><br/>
<div style={{ margin: 'auto' }}> <div style={{ margin: 'auto' }}>
<h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }} > {StateMessage} </h6> <h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }} > {StateMessage} </h6>
@ -120,7 +118,7 @@ class YulioID extends Component {
<div> <div>
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}> <label className={styles.labelform}>
<LegacyIcon type="user" style={{ fontSize: '15px' }} />{' '} <Icon type="user" style={{ fontSize: '15px' }} />{' '}
Username Username
</label> </label>
<FormItem> <FormItem>
@ -142,7 +140,7 @@ class YulioID extends Component {
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}> <label className={styles.labelform}>
<LegacyIcon type="unlock" style={{ fontSize: '15px' }} />{' '} <Icon type="unlock" style={{ fontSize: '15px' }} />{' '}
Password Password
</label> </label>
<FormItem> <FormItem>
@ -185,7 +183,7 @@ class YulioID extends Component {
onClick={this.initFPassword} onClick={this.initFPassword}
style={{ top: '8px' }} style={{ top: '8px' }}
> >
<LegacyIcon type="exclamation-circle" /> Forgotten password <Icon type="exclamation-circle" /> Forgotten password
</Button> </Button>
</div> </div>
<div style={{ float: 'right' }}> <div style={{ float: 'right' }}>
@ -194,7 +192,7 @@ class YulioID extends Component {
onClick={this.initRegister} onClick={this.initRegister}
style={{ top: '8px' }} style={{ top: '8px' }}
> >
<LegacyIcon type="user-add" /> Create an account <Icon type="user-add" /> Create an account
</Button> </Button>
</div> </div>
</div> </div>
@ -204,7 +202,7 @@ class YulioID extends Component {
</main> </main>
</Drawer> </Drawer>
</div> </div>
); )
} }
} }

52
src/components/YulioID/legacy/forms.js
View File

@ -11,21 +11,7 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { connect } from 'dva' import { connect } from 'dva'
import { Form, Icon as LegacyIcon } from '@ant-design/compatible'; import { Button, Row, Form, Input, Drawer, Icon, Collapse, Select, Checkbox, Result, Layout, message, notification } from 'antd'
import '@ant-design/compatible/assets/index.css';
import {
Button,
Row,
Input,
Drawer,
Collapse,
Select,
Checkbox,
Result,
Layout,
message,
notification,
} from 'antd';
import { Trans, withI18n } from '@lingui/react' import { Trans, withI18n } from '@lingui/react'
import { setLocale } from 'utils' import { setLocale } from 'utils'
import { UIFxPY, UIFxList, DevOptions } from 'ycore'; import { UIFxPY, UIFxList, DevOptions } from 'ycore';
@ -209,7 +195,7 @@ render() {
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}><LegacyIcon type="user" style={{ fontSize: '15px' }} /> Username</label> <label className={styles.labelform}><Icon type="user" style={{ fontSize: '15px' }} /> Username</label>
<FormItem hasFeedback>{getFieldDecorator('Username', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('Username', { rules: [{ required: true }] })(
<input className={styles.inputform} type="text" placeholder="Username" onChange={(text) => { this.handleUsername(text) }} /> <input className={styles.inputform} type="text" placeholder="Username" onChange={(text) => { this.handleUsername(text) }} />
)} )}
@ -217,7 +203,7 @@ render() {
</div> </div>
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}><LegacyIcon type="unlock" style={{ fontSize: '15px' }} /> Password</label> <label className={styles.labelform}><Icon type="unlock" style={{ fontSize: '15px' }} /> Password</label>
<FormItem hasFeedback>{getFieldDecorator('Password', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('Password', { rules: [{ required: true }] })(
<input className={styles.inputform} type="password" placeholder="Password (At least 8 characters)" onChange={(text) => { this.handlePassword(text) }} /> <input className={styles.inputform} type="password" placeholder="Password (At least 8 characters)" onChange={(text) => { this.handlePassword(text) }} />
)} )}
@ -226,11 +212,11 @@ render() {
<div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.getAuth}>Login</a></div> <div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.getAuth}>Login</a></div>
<h2 style={{ textAlign: 'center', margin: '8px', color: '#666' }}>Or</h2> <h2 style={{ textAlign: 'center', margin: '8px', color: '#666' }}>Or</h2>
<div style={{ float: 'left' }}><Button type="dashed" onClick={this.initFPassword} style={{ top: '8px' }}><LegacyIcon type="exclamation-circle" /> Forgotten password</Button></div> <div style={{ float: 'left' }}><Button type="dashed" onClick={this.initFPassword} style={{ top: '8px' }}><Icon type="exclamation-circle" /> Forgotten password</Button></div>
<div style={{ float: 'right' }}><Button type="dashed" onClick={this.initRegister} style={{ top: '8px' }}><LegacyIcon type="user-add" /> Create an account</Button></div> <div style={{ float: 'right' }}><Button type="dashed" onClick={this.initRegister} style={{ top: '8px' }}><Icon type="user-add" /> Create an account</Button></div>
<div className={styles.spinner__wrapper} id="loadingspn"> <div className={styles.spinner__wrapper} id="loadingspn">
<div><LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div> <div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
<div> <div>
<br /><br /><br /> <br /><br /><br />
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div> <div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
@ -259,21 +245,21 @@ render() {
<div className={styles.inputRG__wrapper}> <div className={styles.inputRG__wrapper}>
<label className={styles.labelform}> Choose your Username</label> <label className={styles.labelform}> Choose your Username</label>
<FormItem hasFeedback>{getFieldDecorator('rgUsername', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('rgUsername', { rules: [{ required: true }] })(
<Input type="text" prefix={<LegacyIcon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" onChange={(text) => { this.handleRGUsername(text) }} /> <Input type="text" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" onChange={(text) => { this.handleRGUsername(text) }} />
)} )}
</FormItem> </FormItem>
</div> </div>
<div className={styles.inputRG__wrapper}> <div className={styles.inputRG__wrapper}>
<label className={styles.labelform}> Fill with your email</label> <label className={styles.labelform}> Fill with your email</label>
<FormItem hasFeedback>{getFieldDecorator('rgEmail', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('rgEmail', { rules: [{ required: true }] })(
<Input type="text" prefix={<LegacyIcon type="link" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" onChange={(text) => { this.handleRGEmail(text) }} /> <Input type="text" prefix={<Icon type="link" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" onChange={(text) => { this.handleRGEmail(text) }} />
)} )}
</FormItem> </FormItem>
</div> </div>
<div className={styles.inputRG__wrapper}> <div className={styles.inputRG__wrapper}>
<label className={styles.labelform}> Fill with your password</label> <label className={styles.labelform}> Fill with your password</label>
<FormItem hasFeedback>{getFieldDecorator('rgPassword', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('rgPassword', { rules: [{ required: true }] })(
<Input type="password" prefix={<LegacyIcon type="key" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Password" onChange={(text) => { this.handleRGPassword(text) }} /> <Input type="password" prefix={<Icon type="key" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Password" onChange={(text) => { this.handleRGPassword(text) }} />
)} )}
</FormItem> </FormItem>
</div> </div>
@ -282,9 +268,9 @@ render() {
<div className={styles.TOSAccept}><span><span style={{ color: 'red', fontSize: '17px' }}>*</span> Clicking the register button you accept our <a href="#">terms and conditions</a></span> </div> <div className={styles.TOSAccept}><span><span style={{ color: 'red', fontSize: '17px' }}>*</span> Clicking the register button you accept our <a href="#">terms and conditions</a></span> </div>
<a className={styles.buttonlp} id="register" onClick={this.getRegister}>Register</a> <a className={styles.buttonlp} id="register" onClick={this.getRegister}>Register</a>
<div className={styles.spinner__wrapper} id="loadingRGspn"> <div className={styles.spinner__wrapper} id="loadingRGspn">
<div style={{ position: 'absolute', marginLeft: '86%', marginTop: '-65%' }}><LegacyIcon type="loading" style={{ fontSize: 24 }} spin /></div> <div style={{ position: 'absolute', marginLeft: '86%', marginTop: '-65%' }}><Icon type="loading" style={{ fontSize: 24 }} spin /></div>
<div> <div>
<div><LegacyIcon style={{ fontSize: '160px', margin: '30px', color: '#5B2A86' }} type="smile" /></div> <div><Icon style={{ fontSize: '160px', margin: '30px', color: '#5B2A86' }} type="smile" /></div>
<h6 className={styles.h6lp} style={{ textAlign: 'center' }}>Ok thanks, wait a minute...</h6> <h6 className={styles.h6lp} style={{ textAlign: 'center' }}>Ok thanks, wait a minute...</h6>
</div> </div>
</div> </div>
@ -302,14 +288,14 @@ render() {
<h3>To recover your account enter the email used to register</h3> <h3>To recover your account enter the email used to register</h3>
<form className={styles.formlogin}> <form className={styles.formlogin}>
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}><LegacyIcon type="mail" style={{ fontSize: '15px' }} /> Email</label> <label className={styles.labelform}><Icon type="mail" style={{ fontSize: '15px' }} /> Email</label>
<FormItem hasFeedback>{getFieldDecorator('Email', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('Email', { rules: [{ required: true }] })(
<input className={styles.inputform} type="text" placeholder="myaccount@example.com" onChange={(text) => { this.handleFPEmail(text) }} /> )} <input className={styles.inputform} type="text" placeholder="myaccount@example.com" onChange={(text) => { this.handleFPEmail(text) }} /> )}
</FormItem> </FormItem>
</div> </div>
{/* <div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.RecoverPassword(this.state.FGEmail)}>Recover</a></div> */} {/* <div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.RecoverPassword(this.state.FGEmail)}>Recover</a></div> */}
<div className={styles.spinner__wrapper} id="loadingspn"> <div className={styles.spinner__wrapper} id="loadingspn">
<div><LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div> <div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
<div> <div>
<br /><br /><br /> <br /><br /><br />
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div> <div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
@ -322,13 +308,13 @@ render() {
{/* NOTF */} {/* NOTF */}
<Drawer width={320} closable={false} visible={this.state.NOTFdrawer} > <Drawer width={320} closable={false} visible={this.state.NOTFdrawer} >
<div style={{ textAlign: 'center', color: 'orange' }} ><LegacyIcon type="warning" style={{ fontSize: '230px' }} /> <div style={{ textAlign: 'center', color: 'orange' }} ><Icon type="warning" style={{ fontSize: '230px' }} />
<h2 className={styles.h2lp}> {this.state.FailArray} </h2> <h2 className={styles.h2lp}> {this.state.FailArray} </h2>
<h4 className={styles.apierrort}> {MensageException} </h4> <hr /> <h4 className={styles.apierrort}> {MensageException} </h4> <hr />
<div id="details-collapse" style={{ textAlign: 'center' }}> <div id="details-collapse" style={{ textAlign: 'center' }}>
<Collapse bordered={false} defaultActiveKey={['0']} expandIcon={({ isActive }) => <LegacyIcon type="caret-right" rotate={isActive ? 90 : 0} />}> <Collapse bordered={false} defaultActiveKey={['0']} expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}>
<Panel header="Details" key="1" style={{ borderRadius: 4, marginBottom: 24, border: 0, overflow: 'hidden', }}> <Panel header="Details" key="1" style={{ borderRadius: 4, marginBottom: 24, border: 0, overflow: 'hidden', }}>
<LegacyIcon type="exception" /> <Icon type="exception" />
<h6>STATUS HANDLER => {this.state.ErrorType} </h6> <h6>STATUS HANDLER => {this.state.ErrorType} </h6>
<h6>EXCEPTION => {this.state.api_response} </h6> <h6>EXCEPTION => {this.state.api_response} </h6>
<h6>EXCEPTION MENSAGE => {MensageException}</h6> <h6>EXCEPTION MENSAGE => {MensageException}</h6>
@ -343,7 +329,7 @@ render() {
{/* SOTF */} {/* SOTF */}
<Drawer width={320} closable={false} visible={this.state.SOTFdrawer}> <Drawer width={320} closable={false} visible={this.state.SOTFdrawer}>
<div style={{ textAlign: 'center', color: '#4BB543' }} ><LegacyIcon type="check" style={{ fontSize: '200px' }} /> <div style={{ textAlign: 'center', color: '#4BB543' }} ><Icon type="check" style={{ fontSize: '200px' }} />
<h2 className={styles.h2lp} style={{ color: '#4BB543' }} > Success </h2> <h2 className={styles.h2lp} style={{ color: '#4BB543' }} > Success </h2>
<h4>Please wait while process your data ...</h4> <h4>Please wait while process your data ...</h4>
</div> </div>
@ -351,14 +337,14 @@ render() {
{/* RGSOTF */} {/* RGSOTF */}
<Drawer width={320} closable={false} visible={this.state.RGSOTFdrawer}> <Drawer width={320} closable={false} visible={this.state.RGSOTFdrawer}>
<div style={{ textAlign: 'center', color: 'green' }} > <div style={{ textAlign: 'center', color: 'green' }} >
<LegacyIcon type="check" style={{ fontSize: '200px' }} /> <Icon type="check" style={{ fontSize: '200px' }} />
<h2 className={styles.h2lp} style={{ color: 'green' }} > Registered </h2> <h2 className={styles.h2lp} style={{ color: 'green' }} > Registered </h2>
<h4 className={styles.apierrort}> Welcome to Dashboard, you will start discovering now</h4> <h4 className={styles.apierrort}> Welcome to Dashboard, you will start discovering now</h4>
<h4>Please check your new data while we are process you ...</h4> <h4>Please check your new data while we are process you ...</h4>
</div> </div>
</Drawer> </Drawer>
</div> </div>
); )
} }
} }

22
src/components/YulioID/legacy/index.js
View File

@ -11,21 +11,7 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { connect } from 'dva' import { connect } from 'dva'
import { Form, Icon as LegacyIcon } from '@ant-design/compatible'; import { Button, Row, Form, Input, Drawer, Icon, Collapse, Select, Checkbox, Result, Layout, message, notification } from 'antd'
import '@ant-design/compatible/assets/index.css';
import {
Button,
Row,
Input,
Drawer,
Collapse,
Select,
Checkbox,
Result,
Layout,
message,
notification,
} from 'antd';
import { Trans, withI18n } from '@lingui/react' import { Trans, withI18n } from '@lingui/react'
import { setLocale } from 'utils' import { setLocale } from 'utils'
import { UIFxPY, UIFxList, DevOptions } from 'ycore'; import { UIFxPY, UIFxList, DevOptions } from 'ycore';
@ -222,7 +208,7 @@ class YulioID extends PureComponent {
message: 'For continue your request, is necessary to login with YulioID™ again', message: 'For continue your request, is necessary to login with YulioID™ again',
description: description:
'LoginBridge™ report a access token expiration, and is required you for continue login again with security reasons.', 'LoginBridge™ report a access token expiration, and is required you for continue login again with security reasons.',
icon: <LegacyIcon type="login" style={{ color: '#108ee9' }} />, icon: <Icon type="login" style={{ color: '#108ee9' }} />,
}); });
cookies.remove('access_token', { path: '/' }) cookies.remove('access_token', { path: '/' })
}); });
@ -362,7 +348,7 @@ class YulioID extends PureComponent {
message: 'The instructions to recover your account have been sent to the email', message: 'The instructions to recover your account have been sent to the email',
description: description:
'If you cant find the email, try looking for it in the spam folder or try again', 'If you cant find the email, try looking for it in the spam folder or try again',
icon: <LegacyIcon type="mail" style={{ color: '#108ee9' }} />, icon: <Icon type="mail" style={{ color: '#108ee9' }} />,
}); });
console.log(response) console.log(response)
}); });
@ -409,7 +395,7 @@ class YulioID extends PureComponent {
placement: 'topLeft', placement: 'topLeft',
message: 'Currently our servers are having operating problems', message: 'Currently our servers are having operating problems',
description: 'Please be patient until the services become available again, try again later. We apologize for the inconveniences', description: 'Please be patient until the services become available again, try again later. We apologize for the inconveniences',
icon: <LegacyIcon type="login" style={{ color: '#ff0f2f' }} /> icon: <Icon type="login" style={{ color: '#ff0f2f' }} />
}), }),
$("#loadingspn").css({ opacity: 0, "z-index": -1 }), $("#loadingspn").css({ opacity: 0, "z-index": -1 }),
_this.triggerNOTF(); _this.triggerNOTF();

58
src/components/YulioID/legacy/legacy.js
View File

@ -11,21 +11,7 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { connect } from 'dva' import { connect } from 'dva'
import { Form, Icon as LegacyIcon } from '@ant-design/compatible'; import { Button, Row, Form, Input, Drawer, Icon, Collapse, Select, Checkbox, Result, Layout, message, notification } from 'antd'
import '@ant-design/compatible/assets/index.css';
import {
Button,
Row,
Input,
Drawer,
Collapse,
Select,
Checkbox,
Result,
Layout,
message,
notification,
} from 'antd';
import { Trans, withI18n } from '@lingui/react' import { Trans, withI18n } from '@lingui/react'
import { setLocale } from 'utils' import { setLocale } from 'utils'
import { UIFxPY, UIFxList, DevOptions, avilableSDCP } from 'ycore'; import { UIFxPY, UIFxList, DevOptions, avilableSDCP } from 'ycore';
@ -228,7 +214,7 @@ class YulioID extends PureComponent {
message: 'For continue your request, is necessary to login with YulioID™ again', message: 'For continue your request, is necessary to login with YulioID™ again',
description: description:
'LoginBridge™ report a access token expiration, and is required you for continue login again with security reasons.', 'LoginBridge™ report a access token expiration, and is required you for continue login again with security reasons.',
icon: <LegacyIcon type="login" style={{ color: '#108ee9' }} />, icon: <Icon type="login" style={{ color: '#108ee9' }} />,
}); });
cookies.remove('access_token', { path: '/' }) cookies.remove('access_token', { path: '/' })
}); });
@ -368,7 +354,7 @@ class YulioID extends PureComponent {
message: 'The instructions to recover your account have been sent to the email', message: 'The instructions to recover your account have been sent to the email',
description: description:
'If you cant find the email, try looking for it in the spam folder or try again', 'If you cant find the email, try looking for it in the spam folder or try again',
icon: <LegacyIcon type="mail" style={{ color: '#108ee9' }} />, icon: <Icon type="mail" style={{ color: '#108ee9' }} />,
}); });
console.log(response) console.log(response)
}); });
@ -415,7 +401,7 @@ class YulioID extends PureComponent {
placement: 'topLeft', placement: 'topLeft',
message: 'Currently our servers are having operating problems', message: 'Currently our servers are having operating problems',
description: 'Please be patient until the services become available again, try again later. We apologize for the inconveniences', description: 'Please be patient until the services become available again, try again later. We apologize for the inconveniences',
icon: <LegacyIcon type="login" style={{ color: '#ff0f2f' }} /> icon: <Icon type="login" style={{ color: '#ff0f2f' }} />
}), }),
$("#loadingspn").css({ opacity: 0, "z-index": -1 }), $("#loadingspn").css({ opacity: 0, "z-index": -1 }),
_this.triggerNOTF(); _this.triggerNOTF();
@ -589,7 +575,7 @@ class YulioID extends PureComponent {
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}><LegacyIcon type="user" style={{ fontSize: '15px' }} /> Username</label> <label className={styles.labelform}><Icon type="user" style={{ fontSize: '15px' }} /> Username</label>
<FormItem hasFeedback>{getFieldDecorator('Username', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('Username', { rules: [{ required: true }] })(
<input className={styles.inputform} type="text" onKeyDown={this.handleKeyDown} placeholder="Username" onChange={(text) => { this.handleUsername(text) }} /> <input className={styles.inputform} type="text" onKeyDown={this.handleKeyDown} placeholder="Username" onChange={(text) => { this.handleUsername(text) }} />
)} )}
@ -597,7 +583,7 @@ class YulioID extends PureComponent {
</div> </div>
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}><LegacyIcon type="unlock" style={{ fontSize: '15px' }} /> Password</label> <label className={styles.labelform}><Icon type="unlock" style={{ fontSize: '15px' }} /> Password</label>
<FormItem hasFeedback>{getFieldDecorator('Password', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('Password', { rules: [{ required: true }] })(
<input className={styles.inputform} type="password" onKeyDown={this.handleKeyDown} dplaceholder="Password (At least 8 characters)" onChange={(text) => { this.handlePassword(text) }} /> <input className={styles.inputform} type="password" onKeyDown={this.handleKeyDown} dplaceholder="Password (At least 8 characters)" onChange={(text) => { this.handlePassword(text) }} />
)} )}
@ -606,11 +592,11 @@ class YulioID extends PureComponent {
<div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.getAuth} >Login</a></div> <div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.getAuth} >Login</a></div>
<h2 style={{ textAlign: 'center', margin: '8px', color: '#666' }}>Or</h2> <h2 style={{ textAlign: 'center', margin: '8px', color: '#666' }}>Or</h2>
<div style={{ float: 'left' }}><Button type="dashed" onClick={this.initFPassword} style={{ top: '8px' }}><LegacyIcon type="exclamation-circle" /> Forgotten password</Button></div> <div style={{ float: 'left' }}><Button type="dashed" onClick={this.initFPassword} style={{ top: '8px' }}><Icon type="exclamation-circle" /> Forgotten password</Button></div>
<div style={{ float: 'right' }}><Button type="dashed" onClick={this.initRegister} style={{ top: '8px' }}><LegacyIcon type="user-add" /> Create an account</Button></div><br/><br/> <div style={{ float: 'right' }}><Button type="dashed" onClick={this.initRegister} style={{ top: '8px' }}><Icon type="user-add" /> Create an account</Button></div><br/><br/>
<div style={{ textAlign: 'center', margin: '20px' }}> <RenderInclude data={include} /></div> <div style={{ textAlign: 'center', margin: '20px' }}> <RenderInclude data={include} /></div>
<div className={styles.spinner__wrapper} id="loadingspn"> <div className={styles.spinner__wrapper} id="loadingspn">
<div><LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div> <div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
<div> <div>
<br /><br /><br /> <br /><br /><br />
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div> <div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
@ -639,21 +625,21 @@ class YulioID extends PureComponent {
<div className={styles.inputRG__wrapper}> <div className={styles.inputRG__wrapper}>
<label className={styles.labelform}> Choose your Username</label> <label className={styles.labelform}> Choose your Username</label>
<FormItem hasFeedback>{getFieldDecorator('rgUsername', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('rgUsername', { rules: [{ required: true }] })(
<Input type="text" prefix={<LegacyIcon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" onChange={(text) => { this.handleRGUsername(text) }} /> <Input type="text" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" onChange={(text) => { this.handleRGUsername(text) }} />
)} )}
</FormItem> </FormItem>
</div> </div>
<div className={styles.inputRG__wrapper}> <div className={styles.inputRG__wrapper}>
<label className={styles.labelform}> Fill with your email</label> <label className={styles.labelform}> Fill with your email</label>
<FormItem hasFeedback>{getFieldDecorator('rgEmail', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('rgEmail', { rules: [{ required: true }] })(
<Input type="text" prefix={<LegacyIcon type="link" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" onChange={(text) => { this.handleRGEmail(text) }} /> <Input type="text" prefix={<Icon type="link" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" onChange={(text) => { this.handleRGEmail(text) }} />
)} )}
</FormItem> </FormItem>
</div> </div>
<div className={styles.inputRG__wrapper}> <div className={styles.inputRG__wrapper}>
<label className={styles.labelform}> Fill with your password</label> <label className={styles.labelform}> Fill with your password</label>
<FormItem hasFeedback>{getFieldDecorator('rgPassword', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('rgPassword', { rules: [{ required: true }] })(
<Input type="password" prefix={<LegacyIcon type="key" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Password" onChange={(text) => { this.handleRGPassword(text) }} /> <Input type="password" prefix={<Icon type="key" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Password" onChange={(text) => { this.handleRGPassword(text) }} />
)} )}
</FormItem> </FormItem>
</div> </div>
@ -662,9 +648,9 @@ class YulioID extends PureComponent {
<div className={styles.TOSAccept}><span><span style={{ color: 'red', fontSize: '17px' }}>*</span> Clicking the register button you accept our <a href="#">terms and conditions</a></span> </div> <div className={styles.TOSAccept}><span><span style={{ color: 'red', fontSize: '17px' }}>*</span> Clicking the register button you accept our <a href="#">terms and conditions</a></span> </div>
<a className={styles.buttonlp} id="register" onClick={this.getRegister}>Register</a> <a className={styles.buttonlp} id="register" onClick={this.getRegister}>Register</a>
<div className={styles.spinner__wrapper} id="loadingRGspn"> <div className={styles.spinner__wrapper} id="loadingRGspn">
<div style={{ position: 'absolute', marginLeft: '86%', marginTop: '-65%' }}><LegacyIcon type="loading" style={{ fontSize: 24 }} spin /></div> <div style={{ position: 'absolute', marginLeft: '86%', marginTop: '-65%' }}><Icon type="loading" style={{ fontSize: 24 }} spin /></div>
<div> <div>
<div><LegacyIcon style={{ fontSize: '160px', margin: '30px', color: '#5B2A86' }} type="smile" /></div> <div><Icon style={{ fontSize: '160px', margin: '30px', color: '#5B2A86' }} type="smile" /></div>
<h6 className={styles.h6lp} style={{ textAlign: 'center' }}>Ok thanks, wait a minute...</h6> <h6 className={styles.h6lp} style={{ textAlign: 'center' }}>Ok thanks, wait a minute...</h6>
</div> </div>
</div> </div>
@ -682,14 +668,14 @@ class YulioID extends PureComponent {
<h3>To recover your account enter the email used to register</h3> <h3>To recover your account enter the email used to register</h3>
<form className={styles.formlogin}> <form className={styles.formlogin}>
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}><LegacyIcon type="mail" style={{ fontSize: '15px' }} /> Email</label> <label className={styles.labelform}><Icon type="mail" style={{ fontSize: '15px' }} /> Email</label>
<FormItem hasFeedback>{getFieldDecorator('Email', { rules: [{ required: true }] })( <FormItem hasFeedback>{getFieldDecorator('Email', { rules: [{ required: true }] })(
<input className={styles.inputform} type="text" placeholder="myaccount@example.com" onChange={(text) => { this.handleFPEmail(text) }} /> )} <input className={styles.inputform} type="text" placeholder="myaccount@example.com" onChange={(text) => { this.handleFPEmail(text) }} /> )}
</FormItem> </FormItem>
</div> </div>
{/* <div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.RecoverPassword(this.state.FGEmail)}>Recover</a></div> */} {/* <div style={{ margin: 'auto' }}><a className={styles.buttonlp} id="login" onClick={this.RecoverPassword(this.state.FGEmail)}>Recover</a></div> */}
<div className={styles.spinner__wrapper} id="loadingspn"> <div className={styles.spinner__wrapper} id="loadingspn">
<div><LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div> <div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
<div> <div>
<br /><br /><br /> <br /><br /><br />
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div> <div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
@ -702,13 +688,13 @@ class YulioID extends PureComponent {
{/* NOTF */} {/* NOTF */}
<Drawer width={320} closable={false} visible={this.state.NOTFdrawer} > <Drawer width={320} closable={false} visible={this.state.NOTFdrawer} >
<div style={{ textAlign: 'center', color: 'orange' }} ><LegacyIcon type="warning" style={{ fontSize: '230px' }} /> <div style={{ textAlign: 'center', color: 'orange' }} ><Icon type="warning" style={{ fontSize: '230px' }} />
<h2 className={styles.h2lp}> {this.state.FailArray} </h2> <h2 className={styles.h2lp}> {this.state.FailArray} </h2>
<h4 className={styles.apierrort}> {MensageException} </h4> <hr /> <h4 className={styles.apierrort}> {MensageException} </h4> <hr />
<div id="details-collapse" style={{ textAlign: 'center' }}> <div id="details-collapse" style={{ textAlign: 'center' }}>
<Collapse bordered={false} defaultActiveKey={['0']} expandIcon={({ isActive }) => <LegacyIcon type="caret-right" rotate={isActive ? 90 : 0} />}> <Collapse bordered={false} defaultActiveKey={['0']} expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}>
<Panel header="Details" key="1" style={{ borderRadius: 4, marginBottom: 24, border: 0, overflow: 'hidden', }}> <Panel header="Details" key="1" style={{ borderRadius: 4, marginBottom: 24, border: 0, overflow: 'hidden', }}>
<LegacyIcon type="exception" /> <Icon type="exception" />
<h6>STATUS HANDLER => {this.state.ErrorType} </h6> <h6>STATUS HANDLER => {this.state.ErrorType} </h6>
<h6>EXCEPTION => {this.state.api_response} </h6> <h6>EXCEPTION => {this.state.api_response} </h6>
<h6>EXCEPTION MENSAGE => {MensageException}</h6> <h6>EXCEPTION MENSAGE => {MensageException}</h6>
@ -723,7 +709,7 @@ class YulioID extends PureComponent {
{/* SOTF */} {/* SOTF */}
<Drawer width={320} closable={false} visible={this.state.SOTFdrawer}> <Drawer width={320} closable={false} visible={this.state.SOTFdrawer}>
<div style={{ textAlign: 'center', color: '#4BB543' }} ><LegacyIcon type="check" style={{ fontSize: '200px' }} /> <div style={{ textAlign: 'center', color: '#4BB543' }} ><Icon type="check" style={{ fontSize: '200px' }} />
<h2 className={styles.h2lp} style={{ color: '#4BB543' }} > Success </h2> <h2 className={styles.h2lp} style={{ color: '#4BB543' }} > Success </h2>
<h4>Please wait while process your data ...</h4> <h4>Please wait while process your data ...</h4>
</div> </div>
@ -731,14 +717,14 @@ class YulioID extends PureComponent {
{/* RGSOTF */} {/* RGSOTF */}
<Drawer width={320} closable={false} visible={this.state.RGSOTFdrawer}> <Drawer width={320} closable={false} visible={this.state.RGSOTFdrawer}>
<div style={{ textAlign: 'center', color: 'green' }} > <div style={{ textAlign: 'center', color: 'green' }} >
<LegacyIcon type="check" style={{ fontSize: '200px' }} /> <Icon type="check" style={{ fontSize: '200px' }} />
<h2 className={styles.h2lp} style={{ color: 'green' }} > Registered </h2> <h2 className={styles.h2lp} style={{ color: 'green' }} > Registered </h2>
<h4 className={styles.apierrort}> Welcome to Dashboard, you will start discovering now</h4> <h4 className={styles.apierrort}> Welcome to Dashboard, you will start discovering now</h4>
<h4>Please check your new data while we are process you ...</h4> <h4>Please check your new data while we are process you ...</h4>
</div> </div>
</Drawer> </Drawer>
</div> </div>
); )
} }
} }

10
src/components/YulioID/legacy/ycore_sdcp.js
View File

@ -9,9 +9,7 @@
//****************************************| //****************************************|
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import { Form, Icon as LegacyIcon } from '@ant-design/compatible'; import { Form, Icon, message, notification } from 'antd'
import '@ant-design/compatible/assets/index.css';
import { message, notification } from 'antd';
import { UIFxPY, UIFxList, DevOptions } from 'ycoreLegacy'; import { UIFxPY, UIFxList, DevOptions } from 'ycoreLegacy';
import { endpoints } from 'ycoreLegacy'; import { endpoints } from 'ycoreLegacy';
import $ from 'jquery'; import $ from 'jquery';
@ -141,7 +139,7 @@ export class SDCP extends PureComponent {
message: 'For continue your request, is necessary to login with YulioID™ again', message: 'For continue your request, is necessary to login with YulioID™ again',
description: description:
'LoginBridge™ report a access token expiration, and is required you for continue login again with security reasons.', 'LoginBridge™ report a access token expiration, and is required you for continue login again with security reasons.',
icon: <LegacyIcon type="login" style={{ color: '#108ee9' }} />, icon: <Icon type="login" style={{ color: '#108ee9' }} />,
}); });
cookies.remove('access_token', { path: '/' }) cookies.remove('access_token', { path: '/' })
}); });
@ -271,7 +269,7 @@ export class SDCP extends PureComponent {
message: 'The instructions to recover your account have been sent to the email', message: 'The instructions to recover your account have been sent to the email',
description: description:
'If you cant find the email, try looking for it in the spam folder or try again', 'If you cant find the email, try looking for it in the spam folder or try again',
icon: <LegacyIcon type="mail" style={{ color: '#108ee9' }} />, icon: <Icon type="mail" style={{ color: '#108ee9' }} />,
}); });
console.log(response) console.log(response)
}); });
@ -316,7 +314,7 @@ export class SDCP extends PureComponent {
placement: 'topLeft', placement: 'topLeft',
message: 'Currently our servers are having operating problems', message: 'Currently our servers are having operating problems',
description: 'Please be patient until the services become available again, try again later. We apologize for the inconveniences', description: 'Please be patient until the services become available again, try again later. We apologize for the inconveniences',
icon: <LegacyIcon type="login" style={{ color: '#ff0f2f' }} /> icon: <Icon type="login" style={{ color: '#ff0f2f' }} />
}), }),
$("#loadingspn").css({ opacity: 0, "z-index": -1 }), $("#loadingspn").css({ opacity: 0, "z-index": -1 }),
_this.triggerNOTF(); _this.triggerNOTF();

3
src/components/index.js
View File

@ -1,4 +1,5 @@
import CustomIcons from './CustomIcons' import CustomIcons from './CustomIcons'
import UserProfile from './UserProfile'
import MainSidebar from './MainSidebar' import MainSidebar from './MainSidebar'
import PostCard from './PostCard' import PostCard from './PostCard'
import PostCreator from './PostCreator' import PostCreator from './PostCreator'
@ -12,4 +13,4 @@ import Page from './Page'
import YulioID from './YulioID/experimental/index.js' import YulioID from './YulioID/experimental/index.js'
import CoreLoader from './CoreLoader' import CoreLoader from './CoreLoader'
export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar} export { UserProfile, MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar}

9
src/layouts/PrimaryLayout.js
View File

@ -14,7 +14,7 @@ import Error from '../pages/404'
import styles from './PrimaryLayout.less' import styles from './PrimaryLayout.less'
const { Content } = Layout const { Content } = Layout
const { Header, L_Sider, R_Sider, Control } = MyLayout const { Header, L_Sider, Control } = MyLayout
@withRouter @withRouter
@connect(({ app, loading }) => ({ app, loading })) @connect(({ app, loading }) => ({ app, loading }))
@ -118,8 +118,10 @@ class PrimaryLayout extends PureComponent {
}, },
} }
const RightSiderProps = { const LeftSiderProps = {
menus,
theme, theme,
isMobile,
collapsed, collapsed,
onCollapseChange, onCollapseChange,
onThemeChange(theme) { onThemeChange(theme) {
@ -131,6 +133,7 @@ class PrimaryLayout extends PureComponent {
} }
const ContainerProps = { const ContainerProps = {
theme, theme,
location
} }
const MobileWarning = () =>{ const MobileWarning = () =>{
if (resbypass == false) { if (resbypass == false) {
@ -151,6 +154,7 @@ class PrimaryLayout extends PureComponent {
<MobileWarning /> <MobileWarning />
<div className={styles.BarControlWrapper}><Control /></div> <div className={styles.BarControlWrapper}><Control /></div>
<Layout className={this.isDarkMode()? styles.container_dark : styles.container_light}> <Layout className={this.isDarkMode()? styles.container_dark : styles.container_light}>
<L_Sider {...LeftSiderProps}/>
<div className={styles.container}> <div className={styles.container}>
<div style={{ paddingTop: config.fixedHeader ? 72 : 0 }} id="primaryLayout" > <div style={{ paddingTop: config.fixedHeader ? 72 : 0 }} id="primaryLayout" >
<Header {...headerProps} /> <Header {...headerProps} />
@ -159,7 +163,6 @@ class PrimaryLayout extends PureComponent {
</Content> </Content>
</div> </div>
</div> </div>
<R_Sider {...RightSiderProps}/>
</Layout> </Layout>
</Fragment> </Fragment>
) )

7
src/layouts/PrimaryLayout.less
View File

@ -19,13 +19,12 @@
} }
.content { .content {
padding: 24px;
height: 100vh; height: 100vh;
width: 100%; /* width: 100vw; */
margin: 5px 15px 5px 50px;
} }
.container_light { .container_light {
background-color: rgb(249, 249, 249); background-color: #E2E6E9;
transition: background-color 200ms linear; transition: background-color 200ms linear;
} }
// TODO: Complete full dark theme // TODO: Complete full dark theme

2
src/models/app.js
View File

@ -27,7 +27,7 @@ export default {
AppSettings: store.get('app_settings') || config.defaultSettings, AppSettings: store.get('app_settings') || config.defaultSettings,
locationQuery: {}, locationQuery: {},
theme: store.get('theme') || 'light', theme: store.get('theme') || 'light',
collapsed: store.get('collapsed') || true, collapsed: store.get('collapsed') || false,
notifications: [ notifications: [
{ {
title: 'Hey! Test notification', title: 'Hey! Test notification',

38
src/pages/$page/index.js Normal file
View File

@ -0,0 +1,38 @@
import React, { PureComponent } from 'react'
import { UserProfile } from 'components'
import { pathMatchRegexp } from 'utils'
import Error404 from '../404.js'
import * as ycore from 'ycore'
const userData = ycore.SDCP()
class PageIndexer extends PureComponent {
componentDidMount(){
}
render() {
const {location} = this.props
const matchUser = pathMatchRegexp("/@:id", location.pathname);
const matchSearch = pathMatchRegexp("/s/:id", location.pathname);
if (matchUser) {
console.log(`User matched! ${location.pathname}`)
return(<div>
<UserProfile regx={matchUser} />
</div>)
}
if (matchSearch) {
console.log(`Search matched! ${location.pathname}`)
return(<div>
<UserProfile regx={matchSearch} />
</div>)
}
// By default return Error 404
return(<div><Error404 /></div>)
}
}
export default PageIndexer

14
src/pages/$page/index.less Normal file
View File

@ -0,0 +1,14 @@
.content {
line-height: 2.4;
font-size: 13px;
.item {
display: flex;
& > div {
&:first-child {
width: 100px;
}
}
}
}

50
src/pages/$page/model/detail.js Normal file
View File

@ -0,0 +1,50 @@
import { pathMatchRegexp } from 'utils'
import api from 'api'
const { queryUser } = api
export default {
namespace: 'userDetail',
state: {
data: {},
},
subscriptions: {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
const match = pathMatchRegexp('/:user', pathname)
if (match) {
dispatch({ type: 'query', payload: { id: match[1] } })
}
})
},
},
effects: {
*query({ payload }, { call, put }) {
const data = yield call(queryUser, payload)
const { success, message, status, ...other } = data
if (success) {
yield put({
type: 'querySuccess',
payload: {
data: other,
},
})
} else {
throw data
}
},
},
reducers: {
querySuccess(state, { payload }) {
const { data } = payload
return {
...state,
data,
}
},
},
}

8
src/pages/404.js
View File

@ -1,16 +1,16 @@
import React from 'react' import React from 'react'
import { Icon as LegacyIcon } from '@ant-design/compatible'; import { Icon } from 'antd'
import { Page } from 'components' import { Page } from 'components'
import styles from './404.less' import styles from './404.less'
const Error = () => ( const Error404 = () => (
<Page inner> <Page inner>
<div className={styles.error}> <div className={styles.error}>
<LegacyIcon type="api" /> <Icon type="api" />
<h1>OBA BLYAT</h1> <h1>OBA BLYAT</h1>
<p><strong>ERROR 404</strong></p> <p><strong>ERROR 404</strong></p>
</div> </div>
</Page> </Page>
) )
export default Error export default Error404

62
src/pages/s/$search/index.js Normal file
View File

@ -0,0 +1,62 @@
import React, { PureComponent } from 'react'
import { UserProfile } from 'components'
import { pathMatchRegexp } from 'utils'
import styles from './styles.less'
import * as ycore from 'ycore'
import * as antd from 'antd'
const userData = ycore.SDCP()
class SearchPageIndexer extends PureComponent {
constructor(props){
super(props),
this.state = {
SearchResult: ''
}
}
SeachKeywords(key){
let formdata = new FormData();
formdata.append("server_key", ycore.yConfig.server_key);
formdata.append("search_key", key);
const requestOptions = {
method: 'POST',
body: formdata,
}
const uriObj = (`${ycore.endpoints.search_endpoint}${ycore.GetUserToken.decrypted().UserToken}`)
fetch(uriObj, requestOptions)
.then(result => {
console.log(result)
this.setState({ SearchResult: result })
})
.catch(error => console.log('error', error));
}
render() {
const {location} = this.props
const matchSearch = pathMatchRegexp("/s/:id", location.pathname);
const parsed = matchSearch.shift()
const raw = parsed.toString()
const string = raw.replace('/s/', "")
if (matchSearch) {
this.SeachKeywords(string)
console.log(`Search matched! ${location.pathname}`)
return(
<div>
<h1 className={styles.searchHeader}><antd.Icon type="search" /> Results of {string} </h1>
<antd.Card>
{this.state.SearchResult.toString()}
</antd.Card>
</div>
)
}
return(<div><center> Input Error </center></div>)
}
}
export default SearchPageIndexer

7
src/pages/s/$search/styles.less Normal file
View File

@ -0,0 +1,7 @@
@import '~themes/vars.less';
.searchHeader {
font-family: "Nunito", sans-serif;
font-size: 40px;
}

3
src/themes/fonty.css
View File

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css?family=Alata&display=swap'); @import url('https://fonts.googleapis.com/css?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700'); @import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'); @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kulim+Park&display=swap'); @import url('https://fonts.googleapis.com/css?family=Kulim+Park&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');