RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve bottomBar interface & style motion

Browse Source
This commit is contained in:
SrGooglo 2023-06-26 23:31:46 +00:00
parent 68a73b7a9c
commit b3e9f4526e
5 changed files with 101 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app/constants/defaultTheme.json
View File

@ -18,6 +18,7 @@
"backgroundRepeat": "no-repeat",
"backgroundAttachment": "fixed",
"top-bar-height": "52px",
"bottom-bar-height": "80px",
"compact-mode": false
},
"defaultVariant": "dark",

119
packages/app/src/components/Layout/bottomBar/index.jsx
View File

@ -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) => {
</div>
}
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 <div
className={classnames(
"quick-nav",
{
["active"]: visible
}
)}
>
{
QuickNavMenuItems.map((item, index) => {
return <div
key={index}
className={classnames(
"quick-nav_item",
{
["disabled"]: item.disabled
}
)}
quicknav-item={item.id}
disabled={item.disabled}
>
{
createIconRender(item.icon)
}
<h1>
{
item.label
}
</h1>
</div>
})
}
</div>
}
export default (props) => {
return <WithPlayerContext>
<BottomBar
@ -192,11 +125,9 @@ export class BottomBar extends React.Component {
static contextType = Context
state = {
allowed: true,
show: true,
visible: true,
visible: false,
quickNavVisible: false,
render: null,
quickNavVisible: false
}
busEvents = {
@ -206,7 +137,7 @@ export class BottomBar extends React.Component {
}
componentDidMount = () => {
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 {
</div>
}
if (!this.state.visible) {
return null
}
const heightValue = this.state.visible ? Number(app.cores.style.defaultVar("bottom-bar-height").replace("px", "")) : 0
return <>
<QuickNavMenu
visible={this.state.quickNavVisible}
/>
<Motion style={{ y: spring(this.state.show ? 0 : 300) }}>
{({ y }) =>
<Motion style={{
y: spring(this.state.visible ? 0 : 300),
height: spring(heightValue)
}}>
{({ y, height }) =>
<div className="bottomBar_wrapper">
<div
className="bottomBar"
style={{
WebkitTransform: `translate3d(0, ${y}px, 0)`,
transform: `translate3d(0, ${y}px, 0)`,
WebkitTransform: `translateY(${y}px)`,
transform: `translateY(${y}px)`,
height: `${height}px`,
}}
>
<div className="items">

6
packages/app/src/components/Layout/bottomBar/index.less
View File

@ -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;

71
packages/app/src/components/Layout/quickNav/index.jsx Normal file
View File

@ -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 <div
className={classnames(
"quick-nav",
{
["active"]: visible
}
)}
>
{
QuickNavMenuItems.map((item, index) => {
return <div
key={index}
className={classnames(
"quick-nav_item",
{
["disabled"]: item.disabled
}
)}
quicknav-item={item.id}
disabled={item.disabled}
>
{
createIconRender(item.icon)
}
<h1>
{
item.label
}
</h1>
</div>
})
}
</div>
}

9
packages/app/src/theme/vars.less
View File

@ -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;
@top_bar_padding: 10px;
@app_bottomBar_iconSize: 45px;
@app_topBar_height: 52px;