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 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) }}>
{({ y }) => <div
className="bottomBar"
style={{
WebkitTransform: `translate3d(0, ${y}px, 0)`,
transform: `translate3d(0, ${y}px, 0)`,
}}
>
<div className="items">
{({ y }) =>
<div className="bottomBar_wrapper">
<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 })
className="bottomBar"
style={{
WebkitTransform: `translate3d(0, ${y}px, 0)`,
transform: `translate3d(0, ${y}px, 0)`,
}}
>
<div className="icon">
{createIconRender("Home")}
<div className="items">
<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
key="searcher"
id="searcher"
className="item"
onClick={app.controls.openSearcher}
>
<div className="icon">
{createIconRender("Search")}
</div>
</div>
<AccountButton />
</div>
</div>}
}
</Motion>
</>
}

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

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