OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Update UI for two calls in the PiP view 

and also merge hold_ui changes
pull/21833/head
David Baker 2020-12-07 17:56:36 +00:00
parent ab71547c4c 747d743bd0
commit 8a58c9dea0
3 changed files with 56 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
res/css/views/voip/_CallView.scss
View File

@ -16,7 +16,7 @@ limitations under the License.
*/
.mx_CallView {
border-radius: 10px;
border-radius: 8px;
background-color: $voipcall-plinth-color;
padding-left: 8px;
padding-right: 8px;
@ -49,6 +49,11 @@ limitations under the License.
height: 36px;
}
}
.mx_CallView_voice_holdText {
padding-top: 10px;
padding-bottom: 25px;
}
}
.mx_CallView_voice {
@ -58,6 +63,7 @@ limitations under the License.
align-items: center;
justify-content: center;
background-color: $inverted-bg-color;
border-radius: 8px;
}
.mx_CallView_voice_hold {
@ -69,18 +75,19 @@ limitations under the License.
&::after {
position: absolute;
content: '';
width: 40px;
height: 40px;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6);
background-image: url('$(res)/img/voip/paused.svg');
background-position: center;
background-size: cover;
background-size: 40px;
background-repeat: no-repeat;
}
.mx_CallView_pip &::after {
width: 30px;
height: 30px;
background-size: 30px;
}
}
.mx_BaseAvatar {
@ -91,7 +98,7 @@ limitations under the License.
.mx_CallView_voice_holdText {
height: 20px;
padding-top: 10px;
padding-top: 20px;
padding-bottom: 15px;
color: $accent-fg-color;
font-weight: bold;
@ -104,6 +111,8 @@ limitations under the License.
width: 100%;
position: relative;
z-index: 30;
border-radius: 8px;
overflow: hidden;
}
.mx_CallView_video_hold {
@ -126,6 +135,16 @@ limitations under the License.
background-size: cover;
background-position: center;
filter: blur(20px);
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
}
}
.mx_CallView_video_holdContent {
@ -163,10 +182,6 @@ limitations under the License.
flex-direction: row;
align-items: center;
justify-content: left;
.mx_BaseAvatar {
margin-right: 12px;
}
}
.mx_CallView_header_callType {
@ -175,33 +190,15 @@ limitations under the License.
}
.mx_CallView_header_secondaryCallInfo {
margin-left: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
.mx_AccessibleButton_hasKind {
padding: 0px;
}
}
.mx_CallView_header_secondaryCallInfo_avatarContainer {
width: 32px;
height: 32px;
margin-right: 12px;
border-radius: 2000px;
overflow: hidden;
position: relative;
.mx_BaseAvatar {
filter: blur(3px);
overflow: hidden;
&::before {
content: '·';
margin-left: 6px;
margin-right: 6px;
}
}
.mx_CallView_header_controls {
margin-left: 12px;
margin-left: auto;
}
.mx_CallView_header_button {
@ -235,6 +232,7 @@ limitations under the License.
}
.mx_CallView_header_callInfo {
margin-left: 12px;
margin-right: 16px;
}
@ -243,16 +241,21 @@ limitations under the License.
font-size: 12px;
line-height: initial;
height: 15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 116px;
}
.mx_CallView_secondaryCall_roomName {
margin-left: 4px;
}
.mx_CallView_header_callTypeSmall {
font-size: 12px;
color: $secondary-fg-color;
line-height: initial;
height: 15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 240px;
}
.mx_CallView_header_phoneIcon {

32
src/components/views/voip/CallView.tsx
View File

@ -463,7 +463,7 @@ export default class CallView extends React.Component<IProps, IState> {
{callControls}
</div>;
} else {
const avatarSize = this.props.pipMode ? 75 : 200;
const avatarSize = this.props.pipMode ? 76 : 160;
const classes = classNames({
mx_CallView_voice: true,
mx_CallView_voice_hold: isOnHold,
@ -515,22 +515,14 @@ export default class CallView extends React.Component<IProps, IState> {
let secondaryCallInfo;
if (this.props.secondaryCall) {
const secCallRoom = client.getRoom(this.props.secondaryCall.roomId);
secondaryCallInfo = <div className="mx_CallView_header_secondaryCallInfo">
<div className="mx_CallView_header_secondaryCallInfo_avatarContainer">
<AccessibleButton onClick={this.onSecondaryRoomAvatarClick}>
<RoomAvatar room={secCallRoom} height={32} width={32} />
</AccessibleButton>
</div>
<div>
<div className="mx_CallView_header_roomName">{secCallRoom.name}</div>
<AccessibleButton kind="link" onClick={this.onSecondaryCallResumeClick}>
{_t("Resume")}
</AccessibleButton>
</div>
</div>;
} else {
// keeps it present but empty because it has the margin-left: auto to make the alignment correct
secondaryCallInfo = <div className="mx_CallView_header_secondaryCallInfo" />;
secondaryCallInfo = <span className="mx_CallView_header_secondaryCallInfo">
<AccessibleButton element='span' onClick={this.onSecondaryRoomAvatarClick}>
<RoomAvatar room={secCallRoom} height={16} width={16} />
<span className="mx_CallView_secondaryCall_roomName">
{_t("%(name)s paused", { name: secCallRoom.name })}
</span>
</AccessibleButton>
</span>;
}
header = <div className="mx_CallView_header">
@ -539,9 +531,11 @@ export default class CallView extends React.Component<IProps, IState> {
</AccessibleButton>
<div className="mx_CallView_header_callInfo">
<div className="mx_CallView_header_roomName">{callRoom.name}</div>
<div className="mx_CallView_header_callTypeSmall">{callTypeText}</div>
<div className="mx_CallView_header_callTypeSmall">
{callTypeText}
{secondaryCallInfo}
</div>
</div>
{secondaryCallInfo}
{headerControls}
</div>;
myClassName = 'mx_CallView_pip';

3
src/i18n/strings/en_EN.json
View File

@ -850,7 +850,7 @@
"Voice Call": "Voice Call",
"Fill Screen": "Fill Screen",
"Return to call": "Return to call",
"Resume": "Resume",
"%(name)s paused": "%(name)s paused",
"Unknown caller": "Unknown caller",
"Incoming voice call": "Incoming voice call",
"Incoming video call": "Incoming video call",
@ -2260,6 +2260,7 @@
"<b>Warning</b>: You should only set up key backup from a trusted computer.": "<b>Warning</b>: You should only set up key backup from a trusted computer.",
"Access your secure message history and set up secure messaging by entering your recovery key.": "Access your secure message history and set up secure messaging by entering your recovery key.",
"If you've forgotten your recovery key you can <button>set up new recovery options</button>": "If you've forgotten your recovery key you can <button>set up new recovery options</button>",
"Resume": "Resume",
"Hold": "Hold",
"Reject invitation": "Reject invitation",
"Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",