RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve layout of bottom bar

Browse Source
This commit is contained in:
SrGooglo 2023-06-26 18:22:05 +00:00
parent 44ac05617e
commit 1a3c3674a1
2 changed files with 86 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -372,68 +372,72 @@ export class BottomBar extends React.Component {
/> />
<Motion style={{ y: spring(this.state.show ? 0 : 300) }}> <Motion style={{ y: spring(this.state.show ? 0 : 300) }}>
{({ y }) => <div {({ y }) =>
className="bottomBar" <div className="bottomBar_wrapper">
style={{
WebkitTransform: `translate3d(0, ${y}px, 0)`,
transform: `translate3d(0, ${y}px, 0)`,
}}
>
<div className="items">
<div <div
key="creator" className="bottomBar"
id="creator" style={{
className={classnames("item", "primary")} WebkitTransform: `translate3d(0, ${y}px, 0)`,
onClick={openCreator} transform: `translate3d(0, ${y}px, 0)`,
>
<div className="icon">
{createIconRender("PlusCircle")}
</div>
</div>
{
this.context.currentManifest && <div
className="item"
>
<PlayerButton
manifest={this.context.currentManifest}
playback={this.context.playbackStatus}
colorAnalysis={this.context.coverColorAnalysis}
/>
</div>
}
<div
key="navigator"
id="navigator"
className="item"
onClick={() => app.location.push("/")}
onTouchMove={this.handleNavTouchMove}
onTouchStart={this.handleNavTouchStart}
onTouchEnd={this.handleNavTouchEnd}
onTouchCancel={() => {
this.setState({ quickNavVisible: false })
}} }}
> >
<div className="icon"> <div className="items">
{createIconRender("Home")} <div
key="creator"
id="creator"
className={classnames("item", "primary")}
onClick={openCreator}
>
<div className="icon">
{createIconRender("PlusCircle")}
</div>
</div>
{
this.context.currentManifest && <div
className="item"
>
<PlayerButton
manifest={this.context.currentManifest}
playback={this.context.playbackStatus}
colorAnalysis={this.context.coverColorAnalysis}
/>
</div>
}
<div
key="navigator"
id="navigator"
className="item"
onClick={() => app.location.push("/")}
onTouchMove={this.handleNavTouchMove}
onTouchStart={this.handleNavTouchStart}
onTouchEnd={this.handleNavTouchEnd}
onTouchCancel={() => {
this.setState({ quickNavVisible: false })
}}
>
<div className="icon">
{createIconRender("Home")}
</div>
</div>
<div
key="searcher"
id="searcher"
className="item"
onClick={app.controls.openSearcher}
>
<div className="icon">
{createIconRender("Search")}
</div>
</div>
<AccountButton />
</div> </div>
</div> </div>
<div
key="searcher"
id="searcher"
className="item"
onClick={app.controls.openSearcher}
>
<div className="icon">
{createIconRender("Search")}
</div>
</div>
<AccountButton />
</div> </div>
</div>} }
</Motion> </Motion>
</> </>
} }

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

@ -23,7 +23,7 @@
height: 0; height: 0;
opacity: 0; opacity: 0;
background-color: var(--background-color-accent); background-color: var(--background-color-primary);
box-shadow: @card-shadow-top; box-shadow: @card-shadow-top;
@ -130,44 +130,53 @@
} }
} }
.bottomBar { .bottomBar_wrapper {
position: absolute; //position: absolute;
position: relative;
bottom: 0;
left: 0;
z-index: 550;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
z-index: 550;
left: 0;
bottom: 0;
width: 100vw; width: 100vw;
min-width: 100vw;
max-width: 100vw;
//padding: 10px;
}
.bottomBar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: @app_bottomBar_height; height: @app_bottomBar_height;
padding: 10px;
overflow: hidden; overflow: hidden;
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
//border-radius: 12px;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
//box-shadow: @card-shadow;
box-shadow: @card-shadow-top; box-shadow: @card-shadow-top;
.items { .items {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
//white-space: nowrap;
//overflow-x: overlay;
height: 100%; height: 100%;
width: 100vw; width: 100%;
.item { .item {
display: inline-flex; display: inline-flex;