mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
0.1.12
This commit is contained in:
srgooglo
parent
5f27d3999a
commit
bc8124f2f2
@ -63,8 +63,8 @@ export default {
|
||||
theme: './config/theme.config.js',
|
||||
// Webpack Configuration
|
||||
alias: {
|
||||
ycore: resolve(__dirname, './src/ycore_worker.js'),
|
||||
ycstyle: resolve(__dirname, './src/ycore_style.scss'),
|
||||
ycore: resolve(__dirname, './src/@ycore/ycore_worker.js'),
|
||||
ycstyle: resolve(__dirname, './src/@ycore/ycore_style.scss'),
|
||||
api: resolve(__dirname, './src/services/'),
|
||||
components: resolve(__dirname, './src/components'),
|
||||
config: resolve(__dirname, './config/ycore.config.js'),
|
||||
|
||||
@ -26,6 +26,7 @@ module.exports = {
|
||||
openwheater_apiKey:'2acf34be0b8f033b89ba4de1e674d42a',
|
||||
},
|
||||
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=",
|
||||
auth_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/auth",
|
||||
new_post: "https://api.ragestudio.net/RS-YIBTP/yid/new_post?access_token=",
|
||||
|
||||
128
mock/route.js
128
mock/route.js
@ -15,134 +15,6 @@ const database = [
|
||||
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 = {
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
{
|
||||
"name": "comty-development",
|
||||
"version": "0.1.09",
|
||||
"version": "0.1.10",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"author": "",
|
||||
"author": "RageStudio",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@ant-design/compatible": "0.0.1-rc.1",
|
||||
"@ant-design/icons": "^2.1.1",
|
||||
"@ant-design/pro-layout": "^4.9.11",
|
||||
"@lingui/react": "^2.9.0",
|
||||
"ant-design-pro": "^2.3.2",
|
||||
"antd": "^4.0.0-rc.0",
|
||||
"antd": "^3.26.3",
|
||||
"autoprefixer": "7.1.6",
|
||||
"axios": "^0.18.0",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import Cookies from "ts-cookies";
|
||||
import axios from "axios";
|
||||
import {SetControls, CloseControls} from "./components/Layout/Control"
|
||||
import {secretOrKey} from "../config/keys.js"
|
||||
import {SetControls, CloseControls} from ".././components/Layout/Control"
|
||||
import {secretOrKey} from "../../config/keys.js"
|
||||
import * as antd from "antd"
|
||||
import { func } from "prop-types";
|
||||
|
||||
var react = require("react");
|
||||
var package_json = require("../package.json");
|
||||
var package_json = require("../../package.json");
|
||||
var jquery = require("jquery");
|
||||
var uifx = require("uifx");
|
||||
var config = require("config");
|
||||
@ -39,7 +38,7 @@ export const UIFxList = {
|
||||
notifyWarning: (ycore_worker.FXapiProvider + 'NotifyWarning.wav'),
|
||||
notifySuccess: (ycore_worker.FXapiProvider + 'notifySuccess.wav')
|
||||
};
|
||||
export const infoServer = (ycore_worker.ServerType + ' Server | v' + ycore_worker.ServerVersion);
|
||||
|
||||
|
||||
export function notifyError(err){
|
||||
antd.notification.error({
|
||||
@ -600,28 +599,6 @@ export function UIFxPY(value, customVLM) {
|
||||
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(){
|
||||
window.location.reload();
|
||||
}
|
||||
@ -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 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}
|
||||
const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG}
|
||||
export default CustomIcons
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import * as icon from '@ant-design/icons';
|
||||
import { Dropdown, Button, Menu } from 'antd';
|
||||
import { Dropdown, Button, Icon, Menu } from 'antd'
|
||||
|
||||
const DropOption = ({
|
||||
onMenuClick,
|
||||
@ -18,11 +17,11 @@ const DropOption = ({
|
||||
} {...dropdownProps}>
|
||||
|
||||
<Button style={{ border: 'none', ...buttonStyle }}>
|
||||
<icon.BarsOutline style={{ marginRight: 2 }} />
|
||||
<icon.DownOutline />
|
||||
<Icon style={{ marginRight: 2 }} type="bars" />
|
||||
<Icon type="down" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
DropOption.propTypes = {
|
||||
|
||||
@ -1,17 +1,6 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import * as icon from '@ant-design/icons';
|
||||
import {
|
||||
Menu,
|
||||
Layout,
|
||||
Avatar,
|
||||
Popover,
|
||||
Badge,
|
||||
List,
|
||||
Switch,
|
||||
Tooltip,
|
||||
Dropdown,
|
||||
Button,
|
||||
} from 'antd';
|
||||
import { Menu, Icon, Layout, Avatar, Popover, Badge, List, Switch, Tooltip, Dropdown, Button } from 'antd'
|
||||
import HeaderSearch from './local_components/HeaderSearch/index.js'
|
||||
import { Trans, withI18n } from '@lingui/react'
|
||||
import { Ellipsis } from 'ant-design-pro'
|
||||
import classnames from 'classnames'
|
||||
@ -44,7 +33,7 @@ class Header extends PureComponent {
|
||||
handleOpenMenu() {
|
||||
let ListControls = [
|
||||
(<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>
|
||||
)
|
||||
]
|
||||
@ -90,7 +79,10 @@ class Header extends PureComponent {
|
||||
}
|
||||
description={moment(item.date).fromNow()}
|
||||
/>
|
||||
<icon.RightOutlined />
|
||||
<Icon
|
||||
style={{ fontSize: '15px', color: '#ccc' }}
|
||||
type="right"
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
@ -111,24 +103,25 @@ class Header extends PureComponent {
|
||||
offset={[-10, 10]}
|
||||
className={styles.iconButton}
|
||||
>
|
||||
<icon.BellOutlined />
|
||||
<Icon className={styles.iconFont} type="bell" />
|
||||
</Badge>
|
||||
</Popover>
|
||||
)
|
||||
|
||||
return (
|
||||
<Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed})} >
|
||||
<div className={styles.leftContainer}>
|
||||
<img className={styles.brand} src={config.FullLogoPath} />
|
||||
<Tooltip title={'Main'}><a target="_blank" href="" rel="noopener noreferrer"><icon.HomeOutline className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
|
||||
<Tooltip title={'Search'}><a target="_blank" href="" rel="noopener noreferrer"><icon.SearchOutline className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
|
||||
</div>
|
||||
<div className={styles.rightContainer}>
|
||||
<Tooltip title={'Create'}><icon.PlusCircleOutline onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
|
||||
{notificationIcon}
|
||||
<Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed}, {[styles.collapsed]: !collapsed} )} >
|
||||
<div className={classnames(styles.containersWrappers, {[styles.collapsed]: !collapsed})} >
|
||||
<div className={styles.leftContainer}>
|
||||
<Tooltip title={'Main'}><Icon type="home" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
|
||||
<Tooltip title={'Search'}><Icon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
|
||||
</div>
|
||||
<div className={styles.rightContainer}>
|
||||
<Tooltip title={'Create'}><Icon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
|
||||
{notificationIcon}
|
||||
</div>
|
||||
</div>
|
||||
</Layout.Header>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
|
||||
@LLightMode-backgroud: #fff;
|
||||
|
||||
@LDarkMode-color: #fff;
|
||||
@LLightMode-color: #2F2E30;
|
||||
.createMenu {
|
||||
width: 30px;
|
||||
margin: 0 auto 0 auto;
|
||||
height: 190px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
@ -18,13 +24,19 @@
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.containersWrappers{
|
||||
display: flex;
|
||||
&.collapsed {
|
||||
width: ~'calc(100% - 80px)';
|
||||
}
|
||||
}
|
||||
.header {
|
||||
-webkit-box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
|
||||
-moz-box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
|
||||
box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: @DarkMode-backgroud;
|
||||
background-color: #F3F3F3;
|
||||
height: 45px;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
@ -33,6 +45,16 @@
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
transition: width 0.2s;
|
||||
right: 0;
|
||||
&.collapsed {
|
||||
width: ~'calc(100% - 180px)';
|
||||
background-color: rgb(80, 80, 80);
|
||||
background-color: @LDarkMode-backgroud;
|
||||
color: @DarkMode-color;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
transition: box-shadow 1s linear;
|
||||
}
|
||||
:global {
|
||||
|
||||
.ant-menu-submenu-title {
|
||||
@ -82,10 +104,8 @@
|
||||
margin: 0 50px;
|
||||
}
|
||||
.leftContainer {
|
||||
margin: 0 23px;
|
||||
margin: 0 0 0 50px;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
190
src/components/Layout/L_Sider.js
Normal file
190
src/components/Layout/L_Sider.js
Normal 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
287
src/components/Layout/L_Sider.less
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import * as icon from '@ant-design/icons';
|
||||
import { Menu } from 'antd';
|
||||
import { Menu, Icon } from 'antd'
|
||||
import Navlink from 'umi/navlink'
|
||||
import withRouter from 'umi/withRouter'
|
||||
import {SDCP} from 'ycore'
|
||||
@ -13,7 +12,6 @@ import {
|
||||
} from 'utils'
|
||||
import store from 'store'
|
||||
import styles from './Menu.less'
|
||||
import { isTypeNode } from 'typescript';
|
||||
|
||||
|
||||
const { SubMenu } = Menu
|
||||
@ -53,24 +51,24 @@ class SiderMenu extends PureComponent {
|
||||
className={styles.SubMenuItems}
|
||||
title={
|
||||
<Fragment>
|
||||
{item.icon && <item.icon />}
|
||||
{item.icon && <Icon type={item.icon} />}
|
||||
<span className={styles.SubItemTitle}>{item.name}</span>
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
{this.generateMenus(item.children)}
|
||||
</SubMenu>
|
||||
);
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Menu.Item key={item.id} >
|
||||
<Navlink to={addLangPrefix(item.route) || '#'}>
|
||||
{item.icon && <item.icon />}
|
||||
{item.icon && <Icon type={item.icon} />}
|
||||
<span>{item.name}</span>
|
||||
</Navlink>
|
||||
</Menu.Item>
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -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
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import Header from './Header'
|
||||
import R_Sider from './R_Sider'
|
||||
import L_Sider from './L_Sider'
|
||||
import Control from './Control'
|
||||
|
||||
export { Header, R_Sider, Control }
|
||||
export { Header, L_Sider, Control }
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import { Menu, Button, Divider, Tooltip, message } from 'antd';
|
||||
import { Menu, Icon, Button, Divider, Tooltip, message } from 'antd'
|
||||
import Navlink from 'umi/navlink'
|
||||
import withRouter from 'umi/withRouter'
|
||||
import { arrayToTree, addLangPrefix} from 'utils'
|
||||
@ -39,25 +38,26 @@ class CustomMenu extends React.Component {
|
||||
return data.map(item => {
|
||||
if (EditMode == true) {
|
||||
return (
|
||||
<div className={styles.RemovePin} key={item.id}>
|
||||
<Button className={styles.RemovePin} onClick={ () => this.DeletePin(item)} type='dashed'>
|
||||
<LegacyIcon type="delete" style={{ color: 'rgb(245, 48, 48)' }} />
|
||||
<span>{item.name}</span>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
<div className={styles.RemovePin} key={item.id}>
|
||||
<Button className={styles.RemovePin} onClick={ () => this.DeletePin(item)} type='dashed'>
|
||||
<Icon type="delete" style={{ color: 'rgb(245, 48, 48)' }} />
|
||||
<span>{item.name}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
)
|
||||
}else {
|
||||
return (
|
||||
<Menu.Item key={item.id} >
|
||||
<Navlink to={addLangPrefix(item.route) || '#'}>
|
||||
{item.icon && <LegacyIcon type={item.icon} />}
|
||||
{item.icon && <Icon type={item.icon} />}
|
||||
<span>{item.name}</span>
|
||||
</Navlink>
|
||||
</Menu.Item>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
@ -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>
|
||||
{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">
|
||||
<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>
|
||||
</Button>
|
||||
|
||||
@ -114,10 +114,10 @@ class CustomMenu extends React.Component {
|
||||
|
||||
{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>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
41
src/components/Layout/local_components/HeaderSearch/index.js
Normal file
41
src/components/Layout/local_components/HeaderSearch/index.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -12,11 +12,6 @@ class MainSidebar extends React.Component {
|
||||
collapsed: false,
|
||||
};
|
||||
|
||||
toggleCollapsed = () => {
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed,
|
||||
});
|
||||
};
|
||||
|
||||
render(){
|
||||
return(
|
||||
|
||||
70
src/components/UserProfile/index.js
Normal file
70
src/components/UserProfile/index.js
Normal 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
262
src/components/UserProfile/styles.less
Normal 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;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import { Icon } from 'antd';
|
||||
import styles from '../yid.scss';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
@ -22,13 +22,13 @@ class StatusBox extends Component {
|
||||
if (Reactive == 'loading') {
|
||||
return (
|
||||
<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>
|
||||
<br /><br /><br />
|
||||
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
if (Reactive == '200') {
|
||||
return (
|
||||
|
||||
@ -2,9 +2,7 @@ import React, { Component } from 'react'
|
||||
import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'dva';
|
||||
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import '@ant-design/compatible/assets/index.css';
|
||||
import { Button, Input, Drawer, Collapse } from 'antd';
|
||||
import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd'
|
||||
import styles from './yid.scss';
|
||||
import formstyle from './formstyle.less'
|
||||
|
||||
@ -106,7 +104,7 @@ class YulioID extends Component {
|
||||
{ShowLoading ? (
|
||||
<div style={{ height: '329px' }}>
|
||||
<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 style={{ margin: 'auto' }}>
|
||||
<h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }} > {StateMessage} </h6>
|
||||
@ -120,7 +118,7 @@ class YulioID extends Component {
|
||||
<div>
|
||||
<div className={styles.input__wrapper}>
|
||||
<label className={styles.labelform}>
|
||||
<LegacyIcon type="user" style={{ fontSize: '15px' }} />{' '}
|
||||
<Icon type="user" style={{ fontSize: '15px' }} />{' '}
|
||||
Username
|
||||
</label>
|
||||
<FormItem>
|
||||
@ -142,7 +140,7 @@ class YulioID extends Component {
|
||||
|
||||
<div className={styles.input__wrapper}>
|
||||
<label className={styles.labelform}>
|
||||
<LegacyIcon type="unlock" style={{ fontSize: '15px' }} />{' '}
|
||||
<Icon type="unlock" style={{ fontSize: '15px' }} />{' '}
|
||||
Password
|
||||
</label>
|
||||
<FormItem>
|
||||
@ -185,7 +183,7 @@ class YulioID extends Component {
|
||||
onClick={this.initFPassword}
|
||||
style={{ top: '8px' }}
|
||||
>
|
||||
<LegacyIcon type="exclamation-circle" /> Forgotten password
|
||||
<Icon type="exclamation-circle" /> Forgotten password
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ float: 'right' }}>
|
||||
@ -194,7 +192,7 @@ class YulioID extends Component {
|
||||
onClick={this.initRegister}
|
||||
style={{ top: '8px' }}
|
||||
>
|
||||
<LegacyIcon type="user-add" /> Create an account
|
||||
<Icon type="user-add" /> Create an account
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -204,7 +202,7 @@ class YulioID extends Component {
|
||||
</main>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,21 +11,7 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import '@ant-design/compatible/assets/index.css';
|
||||
import {
|
||||
Button,
|
||||
Row,
|
||||
Input,
|
||||
Drawer,
|
||||
Collapse,
|
||||
Select,
|
||||
Checkbox,
|
||||
Result,
|
||||
Layout,
|
||||
message,
|
||||
notification,
|
||||
} from 'antd';
|
||||
import { Button, Row, Form, Input, Drawer, Icon, Collapse, Select, Checkbox, Result, Layout, message, notification } from 'antd'
|
||||
import { Trans, withI18n } from '@lingui/react'
|
||||
import { setLocale } from 'utils'
|
||||
import { UIFxPY, UIFxList, DevOptions } from 'ycore';
|
||||
@ -209,7 +195,7 @@ render() {
|
||||
|
||||
<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 }] })(
|
||||
<input className={styles.inputform} type="text" placeholder="Username" onChange={(text) => { this.handleUsername(text) }} />
|
||||
)}
|
||||
@ -217,7 +203,7 @@ render() {
|
||||
</div>
|
||||
|
||||
<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 }] })(
|
||||
<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>
|
||||
<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: 'right' }}><Button type="dashed" onClick={this.initRegister} style={{ top: '8px' }}><LegacyIcon type="user-add" /> Create an account</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' }}><Icon type="user-add" /> Create an account</Button></div>
|
||||
|
||||
<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>
|
||||
<br /><br /><br />
|
||||
<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}>
|
||||
<label className={styles.labelform}> Choose your Username</label>
|
||||
<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>
|
||||
</div>
|
||||
<div className={styles.inputRG__wrapper}>
|
||||
<label className={styles.labelform}> Fill with your email</label>
|
||||
<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>
|
||||
</div>
|
||||
<div className={styles.inputRG__wrapper}>
|
||||
<label className={styles.labelform}> Fill with your password</label>
|
||||
<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>
|
||||
</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>
|
||||
<a className={styles.buttonlp} id="register" onClick={this.getRegister}>Register</a>
|
||||
<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><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>
|
||||
</div>
|
||||
</div>
|
||||
@ -302,14 +288,14 @@ render() {
|
||||
<h3>To recover your account enter the email used to register</h3>
|
||||
<form className={styles.formlogin}>
|
||||
<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 }] })(
|
||||
<input className={styles.inputform} type="text" placeholder="myaccount@example.com" onChange={(text) => { this.handleFPEmail(text) }} /> )}
|
||||
</FormItem>
|
||||
</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><LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
|
||||
<div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
|
||||
<div>
|
||||
<br /><br /><br />
|
||||
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
|
||||
@ -322,13 +308,13 @@ render() {
|
||||
|
||||
{/* NOTF */}
|
||||
<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>
|
||||
<h4 className={styles.apierrort}> {MensageException} </h4> <hr />
|
||||
<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', }}>
|
||||
<LegacyIcon type="exception" />
|
||||
<Icon type="exception" />
|
||||
<h6>STATUS HANDLER => {this.state.ErrorType} </h6>
|
||||
<h6>EXCEPTION => {this.state.api_response} </h6>
|
||||
<h6>EXCEPTION MENSAGE => {MensageException}</h6>
|
||||
@ -343,7 +329,7 @@ render() {
|
||||
|
||||
{/* SOTF */}
|
||||
<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>
|
||||
<h4>Please wait while process your data ...</h4>
|
||||
</div>
|
||||
@ -351,14 +337,14 @@ render() {
|
||||
{/* RGSOTF */}
|
||||
<Drawer width={320} closable={false} visible={this.state.RGSOTFdrawer}>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,21 +11,7 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import '@ant-design/compatible/assets/index.css';
|
||||
import {
|
||||
Button,
|
||||
Row,
|
||||
Input,
|
||||
Drawer,
|
||||
Collapse,
|
||||
Select,
|
||||
Checkbox,
|
||||
Result,
|
||||
Layout,
|
||||
message,
|
||||
notification,
|
||||
} from 'antd';
|
||||
import { Button, Row, Form, Input, Drawer, Icon, Collapse, Select, Checkbox, Result, Layout, message, notification } from 'antd'
|
||||
import { Trans, withI18n } from '@lingui/react'
|
||||
import { setLocale } from 'utils'
|
||||
import { UIFxPY, UIFxList, DevOptions } from 'ycore';
|
||||
@ -222,7 +208,7 @@ class YulioID extends PureComponent {
|
||||
message: 'For continue your request, is necessary to login with YulioID™ again',
|
||||
description:
|
||||
'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: '/' })
|
||||
});
|
||||
@ -362,7 +348,7 @@ class YulioID extends PureComponent {
|
||||
message: 'The instructions to recover your account have been sent to the email',
|
||||
description:
|
||||
'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)
|
||||
});
|
||||
@ -409,7 +395,7 @@ class YulioID extends PureComponent {
|
||||
placement: 'topLeft',
|
||||
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',
|
||||
icon: <LegacyIcon type="login" style={{ color: '#ff0f2f' }} />
|
||||
icon: <Icon type="login" style={{ color: '#ff0f2f' }} />
|
||||
}),
|
||||
$("#loadingspn").css({ opacity: 0, "z-index": -1 }),
|
||||
_this.triggerNOTF();
|
||||
|
||||
@ -11,21 +11,7 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import '@ant-design/compatible/assets/index.css';
|
||||
import {
|
||||
Button,
|
||||
Row,
|
||||
Input,
|
||||
Drawer,
|
||||
Collapse,
|
||||
Select,
|
||||
Checkbox,
|
||||
Result,
|
||||
Layout,
|
||||
message,
|
||||
notification,
|
||||
} from 'antd';
|
||||
import { Button, Row, Form, Input, Drawer, Icon, Collapse, Select, Checkbox, Result, Layout, message, notification } from 'antd'
|
||||
import { Trans, withI18n } from '@lingui/react'
|
||||
import { setLocale } from 'utils'
|
||||
import { UIFxPY, UIFxList, DevOptions, avilableSDCP } from 'ycore';
|
||||
@ -228,7 +214,7 @@ class YulioID extends PureComponent {
|
||||
message: 'For continue your request, is necessary to login with YulioID™ again',
|
||||
description:
|
||||
'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: '/' })
|
||||
});
|
||||
@ -368,7 +354,7 @@ class YulioID extends PureComponent {
|
||||
message: 'The instructions to recover your account have been sent to the email',
|
||||
description:
|
||||
'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)
|
||||
});
|
||||
@ -415,7 +401,7 @@ class YulioID extends PureComponent {
|
||||
placement: 'topLeft',
|
||||
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',
|
||||
icon: <LegacyIcon type="login" style={{ color: '#ff0f2f' }} />
|
||||
icon: <Icon type="login" style={{ color: '#ff0f2f' }} />
|
||||
}),
|
||||
$("#loadingspn").css({ opacity: 0, "z-index": -1 }),
|
||||
_this.triggerNOTF();
|
||||
@ -589,7 +575,7 @@ class YulioID extends PureComponent {
|
||||
|
||||
<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 }] })(
|
||||
<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 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 }] })(
|
||||
<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>
|
||||
<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: 'right' }}><Button type="dashed" onClick={this.initRegister} style={{ top: '8px' }}><LegacyIcon type="user-add" /> Create an account</Button></div><br/><br/>
|
||||
<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' }}><Icon type="user-add" /> Create an account</Button></div><br/><br/>
|
||||
<div style={{ textAlign: 'center', margin: '20px' }}> <RenderInclude data={include} /></div>
|
||||
<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>
|
||||
<br /><br /><br />
|
||||
<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}>
|
||||
<label className={styles.labelform}> Choose your Username</label>
|
||||
<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>
|
||||
</div>
|
||||
<div className={styles.inputRG__wrapper}>
|
||||
<label className={styles.labelform}> Fill with your email</label>
|
||||
<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>
|
||||
</div>
|
||||
<div className={styles.inputRG__wrapper}>
|
||||
<label className={styles.labelform}> Fill with your password</label>
|
||||
<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>
|
||||
</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>
|
||||
<a className={styles.buttonlp} id="register" onClick={this.getRegister}>Register</a>
|
||||
<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><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>
|
||||
</div>
|
||||
</div>
|
||||
@ -682,14 +668,14 @@ class YulioID extends PureComponent {
|
||||
<h3>To recover your account enter the email used to register</h3>
|
||||
<form className={styles.formlogin}>
|
||||
<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 }] })(
|
||||
<input className={styles.inputform} type="text" placeholder="myaccount@example.com" onChange={(text) => { this.handleFPEmail(text) }} /> )}
|
||||
</FormItem>
|
||||
</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><LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
|
||||
<div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
|
||||
<div>
|
||||
<br /><br /><br />
|
||||
<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 */}
|
||||
<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>
|
||||
<h4 className={styles.apierrort}> {MensageException} </h4> <hr />
|
||||
<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', }}>
|
||||
<LegacyIcon type="exception" />
|
||||
<Icon type="exception" />
|
||||
<h6>STATUS HANDLER => {this.state.ErrorType} </h6>
|
||||
<h6>EXCEPTION => {this.state.api_response} </h6>
|
||||
<h6>EXCEPTION MENSAGE => {MensageException}</h6>
|
||||
@ -723,7 +709,7 @@ class YulioID extends PureComponent {
|
||||
|
||||
{/* SOTF */}
|
||||
<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>
|
||||
<h4>Please wait while process your data ...</h4>
|
||||
</div>
|
||||
@ -731,14 +717,14 @@ class YulioID extends PureComponent {
|
||||
{/* RGSOTF */}
|
||||
<Drawer width={320} closable={false} visible={this.state.RGSOTFdrawer}>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -9,9 +9,7 @@
|
||||
//****************************************|
|
||||
|
||||
import React, { PureComponent } from 'react'
|
||||
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import '@ant-design/compatible/assets/index.css';
|
||||
import { message, notification } from 'antd';
|
||||
import { Form, Icon, message, notification } from 'antd'
|
||||
import { UIFxPY, UIFxList, DevOptions } from 'ycoreLegacy';
|
||||
import { endpoints } from 'ycoreLegacy';
|
||||
import $ from 'jquery';
|
||||
@ -141,7 +139,7 @@ export class SDCP extends PureComponent {
|
||||
message: 'For continue your request, is necessary to login with YulioID™ again',
|
||||
description:
|
||||
'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: '/' })
|
||||
});
|
||||
@ -271,7 +269,7 @@ export class SDCP extends PureComponent {
|
||||
message: 'The instructions to recover your account have been sent to the email',
|
||||
description:
|
||||
'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)
|
||||
});
|
||||
@ -316,7 +314,7 @@ export class SDCP extends PureComponent {
|
||||
placement: 'topLeft',
|
||||
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',
|
||||
icon: <LegacyIcon type="login" style={{ color: '#ff0f2f' }} />
|
||||
icon: <Icon type="login" style={{ color: '#ff0f2f' }} />
|
||||
}),
|
||||
$("#loadingspn").css({ opacity: 0, "z-index": -1 }),
|
||||
_this.triggerNOTF();
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import CustomIcons from './CustomIcons'
|
||||
import UserProfile from './UserProfile'
|
||||
import MainSidebar from './MainSidebar'
|
||||
import PostCard from './PostCard'
|
||||
import PostCreator from './PostCreator'
|
||||
@ -12,4 +13,4 @@ import Page from './Page'
|
||||
import YulioID from './YulioID/experimental/index.js'
|
||||
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}
|
||||
|
||||
@ -14,7 +14,7 @@ import Error from '../pages/404'
|
||||
import styles from './PrimaryLayout.less'
|
||||
|
||||
const { Content } = Layout
|
||||
const { Header, L_Sider, R_Sider, Control } = MyLayout
|
||||
const { Header, L_Sider, Control } = MyLayout
|
||||
|
||||
@withRouter
|
||||
@connect(({ app, loading }) => ({ app, loading }))
|
||||
@ -118,8 +118,10 @@ class PrimaryLayout extends PureComponent {
|
||||
},
|
||||
|
||||
}
|
||||
const RightSiderProps = {
|
||||
const LeftSiderProps = {
|
||||
menus,
|
||||
theme,
|
||||
isMobile,
|
||||
collapsed,
|
||||
onCollapseChange,
|
||||
onThemeChange(theme) {
|
||||
@ -131,6 +133,7 @@ class PrimaryLayout extends PureComponent {
|
||||
}
|
||||
const ContainerProps = {
|
||||
theme,
|
||||
location
|
||||
}
|
||||
const MobileWarning = () =>{
|
||||
if (resbypass == false) {
|
||||
@ -151,6 +154,7 @@ class PrimaryLayout extends PureComponent {
|
||||
<MobileWarning />
|
||||
<div className={styles.BarControlWrapper}><Control /></div>
|
||||
<Layout className={this.isDarkMode()? styles.container_dark : styles.container_light}>
|
||||
<L_Sider {...LeftSiderProps}/>
|
||||
<div className={styles.container}>
|
||||
<div style={{ paddingTop: config.fixedHeader ? 72 : 0 }} id="primaryLayout" >
|
||||
<Header {...headerProps} />
|
||||
@ -159,7 +163,6 @@ class PrimaryLayout extends PureComponent {
|
||||
</Content>
|
||||
</div>
|
||||
</div>
|
||||
<R_Sider {...RightSiderProps}/>
|
||||
</Layout>
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
@ -19,13 +19,12 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
/* width: 100vw; */
|
||||
margin: 5px 15px 5px 50px;
|
||||
}
|
||||
.container_light {
|
||||
background-color: rgb(249, 249, 249);
|
||||
background-color: #E2E6E9;
|
||||
transition: background-color 200ms linear;
|
||||
}
|
||||
// TODO: Complete full dark theme
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
AppSettings: store.get('app_settings') || config.defaultSettings,
|
||||
locationQuery: {},
|
||||
theme: store.get('theme') || 'light',
|
||||
collapsed: store.get('collapsed') || true,
|
||||
collapsed: store.get('collapsed') || false,
|
||||
notifications: [
|
||||
{
|
||||
title: 'Hey! Test notification',
|
||||
|
||||
38
src/pages/$page/index.js
Normal file
38
src/pages/$page/index.js
Normal 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
14
src/pages/$page/index.less
Normal 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
50
src/pages/$page/model/detail.js
Normal 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,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -1,16 +1,16 @@
|
||||
import React from 'react'
|
||||
import { Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import { Icon } from 'antd'
|
||||
import { Page } from 'components'
|
||||
import styles from './404.less'
|
||||
|
||||
const Error = () => (
|
||||
const Error404 = () => (
|
||||
<Page inner>
|
||||
<div className={styles.error}>
|
||||
<LegacyIcon type="api" />
|
||||
<Icon type="api" />
|
||||
<h1>OBA BLYAT</h1>
|
||||
<p><strong>ERROR 404</strong></p>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
|
||||
export default Error
|
||||
export default Error404
|
||||
|
||||
62
src/pages/s/$search/index.js
Normal file
62
src/pages/s/$search/index.js
Normal 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
7
src/pages/s/$search/styles.less
Normal file
@ -0,0 +1,7 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.searchHeader {
|
||||
font-family: "Nunito", sans-serif;
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
@ -2,3 +2,4 @@
|
||||
@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=Kulim+Park&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
|
||||
Loading…
x
Reference in New Issue
Block a user