This commit is contained in:
srgooglo 2020-02-09 02:20:44 +01:00
parent df0f4b5d9b
commit 1279fcc3db
12 changed files with 110 additions and 69 deletions

View File

@ -44,7 +44,6 @@ module.exports = {
},
DevOptions: {
defaultSettings: [{id: 'strict_lightMode', value: false}, {id: 'force_collapse', value: false}, {id: 'force_showDevLogs', value: true}],
// Global Behaviors
InfiniteLoading: false,
InfiniteLogin: false,

View File

@ -1,5 +1,6 @@
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 test = () => (' NOthinginhere ')
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 CustomIcons = {VerifiedBadge, test}
const CustomIcons = {VerifiedBadge, CommonThings}
export default CustomIcons

View File

@ -1,5 +1,5 @@
import React, { PureComponent, Fragment } from 'react'
import { Menu, Icon, Layout, Avatar, Popover, Badge, List, Switch, Tooltip } from 'antd'
import { Menu, Icon, Layout, Avatar, Popover, Badge, List, Switch, Tooltip, Dropdown, Button } from 'antd'
import { Trans, withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro'
import classnames from 'classnames'
@ -13,7 +13,12 @@ import moment from 'moment'
@withI18n()
class Header extends PureComponent {
constructor(props){
super(props),
this.state = {
createMenuVisible: false,
}
}
isDarkMode = () => {
const {theme} = this.props
if (theme == "light") {
@ -21,6 +26,19 @@ class Header extends PureComponent {
}
return true;
}
handleCreateMenuVisible() {
this.setState({ createMenuVisible: !this.state.createMenuVisible });
}
handleOpenMenu() {
let ListControls = [
(<div>
<Button type="dashed" icon="close" shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
</div>
)
]
ycore.ControlBar.set(ListControls)
}
render() {
const {
i18n,
@ -33,6 +51,7 @@ class Header extends PureComponent {
onAllNotificationsRead,
} = this.props
const notificationIcon = (
<Popover
placement="bottomRight"
@ -96,7 +115,7 @@ class Header extends PureComponent {
<Tooltip title={'Search'}><a target="_blank" href="" rel="noopener noreferrer"><Icon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
</div>
<div className={styles.rightContainer}>
<Tooltip title={'New'}><a target="_blank" href="" rel="noopener noreferrer"><Icon type="plus" className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
<Tooltip title={'Create'}><Icon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
{notificationIcon}
</div>
</Layout.Header>

View File

@ -1,5 +1,12 @@
@import '~themes/vars.less';
.createMenu {
width: 30px;
margin: 0 auto 0 auto;
height: 190px;
}
.brand {
display: flex;
vertical-align: middle;
@ -201,4 +208,26 @@
}
}
}
.createMenuPopover {
:global {
.ant-popover-inner {
background-color: transparent;
box-shadow: unset;
}
.ant-popover-inner-content {
padding: 0;
}
.ant-popover-arrow {
display: none;
}
.ant-list-item-content {
flex: 0;
margin-left: 16px;
}
}
}

View File

@ -124,7 +124,7 @@ class R_Sider extends PureComponent {
<Trans>Admin Area</Trans>
</Menu.Item>
:
null
undefined
}
</Menu>

View File

@ -1,9 +1,9 @@
import React from 'react'
import * as ycore from 'ycore'
import * as antd from 'antd'
import { CustomIcons } from 'components'
import styles from './index.less'
const { SubMenu } = antd.Menu;
var userData = ycore.SDCP()
class MainSidebar extends React.Component {
@ -21,41 +21,35 @@ class MainSidebar extends React.Component {
render(){
return(
<div className={styles.main_menuWrapper}>
<antd.Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
>
<antd.Menu.Item className={styles.profileKey} key="profile">
<antd.Avatar size='small' src={userData.avatar} />
<span>{userData.username}</span>
</antd.Menu.Item>
<antd.Divider orientation="left"><antd.Icon type="notification" /> <span>Feed</span></antd.Divider>
<antd.Menu >
<antd.Menu.Item key="main_feed_key">
<antd.Icon type="home" />
<antd.Icon theme="filled" style={{ color: '#4d91ea' }} type="home" />
<span>News Feed</span>
</antd.Menu.Item>
<antd.Menu.Item key="albums_key">
<antd.Icon type="picture" />
<antd.Icon theme="filled" style={{ color: '#8bc34a' }} type="picture" />
<span>Albums</span>
</antd.Menu.Item>
<antd.Menu.Item key="saved_posts_key">
<antd.Icon type="save" />
<antd.Icon theme="filled" style={{ color: '#673ab7' }} type="save" />
<span>Saved Posts</span>
</antd.Menu.Item>
<antd.Menu.Item key="groups_key">
<antd.Icon type="team" />
<antd.Icon style={{ color: '#03A9F4' }} type="team" />
<span>Groups</span>
</antd.Menu.Item>
<antd.Menu.Item key="events_key">
<antd.Icon type="schedule" />
<antd.Icon theme="filled" style={{ color: '#f25e4e' }} type="schedule" />
<span>Events</span>
</antd.Menu.Item>
</antd.Menu>
<antd.Divider orientation="left"><antd.Icon type="compass" /> <span>Explore</span></antd.Divider>
<antd.Menu.Item key="5"><antd.Icon type="star" /> Popular Posts</antd.Menu.Item>
<antd.Menu.Item key="6"><antd.Icon type="eye" /> Discover</antd.Menu.Item>
<antd.Menu.Item key="7"><antd.Icon type="dollar" /> Fundings</antd.Menu.Item>
<antd.Menu.Item key="8"><antd.Icon type="file-done" /> Common Things</antd.Menu.Item>
<antd.Menu>
<antd.Menu.Item key="5"><antd.Icon theme="filled" style={{ color: '#ff7a45' }} type="fire" /><span>Popular Posts</span></antd.Menu.Item>
<antd.Menu.Item key="6"><antd.Icon theme="filled" style={{ color: '#e91e63' }} type="eye" /><span>Discover</span></antd.Menu.Item>
<antd.Menu.Item key="7"><antd.Icon style={{ color: '#673AB7' }} type="dollar" /><span>Fundings</span></antd.Menu.Item>
<antd.Menu.Item key="8"><antd.Icon theme="filled" style={{ color: '#ff5991' }} component={CustomIcons.CommonThings} /><span>Common Things</span></antd.Menu.Item>
</antd.Menu>
</div>
)

View File

@ -1,3 +1,5 @@
@import '~themes/vars.less';
.main_menuWrapper{
position: absolute;
left: 2%;
@ -5,6 +7,10 @@
top: 70px;
width: 20vw;
vertical-align: middle;
background-color: #fff;
border: 1px rgba(128, 128, 128, 0.11) solid;
border-radius: 10px;
font-family: "Poppins", sans-serif;
:global {
.ant-menu{
background-color: transparent;
@ -14,13 +20,14 @@
margin-bottom: 0;
}
.ant-menu-item{
margin-left: 15px;
height: 28px;
line-height: 28px;
}
.ant-divider-horizontal.ant-divider-with-text-center, .ant-divider-horizontal.ant-divider-with-text-left, .ant-divider-horizontal.ant-divider-with-text-right {
display: table;
margin: 7px 0;
color: rgba(0, 0, 0, 0.85);
color: rgba(0, 0, 0, 0.712);
font-weight: 430;
font-size: 13px;
white-space: nowrap;
@ -38,9 +45,10 @@
}
.profileKey{
:global{
padding-left: 0;
}
span{
margin: 0 0 0 5px;
padding-left: -0;
.ant-avatar {
margin: 0 5px 0 -15px;
}
}
}

View File

@ -6,10 +6,6 @@ import {CustomIcons} from 'components'
const { Meta } = antd.Card;
// Set default by configuration
const emptyPayload = {user: 'Post Empty', ago: 'This Post is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' }
const defaultActions = [<antd.Icon type="heart" className={styles.likebtn} key="like" />,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />]
class PostCreator extends React.PureComponent{
constructor(props){
super(props),
@ -75,7 +71,7 @@ class PostCreator extends React.PureComponent{
}
PublishPost = (e) => {
const { rawtext } = this.state;
const { refreshPull } = this.props
const { refreshPull, toggleShow } = this.props
if(!rawtext){
return null
@ -95,10 +91,12 @@ class PostCreator extends React.PureComponent{
const urlObj = `${ycore.endpoints.new_post}${ycore.GetUserToken.decrypted().UserToken}`
fetch(urlObj, requestOptions)
.then(response => {
console.log(response)
ycore.DevOptions.ShowFunctionsLogs? console.log(response) : null
this.setState({ posting_ok: true, posting: false, rawtext: ''})
refreshPull()
setTimeout( () => { this.setState({ posting_ok: false }) }, 1000)
refreshPull()
// console.warn(`[EXCEPTION] refreshPull or/and toogleShow is not set, the controller handlers not working...`)
})
.catch(error => console.log('error', error));
}

View File

@ -1,9 +1,9 @@
.cardWrapper{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
border-radius: 7px;
max-width: 70%;
min-width: 312px;
width: 50.6vw;
max-width: 510px;
min-width: 265px;
width: auto;
margin: 23px auto 50px auto;
:global{
.ant-card-meta-detail > div:not(:last-child){
@ -16,7 +16,6 @@
}
.ant-card-body {
padding: 13px 0 5px 0;
transition: height 150ms linear;
}
.ant-card-actions {
border-top: 0;

View File

@ -99,7 +99,6 @@ class PrimaryLayout extends PureComponent {
// MenuParentId is equal to -1 is not a available menu.
const menus = newRouteList.filter(_ => _.menuParentId !== '-1')
const headerProps = {
menus,
theme,
@ -119,14 +118,6 @@ class PrimaryLayout extends PureComponent {
},
}
const LeftSiderProps = {
theme,
menus,
isMobile,
collapsed,
onCollapseChange,
}
const RightSiderProps = {
theme,
collapsed,
@ -138,7 +129,9 @@ class PrimaryLayout extends PureComponent {
})
},
}
const ContainerProps = {
theme,
}
const MobileWarning = () =>{
if (resbypass == false) {
if (isMobile == true) {
@ -161,7 +154,7 @@ class PrimaryLayout extends PureComponent {
<div className={styles.container}>
<div style={{ paddingTop: config.fixedHeader ? 72 : 0 }} id="primaryLayout" >
<Header {...headerProps} />
<Content className={styles.content}>
<Content {...ContainerProps} className={styles.content}>
{children}
</Content>
</div>
@ -170,8 +163,6 @@ class PrimaryLayout extends PureComponent {
</Layout>
</Fragment>
)
}
}

View File

@ -12,6 +12,7 @@ class Main extends React.Component {
this.state = {
feedRaw: '',
loading: true,
createPost: true,
}
}
@ -19,37 +20,36 @@ class Main extends React.Component {
ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false }))
}
handleRefreshList(){
this.setState({ createPost: !this.state.createPost })
ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false }))
}
renderFeedPosts(){
const {feedRaw} = this.state
try {
const feedParsed = JSON.parse(feedRaw)['data']
return (
feedParsed.map(item=> {
const {postText, post_time, publisher, postFile, postFileName} = item
const {id, postText, post_time, publisher, postFile, postFileName} = item
const paylodd = {user: publisher.username, ago: post_time, avatar: publisher.avatar, content: postText, file: postFile, postFileName: postFileName, publisher: publisher }
ycore.DevOptions.ShowFunctionsLogs? console.log([item], paylodd) : null
return <PostCard payload={paylodd} />
return <PostCard payload={paylodd} key={id} />
})
)
} catch (err) {
ycore.notifyError(err)
const paylodd = {user: 'Error', ago: '', avatar: '', content: 'Woops an error spawns here :/, maybe reloading?', publisher: '' }
const paylodd = {user: 'Error', ago: '', avatar: '', content: 'Error displaying data :/', publisher: '' }
return <PostCard payload={paylodd} />
}
}
render(){
const { loading } = this.state;
const { loading, createPost } = this.state;
console.log('createPost =>', createPost)
return (
<div>
<MainSidebar />
<PostCreator refreshPull={() => this.handleRefreshList()} />
{createPost? <PostCreator refreshPull={() => {this.handleRefreshList()}} /> : null}
{loading? <antd.Card style={{ maxWidth: '26.5vw', margin: 'auto' }} ><antd.Skeleton avatar paragraph={{ rows: 4 }} active /></antd.Card> : <div className={styles.PostsWrapper}> {this.renderFeedPosts()} </div>}
</div>
)

View File

@ -203,6 +203,9 @@ export const asyncSDCP = {
}
};
export const ControlBar = {
setCreate: (e) =>{
},
set: (e) => {
SetControls(e)
},