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

implemented setBackgroundColorValues

Browse Source
This commit is contained in:
SrGooglo 2023-10-12 19:56:01 +00:00
parent 95bfe8623e
commit 04f99a9653
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, start: 0,
position: 0, position: 0,
touching: false, touching: false,
listenersAttached: false listenersAttached: false,
useBackgroundColorValues: null,
} }
DESKTOP_MODE = false DESKTOP_MODE = false
@ -65,11 +66,21 @@ export default class DraggableDrawer extends Component {
MAX_NEGATIVE_SCROLL = -50 MAX_NEGATIVE_SCROLL = -50
PX_TO_CLOSE_FROM_BOTTOM = 200 PX_TO_CLOSE_FROM_BOTTOM = 200
interface = {
setBackgroundColorValues: (values) => {
this.setState({ useBackgroundColorValues: values })
},
}
componentDidMount() { componentDidMount() {
app.currentDragger = this.interface
this.DESKTOP_MODE = !app.isMobile this.DESKTOP_MODE = !app.isMobile
} }
componentWillUnmount() { componentWillUnmount() {
delete app.currentDragger
this.removeListeners() this.removeListeners()
} }
@ -312,7 +323,8 @@ export default class DraggableDrawer extends Component {
const position = this.getPosition(hiddenPosition) const position = this.getPosition(hiddenPosition)
let containerStyle = { 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( return createPortal(
@ -362,6 +374,10 @@ export default class DraggableDrawer extends Component {
/> />
</div> </div>
<div
className="draggable-drawer_body_background"
/>
{this.props.children} {this.props.children}
</div> </div>
</div> </div>

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

@ -1,3 +1,5 @@
@body_border_radius: 24px;
.draggable-drawer { .draggable-drawer {
position: fixed; position: fixed;
@ -9,21 +11,66 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-shrink: 0;
align-items: center; align-items: center;
z-index: 40; z-index: 50;
transition: background-color 0.2s linear; transition: background-color 0.2s linear;
overflow-y: hidden; overflow-y: hidden;
overscroll-behavior: none; overscroll-behavior: none;
.draggable-drawer_body { box-sizing: border-box;
.draggable-drawer_body_background {
box-sizing: border-box;
position: absolute; position: absolute;
z-index: 50; 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; bottom: 0px;
width: 100%; width: 100%;
@ -36,8 +83,8 @@
padding: 30px 10px 10px 10px; padding: 30px 10px 10px 10px;
border-top-left-radius: 8px; border-top-left-radius: @body_border_radius;
border-top-right-radius: 8px; border-top-right-radius: @body_border_radius;
.dragger-area { .dragger-area {
width: 100%; width: 100%;
@ -57,15 +104,14 @@
.dragger-indicator { .dragger-indicator {
background-color: var(--background-color-contrast); background-color: var(--background-color-contrast);
width: 100px; width: 100px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
} }
} }
}
.draggable-drawer_body {
&::after { &::after {
content: ""; content: "";
@ -85,27 +131,4 @@
transform: translateY(95%); 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%);
}
}
}
} }