From 9622b7718c82414cb2d11426dcaa8a06b2c416fd Mon Sep 17 00:00:00 2001 From: srgooglo Date: Sat, 12 Sep 2020 23:04:02 +0200 Subject: [PATCH] update: Postcreator improvemt --- src/components/Icons/custom.js | 9 +- src/components/Icons/index.js | 2 +- src/components/Layout/ControlBar/index.js | 60 -------- src/components/Layout/ControlBar/index.less | 31 ---- src/components/Layout/Sider/default/index.js | 4 +- .../Layout/Sider/default/index.less | 4 +- src/components/Layout/index.js | 3 +- src/components/PostCreator/index.js | 137 +++++++++--------- src/components/index.js | 4 +- src/layouts/PrimaryLayout.js | 11 +- src/pages/settings/components/base.js | 1 - 11 files changed, 80 insertions(+), 186 deletions(-) delete mode 100644 src/components/Layout/ControlBar/index.js delete mode 100644 src/components/Layout/ControlBar/index.less diff --git a/src/components/Icons/custom.js b/src/components/Icons/custom.js index b233ac18..add1bb67 100644 --- a/src/components/Icons/custom.js +++ b/src/components/Icons/custom.js @@ -1,8 +1 @@ -export const VerifiedBadge = () => ( ) -export const Patreon = () => ( - - - - - -) +export const VerifiedBadge = () => ( ) \ No newline at end of file diff --git a/src/components/Icons/index.js b/src/components/Icons/index.js index 72af797d..352e82b1 100644 --- a/src/components/Icons/index.js +++ b/src/components/Icons/index.js @@ -1,4 +1,4 @@ export * from 'feather-reactjs' export * from '@ant-design/icons' export * from './custom' -export * from '@icons-pack/react-simple-icons' +export * from '@icons-pack/react-simple-icons' \ No newline at end of file diff --git a/src/components/Layout/ControlBar/index.js b/src/components/Layout/ControlBar/index.js deleted file mode 100644 index 11ce8776..00000000 --- a/src/components/Layout/ControlBar/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react' -import * as antd from 'antd' -import styles from './index.less' -import classnames from 'classnames' - -import Radium, { StyleRoot } from 'radium' -import { fadeInUp, bounceOutDown } from 'react-animations' -const animationStyles = { - fadeInUp: { - animation: 'x 0.5s', - animationName: Radium.keyframes(fadeInUp, 'fadeInUp'), - }, - bounceOutDown: { - animation: 'x 1s', - animationName: Radium.keyframes(bounceOutDown, 'bounceOutDown'), - }, -} - -export const ControlController = { - set: (e) => { - if (!window.ControlComponent.state.active) { - window.ControlComponent.setState({ fadein: true }) - } - window.ControlComponent.setState({ active: true, render: e }) - }, - close: () => { - window.ControlComponent.setState({ fadein: false }) - setTimeout(() => window.ControlComponent.setState({ active: false, render: null }), 1000) - } -} - -export default class Control extends React.PureComponent { - constructor(props) { - super(props); - this.state = { - active: false, - fadein: true, - }; - window.ControlComponent = this; - } - - - render() { - const { render, active, fadein } = this.state - const isMobile = this.props.mobile? this.props.mobile : false - return active ? ( - -
- - {render} - -
- - ) : null - } -} diff --git a/src/components/Layout/ControlBar/index.less b/src/components/Layout/ControlBar/index.less deleted file mode 100644 index af088824..00000000 --- a/src/components/Layout/ControlBar/index.less +++ /dev/null @@ -1,31 +0,0 @@ -@import '~theme/index.less'; - -.ControlCard { - overflow: hidden; - background-color: rgba(0, 0, 0, 0.1); - width: auto; - max-width: 60%; - padding: 0 5px; - margin: 0 0 0 50%; - height: auto; - position: absolute; - z-index: 10000; - bottom: 0; - text-align: center; - - &.mobile{ - top:0; - bottom: unset; - } - - :global { - .ant-card-body { - padding: 5px; - } - - .ant-btn { - background-color: rgba(0, 0, 0, 0.1); - margin: 3px; - } - } -} \ No newline at end of file diff --git a/src/components/Layout/Sider/default/index.js b/src/components/Layout/Sider/default/index.js index 9c0b3a8a..e5c2a02c 100644 --- a/src/components/Layout/Sider/default/index.js +++ b/src/components/Layout/Sider/default/index.js @@ -37,7 +37,7 @@ export default class Sider_Default extends React.PureComponent { width="175px" style={{ flex:'unset', maxWidth: 'unset', minWidth: '175px', width: '100%'}} > -
+
handleClickMenu({key: ''})} src={logo} @@ -54,7 +54,7 @@ export default class Sider_Default extends React.PureComponent { {this.renderMenus(this.state.menus, "top")} -
+
({ app })) class PostCreator extends React.PureComponent { @@ -23,7 +55,7 @@ class PostCreator extends React.PureComponent { rawText: '', posting: false, postingResult: false, - shareWith: 'any', + privacity: 0, uploader: false, uploaderFile: null, @@ -47,7 +79,7 @@ class PostCreator extends React.PureComponent { if (info.file.status === 'done') { this.setState({ uploaderFileOrigin: info.file.originFileObj, uploader: false }) - core.getBase64(info.file.originFileObj, fileURL => { + imageToBase64(info.file.originFileObj, fileURL => { this.setState({ uploaderFile: fileURL, loading: false }) }) } @@ -102,7 +134,7 @@ class PostCreator extends React.PureComponent { componentDidMount() { // Validate for render - if (this.props.app.userData) { + if (this.props.app.session_data) { this.setState({renderValid: true}) } @@ -116,7 +148,7 @@ class PostCreator extends React.PureComponent { // let a; // a = item.getAsFile() // _this.setState({ uploaderFileOrigin: a }) - // core.ReadFileAsB64(a, res => { + // ReadFileAsB64(a, res => { // _this.setState({ uploaderFile: res }) // }) // } else { @@ -142,58 +174,29 @@ class PostCreator extends React.PureComponent { return isUploadedFile || isTypedSomething } + renderShareOptions = () => { + return PrivacyList.map(e => { + if (!e) return null + return( + + {e.icon? React.createElement(Icons[e.icon]) : null} {e.decoratorText? e.decoratorText : "Bruh"} + + ) + }) + } + render() { - const { userData } = this.props.app + const userData = this.props.app.session_data const { textLenght, uploaderFile } = this.state - const GetPostPrivacy = { - bool: (e) => { - switch (e) { - case 'any': - return '0' - case 'only_followers': - return '1' - case 'only_follow': - return '2' - case 'private': - return '3' - default: - return '0' - } - }, - decorator: (e) => { - switch (e) { - case 'any': - return Share with everyone - case 'only_follow': - return Share with people I follow - case 'only_followers': - return Share with people follow me - case 'private': - return Dont share, only me - default: - return Unknown - } - }, + const ShareOptionsMenu = () => { + return( + this.setState({ privacity: e.key })}> + {this.renderShareOptions()} + + ) } - const shareOptionsMenu = ( - this.setState({ shareWith: key })}> - - {GetPostPrivacy.decorator('any')} - - - {GetPostPrivacy.decorator('only_follow')} - - - {GetPostPrivacy.decorator('only_followers')} - - - {GetPostPrivacy.decorator('private')} - - - ) - const PostCreator_Uploader = () => { return( @@ -301,19 +302,11 @@ class PostCreator extends React.PureComponent { ) } - const PostCreator_Invalid = () => { - return( -
-

This component cant be displayed!

- -
- ) - } - + if(!this.state.renderValid) return null return (
- { this.state.renderValid? : } +
) diff --git a/src/components/index.js b/src/components/index.js index 689b4bca..5711c474 100755 --- a/src/components/index.js +++ b/src/components/index.js @@ -8,7 +8,7 @@ import * as Feather from 'feather-reactjs' import Invalid from './Invalid' // App Layout Components -import * as MyLayout from './Layout/index.js' +import * as AppLayout from './Layout/index.js' import PageTransition from './PageTransition' // User Components @@ -19,13 +19,13 @@ import PostCreator from './PostCreator' // Mix & Export all export { + AppLayout, Invalid, Icons, Feather, About, MediaPlayer, PageTransition, - MyLayout, Loader, PostCreator } diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index 481f402a..ec6d67f6 100755 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -4,7 +4,7 @@ import React from 'react' import PropTypes from 'prop-types' import {withRouter, connect} from 'umi' import { - MyLayout, + AppLayout, } from 'components' import { enquireScreen, unenquireScreen } from 'enquire-js' import store from 'store' @@ -17,7 +17,7 @@ import * as antd from 'antd' import styles from './PrimaryLayout.less' const { Content } = antd.Layout -const { Sider, Control, Overlay } = MyLayout +const { Sider, Overlay } = AppLayout const isActive = (key) => { return key? key.active : false } @withRouter @@ -58,6 +58,8 @@ class PrimaryLayout extends React.Component { const { collapsed, isMobile } = this.state const { onCollapseChange } = this const currentTheme = theme.get() + const app_theme = isActive(currentTheme["darkmode"])? "dark" : null + const breakpoint = { xs: '480px', sm: '576px', @@ -72,19 +74,18 @@ class PrimaryLayout extends React.Component { isMobile, collapsed, onCollapseChange, - theme: isActive(currentTheme["darkmode"])? "dark" : null + app_theme } const OverlayProps = { breakpoint, isMobile, - theme: isActive(currentTheme["darkmode"])? "dark" : null + app_theme } window.DarkMode = isActive(currentTheme["darkmode"])? true : false return ( - {isActive(currentTheme['backgroundImage']) ?