From d50aeb14fcf51bd54c4b30becc0c87cdf8b330fe Mon Sep 17 00:00:00 2001 From: srgooglo Date: Tue, 17 Nov 2020 18:57:40 +0100 Subject: [PATCH] updated & cleaned layout components, other refactors --- .../index.tsx} | 11 +- .../Overlay/components/cards/__searchBar.js | 64 +++--- .../Layout/Overlay/components/index.js | 13 +- .../Overlay/components/layout/Primary.tsx | 26 +-- .../Overlay/components/layout/Secondary.tsx | 72 ------ src/components/Layout/Overlay/index.js | 105 ++++----- src/components/Layout/Overlay/index.less | 174 -------------- .../RightSider/components/invalid/index.js | 11 + .../components/profileCard/index.js | 27 +++ .../RightSider/components/searchBar/index.js | 36 +++ .../components/searchBar/index.less | 33 +++ src/components/Layout/RightSider/index.js | 69 ++++++ src/components/Layout/Sider/index.js | 6 +- src/components/Layout/index.js | 3 +- src/components/index.js | 2 + src/core/libs/router/index.js | 2 - src/core/libs/withConnector/index.js | 5 + src/layouts/BaseLayout.js | 13 +- src/layouts/PrimaryLayout.js | 38 +-- src/models/app.js | 29 ++- src/pages/index.js | 1 - src/theme/antd-theme.less | 1 - src/theme/base/components/Menssaging.less | 30 --- src/theme/base/index.less | 216 +++++++++++++++--- src/theme/base/layout/Overlay.less | 0 src/theme/base/vars.less | 1 - src/theme/index.js | 2 +- 27 files changed, 486 insertions(+), 504 deletions(-) rename src/components/{Layout/Overlay/components/Card_Component.tsx => CardComponent/index.tsx} (68%) delete mode 100644 src/components/Layout/Overlay/components/layout/Secondary.tsx delete mode 100644 src/components/Layout/Overlay/index.less create mode 100644 src/components/Layout/RightSider/components/invalid/index.js create mode 100644 src/components/Layout/RightSider/components/profileCard/index.js create mode 100644 src/components/Layout/RightSider/components/searchBar/index.js create mode 100644 src/components/Layout/RightSider/components/searchBar/index.less create mode 100644 src/components/Layout/RightSider/index.js create mode 100644 src/core/libs/withConnector/index.js delete mode 100644 src/theme/antd-theme.less delete mode 100644 src/theme/base/components/Menssaging.less delete mode 100644 src/theme/base/layout/Overlay.less diff --git a/src/components/Layout/Overlay/components/Card_Component.tsx b/src/components/CardComponent/index.tsx similarity index 68% rename from src/components/Layout/Overlay/components/Card_Component.tsx rename to src/components/CardComponent/index.tsx index 934e42fd..0cebeb6c 100644 --- a/src/components/Layout/Overlay/components/Card_Component.tsx +++ b/src/components/CardComponent/index.tsx @@ -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 = const rd_loading = @@ -19,16 +18,16 @@ const Card_Component = (props: Card_Component_props) => { if (!props.type) frag = (props.children) return( -
+
{frag}
) } -Card_Component.defaultProps = { +CardComponent.defaultProps = { style: null, type: null, children:

Empty

} -export default Card_Component \ No newline at end of file +export default CardComponent \ No newline at end of file diff --git a/src/components/Layout/Overlay/components/cards/__searchBar.js b/src/components/Layout/Overlay/components/cards/__searchBar.js index ba610e01..5b0734be 100644 --- a/src/components/Layout/Overlay/components/cards/__searchBar.js +++ b/src/components/Layout/Overlay/components/cards/__searchBar.js @@ -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: '', +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() } - 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( -
- -
- ) - } - } \ No newline at end of file + } + render() { + return ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/components/Layout/Overlay/components/index.js b/src/components/Layout/Overlay/components/index.js index 4b655452..80501ac6 100644 --- a/src/components/Layout/Overlay/components/index.js +++ b/src/components/Layout/Overlay/components/index.js @@ -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 } \ No newline at end of file diff --git a/src/components/Layout/Overlay/components/layout/Primary.tsx b/src/components/Layout/Overlay/components/layout/Primary.tsx index 2ad96c01..368911ef 100644 --- a/src/components/Layout/Overlay/components/layout/Primary.tsx +++ b/src/components/Layout/Overlay/components/layout/Primary.tsx @@ -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 = ( -
- } onClick={() => Swapper.closeAll()}> Back -
-) - +const renderExit = } onClick={() => Swapper.closeAll()}> Back const overlay_primary = (props: overlay_primary_props) => { const { fragment, mode, isMobile } = props return ( -
-
- {props.mode === 'full' || props.mode === 'half'? renderExit : null} - {fragment} -
+
+ {props.mode === 'full' || props.mode === 'half' ? renderExit : null} + {fragment}
) } diff --git a/src/components/Layout/Overlay/components/layout/Secondary.tsx b/src/components/Layout/Overlay/components/layout/Secondary.tsx deleted file mode 100644 index 55592593..00000000 --- a/src/components/Layout/Overlay/components/layout/Secondary.tsx +++ /dev/null @@ -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; - 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
- } onClick={() => functs.Swapper.close()}> Back -
- } - 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 ( -
- -
- {renderExit} - - {render} - -
-
- ) -} - - -__sec.defaultProps = { - render: null, - y: 0, - isMobile: false, - functs: null, - type: null, -} - -export default __sec \ No newline at end of file diff --git a/src/components/Layout/Overlay/index.js b/src/components/Layout/Overlay/index.js index 4d612b71..f1c3ab18 100644 --- a/src/components/Layout/Overlay/index.js +++ b/src/components/Layout/Overlay/index.js @@ -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 = ( -
-
<__searchBar />
-
- {session_valid? router.goProfile(session_data["username"])} style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} >
@{session_data.username}#{session_uuid}
 : null } -
-
- ) - const renderElement = () => { + render() { + const { overlayElement, overlayActive } = this.props.app + + const isOnMode = (mode) => { + if (!overlayActive || typeof (overlayElement.mode) == "undefined") { + return false + } + return overlayElement.mode === mode ? true : false + } + + const renderElement = () => { if (overlayElement && overlayActive) { - const renderProps = {id: overlayElement.id, mode: overlayElement.mode, fragment: overlayElement.element} - switch (overlayElement.position) { - case 'primary':{ - return - } - case 'secondary':{ - return - } - default:{ - return ErrorHandler({ code: 210 }) - } - } + const renderProps = { id: overlayElement.id, mode: overlayElement.mode, fragment: overlayElement.element } + return } - return( - - ) - + return null } - return ( - <> -
- {renderElement()} -
- +
+ {renderElement()} +
) } } diff --git a/src/components/Layout/Overlay/index.less b/src/components/Layout/Overlay/index.less deleted file mode 100644 index 2fb5d71a..00000000 --- a/src/components/Layout/Overlay/index.less +++ /dev/null @@ -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; - } - } \ No newline at end of file diff --git a/src/components/Layout/RightSider/components/invalid/index.js b/src/components/Layout/RightSider/components/invalid/index.js new file mode 100644 index 00000000..a66d03bc --- /dev/null +++ b/src/components/Layout/RightSider/components/invalid/index.js @@ -0,0 +1,11 @@ +import React from 'react' +import * as antd from 'antd' +import { CardComponent } from 'components' + +export default () => { + return ( + + Invalid Component + + ) +} \ No newline at end of file diff --git a/src/components/Layout/RightSider/components/profileCard/index.js b/src/components/Layout/RightSider/components/profileCard/index.js new file mode 100644 index 00000000..59185280 --- /dev/null +++ b/src/components/Layout/RightSider/components/profileCard/index.js @@ -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( +
+ router.goProfile(session_data["username"])} style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} > + +
+ @{session_data.username} + #{session_uuid} +
+ +
+ ) + } + return null + } +} \ No newline at end of file diff --git a/src/components/Layout/RightSider/components/searchBar/index.js b/src/components/Layout/RightSider/components/searchBar/index.js new file mode 100644 index 00000000..dfb4c36c --- /dev/null +++ b/src/components/Layout/RightSider/components/searchBar/index.js @@ -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 ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/components/Layout/RightSider/components/searchBar/index.less b/src/components/Layout/RightSider/components/searchBar/index.less new file mode 100644 index 00000000..7d62a66a --- /dev/null +++ b/src/components/Layout/RightSider/components/searchBar/index.less @@ -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; + } + } \ No newline at end of file diff --git a/src/components/Layout/RightSider/index.js b/src/components/Layout/RightSider/index.js new file mode 100644 index 00000000..96b29fc9 --- /dev/null +++ b/src/components/Layout/RightSider/index.js @@ -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: , + 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
+ {element.fragment ?? null} +
+ }) + } catch (error) { + console.log(error) + return + } + } + + 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 ( + + ) + } +} \ No newline at end of file diff --git a/src/components/Layout/Sider/index.js b/src/components/Layout/Sider/index.js index 100b046b..31fbcb6e 100755 --- a/src/components/Layout/Sider/index.js +++ b/src/components/Layout/Sider/index.js @@ -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 { diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index 9b24adf8..654137dc 100755 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -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 } diff --git a/src/components/index.js b/src/components/index.js index e9d33b9a..f348e92c 100755 --- a/src/components/index.js +++ b/src/components/index.js @@ -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, diff --git a/src/core/libs/router/index.js b/src/core/libs/router/index.js index 4910f9fb..94085941 100644 --- a/src/core/libs/router/index.js +++ b/src/core/libs/router/index.js @@ -8,11 +8,9 @@ export const router = { }, go: e => { router.push(e); - // goTo.element('primaryContent'); }, goProfile: e => { router.push(`/@/${e}`); - // goTo.element('primaryContent'); }, }; diff --git a/src/core/libs/withConnector/index.js b/src/core/libs/withConnector/index.js new file mode 100644 index 00000000..e7b9fbda --- /dev/null +++ b/src/core/libs/withConnector/index.js @@ -0,0 +1,5 @@ +import { connect } from 'umi' + +export default (children) => { + return connect(({ app }) => ({ app }))(children) +} \ No newline at end of file diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js index bc17fab4..ac1cde65 100755 --- a/src/layouts/BaseLayout.js +++ b/src/layouts/BaseLayout.js @@ -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 @@ -53,10 +52,4 @@ class BaseLayout extends React.Component { ) } -} - -BaseLayout.propTypes = { - loading: PropTypes.object, -} - -export default BaseLayout +} \ No newline at end of file diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index e06e7e33..7d37fd42 100755 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -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} -
- + {children ? children : null}
+ ) } -} - -PrimaryLayout.propTypes = { - children: PropTypes.element.isRequired, - location: PropTypes.object, - dispatch: PropTypes.func, - app: PropTypes.object, - loading: PropTypes.object, -} - -export default PrimaryLayout +} \ No newline at end of file diff --git a/src/models/app.js b/src/models/app.js index c6ba18f4..b32957c2 100755 --- a/src/models/app.js +++ b/src/models/app.js @@ -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', @@ -289,7 +294,7 @@ export default { } } }) - + }, *updateTheme({ payload }, { put, select }) { if (!payload) return false diff --git a/src/pages/index.js b/src/pages/index.js index e99c961c..cef9aff6 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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' diff --git a/src/theme/antd-theme.less b/src/theme/antd-theme.less deleted file mode 100644 index 77899efb..00000000 --- a/src/theme/antd-theme.less +++ /dev/null @@ -1 +0,0 @@ -@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file diff --git a/src/theme/base/components/Menssaging.less b/src/theme/base/components/Menssaging.less deleted file mode 100644 index a9eb5947..00000000 --- a/src/theme/base/components/Menssaging.less +++ /dev/null @@ -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% -); \ No newline at end of file diff --git a/src/theme/base/index.less b/src/theme/base/index.less index 8396a64f..1320b019 100644 --- a/src/theme/base/index.less +++ b/src/theme/base/index.less @@ -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) { + +// } diff --git a/src/theme/base/layout/Overlay.less b/src/theme/base/layout/Overlay.less deleted file mode 100644 index e69de29b..00000000 diff --git a/src/theme/base/vars.less b/src/theme/base/vars.less index eb915058..01cf6ff6 100644 --- a/src/theme/base/vars.less +++ b/src/theme/base/vars.less @@ -10,7 +10,6 @@ @__app_SwapDuration: 170ms; - @__app_layout_content_padding: 0 40px 20px 0; diff --git a/src/theme/index.js b/src/theme/index.js index 77b4b0cf..227d19fd 100644 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -4,4 +4,4 @@ const fs = require('fs'); const convToVars = file => lessToJs(fs.readFileSync(resolve(__dirname, file), 'utf8')) -module.exports = convToVars('./antd-theme.less') \ No newline at end of file +module.exports = convToVars('./index.less') \ No newline at end of file