From 55c9b7fb17e31272920b39694d04999ba28b9677 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Fri, 30 Jun 2023 14:20:39 +0000 Subject: [PATCH] update ui & bad typos --- .../constants/settings/apparence/index.jsx | 2 +- .../components/changePassword/index.jsx | 6 +- .../settings/components/widgetsView/index.jsx | 2 +- packages/app/src/App.jsx | 19 +- .../src/components/FormGenerator/index.jsx | 4 +- .../src/components/Layout/bottomBar/index.jsx | 41 ++- .../components/Layout/bottomBar/index.less | 4 +- .../src/components/Layout/drawer/index.jsx | 4 +- packages/app/src/components/Layout/index.js | 3 +- .../src/components/Layout/sidebar/index.jsx | 328 ++++++++++-------- .../src/components/Layout/sidebar/index.less | 11 +- .../components/Layout/sidedrawer/index.jsx | 165 +++++---- .../components/Layout/sidedrawer/index.less | 58 ++-- .../src/components/Layout/toolsBar/index.jsx | 89 +++++ .../src/components/Layout/toolsBar/index.less | 67 ++++ .../src/components/Layout/topBar/index.jsx | 33 +- packages/app/src/components/Login/index.jsx | 10 +- .../PagePanels/components/NavMenu/index.jsx | 12 +- .../PagePanels/components/NavMenu/index.less | 54 +++ .../app/src/components/PagePanels/index.jsx | 5 +- .../app/src/components/PagePanels/index.less | 55 +-- .../Player/BackgroundMediaPlayer/index.jsx | 8 +- .../src/components/Player/Controls/index.jsx | 2 +- .../components/Player/MediaPlayer/index.jsx | 10 +- .../app/src/components/PostCard/index.jsx | 4 +- .../app/src/components/PostCreator/index.jsx | 10 +- .../app/src/components/PostsList/index.jsx | 6 +- .../app/src/components/RenderWindow/index.jsx | 4 +- .../src/components/SortableList/index.less | 2 + .../app/src/components/SyncRoomCard/index.jsx | 4 +- .../src/components/WidgetsBrowser/index.jsx | 2 +- .../src/components/WidgetsWrapper/index.jsx | 27 ++ .../src/components/WidgetsWrapper/index.less | 4 +- packages/app/src/cores/player/player.core.js | 18 +- packages/app/src/cores/style/style.core.jsx | 2 +- packages/app/src/cores/sync/sync.core.js | 10 +- .../app/src/cores/widgets/widgets.core.js | 4 +- .../src/hooks/useCenteredContainer/index.js | 4 +- packages/app/src/hooks/useTopBar/index.jsx | 17 + packages/app/src/layout.jsx | 57 +-- .../components/floatingStack/index.jsx | 2 +- packages/app/src/layouts/default/index.jsx | 4 +- packages/app/src/pages/account/index.jsx | 6 +- packages/app/src/pages/index.jsx | 32 -- packages/app/src/pages/lyrics/index.jsx | 62 ++-- .../components/SettingItemComponent/index.jsx | 10 +- .../app/src/pages/settings/index.mobile.jsx | 2 +- .../components/StreamingKeyViewer/index.jsx | 6 +- packages/app/src/router.jsx | 4 +- 49 files changed, 788 insertions(+), 507 deletions(-) create mode 100644 packages/app/src/components/Layout/toolsBar/index.jsx create mode 100644 packages/app/src/components/Layout/toolsBar/index.less create mode 100644 packages/app/src/hooks/useTopBar/index.jsx diff --git a/packages/app/constants/settings/apparence/index.jsx b/packages/app/constants/settings/apparence/index.jsx index 860aace9..9ae8e374 100755 --- a/packages/app/constants/settings/apparence/index.jsx +++ b/packages/app/constants/settings/apparence/index.jsx @@ -59,7 +59,7 @@ export default { icon: "Moon", title: "Sync with system", description: "Automatically switch to dark mode based on your system preference.", - emitEvent: "style.autoDarkModeToogle", + emitEvent: "style.autoDarkModetoggle", storaged: true, }, { diff --git a/packages/app/constants/settings/components/changePassword/index.jsx b/packages/app/constants/settings/components/changePassword/index.jsx index a3809dc6..c9e2a364 100755 --- a/packages/app/constants/settings/components/changePassword/index.jsx +++ b/packages/app/constants/settings/components/changePassword/index.jsx @@ -124,7 +124,11 @@ const ChangePasswordComponent = (props) => { export default (props) => { const onClick = () => { - app.SidedrawerController.open("passwordChange", ChangePasswordComponent) + if (app.isMobile) { + return app.DrawerController.open("passwordChange", ChangePasswordComponent) + } + + return app.layout.sidedrawer.open("passwordChange", ChangePasswordComponent) } return diff --git a/packages/app/constants/settings/components/widgetsView/index.jsx b/packages/app/constants/settings/components/widgetsView/index.jsx index bf41e0f4..b2eebda3 100644 --- a/packages/app/constants/settings/components/widgetsView/index.jsx +++ b/packages/app/constants/settings/components/widgetsView/index.jsx @@ -32,7 +32,7 @@ export default class WidgetsView extends React.Component { }) }} onChangeVisible={(visible) => { - app.cores.widgets.toogleVisibility(manifest._id, visible) + app.cores.widgets.toggleVisibility(manifest._id, visible) }} /> diff --git a/packages/app/src/App.jsx b/packages/app/src/App.jsx index 59664bc7..5d188d36 100755 --- a/packages/app/src/App.jsx +++ b/packages/app/src/App.jsx @@ -157,6 +157,23 @@ class ComtyApp extends React.Component { static publicMethods = { controls: { + toogleUIVisibility: (to) => { + if (app.layout.sidebar) { + app.layout.sidebar.toggleVisibility(to) + } + + if (app.layout.tools_bar) { + app.layout.tools_bar.toggleVisibility(to) + } + + if (app.layout.top_bar) { + app.layout.top_bar.toggleVisibility(to) + } + + if (app.layout.floatingStack) { + app.layout.floatingStack.toggleGlobalVisibility(to) + } + }, openLoginForm: async (options = {}) => { app.DrawerController.open("login", Login, { defaultLocked: options.defaultLocked ?? false, @@ -178,7 +195,7 @@ class ComtyApp extends React.Component { }, // Opens the notification window and sets up the UI for the notification to be displayed openNotifications: () => { - window.app.SidedrawerController.open("notifications", NotificationsCenter, { + window.app.layout.sidedrawer.open("notifications", NotificationsCenter, { props: { width: "fit-content", }, diff --git a/packages/app/src/components/FormGenerator/index.jsx b/packages/app/src/components/FormGenerator/index.jsx index 66cab249..0f22da87 100755 --- a/packages/app/src/components/FormGenerator/index.jsx +++ b/packages/app/src/components/FormGenerator/index.jsx @@ -51,7 +51,7 @@ export default class FormGenerator extends React.Component { }, clearForm: () => { this.ctx.clearErrors() - this.ctx.toogleValidation(false) + this.ctx.toggleValidation(false) this.ref.current.resetFields() }, finish: () => this.ref.current.submit(), @@ -61,7 +61,7 @@ export default class FormGenerator extends React.Component { shake: (id) => { this.formItemShake(id) }, - toogleValidation: (to) => { + toggleValidation: (to) => { if (typeof to !== "undefined") { return this.setState({ validating: to }) } diff --git a/packages/app/src/components/Layout/bottomBar/index.jsx b/packages/app/src/components/Layout/bottomBar/index.jsx index 963cc455..112b6078 100755 --- a/packages/app/src/components/Layout/bottomBar/index.jsx +++ b/packages/app/src/components/Layout/bottomBar/index.jsx @@ -15,6 +15,19 @@ import CreatorView from "pages/@mobile-views/creator" import "./index.less" +const tourSteps = [ + { + title: "Open quick nav", + description: "Xd", + ref: React.createRef(), + }, + { + title: "Account button", + description: "Xd", + ref: React.createRef(), + } +] + const openPlayerView = () => { app.DrawerController.open("player", PlayerView) } @@ -53,7 +66,7 @@ const PlayerButton = (props) => { } -const AccountButton = (props) => { +const AccountButton = React.forwardRef((props, ref) => { const user = app.userData const ActionSheetRef = React.useRef() @@ -101,6 +114,7 @@ const AccountButton = (props) => { key="account" id="account" className="item" + ref={ref} onClick={handleClick} onContextMenu={handleHold} context-menu="ignore" @@ -111,7 +125,7 @@ const AccountButton = (props) => { } -} +}) export default (props) => { return @@ -128,6 +142,7 @@ export class BottomBar extends React.Component { visible: false, quickNavVisible: false, render: null, + tourOpen: false, } busEvents = { @@ -136,9 +151,14 @@ export class BottomBar extends React.Component { } } + refs = { + homeBtn: React.createRef(), + accountBtn: React.createRef(), + } + componentDidMount = () => { this.interface = app.layout.bottom_bar = { - toogleVisible: this.toggleVisibility, + toggleVisible: this.toggleVisibility, isVisible: () => this.state.visible, render: (fragment) => { this.setState({ render: fragment }) @@ -146,6 +166,9 @@ export class BottomBar extends React.Component { clear: () => { this.setState({ render: null }) }, + toggleTour: () => { + this.setState({ tourOpen: !this.state.tourOpen }) + }, } setTimeout(() => { @@ -278,6 +301,16 @@ export class BottomBar extends React.Component { } } + toggleTour = (to) => { + if (typeof to === "undefined") { + to = !this.state.tourOpen + } + + this.setState({ + tourOpen: to + }) + } + render() { if (this.state.render) { return
@@ -358,7 +391,7 @@ export class BottomBar extends React.Component {
- + diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/components/Layout/bottomBar/index.less index a530f46c..d0051999 100755 --- a/packages/app/src/components/Layout/bottomBar/index.less +++ b/packages/app/src/components/Layout/bottomBar/index.less @@ -195,8 +195,8 @@ .icon { border-radius: 360px; - height: @app_bottomBar_iconSize; - width: @app_bottomBar_iconSize; + height: @bottomBar_iconSize; + width: @bottomBar_iconSize; display: flex; flex-direction: column; diff --git a/packages/app/src/components/Layout/drawer/index.jsx b/packages/app/src/components/Layout/drawer/index.jsx index 89983b00..010fdec9 100755 --- a/packages/app/src/components/Layout/drawer/index.jsx +++ b/packages/app/src/components/Layout/drawer/index.jsx @@ -120,7 +120,7 @@ export class Drawer extends React.Component { } } - toogleVisibility = (to) => { + toggleVisibility = (to) => { this.setState({ visible: to ?? !this.state.visible }) } @@ -137,7 +137,7 @@ export class Drawer extends React.Component { return console.warn("Cannot close a locked drawer") } - this.toogleVisibility(false) + this.toggleVisibility(false) this.events.emit("beforeClose") diff --git a/packages/app/src/components/Layout/index.js b/packages/app/src/components/Layout/index.js index 8b890cee..50ccd4b6 100755 --- a/packages/app/src/components/Layout/index.js +++ b/packages/app/src/components/Layout/index.js @@ -4,4 +4,5 @@ export { default as Drawer } from "./drawer" export { default as Sidebar } from "./sidebar" export { default as Sidedrawer } from "./sidedrawer" export { default as Modal } from "./modal" -export { default as Header } from "./header" \ No newline at end of file +export { default as Header } from "./header" +export { default as ToolsBar } from "./toolsBar" \ No newline at end of file diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/components/Layout/sidebar/index.jsx index e9ba3492..88c43d2a 100755 --- a/packages/app/src/components/Layout/sidebar/index.jsx +++ b/packages/app/src/components/Layout/sidebar/index.jsx @@ -90,6 +90,9 @@ export default class Sidebar extends React.Component { topItems: generateTopItems(), bottomItems: [], + + lockAutocollapse: false, + navigationRender: null, } sidebarRef = React.createRef() @@ -97,10 +100,49 @@ export default class Sidebar extends React.Component { collapseDebounce = null interface = window.app.layout.sidebar = { - toggleVisibility: this.toggleVisibility, - toggleCollapse: this.toggleExpanded, + toggleVisibility: (to) => { + this.setState({ visible: to ?? !this.state.visible }) + }, + toggleCollapse: (to, force) => { + to = to ?? !this.state.expanded + + if (this.collapseDebounce) { + clearTimeout(this.collapseDebounce) + this.collapseDebounce = null + } + + if (!to & this.state.dropdownOpen && !force) { + // FIXME: This is a walkaround for a bug in antd, causing when dropdown set to close, item click event is not fired + // The desing defines when sidebar should be collapsed, dropdown should be closed, but in this case, gonna to keep it open untils dropdown is closed + //this.setState({ dropdownOpen: false }) + + return false + } + + if (!to) { + if (this.state.lockAutocollapse) { + return false + } + + this.collapseDebounce = setTimeout(() => { + this.setState({ expanded: to }) + }, window.app.cores.settings.get("sidebar.collapse_delay_time") ?? 500) + } else { + this.setState({ expanded: to }) + } + + app.eventBus.emit("sidebar.expanded", to) + }, isVisible: () => this.state.visible, isExpanded: () => this.state.expanded, + renderNavigationBar: (component, options) => { + this.setState({ + navigationRender: { + component, + options, + } + }) + }, updateBottomItemProps: (id, newProps) => { let updatedValue = this.state.bottomItems @@ -153,17 +195,37 @@ export default class Sidebar extends React.Component { }, } + events = { + "sidedrawers.visible": (has) => { + this.setState({ + lockAutocollapse: has + }) + + if (!has && this.state.expanded) { + this.interface.toggleCollapse(false) + } + } + } + componentDidMount = async () => { + for (const [event, handler] of Object.entries(this.events)) { + app.eventBus.on(event, handler) + } + setTimeout(() => { - this.toggleVisibility(true) + this.interface.toggleVisibility(true) if (app.cores.settings.is("sidebar.collapsable", false)) { - this.toggleExpanded(true) + this.interface.toggleCollapse(true) } }, 10) } componentWillUnmount = () => { + for (const [event, handler] of Object.entries(this.events)) { + app.eventBus.off(event, handler) + } + delete app.layout.sidebar } @@ -192,49 +254,18 @@ export default class Sidebar extends React.Component { return window.app.location.push(`/${item.path ?? e.key}`, 150) } - toggleExpanded = (to, force) => { - to = to ?? !this.state.expanded - - if (this.collapseDebounce) { - clearTimeout(this.collapseDebounce) - this.collapseDebounce = null - } - - if (!to & this.state.dropdownOpen && !force) { - // FIXME: This is a walkaround for a bug in antd, causing when dropdown set to close, item click event is not fired - // The desing defines when sidebar should be collapsed, dropdown should be closed, but in this case, gonna to keep it open untils dropdown is closed - //this.setState({ dropdownOpen: false }) - - return false - } - - if (!to) { - this.collapseDebounce = setTimeout(() => { - this.setState({ expanded: to }) - }, window.app.cores.settings.get("sidebar.collapse_delay_time") ?? 500) - } else { - this.setState({ expanded: to }) - } - - app.eventBus.emit("sidebar.expanded", to) - } - - toggleVisibility = (to) => { - this.setState({ visible: to ?? !this.state.visible }) - } - onMouseEnter = () => { if (!this.state.visible) return if (window.app.cores.settings.is("sidebar.collapsable", false)) { if (!this.state.expanded) { - this.toggleExpanded(true) + this.interface.toggleCollapse(true) } return } - this.toggleExpanded(true) + this.interface.toggleCollapse(true) } handleMouseLeave = () => { @@ -242,13 +273,13 @@ export default class Sidebar extends React.Component { if (window.app.cores.settings.is("sidebar.collapsable", false)) return - this.toggleExpanded(false) + this.interface.toggleCollapse(false) } onDropdownOpenChange = (to) => { // this is another walkaround for a bug in antd, causing when dropdown set to close, item click event is not fired if (!to && this.state.expanded) { - this.toggleExpanded(false, true) + this.interface.toggleCollapse(false, true) } this.setState({ dropdownOpen: to }) @@ -265,126 +296,133 @@ export default class Sidebar extends React.Component { render() { const defaultSelectedKey = window.location.pathname.replace("/", "") - return - {({ x }) => { - return
-
+ + {({ x }) => { + return
- -
-
- -
-
- -
- -
-
- +
+ +
+
+ +
+ +
+ +
- { - this.state.bottomItems.map((item) => { - if (item.noContainer) { - return React.createElement(item.children, item.childrenProps) - } - - return - { - React.createElement(item.children, item.childrenProps) + + { + this.state.bottomItems.map((item) => { + if (item.noContainer) { + return React.createElement(item.children, item.childrenProps) } - - }) - } - } > - - {(t) => t("Search")} - - - }> - - {t => t("Notifications")} - - - }> - - {t => t("Settings")} - - - { - app.userData && - - - - - } - - { - !app.userData && }> + return + { + React.createElement(item.children, item.childrenProps) + } + + }) + } + } > - {t => t("Login")} + {(t) => t("Search")} - } - + }> + + {t => t("Notifications")} + + + }> + + {t => t("Settings")} + + + + { + app.userData && + + + + + } + + { + !app.userData && }> + + {t => t("Login")} + + + } + +
-
- }} - + }} + + } } \ No newline at end of file diff --git a/packages/app/src/components/Layout/sidebar/index.less b/packages/app/src/components/Layout/sidebar/index.less index 6191d358..8966c6be 100755 --- a/packages/app/src/components/Layout/sidebar/index.less +++ b/packages/app/src/components/Layout/sidebar/index.less @@ -8,12 +8,21 @@ z-index: 1000; + display: flex; + flex-direction: row; + + align-items: center; + + gap: 20px; + width: fit-content; height: 100vh; height: 100dvh; - padding: 10px; + &.visible { + padding: 10px; + } } .app_sidebar { diff --git a/packages/app/src/components/Layout/sidedrawer/index.jsx b/packages/app/src/components/Layout/sidedrawer/index.jsx index e10c85b4..0aaffa05 100755 --- a/packages/app/src/components/Layout/sidedrawer/index.jsx +++ b/packages/app/src/components/Layout/sidedrawer/index.jsx @@ -1,62 +1,79 @@ import React from "react" import classnames from "classnames" +import { Motion, spring } from "react-motion" import "./index.less" -export const Sidedrawer = (props) => { - const sidedrawerId = props.id ?? props.key +export class Sidedrawer extends React.Component { + state = { + visible: false, + } - return
- { - React.createElement(props.children, { - ...props.props, - close: props.close, - }) - } -
+ toggleVisibility = (to) => { + this.setState({ visible: to ?? !this.state.visible }) + } + + render() { + return + {({ x, opacity }) => { + return
+ { + React.createElement(this.props.children, { + ...this.props.props, + close: this.props.close, + }) + } +
+ }} + + } } export default class SidedrawerController extends React.Component { - state = { - drawers: [], - lockedIds: [], - } - constructor(props) { super(props) - this.controller = window.app["SidedrawerController"] = { + this.interface = app.layout.sidedrawer = { open: this.open, close: this.close, closeAll: this.closeAll, hasDrawers: this.state.drawers.length > 0, + toggleGlobalVisibility: () => { + this.setState({ + globalVisible: !this.state.globalVisible, + }) + } } } + state = { + globalVisible: true, + drawers: [], + lockedIds: [], + } + componentDidMount = () => { this.listenEscape() } - componentDidUpdate() { - this.controller.hasDrawers = this.state.drawers.length > 0 - - if (this.controller.hasDrawers) { - window.app.eventBus.emit("sidedrawer.hasDrawers") - } else { - window.app.eventBus.emit("sidedrawer.noDrawers") - } - } - componentWillUnmount = () => { this.unlistenEscape() } @@ -84,7 +101,7 @@ export default class SidedrawerController extends React.Component { id = component.key ?? component.id ?? Math.random().toString(36).substr(2, 9) } - let drawers = this.state.drawers + const drawers = this.state.drawers // check if id is already in use // but only if its allowed to be used multiple times @@ -111,56 +128,56 @@ export default class SidedrawerController extends React.Component { id = newId } - drawers.push(React.createElement( - Sidedrawer, - { - key: id, - id: id, - first: drawers.length === 0, - style: { - zIndex: 100 - drawers.length, - }, - allowMultiples: options.allowMultiples ?? false, - ...options.props, - close: this.close, - escClosable: options.escClosable ?? true, - defaultVisible: false, - selfLock: () => { - this.lockDrawerId(id) - }, - selfUnlock: () => { - this.unlockDrawer(id) - } + const drawerProps = { + id: id, + allowMultiples: options.allowMultiples ?? false, + escClosable: options.escClosable ?? true, + first: drawers.length === 0, + style: { + zIndex: 100 - drawers.length, }, - component - )) + ref: React.createRef(), + close: this.close, + lock: () => this.lockDrawerId(id), + unlock: () => this.unlockDrawer(id), + } + + drawers.push(React.createElement(Sidedrawer, drawerProps, component)) if (options.lock) { this.lockDrawerId(id) } - await this.setState({ drawers }) + await this.setState({ + drawers, + }) setTimeout(() => { this.toggleDrawerVisibility(id, true) }, 10) window.app.eventBus.emit("sidedrawer.open") + + if (this.state.drawers.length > 0) { + app.eventBus.emit("sidedrawers.visible", true) + } } toggleDrawerVisibility = (id, to) => { - const drawer = document.getElementById(id) - const drawerClasses = drawer.classList + // find drawer + const drawer = this.state.drawers.find(drawer => drawer.props.id === id) - if (to) { - app.cores.sound.useUIAudio("sidebar.expand") - - drawerClasses.remove("hided") - } else { - app.cores.sound.useUIAudio("sidebar.collapse") - - drawerClasses.add("hided") + if (!drawer) { + console.warn(`Sidedrawer with id "${id}" does not exist.`) + return } + + if (!drawer.ref.current) { + console.warn(`Sidedrawer with id "${id}" has not valid ref.`) + return + } + + return drawer.ref.current.toggleVisibility(to) } close = (id) => { @@ -186,7 +203,7 @@ export default class SidedrawerController extends React.Component { // emit event window.app.eventBus.emit("sidedrawer.close") - // toogleVisibility off + // toggleVisibility off this.toggleDrawerVisibility(drawerId, false) // await drawer transition @@ -195,6 +212,10 @@ export default class SidedrawerController extends React.Component { drawers = drawers.filter(drawer => drawer.props.id !== drawerId) this.setState({ drawers }) + + if (this.state.drawers.length === 0) { + app.eventBus.emit("sidedrawers.visible", false) + } }, 500) } @@ -231,7 +252,7 @@ export default class SidedrawerController extends React.Component { className={classnames( "sidedrawers-wrapper", { - ["floating-sidebar"]: window.app?.cores.settings.get("sidebar.floating") + ["hidden"]: !this.state.drawers.length || this.state.globalVisible, } )} > diff --git a/packages/app/src/components/Layout/sidedrawer/index.less b/packages/app/src/components/Layout/sidedrawer/index.less index 810bc267..3be6a067 100755 --- a/packages/app/src/components/Layout/sidedrawer/index.less +++ b/packages/app/src/components/Layout/sidedrawer/index.less @@ -1,50 +1,48 @@ @import "theme/vars.less"; .sidedrawers-wrapper { + position: relative; + top: 0; + right: 0; + display: flex; flex-direction: row; - &.floating-sidebar { - z-index: 950; - position: absolute; - margin-left: @app_sidebar_width; - } - - .sidedrawer { - position: relative; + padding: @sidebar_padding; - width: auto; // by default - height: 100vh; + height: 100dvh; + height: 100vh; + + .sidedrawer { + position: absolute; + + z-index: 100; + + top: 0; + left: 0; + bottom: 0; + + margin-top: @sidebar_padding; + height: calc(100% - @sidebar_padding * 2); + + width: auto; min-width: 400px; - - z-index: 20; + max-width: 15vw; background-color: var(--sidedrawer-background-color); - border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0; + border-radius: @sidebar_borderRadius; padding: 20px; - padding-left: 30px; - - transform: translate(-20px, 0); overflow-x: hidden; overflow-y: overlay; - word-break: break-all; - transition: all 150ms ease-in-out; + box-shadow: @card-shadow; + } - // create shadow on the right side - box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.1) !important; - - &.first { - transform: translate(-10px, 0); - } - - &.hided { - width: 0; - min-width: 0; - padding: 0; - } + &.hidden{ + width: 0; + padding: 0; } } \ No newline at end of file diff --git a/packages/app/src/components/Layout/toolsBar/index.jsx b/packages/app/src/components/Layout/toolsBar/index.jsx new file mode 100644 index 00000000..d85ebfd4 --- /dev/null +++ b/packages/app/src/components/Layout/toolsBar/index.jsx @@ -0,0 +1,89 @@ +import React from "react" +import * as antd from "antd" +import classnames from "classnames" +import { Motion, spring } from "react-motion" +import { Translation } from "react-i18next" + +import { Icons } from "components/Icons" + +import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components" +import WidgetsWrapper from "components/WidgetsWrapper" + +import "./index.less" + +export default class ToolsBar extends React.Component { + state = { + visible: false, + } + + componentDidMount() { + app.layout.tools_bar = this.interface + + setTimeout(() => { + this.setState({ + visible: true, + }) + }, 10) + } + + componentWillUnmount() { + delete app.layout.tools_bar + } + + interface = { + toggleVisibility: (to) => { + this.setState({ + visible: to ?? !this.state.visible, + }) + }, + } + + render() { + return + {({ x, width }) => { + return
+ + +
+
+

+ + {(t) => t("Trendings")} +

+
+ + +
+ +
+
+

+ + {(t) => t("Online Friends")} +

+
+ + +
+ + +
+ }} + + } +} \ No newline at end of file diff --git a/packages/app/src/components/Layout/toolsBar/index.less b/packages/app/src/components/Layout/toolsBar/index.less new file mode 100644 index 00000000..3b14b124 --- /dev/null +++ b/packages/app/src/components/Layout/toolsBar/index.less @@ -0,0 +1,67 @@ +.tools-bar { + position: relative; + + display: flex; + flex-direction: column; + + max-width: 20vw; + + height: 100vh; + height: 100dvh; + + border-left: 1px solid var(--border-color); + + gap: 20px; + + + &.visible { + padding: 20px; + } + + .card { + display: flex; + flex-direction: column; + + background-color: var(--background-color-accent); + border-radius: 12px; + + padding: 20px; + + isolation: isolate; + + h1, + h2 { + width: fit-content; + margin: 0; + } + + &.header { + position: relative; + + display: flex; + flex-direction: row; + + justify-content: space-between; + align-items: center; + + width: 100%; + + margin-bottom: 10px; + + z-index: 50; + + -webkit-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color); + -moz-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color); + box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color); + } + + &.content { + position: relative; + + transform: translateY(-30px); + padding-top: 35px; + + z-index: 45; + } + } +} \ No newline at end of file diff --git a/packages/app/src/components/Layout/topBar/index.jsx b/packages/app/src/components/Layout/topBar/index.jsx index a91a8332..4d231089 100644 --- a/packages/app/src/components/Layout/topBar/index.jsx +++ b/packages/app/src/components/Layout/topBar/index.jsx @@ -4,25 +4,10 @@ import { Motion, spring } from "react-motion" import useLayoutInterface from "hooks/useLayoutInterface" import useDefaultVisibility from "hooks/useDefaultVisibility" +import useTopBar from "hooks/useTopBar" import "./index.less" -export const UseTopBar = (props) => { - app.layout.top_bar.render( - - {props.children} - , - props.options) - - React.useEffect(() => { - return () => { - app.layout.top_bar.renderDefault() - } - }, []) - - return null -} - export default (props) => { const [visible, setVisible] = useDefaultVisibility() const [shouldUseTopBarSpacer, setShouldUseTopBarSpacer] = React.useState(true) @@ -45,7 +30,7 @@ export default (props) => { setRender(null) }, shouldUseTopBarSpacer: (to) => { - app.layout.toogleTopBarSpacer(to) + app.layout.toggleTopBarSpacer(to) setShouldUseTopBarSpacer(to) } }) @@ -69,27 +54,27 @@ export default (props) => { React.useEffect(() => { if (!shouldUseTopBarSpacer) { - app.layout.tooglePagePanelSpacer(true) + app.layout.togglePagePanelSpacer(true) } else { - app.layout.tooglePagePanelSpacer(false) + app.layout.togglePagePanelSpacer(false) } }, [shouldUseTopBarSpacer]) React.useEffect(() => { if (shouldUseTopBarSpacer) { if (visible) { - app.layout.toogleTopBarSpacer(true) + app.layout.toggleTopBarSpacer(true) } else { - app.layout.toogleTopBarSpacer(false) + app.layout.toggleTopBarSpacer(false) } } else { if (visible) { - app.layout.tooglePagePanelSpacer(true) + app.layout.togglePagePanelSpacer(true) } else { - app.layout.tooglePagePanelSpacer(false) + app.layout.togglePagePanelSpacer(false) } - app.layout.toogleTopBarSpacer(false) + app.layout.toggleTopBarSpacer(false) } }, [visible]) diff --git a/packages/app/src/components/Login/index.jsx b/packages/app/src/components/Login/index.jsx index 6afc5689..87451a95 100755 --- a/packages/app/src/components/Login/index.jsx +++ b/packages/app/src/components/Login/index.jsx @@ -51,12 +51,12 @@ export default class Login extends React.Component { } this.clearError() - this.toogleLoading(true) + this.toggleLoading(true) const loginProcess = await AuthModel.login(payload).catch((error) => { console.error(error, error.response) - this.toogleLoading(false) + this.toggleLoading(false) this.onError(error.response.data.message) return false @@ -86,7 +86,7 @@ export default class Login extends React.Component { app.eventBus.emit("app.createRegister") } - toogleLoading = (to) => { + toggleLoading = (to) => { if (typeof to === "undefined") { to = !this.state.loading } @@ -129,11 +129,11 @@ export default class Login extends React.Component { const phase = phasesToSteps[this.state.phase] if (typeof stepsValidations[phase] === "function") { - this.toogleLoading(true) + this.toggleLoading(true) const result = await stepsValidations[phase](this.state.loginInputs) - this.toogleLoading(false) + this.toggleLoading(false) if (!result) { this.formRef.current.setFields([ diff --git a/packages/app/src/components/PagePanels/components/NavMenu/index.jsx b/packages/app/src/components/PagePanels/components/NavMenu/index.jsx index 54b70d62..cf5bb232 100644 --- a/packages/app/src/components/PagePanels/components/NavMenu/index.jsx +++ b/packages/app/src/components/PagePanels/components/NavMenu/index.jsx @@ -10,13 +10,13 @@ const NavMenu = (props) => { } return
- { - props.header && - } +
+ { + props.header &&
+ {props.header} +
+ } -