From 1819edb154a326b13181c4263f37a52487796de0 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Mon, 26 Jun 2023 23:31:46 +0000 Subject: [PATCH] improve `bottomBar` interface & style motion --- packages/app/constants/defaultTheme.json | 1 + .../src/components/Layout/bottomBar/index.jsx | 119 ++++-------------- .../components/Layout/bottomBar/index.less | 6 +- .../src/components/Layout/quickNav/index.jsx | 71 +++++++++++ packages/app/src/theme/vars.less | 9 +- 5 files changed, 101 insertions(+), 105 deletions(-) create mode 100644 packages/app/src/components/Layout/quickNav/index.jsx diff --git a/packages/app/constants/defaultTheme.json b/packages/app/constants/defaultTheme.json index f248d990..3220de89 100755 --- a/packages/app/constants/defaultTheme.json +++ b/packages/app/constants/defaultTheme.json @@ -18,6 +18,7 @@ "backgroundRepeat": "no-repeat", "backgroundAttachment": "fixed", "top-bar-height": "52px", + "bottom-bar-height": "80px", "compact-mode": false }, "defaultVariant": "dark", diff --git a/packages/app/src/components/Layout/bottomBar/index.jsx b/packages/app/src/components/Layout/bottomBar/index.jsx index b765f466..48260c60 100755 --- a/packages/app/src/components/Layout/bottomBar/index.jsx +++ b/packages/app/src/components/Layout/bottomBar/index.jsx @@ -8,6 +8,8 @@ import { Icons, createIconRender } from "components/Icons" import { WithPlayerContext, Context } from "contexts/WithPlayerContext" +import QuickNavMenu from "components/Layout/quickNav" + import PlayerView from "pages/@mobile-views/player" import CreatorView from "pages/@mobile-views/creator" @@ -111,75 +113,6 @@ const AccountButton = (props) => { } - -const QuickNavMenuItems = [ - { - id: "music", - icon: "MdAlbum", - label: "Music", - location: "/music" - }, - { - id: "tv", - icon: "Tv", - label: "Tv", - location: "/tv" - }, - { - id: "groups", - icon: "MdGroups", - label: "Groups", - location: "/groups", - disabled: true, - }, - { - id: "marketplace", - icon: "Box", - label: "Marketplace", - location: "/marketplace", - disabled: true - }, -] - -const QuickNavMenu = ({ - visible, -}) => { - return
- { - QuickNavMenuItems.map((item, index) => { - return
- { - createIconRender(item.icon) - } -

- - { - item.label - } -

-
- }) - } -
-} - export default (props) => { return { - app.BottomBarController = { + this.interface = app.layout.bottom_bar = { toogleVisible: this.toggleVisibility, isVisible: () => this.state.visible, render: (fragment) => { @@ -217,6 +148,10 @@ export class BottomBar extends React.Component { }, } + setTimeout(() => { + this.setState({ visible: true }) + }, 10) + // Register bus events Object.keys(this.busEvents).forEach((key) => { app.eventBus.on(key, this.busEvents[key]) @@ -224,7 +159,7 @@ export class BottomBar extends React.Component { } componentWillUnmount = () => { - delete window.app.BottomBarController + delete window.app.layout.bottom_bar // Unregister bus events Object.keys(this.busEvents).forEach((key) => { @@ -233,23 +168,11 @@ export class BottomBar extends React.Component { } toggleVisibility = (to) => { - if (!app.isMobile) { - to = false - } else { - to = to ?? !this.state.visible + if (typeof to === "undefined") { + to = !this.state.visible } - if (!to) { - this.setState({ show: to }, () => { - setTimeout(() => { - this.setState({ visible: to }) - }, 500) - }) - } else { - this.setState({ visible: to }, () => { - this.setState({ show: to }) - }) - } + this.setState({ visible: to }) } handleItemClick = (item) => { @@ -362,23 +285,25 @@ export class BottomBar extends React.Component { } - if (!this.state.visible) { - return null - } + const heightValue = this.state.visible ? Number(app.cores.style.defaultVar("bottom-bar-height").replace("px", "")) : 0 return <> - - {({ y }) => + + {({ y, height }) =>
diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/components/Layout/bottomBar/index.less index 5ac453fc..a530f46c 100755 --- a/packages/app/src/components/Layout/bottomBar/index.less +++ b/packages/app/src/components/Layout/bottomBar/index.less @@ -6,7 +6,7 @@ box-sizing: border-box; - bottom: @app_bottomBar_height; + bottom: var(--bottom-bar-height); left: 0; right: 0; @@ -141,7 +141,7 @@ display: flex; flex-direction: row; - + align-items: center; justify-content: center; @@ -158,7 +158,7 @@ justify-content: center; width: 100%; - height: @app_bottomBar_height; + height: var(--bottom-bar-height); overflow: hidden; diff --git a/packages/app/src/components/Layout/quickNav/index.jsx b/packages/app/src/components/Layout/quickNav/index.jsx new file mode 100644 index 00000000..09042af3 --- /dev/null +++ b/packages/app/src/components/Layout/quickNav/index.jsx @@ -0,0 +1,71 @@ +import React from "react" +import classnames from "classnames" +import { createIconRender } from "components/Icons" + +const QuickNavMenuItems = [ + { + id: "music", + icon: "MdAlbum", + label: "Music", + location: "/music" + }, + { + id: "tv", + icon: "Tv", + label: "Tv", + location: "/tv" + }, + { + id: "groups", + icon: "MdGroups", + label: "Groups", + location: "/groups", + disabled: true, + }, + { + id: "marketplace", + icon: "Box", + label: "Marketplace", + location: "/marketplace", + disabled: true + }, +] + +export default ({ + visible, +}) => { + return
+ { + QuickNavMenuItems.map((item, index) => { + return
+ { + createIconRender(item.icon) + } +

+ + { + item.label + } +

+
+ }) + } +
+} diff --git a/packages/app/src/theme/vars.less b/packages/app/src/theme/vars.less index 2b7a79e9..098ddc52 100755 --- a/packages/app/src/theme/vars.less +++ b/packages/app/src/theme/vars.less @@ -1,7 +1,3 @@ -@app_bottomBar_height: 80px; -@app_bottomBar_iconSize: 45px; -@app_topBar_height: 52px; - @app_sidebar_width: 80px; @app_sidebar_width_expanded: 230px; @@ -22,4 +18,7 @@ // Mobile @top_bar_height: 52px; -@top_bar_padding: 10px; \ No newline at end of file +@top_bar_padding: 10px; + +@app_bottomBar_iconSize: 45px; +@app_topBar_height: 52px; \ No newline at end of file