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

implemented setBackgroundColorValues

Browse Source
This commit is contained in:
SrGooglo 2023-10-12 19:56:01 +00:00
parent 3dae36d7e5
commit 6912d3f814
2 changed files with 71 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/app/src/components/Layout/draggableDrawer/index.jsx
View File

@ -56,7 +56,8 @@ export default class DraggableDrawer extends Component {
start: 0,
position: 0,
touching: false,
listenersAttached: false
listenersAttached: false,
useBackgroundColorValues: null,
}
DESKTOP_MODE = false
@ -65,11 +66,21 @@ export default class DraggableDrawer extends Component {
MAX_NEGATIVE_SCROLL = -50
PX_TO_CLOSE_FROM_BOTTOM = 200
interface = {
setBackgroundColorValues: (values) => {
this.setState({ useBackgroundColorValues: values })
},
}
componentDidMount() {
app.currentDragger = this.interface
this.DESKTOP_MODE = !app.isMobile
}
componentWillUnmount() {
delete app.currentDragger
this.removeListeners()
}
@ -312,7 +323,8 @@ export default class DraggableDrawer extends Component {
const position = this.getPosition(hiddenPosition)
let containerStyle = {
backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`
backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`,
"--body-background": this.state.useBackgroundColorValues ? `rgba(${this.state.useBackgroundColorValues}, 1)` : "var(--background-color-primary)",
}
return createPortal(
@ -362,6 +374,10 @@ export default class DraggableDrawer extends Component {
/>
</div>
<div
className="draggable-drawer_body_background"
/>
{this.props.children}
</div>
</div>

83
packages/app/src/components/Layout/draggableDrawer/index.less
View File

@ -1,3 +1,5 @@
@body_border_radius: 24px;
.draggable-drawer {
position: fixed;
@ -9,21 +11,66 @@
display: flex;
justify-content: center;
flex-shrink: 0;
align-items: center;
z-index: 40;
z-index: 50;
transition: background-color 0.2s linear;
overflow-y: hidden;
overscroll-behavior: none;
.draggable-drawer_body {
box-sizing: border-box;
.draggable-drawer_body_background {
box-sizing: border-box;
position: absolute;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-left-radius: @body_border_radius;
border-top-right-radius: @body_border_radius;
transition: all 150ms ease-in-out;
background-color: var(--body-background);
opacity: 0.4;
&::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 120px;
z-index: 45;
background-color: var(--body-background);
transform: translateY(95%);
}
}
.draggable-drawer_body {
box-sizing: border-box;
position: absolute;
z-index: 55;
bottom: 0px;
width: 100%;
@ -36,8 +83,8 @@
padding: 30px 10px 10px 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: @body_border_radius;
border-top-right-radius: @body_border_radius;
.dragger-area {
width: 100%;
@ -57,15 +104,14 @@
.dragger-indicator {
background-color: var(--background-color-contrast);
width: 100px;
height: 8px;
border-radius: 8px;
}
}
}
.draggable-drawer_body {
&::after {
content: "";
@ -85,27 +131,4 @@
transform: translateY(95%);
}
}
&.fill-end {
.draggable-drawer_body {
&::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 120px;
z-index: 45;
background-color: var(--background-color-primary);
transform: translateY(95%);
}
}
}
}