mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
updated & cleaned layout components, other refactors
This commit is contained in:
srgooglo
parent
89ebf3e4e8
commit
d50aeb14fc
@ -1,15 +1,14 @@
|
||||
import * as React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import { LoadingOutlined } from 'components/Icons'
|
||||
import styles from '../index.less'
|
||||
|
||||
export interface Card_Component_props {
|
||||
interface CardComponent_props {
|
||||
style: object;
|
||||
type: string;
|
||||
children: any;
|
||||
}
|
||||
|
||||
const Card_Component = (props: Card_Component_props) => {
|
||||
const CardComponent = (props: CardComponent_props) => {
|
||||
let frag;
|
||||
const rd_error = <antd.Result status="error" title="Failed Gathering, reload the page" />
|
||||
const rd_loading = <LoadingOutlined spin />
|
||||
@ -19,16 +18,16 @@ const Card_Component = (props: Card_Component_props) => {
|
||||
if (!props.type) frag = (props.children)
|
||||
|
||||
return(
|
||||
<div {...props} style={props.style} className={styles.render_component}>
|
||||
<div {...props} style={props.style} className="cardComponent_wrapper">
|
||||
{frag}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Card_Component.defaultProps = {
|
||||
CardComponent.defaultProps = {
|
||||
style: null,
|
||||
type: null,
|
||||
children: <h3>Empty</h3>
|
||||
}
|
||||
|
||||
export default Card_Component
|
||||
export default CardComponent
|
||||
@ -1,36 +1,36 @@
|
||||
import React from 'react'
|
||||
import styles from './__searchBar.less'
|
||||
import {newSearch} from "core/models/overlay"
|
||||
import { newSearch } from "core/models/overlay"
|
||||
|
||||
export default class __searchBar extends React.Component{
|
||||
state = {
|
||||
value: '',
|
||||
}
|
||||
openSearcher = () => {
|
||||
const { value } = this.state
|
||||
if (value.length < 1) return false
|
||||
if (value == /\s/) return false
|
||||
newSearch({ keyword: value });
|
||||
}
|
||||
onChange = e => {
|
||||
const { value } = e.target
|
||||
this.setState({ value: value })
|
||||
}
|
||||
export default class __searchBar extends React.Component {
|
||||
state = {
|
||||
value: '',
|
||||
}
|
||||
openSearcher = () => {
|
||||
const { value } = this.state
|
||||
if (value.length < 1) return false
|
||||
if (value == /\s/) return false
|
||||
newSearch({ keyword: value });
|
||||
}
|
||||
onChange = e => {
|
||||
const { value } = e.target
|
||||
this.setState({ value: value })
|
||||
}
|
||||
|
||||
handleKey = (e) =>{
|
||||
if (e.key == 'Enter') {
|
||||
this.openSearcher()
|
||||
}
|
||||
}
|
||||
render(){
|
||||
return(
|
||||
<div className={styles.search_bar}>
|
||||
<input
|
||||
placeholder="Search on Comty..."
|
||||
onChange={this.onChange}
|
||||
onKeyPress={this.handleKey}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
handleKey = (e) => {
|
||||
if (e.key == 'Enter') {
|
||||
this.openSearcher()
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className={styles.search_bar}>
|
||||
<input
|
||||
placeholder="Search on Comty..."
|
||||
onChange={this.onChange}
|
||||
onKeyPress={this.handleKey}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,5 @@
|
||||
import Primary from './layout/Primary.tsx'
|
||||
import Secondary from './layout/Secondary.tsx'
|
||||
import Card_Component from './Card_Component.tsx'
|
||||
|
||||
import __searchBar from './cards/__searchBar'
|
||||
import __trendings from './cards/__trendings'
|
||||
import __suggestions from './cards/__suggestions'
|
||||
|
||||
export {
|
||||
Card_Component,
|
||||
Secondary,
|
||||
Primary,
|
||||
__searchBar,
|
||||
__trendings,
|
||||
__suggestions,
|
||||
Primary
|
||||
}
|
||||
@ -1,8 +1,6 @@
|
||||
import * as React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import { LeftOutlined } from 'components/Icons'
|
||||
import styles from '../../index.less'
|
||||
import classnames from 'classnames'
|
||||
import { LeftOutlined } from 'components/Icons'
|
||||
import { Swapper } from '../../index.js'
|
||||
|
||||
export interface overlay_primary_props {
|
||||
@ -14,28 +12,14 @@ export interface overlay_primary_props {
|
||||
closable: boolean;
|
||||
}
|
||||
|
||||
|
||||
const renderExit = (
|
||||
<div className={styles.exit_button}>
|
||||
<antd.Button type="ghost" icon={<LeftOutlined />} onClick={() => Swapper.closeAll()}> Back </antd.Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
const renderExit = <antd.Button className={window.classToStyle("overlay_backButton")}type="ghost" icon={<LeftOutlined />} onClick={() => Swapper.closeAll()}> Back </antd.Button>
|
||||
|
||||
const overlay_primary = (props: overlay_primary_props) => {
|
||||
const { fragment, mode, isMobile } = props
|
||||
return (
|
||||
<div
|
||||
id="overlay_primary"
|
||||
className={classnames(styles.overlay_primary_wrapper, {
|
||||
[styles.full]: mode === 'full'? true : false,
|
||||
[styles.half]: mode === 'half'? true : false,
|
||||
})}
|
||||
>
|
||||
<div className={styles.renderBody}>
|
||||
{props.mode === 'full' || props.mode === 'half'? renderExit : null}
|
||||
<React.Fragment>{fragment}</React.Fragment>
|
||||
</div>
|
||||
<div focus="no_loose" className={window.classToStyle("overlay_content_body")}>
|
||||
{props.mode === 'full' || props.mode === 'half' ? renderExit : null}
|
||||
<React.Fragment>{fragment}</React.Fragment>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import { LeftOutlined } from 'components/Icons'
|
||||
import styles from '../../index.less'
|
||||
import classnames from 'classnames'
|
||||
|
||||
export interface __sec_props {
|
||||
y?: number;
|
||||
getRef: React.Ref<HTMLDivElement>;
|
||||
isMobile: boolean;
|
||||
functs: any;
|
||||
render: any;
|
||||
type: any;
|
||||
}
|
||||
|
||||
const isOpen = (props: __sec_props) => {
|
||||
const t_full = props.type === 'full_open'? true : false
|
||||
const t_def = props.type === 'active'? true: false
|
||||
if (t_full || t_def ) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const renderExit = (props: __sec_props) => {
|
||||
const {functs} = props
|
||||
if (isOpen) {
|
||||
return <div className={styles.exit_button}>
|
||||
<antd.Button type="ghost" icon={<LeftOutlined />} onClick={() => functs.Swapper.close()}> Back </antd.Button>
|
||||
</div>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const __sec = (props: __sec_props) => {
|
||||
const { render, getRef, y, type, isMobile } = props
|
||||
const t_full = type == 'full_open'? true : false
|
||||
const t_def = type == 'active'? true: false
|
||||
return (
|
||||
<div
|
||||
id="Overlay_layout__sec"
|
||||
className={classnames(styles.Overlay_container_2, {
|
||||
[styles.mobile]: isMobile,
|
||||
[styles.active]: t_def,
|
||||
[styles.full_open]: t_full,
|
||||
})}
|
||||
style={{
|
||||
top: y,
|
||||
}}
|
||||
ref={getRef}
|
||||
>
|
||||
|
||||
<div className={styles.sec_body}>
|
||||
{renderExit}
|
||||
<React.Fragment>
|
||||
{render}
|
||||
</React.Fragment>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
__sec.defaultProps = {
|
||||
render: null,
|
||||
y: 0,
|
||||
isMobile: false,
|
||||
functs: null,
|
||||
type: null,
|
||||
}
|
||||
|
||||
export default __sec
|
||||
@ -2,17 +2,10 @@ import React from 'react'
|
||||
import verbosity from 'core/libs/verbosity'
|
||||
import { connect } from 'umi'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.less'
|
||||
import ErrorHandler from 'core/libs/errorhandler'
|
||||
import * as antd from 'antd'
|
||||
import { router } from 'core/libs'
|
||||
import {
|
||||
Primary,
|
||||
Secondary,
|
||||
Card_Component,
|
||||
__searchBar
|
||||
} from './components'
|
||||
|
||||
import {
|
||||
Primary
|
||||
} from './components'
|
||||
|
||||
export let Swapper = {
|
||||
isOpen: (...props) => {
|
||||
@ -27,17 +20,16 @@ export let Swapper = {
|
||||
}
|
||||
|
||||
@connect(({ app }) => ({ app }))
|
||||
export default class Overlay extends React.PureComponent {
|
||||
export default class Overlay extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: true,
|
||||
};
|
||||
this.setWrapperRef = this.setWrapperRef.bind(this);
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this);
|
||||
this.keydownFilter = this.keydownFilter.bind(this);
|
||||
window.OverlayComponent = this;
|
||||
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: true,
|
||||
};
|
||||
this.setWrapperRef = this.setWrapperRef.bind(this);
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this);
|
||||
this.keydownFilter = this.keydownFilter.bind(this);
|
||||
window.OverlayComponent = this;
|
||||
}
|
||||
|
||||
swap = {
|
||||
@ -61,8 +53,8 @@ export default class Overlay extends React.PureComponent {
|
||||
payload: {
|
||||
overlayActive: true,
|
||||
overlayElement: payload
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,58 +79,45 @@ export default class Overlay extends React.PureComponent {
|
||||
document.removeEventListener('mousedown', this.handleClickOutside);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Set the wrapper ref
|
||||
*/
|
||||
/**
|
||||
* Set the wrapper ref
|
||||
*/
|
||||
setWrapperRef(node) {
|
||||
this.wrapperRef = node;
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { overlayElement, overlayActive, session_data, session_valid, session_uuid } = this.props.app
|
||||
const mainElement = (
|
||||
<div>
|
||||
<div><__searchBar /></div>
|
||||
<div className={styles.mainElement}>
|
||||
{session_valid? <Card_Component onClick={() => router.goProfile(session_data["username"])} style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} ><antd.Avatar src={session_data.avatar} shape="square" /> <div style={{ marginLeft: '10px' }}> @{session_data.username}<span style={{ fontSize: "11px" }}>#{session_uuid}</span></div></Card_Component> : null }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
const renderElement = () => {
|
||||
const { overlayElement, overlayActive } = this.props.app
|
||||
|
||||
if (overlayElement && overlayActive) {
|
||||
const renderProps = {id: overlayElement.id, mode: overlayElement.mode, fragment: overlayElement.element}
|
||||
switch (overlayElement.position) {
|
||||
case 'primary':{
|
||||
return <Primary {...renderProps} />
|
||||
}
|
||||
case 'secondary':{
|
||||
return <Secondary {...renderProps} />
|
||||
}
|
||||
default:{
|
||||
return ErrorHandler({ code: 210 })
|
||||
}
|
||||
}
|
||||
const isOnMode = (mode) => {
|
||||
if (!overlayActive || typeof (overlayElement.mode) == "undefined") {
|
||||
return false
|
||||
}
|
||||
|
||||
return(
|
||||
<Primary id="main" fragment={mainElement} />
|
||||
)
|
||||
|
||||
return overlayElement.mode === mode ? true : false
|
||||
}
|
||||
|
||||
const renderElement = () => {
|
||||
if (overlayElement && overlayActive) {
|
||||
const renderProps = { id: overlayElement.id, mode: overlayElement.mode, fragment: overlayElement.element }
|
||||
return <Primary {...renderProps} />
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="Overlay_layout"
|
||||
ref={this.setWrapperRef}
|
||||
className={classnames(styles.Overlay_wrapper, {[styles.undocked]: window.isMobile})}
|
||||
>
|
||||
{renderElement()}
|
||||
</div>
|
||||
</>
|
||||
<div
|
||||
id="overlay"
|
||||
ref={this.setWrapperRef}
|
||||
focus="no_loose"
|
||||
className={classnames(window.classToStyle("overlay_wrapper"), {
|
||||
["full"]: isOnMode("full"),
|
||||
["half"]: isOnMode("half"),
|
||||
})}
|
||||
>
|
||||
{renderElement()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,174 +0,0 @@
|
||||
@import '~theme/index.less';
|
||||
|
||||
.render_component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
|
||||
|
||||
h2,h3,h4{
|
||||
color: #9597A1;
|
||||
font-family: Netflix Sans;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.exit_button{
|
||||
position: relative;
|
||||
z-index: 52;
|
||||
|
||||
left: 0;
|
||||
|
||||
//padding: 10px 0px 0 15px;
|
||||
:global{
|
||||
.ant-btn{
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Overlay_wrapper {
|
||||
user-select: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
|
||||
height: 100%;
|
||||
// 150px extra for left-sider
|
||||
width: 87%;
|
||||
backdrop-filter: blur(2px);
|
||||
&.mobile{
|
||||
overflow-y: scroll;
|
||||
flex-direction: column;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&.active{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.undocked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.expand{
|
||||
max-width: calc(100% + 150px);
|
||||
}
|
||||
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
}
|
||||
|
||||
.overlay_primary_wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
max-width: @Overlay_wrapper_maxwidth;
|
||||
min-width: 200px;
|
||||
|
||||
display: flex;
|
||||
z-index: 50;
|
||||
|
||||
right: 0;
|
||||
padding: 30px 30px 30px 35px;
|
||||
|
||||
|
||||
@media (max-width: @screen-md) {
|
||||
padding: 30px 5px;
|
||||
}
|
||||
|
||||
color: @Overlay_container1_def_color;
|
||||
|
||||
.renderBody{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
> div {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&.half {
|
||||
background-color: #2d2d2d;
|
||||
color: @Overlay_container1_active_color;
|
||||
max-width: calc(100% + 150px);
|
||||
}
|
||||
|
||||
&.full{
|
||||
max-width: none;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-btn {
|
||||
color: @Overlay_container_1_btn_color;
|
||||
background-color: @Overlay_container_1_btn_backgroud;
|
||||
border-color: transparent;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.ant-btn:hover {
|
||||
box-shadow: @Overlay_container_1_btn_shadow;
|
||||
transition: all @__Global_Components_transitions_dur linear;
|
||||
}
|
||||
}
|
||||
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
border-radius: @__Global_layout_border-rd;
|
||||
}
|
||||
|
||||
|
||||
.overlay_secondary_wrapper {
|
||||
position: absolute;
|
||||
z-index: 55;
|
||||
height: 100vh;
|
||||
right: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
|
||||
padding: @Overlay_container2_padding;
|
||||
|
||||
color: @Overlay_container2_color!important;
|
||||
background-color: @Overlay_container2_backgroud;
|
||||
|
||||
border-radius: 32px 0 0 32px;
|
||||
|
||||
&.active {
|
||||
width: @Overlay_container2_active_width;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.renderSearch_wrapper {
|
||||
height: 87vh;
|
||||
overflow: hidden;
|
||||
margin: 20px 0 0;
|
||||
font-family: @__app_generalFont;
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mainElement {
|
||||
> div {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
11
src/components/Layout/RightSider/components/invalid/index.js
Normal file
11
src/components/Layout/RightSider/components/invalid/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import { CardComponent } from 'components'
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<CardComponent>
|
||||
Invalid Component
|
||||
</CardComponent>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import router from 'core/libs/router'
|
||||
import withConnector from 'core/libs/withConnector'
|
||||
import { CardComponent } from 'components'
|
||||
|
||||
@withConnector
|
||||
export default class ProfileCard extends React.Component {
|
||||
render() {
|
||||
const { session_data, session_valid, session_uuid } = this.props.app
|
||||
|
||||
if (session_valid) {
|
||||
return(
|
||||
<div className={window.classToStyle("right_sidebar_component")}>
|
||||
<CardComponent onClick={() => router.goProfile(session_data["username"])} style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} >
|
||||
<antd.Avatar src={session_data.avatar} shape="square" />
|
||||
<div style={{ marginLeft: '10px' }}>
|
||||
@{session_data.username}
|
||||
<span style={{ fontSize: "11px" }}>#{session_uuid}</span>
|
||||
</div>
|
||||
</CardComponent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
import React from 'react'
|
||||
import styles from './index.less'
|
||||
import { newSearch } from "core/models/overlay"
|
||||
|
||||
export default class __searchBar extends React.Component {
|
||||
state = {
|
||||
value: '',
|
||||
}
|
||||
openSearcher = () => {
|
||||
const { value } = this.state
|
||||
if (value.length < 1) return false
|
||||
if (value == /\s/) return false
|
||||
newSearch({ keyword: value });
|
||||
}
|
||||
onChange = e => {
|
||||
const { value } = e.target
|
||||
this.setState({ value: value })
|
||||
}
|
||||
|
||||
handleKey = (e) => {
|
||||
if (e.key == 'Enter') {
|
||||
this.openSearcher()
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className={styles.search_bar}>
|
||||
<input
|
||||
placeholder="Search on Comty..."
|
||||
onChange={this.onChange}
|
||||
onKeyPress={this.handleKey}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
@import '~theme/index.less';
|
||||
|
||||
.search_bar {
|
||||
height: 24px;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: 0!important;
|
||||
outline: 0!important;
|
||||
color: @__app_backgroundAccent;
|
||||
padding: 0 0 0 48px;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
background-position: 0 48%;
|
||||
font-family: @__app_secondaryFont;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
&::placeholder {
|
||||
color: @__app_backgroundAccent;
|
||||
}
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
input:focus{
|
||||
background-position: 20px 48%;
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
}
|
||||
69
src/components/Layout/RightSider/index.js
Normal file
69
src/components/Layout/RightSider/index.js
Normal file
@ -0,0 +1,69 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import withConnector from 'core/libs/withConnector'
|
||||
import { __legacy__objectToArray } from '@ragestudio/nodecore-utils'
|
||||
|
||||
import InvalidComponent from './components/invalid'
|
||||
import ProfileCard from './components/profileCard'
|
||||
import SearchBar from './components/searchBar'
|
||||
|
||||
const MapToComponent = {
|
||||
profileCard: <ProfileCard />,
|
||||
searchBar: <SearchBar />
|
||||
}
|
||||
|
||||
// to do: add order by numeric range
|
||||
let DefaultElements = [
|
||||
"searchBar",
|
||||
"profileCard"
|
||||
]
|
||||
|
||||
@withConnector
|
||||
export default class RightSider extends React.Component {
|
||||
|
||||
state = {
|
||||
fragments: []
|
||||
}
|
||||
|
||||
renderElements() {
|
||||
try {
|
||||
return this.state.fragments.map((element) => {
|
||||
return <div key={element.id}>
|
||||
{element.fragment ?? null}
|
||||
</div>
|
||||
})
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return <InvalidComponent />
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (typeof (window.rightSidebar) == "undefined") {
|
||||
window.RightSider = {}
|
||||
}
|
||||
window.RightSider.addFragment = (fragment) => {
|
||||
let updated = this.state.fragments
|
||||
updated.push(fragment)
|
||||
this.setState({ fragments: updated })
|
||||
}
|
||||
|
||||
DefaultElements.forEach((e) => {
|
||||
window.RightSider.addFragment({ id: e, fragment: MapToComponent[e] })
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
id="right_sidebar"
|
||||
className={classnames(window.classToStyle("right_sidebar_wrapper"), {["swapped"]: this.props.app.overlayActive ?? false})}
|
||||
>
|
||||
<div className={window.classToStyle("right_sidebar_content")}>
|
||||
{this.renderElements()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -2,11 +2,11 @@ import React from 'react'
|
||||
import { app } from 'config'
|
||||
import { router } from 'core/libs'
|
||||
import { __legacy__objectToArray } from 'core'
|
||||
import Sider_Mobile from './mobile'
|
||||
import Sider_Default from './default'
|
||||
import { connect } from 'umi'
|
||||
import MenuList from 'globals/sidebar_menu.js'
|
||||
import { FloatComponent } from 'components'
|
||||
|
||||
import Sider_Mobile from './mobile'
|
||||
import Sider_Default from './default'
|
||||
|
||||
@connect(({ app, extended }) => ({ app, extended }))
|
||||
class Sider extends React.Component {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Sider from './Sider'
|
||||
import RightSider from './RightSider'
|
||||
import Overlay from './Overlay'
|
||||
import WindowNavbar from './WindowNavbar'
|
||||
import ContextMenu from './ContextMenu/index.tsx'
|
||||
|
||||
export { Sider, Overlay, WindowNavbar, ContextMenu }
|
||||
export { RightSider, Sider, Overlay, WindowNavbar, ContextMenu }
|
||||
|
||||
@ -5,6 +5,7 @@ import Loader from './Loader'
|
||||
import About from './About'
|
||||
import * as Feather from 'feather-reactjs'
|
||||
import Invalid from './Invalid'
|
||||
import CardComponent from './CardComponent'
|
||||
|
||||
// App Layout Components
|
||||
import Splash from './Splash'
|
||||
@ -23,6 +24,7 @@ import PostCard from './PostCard'
|
||||
|
||||
// Mix & Export all
|
||||
export {
|
||||
CardComponent,
|
||||
PostsFeed,
|
||||
Splash,
|
||||
ParamsList,
|
||||
|
||||
@ -8,11 +8,9 @@ export const router = {
|
||||
},
|
||||
go: e => {
|
||||
router.push(e);
|
||||
// goTo.element('primaryContent');
|
||||
},
|
||||
goProfile: e => {
|
||||
router.push(`/@/${e}`);
|
||||
// goTo.element('primaryContent');
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
5
src/core/libs/withConnector/index.js
Normal file
5
src/core/libs/withConnector/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { connect } from 'umi'
|
||||
|
||||
export default (children) => {
|
||||
return connect(({ app }) => ({ app }))(children)
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { Loader } from 'components'
|
||||
import { withRouter, connect } from 'umi'
|
||||
@ -11,7 +10,7 @@ import { Splash } from 'components'
|
||||
import PrimaryLayout from './PrimaryLayout'
|
||||
import PublicLayout from './PublicLayout'
|
||||
|
||||
import 'theme'
|
||||
import 'theme/index.less'
|
||||
|
||||
const LayoutMap = {
|
||||
primary: PrimaryLayout,
|
||||
@ -20,7 +19,7 @@ const LayoutMap = {
|
||||
|
||||
@withRouter
|
||||
@connect(({ app, loading }) => ({ app, loading }))
|
||||
class BaseLayout extends React.Component {
|
||||
export default class BaseLayout extends React.Component {
|
||||
previousPath = ''
|
||||
renderLoading = true
|
||||
|
||||
@ -54,9 +53,3 @@ class BaseLayout extends React.Component {
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
BaseLayout.propTypes = {
|
||||
loading: PropTypes.object,
|
||||
}
|
||||
|
||||
export default BaseLayout
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { withRouter, connect } from 'umi'
|
||||
import {
|
||||
AppLayout
|
||||
@ -13,15 +12,14 @@ import { theme } from 'core/libs/style'
|
||||
import * as antd from 'antd'
|
||||
import contextMenuList from 'globals/contextMenu'
|
||||
|
||||
import styles from 'theme'
|
||||
|
||||
const { Content } = antd.Layout
|
||||
const { Sider, Overlay } = AppLayout
|
||||
const { Sider, Overlay, RightSider } = AppLayout
|
||||
const isActive = (key) => { return key ? key.active : false }
|
||||
|
||||
@withRouter
|
||||
@connect(({ app, contextMenu, loading }) => ({ app, contextMenu, loading }))
|
||||
class PrimaryLayout extends React.Component {
|
||||
export default class PrimaryLayout extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
@ -78,14 +76,11 @@ class PrimaryLayout extends React.Component {
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
this.enquireHandler = enquireScreen(mobile => {
|
||||
const { isMobile } = this.state
|
||||
if (isMobile !== mobile) {
|
||||
window.isMobile = mobile
|
||||
this.setState({
|
||||
isMobile: mobile,
|
||||
})
|
||||
this.setState({isMobile: mobile})
|
||||
}
|
||||
})
|
||||
|
||||
@ -131,33 +126,22 @@ class PrimaryLayout extends React.Component {
|
||||
overflow: "hidden",
|
||||
opacity: currentTheme.backgroundImage.opacity
|
||||
}} /> : null}
|
||||
<antd.Layout id="app" className={classnames(styles.app, {
|
||||
[styles.interfaced]: this.props.app.embedded,
|
||||
[styles.dark_mode]: window.darkMode,
|
||||
[styles.mobile]: isMobile
|
||||
<antd.Layout id="app" className={classnames("app", {
|
||||
["interfaced"]: this.props.app.embedded,
|
||||
["dark_mode"]: window.darkMode,
|
||||
["mobile"]: isMobile,
|
||||
["overlayActive"]: this.props.app.overlayActive
|
||||
})}>
|
||||
<Sider {...SiderProps} />
|
||||
<div className={window.classToStyle("layout_container")}>
|
||||
<Content
|
||||
id="primaryContent"
|
||||
className={window.classToStyle("layout_container")}
|
||||
>
|
||||
<Content className={window.classToStyle("layout_content")}>
|
||||
{children ? children : null}
|
||||
</Content>
|
||||
</div>
|
||||
<RightSider />
|
||||
<Overlay {...OverlayProps} />
|
||||
</antd.Layout>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
PrimaryLayout.propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
location: PropTypes.object,
|
||||
dispatch: PropTypes.func,
|
||||
app: PropTypes.object,
|
||||
loading: PropTypes.object,
|
||||
}
|
||||
|
||||
export default PrimaryLayout
|
||||
|
||||
@ -45,12 +45,7 @@ export default {
|
||||
subscriptions: {
|
||||
setup({ dispatch }) {
|
||||
dispatch({ type: 'updateState', payload: { dispatcher: dispatch } })
|
||||
try {
|
||||
const electron = window.require("electron")
|
||||
dispatch({ type: 'updateState', payload: { electron, embedded: true } })
|
||||
} catch (error) {
|
||||
// nothing
|
||||
}
|
||||
dispatch({ type: 'earlyInit' })
|
||||
dispatch({ type: 'updateFrames' })
|
||||
dispatch({ type: 'validateSession' })
|
||||
dispatch({ type: 'initHeaderSocket' })
|
||||
@ -79,17 +74,13 @@ export default {
|
||||
},
|
||||
},
|
||||
effects: {
|
||||
*query({ payload }, { call, put, select }) {
|
||||
*earlyInit({ dispatcher }, { call, put, select }) {
|
||||
const state = yield select(state => state.app)
|
||||
|
||||
window.PluginGlobals = []
|
||||
window.Internal = []
|
||||
|
||||
window.classToStyle = (key) => {
|
||||
if (typeof (key) !== "string") {
|
||||
try {
|
||||
const toString = JSON.stringify(key)
|
||||
console.log(toString)
|
||||
if (toString) {
|
||||
return toString
|
||||
} else {
|
||||
@ -105,6 +96,20 @@ export default {
|
||||
return key
|
||||
}
|
||||
|
||||
try {
|
||||
const electron = window.require("electron")
|
||||
state.dispatcher({ type: 'updateState', payload: { electron, embedded: true } })
|
||||
} catch (error) {
|
||||
// nothing
|
||||
}
|
||||
|
||||
},
|
||||
*query({ payload }, { call, put, select }) {
|
||||
const state = yield select(state => state.app)
|
||||
|
||||
window.PluginGlobals = []
|
||||
window.Internal = []
|
||||
|
||||
queryIndexer([
|
||||
{
|
||||
match: '/s;:id',
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import ReduxDebugger from 'debuggers/redux'
|
||||
import * as antd from 'antd'
|
||||
import { FloatComponent } from 'components'
|
||||
import { connect } from 'umi'
|
||||
import { ClusterOutlined } from 'components/Icons'
|
||||
import { __legacy__objectToArray } from 'core'
|
||||
|
||||
@ -1 +0,0 @@
|
||||
@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
|
||||
@ -1,30 +0,0 @@
|
||||
@chat_footer_height: 67px;
|
||||
@chats-bg-color: #fff;
|
||||
@chats-input-bg: #f8f8fa;
|
||||
@input-chat-color: #a2a2a2;
|
||||
@chat-border-color: #eef2f4;
|
||||
@chat-body-color: #273346;
|
||||
@chat-msg-message: #969eaa;
|
||||
@chat-text-bg: #f1f2f6;
|
||||
@chat-text-color: rgb(39, 51, 70);
|
||||
@chat-theme-color: #0086ff;
|
||||
@msg-date: #c0c7d2;
|
||||
@chat-button-bg-color: #f0f7ff;
|
||||
@msg-hover-bg: rgba(238, 242, 244, 0.4);
|
||||
@active-conversation-bg: linear-gradient(
|
||||
to right,
|
||||
rgba(238, 242, 244, 0.4) 0%,
|
||||
rgba(238, 242, 244, 0) 100%
|
||||
);
|
||||
@overlay-bg: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 65%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
@chat-header-bg: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 1) 0%,
|
||||
rgba(255, 255, 255, 1) 78%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
@ -1,5 +1,3 @@
|
||||
@import '../../../node_modules/antd/lib/style/themes/default.less';
|
||||
|
||||
@import './vars.less';
|
||||
@import './fonts-import.css';
|
||||
|
||||
@ -8,6 +6,14 @@
|
||||
|
||||
@import './components/PostCard.less';
|
||||
|
||||
|
||||
// Resolutions variables
|
||||
@screen-sm: 48em; // 768px
|
||||
@screen-md: 64em; // 1024px
|
||||
@screen-lg: 85.375em; // 1366px
|
||||
@screen-xl: 120em; // 1920px
|
||||
@screen-xxl: 160em; // 2560px
|
||||
|
||||
::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
@ -33,21 +39,28 @@
|
||||
}
|
||||
|
||||
.app{
|
||||
&.overlayActive {
|
||||
.app_layout_container{
|
||||
filter: saturate(10%);
|
||||
transform: translate(-150px, 0);// to do: get from overlay direction variable
|
||||
}
|
||||
}
|
||||
|
||||
&.interfaced{
|
||||
.primary_layout_container{
|
||||
.app_layout_container{
|
||||
height: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile{
|
||||
.primary_layout_container {
|
||||
.app_layout_container {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
min-width: unset;
|
||||
}
|
||||
.primary_layout_content{
|
||||
.app_layout_content{
|
||||
padding: 35px 15px 15px;
|
||||
}
|
||||
}
|
||||
@ -101,36 +114,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm){
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md) {
|
||||
.app_layout_container{
|
||||
min-width: 750px;
|
||||
}
|
||||
.app_layout_content{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg) {
|
||||
.app_layout_container´{
|
||||
min-width: 1112px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-xl) {
|
||||
|
||||
}
|
||||
|
||||
// @media (min-width: @screen-xxl) {
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// Layout
|
||||
.app_layout_container {
|
||||
background-color: transparent;
|
||||
transition: all 150ms ease-in-out;
|
||||
@ -159,3 +143,165 @@ body {
|
||||
padding: @__app_layout_content_padding;
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
// Right Sidebar
|
||||
@__app_overlay_padding: 30px 30px 30px 35px;
|
||||
.app_right_sidebar_wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
max-width: @Overlay_wrapper_maxwidth;
|
||||
min-width: 200px;
|
||||
|
||||
display: flex;
|
||||
z-index: 50;
|
||||
|
||||
padding: @__app_overlay_padding;
|
||||
|
||||
@media (max-width: @screen-md) {
|
||||
padding: 30px 5px;
|
||||
}
|
||||
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
|
||||
&.swapped {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.app_right_sidebar_content{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
> div {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.app_overlay_wrapper {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
|
||||
height: 100%;
|
||||
width: 0;
|
||||
backdrop-filter: blur(2px);
|
||||
|
||||
&.half {
|
||||
padding: @__app_overlay_padding;
|
||||
background-color: #2d2d2d;
|
||||
color: @Overlay_container1_active_color;
|
||||
width: 26vw;
|
||||
}
|
||||
|
||||
&.full{
|
||||
padding: @__app_overlay_padding;
|
||||
max-width: none;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
border-radius: @__Global_layout_border-rd;
|
||||
}
|
||||
|
||||
.app_overlay_content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
max-width: @Overlay_wrapper_maxwidth;
|
||||
min-width: 200px;
|
||||
|
||||
display: flex;
|
||||
z-index: 50;
|
||||
|
||||
right: 0;
|
||||
padding: @__app_overlay_padding;
|
||||
|
||||
color: @Overlay_container1_def_color;
|
||||
|
||||
|
||||
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
}
|
||||
|
||||
.app_overlay_content_body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
> div {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.app_overlay_backButton{
|
||||
margin: 0 0 15px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
color: @Overlay_container_1_btn_color;
|
||||
background-color: @Overlay_container_1_btn_backgroud;
|
||||
border-color: transparent;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.app_overlay_backButton:hover {
|
||||
box-shadow: @Overlay_container_1_btn_shadow;
|
||||
transition: all @__Global_Components_transitions_dur linear;
|
||||
}
|
||||
|
||||
|
||||
// CardComponent (External Module)
|
||||
.cardComponent_wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
|
||||
|
||||
h2,h3,h4{
|
||||
color: #9597A1;
|
||||
font-family: Netflix Sans;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Media queries
|
||||
@media (min-width: @screen-sm){
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md) {
|
||||
.app_layout_container{
|
||||
min-width: 750px;
|
||||
}
|
||||
.app_layout_content{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg) {
|
||||
.app_layout_container{
|
||||
min-width: 1112px;
|
||||
}
|
||||
}
|
||||
|
||||
// @media (min-width: @screen-xl) {
|
||||
|
||||
// }
|
||||
|
||||
// @media (min-width: @screen-xxl) {
|
||||
|
||||
// }
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
@__app_SwapDuration: 170ms;
|
||||
|
||||
|
||||
@__app_layout_content_padding: 0 40px 20px 0;
|
||||
|
||||
|
||||
|
||||
@ -4,4 +4,4 @@ const fs = require('fs');
|
||||
|
||||
const convToVars = file => lessToJs(fs.readFileSync(resolve(__dirname, file), 'utf8'))
|
||||
|
||||
module.exports = convToVars('./antd-theme.less')
|
||||
module.exports = convToVars('./index.less')
|
||||
Loading…
x
Reference in New Issue
Block a user