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

added compact mode

Browse Source
This commit is contained in:
SrGooglo 2023-05-24 17:36:11 +00:00
parent 96238ee018
commit e6763b4cc6
2 changed files with 70 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/app/src/components/LiveChat/index.jsx
View File

@ -336,23 +336,34 @@ export default class LiveChat extends React.Component {
return <div
className={classnames(
"liveChat",
{ ["empty"]: this.state.timeline.length === 0 }
{
["empty"]: this.state.timeline.length === 0,
["compact"]: this.props.compact
}
)}
>
{
this.state.timeline.length === 0 ?
<antd.Empty description="Welcome to the room" /> :
<div
className="liveChat_timeline"
ref={this.timelineRef}
id="liveChat_timeline"
>
{
this.state.timeline.map((line, index) => {
return <Line key={index} {...line} />
})
}
</div>
!this.props.compact && this.state.timeline.length === 0 && <antd.Empty description="Welcome to the room" />
}
{
this.props.compact && this.state.timeline.length === 0 && <p>
Welcome to the room
</p>
}
{
this.state.timeline.length !== 0 && <div
className="liveChat_timeline"
ref={this.timelineRef}
id="liveChat_timeline"
>
{
this.state.timeline.map((line, index) => {
return <Line key={index} {...line} />
})
}
</div>
}
<div className="liveChat_textInput">

46
packages/app/src/components/LiveChat/index.less
View File

@ -9,15 +9,59 @@
overflow: hidden;
transition: all 250ms ease-in-out;
&.empty {
justify-content: center;
align-items: center;
&.compact {
height: 5vh!important;
}
}
&.compact {
height: 15vh;
justify-content: flex-end;
.liveChat_timeline {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
margin-bottom: 10px;
gap: 5px;
.textRoom_line {
padding: 0;
margin: 0;
h4 {
font-size: 0.8rem;
}
}
}
.liveChat_textInput {
position: relative;
bottom: 0;
left: 0;
margin-bottom: 0;
}
}
&.floating {
.textRoom_line {
display: relative;
background-color: rgba(var(--layoutBackgroundColor), 0.7);
backdrop-filter: blur(20px);
}