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

antd v2 update

Browse Source
This commit is contained in:
srgooglo 2020-03-03 19:06:18 +01:00
parent c8d9bb5bf5
commit f42ec34d49
22 changed files with 202 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
globals/settings.js
View File

@ -44,6 +44,12 @@ export var AppSettings = [
"description": "Force the app to automaticly search when a type input is detected... [Developer]", "description": "Force the app to automaticly search when a type input is detected... [Developer]",
"value": fromStorage? ycore.StorageValued('default_showpostcreator') : false "value": fromStorage? ycore.StorageValued('default_showpostcreator') : false
}, },
{
"SettingID": "force_show_postactions",
"title": "Not auto hide Posts Actions",
"description": "Force the app to dont hide the post actions (likes, comments ...etc) automaticly... [Developer]",
"value": fromStorage? ycore.StorageValued('force_show_postactions') : false
},
{ {
"SettingID": "use_dev_server", "SettingID": "use_dev_server",
"title": "Use Comty™ Development Server", "title": "Use Comty™ Development Server",

5
package.json
View File

@ -8,13 +8,14 @@
"author": "RageStudio", "author": "RageStudio",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.10.13", "@ant-design/compatible": "^1.0.1",
"@ant-design/pro-layout": "^5.0.0",
"@lingui/react": "^2.9.1", "@lingui/react": "^2.9.1",
"@material-ui/core": "^4.9.3", "@material-ui/core": "^4.9.3",
"@material-ui/icons": "^4.9.1", "@material-ui/icons": "^4.9.1",
"@steveeeie/react-page-transition": "^1.1.2", "@steveeeie/react-page-transition": "^1.1.2",
"ant-design-pro": "^2.3.2", "ant-design-pro": "^2.3.2",
"antd": "^3.26.9", "antd": "^4.0.0",
"autoprefixer": "9.7.4", "autoprefixer": "9.7.4",
"axios": "^0.19.2", "axios": "^0.19.2",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",

4
src/@ycore/libs/yulio_id/pre.js
View File

@ -2,6 +2,8 @@ import * as ycore from 'ycore'
import * as antd from 'antd' import * as antd from 'antd'
import Cookies from "ts-cookies"; import Cookies from "ts-cookies";
import keys from '../../../../config/keys.js'; import keys from '../../../../config/keys.js';
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
var jquery = require("jquery"); var jquery = require("jquery");
var jwt = require("jsonwebtoken") var jwt = require("jsonwebtoken")
@ -101,7 +103,7 @@ export function LogoutCall(){
placement: 'topLeft', placement: 'topLeft',
message: 'Unexpectedly failed logout in YulioID™ ', message: 'Unexpectedly failed logout in YulioID™ ',
description: 'It seems that your token has been removed unexpectedly and could not log out from YulioID ', description: 'It seems that your token has been removed unexpectedly and could not log out from YulioID ',
icon: <antd.Icon type="warning" style={{ color: 'orange' }} /> icon: <Icons.WarningOutlined style={{ color: 'orange' }} />
}) })
console.log("Failed logout with YulioID™", response) console.log("Failed logout with YulioID™", response)
} }

5
src/@ycore/ycore_worker.js
View File

@ -3,6 +3,9 @@ import {AppSettings} from '../../globals/settings.js'
import {Endpoints} from 'globals/endpoints.js' import {Endpoints} from 'globals/endpoints.js'
import umiRouter from 'umi/router'; import umiRouter from 'umi/router';
import * as antd from "antd" import * as antd from "antd"
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
import config from 'config' import config from 'config'
import './libs.js' import './libs.js'
import * as sw from '../../service-worker.js' import * as sw from '../../service-worker.js'
@ -74,7 +77,7 @@ export function notifyError(err){
} }
export function notifyProccess(cust){ export function notifyProccess(cust){
antd.notification.open({ antd.notification.open({
icon: <antd.Icon type="loading" style={{ color: '#108ee9' }} />, icon: <Icons.LoadingOutlined style={{ color: '#108ee9' }} />,
message: 'Please wait', message: 'Please wait',
placement: 'bottomLeft' placement: 'bottomLeft'
}) })

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

@ -3,7 +3,8 @@ import * as antd from 'antd'
import * as ycore from 'ycore' import * as ycore from 'ycore'
import styles from './index.less' import styles from './index.less'
import classnames from 'classnames' import classnames from 'classnames'
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
export const SetHeaderSearchType = { export const SetHeaderSearchType = {
disable: () => { disable: () => {
@ -62,7 +63,7 @@ export default class HeaderSearch extends Component {
<span className={styles.headerSearch}> <span className={styles.headerSearch}>
<antd.Input <antd.Input
id='search_input' id='search_input'
prefix={<antd.Icon type="search" key="Icon" />} prefix={<Icons.SearchOutlined />}
placeholder=' Search on Comty...' placeholder=' Search on Comty...'
onChange={ this.onChange } onChange={ this.onChange }
onPressEnter={this.sendToSearch} onPressEnter={this.sendToSearch}

48
src/components/HeaderSearch/index.less
View File

@ -14,9 +14,53 @@
.headerSearch { .headerSearch {
margin: auto; margin: auto;
:global{ :global{
.ant-input-prefix{ .ant-input-affix-wrapper {
color: #9D9DA7; box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(0,0,0,.65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
font-feature-settings: 'tnum';
position: relative;
display: inline-block;
width: 100%;
text-align: start;
} }
.ant-input-affix-wrapper .ant-input-prefix {
left: 12px;
}
.ant-input-affix-wrapper{
background-color: transparent !important;
border-color: transparent;
border-radius: 12px;
}
.ant-input-affix-wrapper > input.ant-input {
padding: 0 0 0 30px;
border: inherit;
outline: inherit;
}
.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
background-color: transparent !important;
border-color: transparent;
border-radius: 12px;
position: absolute;
top: 50%;
z-index: 2;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
color: rgba(0,0,0,.65);
line-height: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #9d9da7 !important;
}
.ant-input{ .ant-input{
border-radius: 12px; border-radius: 12px;
color: #9D9DA7; color: #9D9DA7;

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

@ -1,5 +1,17 @@
import React, { PureComponent, Fragment } from 'react' import React, { PureComponent, Fragment } from 'react'
import { Menu, Icon, Layout, Avatar, Popover, Badge, List, Switch, Tooltip, Dropdown, Button } from 'antd' import { Icon as LegacyIcon } from '@ant-design/compatible';
import {
Menu,
Layout,
Avatar,
Popover,
Badge,
List,
Switch,
Tooltip,
Dropdown,
Button,
} from 'antd';
import { Trans, withI18n } from '@lingui/react' import { Trans, withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro' import { Ellipsis } from 'ant-design-pro'
import classnames from 'classnames' import classnames from 'classnames'
@ -31,7 +43,7 @@ class Header extends PureComponent {
handleOpenMenu() { handleOpenMenu() {
let ListControls = [ let ListControls = [
(<div> (<div>
<Button type="dashed" icon="close" shape="circle" onClick={() => ycore.ControlBar.close()}></Button> <Button type="dashed" icon={<LegacyIcon type="close" />} shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
</div> </div>
) )
] ]
@ -77,7 +89,7 @@ class Header extends PureComponent {
} }
description={moment(item.date).fromNow()} description={moment(item.date).fromNow()}
/> />
<Icon <LegacyIcon
style={{ fontSize: '15px', color: '#ccc' }} style={{ fontSize: '15px', color: '#ccc' }}
type="right" type="right"
/> />
@ -101,7 +113,7 @@ class Header extends PureComponent {
offset={[-10, 10]} offset={[-10, 10]}
className={styles.iconButton} className={styles.iconButton}
> >
<Icon className={styles.iconFont} type="bell" /> <LegacyIcon className={styles.iconFont} type="bell" />
</Badge> </Badge>
</Popover> </Popover>
) )
@ -110,16 +122,16 @@ class Header extends PureComponent {
<Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed}, {[styles.collapsed]: !collapsed} )} > <Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed}, {[styles.collapsed]: !collapsed} )} >
<div className={classnames(styles.containersWrappers, {[styles.collapsed]: !collapsed})} > <div className={classnames(styles.containersWrappers, {[styles.collapsed]: !collapsed})} >
<div className={styles.leftContainer}> <div className={styles.leftContainer}>
<Tooltip title={'Main'}><Icon type="home" className={styles.iconButton} onClick={() => ycore.crouter.native('main')} style={{ fontSize: '15px' }} /></Tooltip> <Tooltip title={'Main'}><LegacyIcon type="home" className={styles.iconButton} onClick={() => ycore.crouter.native('main')} style={{ fontSize: '15px' }} /></Tooltip>
<Tooltip title={'Search'}><Icon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip> <Tooltip title={'Search'}><LegacyIcon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
</div> </div>
<div className={styles.rightContainer}> <div className={styles.rightContainer}>
<Tooltip title={'Create'}><Icon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip> <Tooltip title={'Create'}><LegacyIcon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
{notificationIcon} {notificationIcon}
</div> </div>
</div> </div>
</Layout.Header> </Layout.Header>
) );
} }
} }

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

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

25
src/components/Layout/Sider.js
View File

@ -2,6 +2,9 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classnames from 'classnames' import classnames from 'classnames'
import * as antd from 'antd' import * as antd from 'antd'
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
import { withI18n, Trans } from '@lingui/react' import { withI18n, Trans } from '@lingui/react'
import ScrollBar from '../ScrollBar' import ScrollBar from '../ScrollBar'
import { config } from 'utils' import { config } from 'utils'
@ -93,31 +96,31 @@ class Sider extends PureComponent {
onMouseLeave={this.hover} onMouseLeave={this.hover}
> >
<div className={styles.brand}><img onClick={() => ycore.crouter.native('main')} src={collapsed? config.LogoPath : config.FullLogoPath } /></div> <div className={styles.brand}><img onClick={() => ycore.crouter.native('main')} src={collapsed? config.LogoPath : config.FullLogoPath } /></div>
<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={this.StrictMode()? styles.CollapserWrapperLight : styles.CollapserWrapperDark} ><antd.Button width={'20px'} onClick={() => onCollapseChange(!collapsed)} icon={collapsed? (this.Balancer()? <Icons.RightOutlined/>: <Icons.DoubleLeftOutlined/>) : (this.Balancer()? <Icons.LeftOutlined /> : <Icons.DoubleLeftOutlined/>) } /></div>
<div className={styles.menuContainer}> <div className={styles.menuContainer}>
<ScrollBar options={{ suppressScrollX: true, }} > <ScrollBar options={{ suppressScrollX: true, }} >
<antd.Menu className={collapsed? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}> <antd.Menu className={collapsed? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
<antd.Menu.Item icon="compass" key="explore"> <antd.Menu.Item key="explore">
<antd.Icon type="compass" /> <Icons.CompassOutlined />
<Trans><span>Explore</span></Trans> <Trans><span>Explore</span></Trans>
</antd.Menu.Item> </antd.Menu.Item>
{ycore.booleanFix(userData.is_pro)? {ycore.booleanFix(userData.is_pro)?
<antd.Menu.Item key="boosted_pages"> <antd.Menu.Item key="boosted_pages">
<antd.Icon type="thunderbolt" /> <Icons.ThunderboltOutlined />
<Trans><span>Boost</span></Trans> <Trans><span>Boost</span></Trans>
</antd.Menu.Item> </antd.Menu.Item>
: :
<antd.Menu.Item key="upgrade_pro"> <antd.Menu.Item key="upgrade_pro">
<antd.Icon type="star" /> <Icons.StarOutlined/>
<Trans><span>PRO</span></Trans> <Trans><span>PRO</span></Trans>
</antd.Menu.Item>} </antd.Menu.Item>}
<antd.Menu.Item key="general_settings"> <antd.Menu.Item key="general_settings">
<antd.Icon type="setting" /> <Icons.SettingOutlined/>
<Trans><span>Settings</span></Trans> <Trans><span>Settings</span></Trans>
</antd.Menu.Item> </antd.Menu.Item>
{ycore.booleanFix(userData.admin)? {ycore.booleanFix(userData.admin)?
<antd.Menu.Item key="admin_area"> <antd.Menu.Item key="admin_area">
<antd.Icon type="tool" /> <Icons.ToolOutlined />
<Trans><span>Admin Area</span></Trans> <Trans><span>Admin Area</span></Trans>
</antd.Menu.Item> </antd.Menu.Item>
: :
@ -128,7 +131,7 @@ class Sider extends PureComponent {
<div className={styles.something_thats_pulling_me_down}> <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 selectable={false} className={collapsed ? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
<antd.Menu.Item style={{ fontSize: '15px' }} key="LightMode" disabled={false} > <antd.Menu.Item style={{ fontSize: '15px' }} key="LightMode" disabled={false} >
{collapsed? <antd.Icon type="bulb" /> : {collapsed? <Icons.BulbOutlined /> :
<div className={styles.themeSwitcher}> <div className={styles.themeSwitcher}>
<antd.Switch <antd.Switch
onChange={onThemeChange.bind( onChange={onThemeChange.bind(
@ -142,7 +145,7 @@ class Sider extends PureComponent {
</div>} </div>}
</antd.Menu.Item> </antd.Menu.Item>
<antd.Menu.Item key="SignOut"> <antd.Menu.Item key="SignOut">
<antd.Icon type="logout" style={{ color: 'red' }} /> <Icons.LogoutOutlined style={{ color: 'red' }} />
{collapsed ? null : <Trans>Logout</Trans>} {collapsed ? null : <Trans>Logout</Trans>}
</antd.Menu.Item> </antd.Menu.Item>
</antd.Menu> </antd.Menu>

8
src/components/PostCard/index.js
View File

@ -3,6 +3,8 @@ import * as antd from 'antd'
import styles from './index.less' import styles from './index.less'
import {CustomIcons, LikeBTN} from 'components' import {CustomIcons, LikeBTN} from 'components'
import * as ycore from 'ycore' import * as ycore from 'ycore'
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
const { Meta } = antd.Card; const { Meta } = antd.Card;
@ -57,20 +59,20 @@ class PostCard extends React.PureComponent{
render(){ render(){
const { payload, customActions, } = this.props const { payload, customActions, } = this.props
const { id, user, ago, avatar, content, file, postFileName, publisher, post_likes, is_post_pinned, is_liked } = payload || emptyPayload; const { id, user, ago, avatar, content, file, postFileName, publisher, post_likes, is_post_pinned, is_liked } = payload || emptyPayload;
const defaultActions = [<div><LikeBTN count={post_likes} id={id} liked={ycore.booleanFix(is_liked)? true : false} key="like" /></div>,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />] const defaultActions = [<div><LikeBTN count={post_likes} id={id} liked={ycore.booleanFix(is_liked)? true : false} key="like" /></div>,<Icons.ShareAltOutlined key="share" />,<Icons.MoreOutlined key="actionMenu" />]
const actions = customActions || defaultActions; const actions = customActions || defaultActions;
return( return(
<div className={styles.cardWrapper}> <div className={styles.cardWrapper}>
<antd.Card actions={actions} > <antd.Card actions={actions} >
<Meta <Meta
avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>} avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>}
title={<div className={styles.titleWrapper} ><h4 onClick={() => ycore.crouter.native(`@${user}`)} className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <antd.Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4> <div className={styles.PostTags}>{ycore.booleanFix(is_post_pinned)? <antd.Icon type="pushpin" /> : null }</div> </div>} title={<div className={styles.titleWrapper} ><h4 onClick={() => ycore.crouter.native(`@${user}`)} className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4> <div className={styles.PostTags}>{ycore.booleanFix(is_post_pinned)? (<Icons.PushpinFilled /> ): null }</div> </div>}
description={<span className={styles.textAgo}>{ago}</span>} description={<span className={styles.textAgo}>{ago}</span>}
bordered="false" bordered="false"
/> />
{content? <div className={styles.postContent}> <h3 dangerouslySetInnerHTML={{__html: content }} /> </div> : null} {content? <div className={styles.postContent}> <h3 dangerouslySetInnerHTML={{__html: content }} /> </div> : null}
{file? <div className={styles.postContentFILE}>{this.renderPostPlayer(file)}</div> : null } {file? <div className={styles.postContentFILE}>{this.renderPostPlayer(file)}</div> : null }
<div className={styles.ellipsisIcon}><antd.Icon type="ellipsis" /></div> <div className={styles.ellipsisIcon}><Icons.EllipsisOutlined /></div>
</antd.Card> </antd.Card>

20
src/components/PostCreator/index.js
View File

@ -2,8 +2,10 @@ import React from 'react'
import * as antd from 'antd' import * as antd from 'antd'
import * as ycore from 'ycore' import * as ycore from 'ycore'
import styles from './index.less' import styles from './index.less'
import {CustomIcons} from 'components' import {CustomIconss} from 'components'
import { RefreshFeed } from 'components/MainFeed' import { RefreshFeed } from 'components/MainFeed'
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
const { Meta } = antd.Card; const { Meta } = antd.Card;
const userData = ycore.SDCP(); const userData = ycore.SDCP();
@ -30,13 +32,13 @@ class PostCreator extends React.PureComponent{
ShareWithValue(e){ ShareWithValue(e){
switch (e) { switch (e) {
case 'any': case 'any':
return <span><antd.Icon type="global" /> Share with everyone</span> return <span><Icons.GlobalOutlined /> Share with everyone</span>
case 'only_follow': case 'only_follow':
return <span><antd.Icon type="team" /> Share with people I follow</span> return <span><Icons.TeamOutlined /> Share with people I follow</span>
case 'only_followers': case 'only_followers':
return <span><antd.Icon type="usergroup-add" /> Share with people follow me</span> return <span><Icons.UsergroupAddOutlined /> Share with people follow me</span>
case 'private': case 'private':
return <span><antd.Icon type="eye-invisible" /> Dont share, only me</span> return <span><Icons.EyeInvisibleOutlined /> Dont share, only me</span>
default: default:
return <span>Unknown</span> return <span>Unknown</span>
} }
@ -144,14 +146,14 @@ class PostCreator extends React.PureComponent{
<div className={styles.inputWrapper}> <div className={styles.inputWrapper}>
<div className={styles.titleAvatar}><img src={userData.avatar} /></div> <div className={styles.titleAvatar}><img src={userData.avatar} /></div>
<antd.Input.TextArea disabled={this.state.posting? true : false} onPressEnter={this.PublishPost} value={this.state.rawtext} autoSize={{ minRows: 3, maxRows: 5 }} dragable="false" placeholder="What are you thinking?" onChange={this.handleChanges} allowClear maxLength={ycore.DevOptions.MaxLengthPosts} rows={4} /> <antd.Input.TextArea disabled={this.state.posting? true : false} onPressEnter={this.PublishPost} value={this.state.rawtext} autoSize={{ minRows: 3, maxRows: 5 }} dragable="false" placeholder="What are you thinking?" onChange={this.handleChanges} allowClear maxLength={ycore.DevOptions.MaxLengthPosts} rows={4} />
<div><antd.Button disabled={this.state.posting? true : (keys_remaining < 512? false : true)} onClick={this.PublishPost} type="primary" icon={this.state.posting_ok? "check-circle" : (this.state.posting? "loading" : "export")} /></div> <div><antd.Button disabled={this.state.posting? true : (keys_remaining < 512? false : true)} onClick={this.PublishPost} type="primary" icon={this.state.posting_ok? <Icons.CheckCircleOutlined/> : (this.state.posting? <Icons.LoadingOutlined /> : <Icons.ExportOutlined /> )} /></div>
</div> </div>
<div className={styles.progressHandler}><antd.Progress strokeWidth="4px" className={this.state.posting? styles.proccessUnset : (keys_remaining < 512? styles.proccessSet : styles.proccessUnset)} status={this.handleKeysProgressBar()} showInfo={false} percent={percent} /></div> <div className={styles.progressHandler}><antd.Progress strokeWidth="4px" className={this.state.posting? styles.proccessUnset : (keys_remaining < 512? styles.proccessSet : styles.proccessUnset)} status={this.handleKeysProgressBar()} showInfo={false} percent={percent} /></div>
<div className={styles.postExtra} > <div className={styles.postExtra} >
<antd.Button type="ghost"> <antd.Icon type="camera" theme="filled" /></antd.Button> <antd.Button type="ghost"> <Icons.CameraFilled /></antd.Button>
<antd.Button type="ghost"> <antd.Icon type="video-camera" theme="filled" /></antd.Button> <antd.Button type="ghost"> <Icons.VideoCameraFilled /></antd.Button>
<antd.Button onClick={this.handleToggleToolbox} type="ghost"><antd.Icon type="plus" /></antd.Button> <antd.Button onClick={this.handleToggleToolbox} type="ghost"><Icons.PlusCircleOutlined /></antd.Button>
<antd.Dropdown overlay={shareOptionsMenu}> <antd.Dropdown overlay={shareOptionsMenu}>
<a className={styles.shareWith} onClick={e => e.preventDefault()}> <a className={styles.shareWith} onClick={e => e.preventDefault()}>
{this.ShareWithValue(this.state.shareWith)} {this.ShareWithValue(this.state.shareWith)}

11
src/components/UserCard/index.js
View File

@ -2,7 +2,10 @@ import React from 'react'
import * as antd from 'antd' import * as antd from 'antd'
import * as ycore from 'ycore' import * as ycore from 'ycore'
import styles from './index.less' import styles from './index.less'
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
const userData = ycore.SDCP()
const { Meta } = antd.Card; const { Meta } = antd.Card;
// Set default by configuration // Set default by configuration
const emptyPayload = {user: 'User Unknown', ago: 'This User is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' } const emptyPayload = {user: 'User Unknown', ago: 'This User is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' }
@ -16,11 +19,11 @@ class UserCard extends React.PureComponent{
} }
} }
render(){ render(){
const { source, } = this.props const { source, } = this.props
const { username, avatar, about } = source || emptyPayload; const { username, avatar, about, id } = source || emptyPayload;
const DevInfo = `ID #${id} | Developer ${ycore.booleanFix(source.dev)? 'yes' : 'no'} |`
const AdminInfo = `Email ${source.email} | `
return( return(
<div className={styles.cardWrapper}> <div className={styles.cardWrapper}>
<antd.Card > <antd.Card >
@ -30,7 +33,7 @@ class UserCard extends React.PureComponent{
<div className={styles.titleWrapper} > <div className={styles.titleWrapper} >
<h4 onClick={() => ycore.crouter.native(`@${username}`)} className={styles.titleUser}>@{username} </h4> <h4 onClick={() => ycore.crouter.native(`@${username}`)} className={styles.titleUser}>@{username} </h4>
</div>} </div>}
description={<span className={styles.textAgo}>test</span>} description={ycore.booleanFix(userData.dev)? <span className={styles.textAgo}>{DevInfo} {AdminInfo}</span> : null}
bordered="false" bordered="false"
/> />
<div className={styles.postContent}> <h3>{about}</h3></div> <div className={styles.postContent}> <h3>{about}</h3></div>

1
src/components/UserCard/index.less
View File

@ -5,6 +5,7 @@
border-radius: 7px; border-radius: 7px;
max-width: 510px; max-width: 510px;
min-width: 265px; min-width: 265px;
margin: auto;
width: auto; width: auto;
margin: 23px 50px ; margin: 23px 50px ;
:global{ :global{

6
src/components/UserProfile/index.js
View File

@ -5,8 +5,10 @@ import * as antd from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {CustomIcons, MainFeed} from 'components' import {CustomIcons, MainFeed} from 'components'
import { SetHeaderSearchType } from 'components/HeaderSearch' import { SetHeaderSearchType } from 'components/HeaderSearch'
const userData = ycore.SDCP(); import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
const userData = ycore.SDCP();
function isOwnProfile(id){ function isOwnProfile(id){
if(id == userData.username){ if(id == userData.username){
ycore.DevOptions.ShowFunctionsLogs ? console.log('Is your own profile !!'): null ycore.DevOptions.ShowFunctionsLogs ? console.log('Is your own profile !!'): null
@ -33,7 +35,7 @@ const UserHeader = ({ values }) => {
</div> </div>
<div className={styles.contentTitle}> <div className={styles.contentTitle}>
<h1 style={{ marginBottom: '0px' }} >{values.username}<antd.Tooltip title="User Verified">{ycore.booleanFix(values.verified)? <antd.Icon style={{ color: 'blue', verticalAlign:'top' }} component={CustomIcons.VerifiedBadge} /> : null}</antd.Tooltip></h1> <h1 style={{ marginBottom: '0px' }} >{values.username}<antd.Tooltip title="User Verified">{ycore.booleanFix(values.verified)? <Icon style={{ color: 'blue', verticalAlign:'top' }} component={CustomIcons.VerifiedBadge} /> : null}</antd.Tooltip></h1>
<span style={{ fontSize: '14px', fontWeight: '100', lineHeight: '0', marginBottom: '5px' }} dangerouslySetInnerHTML={{__html: values.about }} /> <span style={{ fontSize: '14px', fontWeight: '100', lineHeight: '0', marginBottom: '5px' }} dangerouslySetInnerHTML={{__html: values.about }} />
</div> </div>

18
src/components/YulioID/index.js
View File

@ -2,7 +2,9 @@ import React, { Component } from 'react'
import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore'; import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'dva'; import { connect } from 'dva';
import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd' import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Input, Drawer, Collapse } from 'antd';
import styles from './index.less'; import styles from './index.less';
import formstyle from './formstyle.less' import formstyle from './formstyle.less'
@ -104,7 +106,7 @@ class YulioID extends Component {
{ShowLoading ? ( {ShowLoading ? (
<div style={{ height: '329px' }}> <div style={{ height: '329px' }}>
<div className={styles.spinner__wrapper} id="loadingspn"> <div className={styles.spinner__wrapper} id="loadingspn">
{StateIcon ? (<Icon type={StateIcon} className={StateException? styles.StateIcon_exception : styles.StateIcon} /> ) : (<Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin />)} {StateIcon ? (<LegacyIcon type={StateIcon} className={StateException? styles.StateIcon_exception : styles.StateIcon} /> ) : (<LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin />)}
<div><br/><br/><br/> <div><br/><br/><br/>
<div className={styles.resultbox}> <div className={styles.resultbox}>
<h6 > {StateMessage} </h6> <h6 > {StateMessage} </h6>
@ -117,7 +119,7 @@ class YulioID extends Component {
<div> <div>
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}> <label className={styles.labelform}>
<Icon type="user" style={{ fontSize: '15px' }} />{' '} <LegacyIcon type="user" style={{ fontSize: '15px' }} />{' '}
Username Username
</label> </label>
<FormItem> <FormItem>
@ -138,7 +140,7 @@ class YulioID extends Component {
</div> </div>
<div className={styles.input__wrapper}> <div className={styles.input__wrapper}>
<label className={styles.labelform}> <label className={styles.labelform}>
<Icon type="unlock" style={{ fontSize: '15px' }} />{' '} <LegacyIcon type="unlock" style={{ fontSize: '15px' }} />{' '}
Password Password
</label> </label>
<FormItem> <FormItem>
@ -147,7 +149,7 @@ class YulioID extends Component {
})( })(
<Input.Password <Input.Password
onPressEnter={this.handleEnter} onPressEnter={this.handleEnter}
className={formstyle.inputform} className={styles.inputform}
placeholder="Password" placeholder="Password"
onChange={text => { onChange={text => {
this.handlePassword(text) this.handlePassword(text)
@ -171,8 +173,8 @@ class YulioID extends Component {
Or Or
</h2> </h2>
<div className={styles.moreActions}> <div className={styles.moreActions}>
<Button type="dashed"><Icon type="question-circle" /> Forgotten password </Button> <Button type="dashed"><LegacyIcon type="question-circle" /> Forgotten password </Button>
<Button type="dashed" ><Icon type="user-add" /> Create an account </Button> <Button type="dashed" ><LegacyIcon type="user-add" /> Create an account </Button>
</div> </div>
</div> </div>
@ -182,7 +184,7 @@ class YulioID extends Component {
</main> </main>
</Drawer> </Drawer>
</div> </div>
) );
} }
} }

5
src/components/YulioID/index.less
View File

@ -220,6 +220,11 @@
/*inputs*/ /*inputs*/
.input__wrapper { .input__wrapper {
margin-bottom: 10px; margin-bottom: 10px;
:global{
.ant-col {
width: 100%;
}
}
} }
.inputRG__wrapper { .inputRG__wrapper {
margin-bottom: 0px; margin-bottom: 0px;

4
src/pages/404.js
View File

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

5
src/pages/login/index.less
View File

@ -51,6 +51,11 @@
margin: 0 14px 0 0; margin: 0 14px 0 0;
color: #F9F9F9; color: #F9F9F9;
} }
:global{
.ant-tag {
border-radius: 4px;
}
}
} }
.loginLandingWrapper{ .loginLandingWrapper{
background-color: #F9F9F9; background-color: #F9F9F9;

50
src/pages/s/$search/index.js
View File

@ -4,6 +4,8 @@ import { UserCard } from 'components'
import styles from './styles.less' import styles from './styles.less'
import * as ycore from 'ycore' import * as ycore from 'ycore'
import * as antd from 'antd' import * as antd from 'antd'
import * as Icons from '@ant-design/icons';
import Icon from '@ant-design/icons'
const userData = ycore.SDCP() const userData = ycore.SDCP()
@ -49,22 +51,24 @@ class SearchPageIndexer extends PureComponent {
console.log('Users => ', usersParsed) console.log('Users => ', usersParsed)
return( return(
<div> <div>
<span>Users => </span> <antd.Typography.Title level={2} ><Icons.TeamOutlined /> Users </antd.Typography.Title>
<antd.List <div className={styles.searchEntry}>
grid={{ <antd.List
gutter: 16, grid={{
xs: 1, gutter: 16,
sm: 2, xs: 1,
md: 4, sm: 2,
lg: 4, md: 4,
xl: 6, lg: 4,
xxl: 3, xl: 6,
}} xxl: 3,
dataSource={usersParsed} }}
renderItem={item => ( dataSource={usersParsed}
<UserCard source={item} /> renderItem={item => (
)} <UserCard source={item} />
/> )}
/>
</div>
</div> </div>
) )
} }
@ -78,7 +82,7 @@ class SearchPageIndexer extends PureComponent {
return null return null
} catch (error) { } catch (error) {
console.log(error) console.log(error)
return <h2>Wooups</h2> return <center><h2>Render Error</h2></center>
} }
@ -98,15 +102,17 @@ class SearchPageIndexer extends PureComponent {
console.log(`Search matched! ${location.pathname}`) console.log(`Search matched! ${location.pathname}`)
return( return(
<div> <div>
<h1 className={styles.searchHeader}><antd.Icon type="search" /> Results of {string} </h1> <h1 className={styles.searchHeader}><Icons.SearchOutlined /> Results of {string} </h1>
<antd.Card> <antd.Card>
{this.state.loading? null : this.renderResult(this.state.SearchResult)} <div className={styles.results}>
</antd.Card> {this.state.loading? null : this.renderResult(this.state.SearchResult)}
</div>
</antd.Card>
</div> </div>
) )
} }
return(<div><center> Input Error </center></div>) return(<div><center> Render Error </center></div>)
} }
} }

13
src/pages/s/$search/styles.less
View File

@ -3,5 +3,16 @@
.searchHeader { .searchHeader {
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
font-size: 40px; font-size: 40px;
text-align: center;
margin-top: 7px;
}
.results {
padding: 10px;
}
.searchEntry {
:global{
.antd-card{
margin: auto;
}
}
} }

5
src/pages/settings/components/base.js
View File

@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { List, Icon, Switch, Button, notification } from 'antd'; import { Icon as LegacyIcon } from '@ant-design/compatible';
import { List, Switch, Button, notification } from 'antd';
import { AppSettings } from '../../../../globals/settings.js' import { AppSettings } from '../../../../globals/settings.js'
import { DevOptions, ControlBar } from 'ycore' import { DevOptions, ControlBar } from 'ycore'
import * as ycore from "ycore" import * as ycore from "ycore"
@ -44,7 +45,7 @@ class Base extends Component {
handleControlBar(){ handleControlBar(){
const ListControls = [ const ListControls = [
(<div> (<div>
<Button type="done" icon='save' onClick={() => this.saveChanges()} >Save</Button> <Button type="done" icon={<LegacyIcon type='save' />} onClick={() => this.saveChanges()} >Save</Button>
</div> </div>
) )
] ]

5
src/pages/settings/index.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { GridContent } from '@ant-design/pro-layout'; import { GridContent } from '@ant-design/pro-layout';
import { Menu, Typography, Icon } from 'antd'; import { Icon as LegacyIcon } from '@ant-design/compatible';
import { Menu, Typography } from 'antd';
import styles from './style.less'; import styles from './style.less';
import NotificationView from './components/notification.js'; import NotificationView from './components/notification.js';
@ -53,7 +54,7 @@ class GeneralSettings extends React.Component {
const { mode, selectKey } = this.state; const { mode, selectKey } = this.state;
return ( return (
<div> <div>
<Title className={styles.titleHead}><Icon type="setting" /> Settings</Title> <Title className={styles.titleHead}><LegacyIcon type="setting" /> Settings</Title>
<GridContent> <GridContent>
<div <div
className={styles.main} className={styles.main}