michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

New call style and fix title overflow

Browse source
This commit is contained in:
IceDBorn 2023-03-26 21:29:04 +03:00
parent f4dbc93121
commit 6e92a5afb9
2 changed files with 42 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/organisms/room/JitsiRoom.jsx
View file

@ -74,9 +74,11 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId })
if (jitsiCallId) { if (jitsiCallId) {
return ( return (
<Draggable disabled={isJitsiRoom}> <Draggable disabled={isJitsiRoom}>
<div className={isJitsiRoom ? 'call reset_pip' : 'call'}> <div className={isJitsiRoom ? 'call reset_pip' : 'pip'}>
<div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'}> <div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'}>
<div className='call_room_title'>
{roomName} ({spaceName || sn}) {roomName} ({spaceName || sn})
</div>
<div className="call_buttons"> <div className="call_buttons">
<Button <Button
onClick={() => { onClick={() => {
@ -90,7 +92,7 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId })
}} }}
className="close_button" className="close_button"
> >
<img src={SearchIC} alt="hangup" /> <img src={SearchIC} className="call_icon" alt="hangup" />
</Button> </Button>
</div> </div>
</div> </div>

43
src/app/organisms/room/JitsiRoom.scss
View file

@ -11,7 +11,11 @@
border: 1px solid var(--bg-surface-border); border: 1px solid var(--bg-surface-border);
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
color: var(--tc-surface-normal-low); color: var(--tc-surface-normal-low);
background-color: var(--bg-surface); background-color: var(--bg-surface-extra-low);
}
.call_icon {
width: 2rem;
} }
.reset_pip { .reset_pip {
@ -19,9 +23,9 @@
} }
.call_header { .call_header {
text-align: center; margin-top: 0.5rem;
margin-top: 1rem; margin-bottom: 0.5rem;
margin-bottom: 1rem; width: 100%;
} }
.pip_header { .pip_header {
@ -29,13 +33,38 @@
cursor: move; cursor: move;
} }
.call_room_title {
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 70%;
margin: 0 auto;
}
.pip {
max-width: 20rem;
width: 20rem;
max-height: 10rem;
height: 10rem;
user-select: none;
border: 1px solid var(--bg-surface-border);
border-radius: var(--bo-radius);
color: var(--tc-surface-normal-low);
background-color: var(--bg-surface-extra-low);
}
.call_buttons { .call_buttons {
position: absolute; position: absolute;
top: 0.15rem; top: 0.05rem;
right: 0.1rem; right: 0.5rem;
} }
.close_button { .close_button {
filter: invert(26%) sepia(90%) saturate(1997%) hue-rotate(345deg) brightness(113%) contrast(91%); filter: invert(26%) sepia(90%) saturate(1997%) hue-rotate(345deg) brightness(113%) contrast(91%);
height: 3rem; width: 2rem;
height: 2rem;
min-width: 0;
min-height: 0;
box-shadow: none;
} }