mirror of https://github.com/vector-im/riot-web
Rename css
parent
8ac82457e8
commit
4328083ea7
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_CallView_header {
|
||||
.mx_CallViewHeader {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -24,13 +24,13 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_CallView_header_callType {
|
||||
.mx_CallViewHeader_callType {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_CallView_header_secondaryCallInfo {
|
||||
.mx_CallViewHeader_secondaryCallInfo {
|
||||
&::before {
|
||||
content: '·';
|
||||
margin-left: 6px;
|
||||
|
@ -38,11 +38,11 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header_controls {
|
||||
.mx_CallViewHeader_controls {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mx_CallView_header_button {
|
||||
.mx_CallViewHeader_button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
@ -60,24 +60,24 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header_button_fullscreen {
|
||||
.mx_CallViewHeader_button_fullscreen {
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header_button_expand {
|
||||
.mx_CallViewHeader_button_expand {
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/expand.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header_callInfo {
|
||||
.mx_CallViewHeader_callInfo {
|
||||
margin-left: 12px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mx_CallView_header_roomName {
|
||||
.mx_CallViewHeader_roomName {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
line-height: initial;
|
||||
|
@ -88,7 +88,7 @@ limitations under the License.
|
|||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mx_CallView_header_callTypeSmall {
|
||||
.mx_CallViewHeader_callTypeSmall {
|
||||
font-size: 12px;
|
||||
color: $secondary-fg-color;
|
||||
line-height: initial;
|
||||
|
@ -99,7 +99,7 @@ limitations under the License.
|
|||
max-width: 240px;
|
||||
}
|
||||
|
||||
.mx_CallView_header_callTypeIcon {
|
||||
.mx_CallViewHeader_callTypeIcon {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
height: 16px;
|
||||
|
@ -119,11 +119,11 @@ limitations under the License.
|
|||
mask-position: center;
|
||||
}
|
||||
|
||||
&.mx_CallView_header_callTypeIcon_voice::before {
|
||||
&.mx_CallViewHeader_callTypeIcon_voice::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
|
||||
&.mx_CallView_header_callTypeIcon_video::before {
|
||||
&.mx_CallViewHeader_callTypeIcon_video::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -61,20 +61,20 @@ type CallControlsProps = Pick<CallViewHeaderProps, 'pipMode' | 'type'> & {
|
|||
roomId: string;
|
||||
};
|
||||
const CallViewHeaderControls: React.FC<CallControlsProps> = ({ pipMode = false, type, roomId }) => {
|
||||
return <div className="mx_CallView_header_controls">
|
||||
return <div className="mx_CallViewHeader_controls">
|
||||
{ (pipMode && type === CallType.Video) &&
|
||||
<AccessibleTooltipButton className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
|
||||
<AccessibleTooltipButton className="mx_CallViewHeader_button mx_CallViewHeader_button_fullscreen"
|
||||
onClick={onFullscreenClick}
|
||||
title={_t("Fill Screen")}
|
||||
/> }
|
||||
{ pipMode && <AccessibleTooltipButton className="mx_CallView_header_button mx_CallView_header_button_expand"
|
||||
{ pipMode && <AccessibleTooltipButton className="mx_CallViewHeader_button mx_CallViewHeader_button_expand"
|
||||
onClick={() => onExpandClick(roomId)}
|
||||
title={_t("Return to call")}
|
||||
/> }
|
||||
</div>;
|
||||
};
|
||||
const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
|
||||
return <span className="mx_CallView_header_secondaryCallInfo">
|
||||
return <span className="mx_CallViewHeader_secondaryCallInfo">
|
||||
<AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}>
|
||||
<RoomAvatar room={callRoom} height={16} width={16} />
|
||||
<span className="mx_CallView_secondaryCall_roomName">
|
||||
|
@ -86,9 +86,9 @@ const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
|
|||
|
||||
const CallTypeIcon: React.FC<{ type: CallType }> = ({ type }) => {
|
||||
const classes = classNames({
|
||||
'mx_CallView_header_callTypeIcon': true,
|
||||
'mx_CallView_header_callTypeIcon_video': type === CallType.Video,
|
||||
'mx_CallView_header_callTypeIcon_voice': type === CallType.Voice,
|
||||
'mx_CallViewHeader_callTypeIcon': true,
|
||||
'mx_CallViewHeader_callTypeIcon_video': type === CallType.Video,
|
||||
'mx_CallViewHeader_callTypeIcon_voice': type === CallType.Voice,
|
||||
});
|
||||
return <div className={classes} />;
|
||||
};
|
||||
|
@ -104,23 +104,23 @@ export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
|
|||
const callRoomName = callRoom.name;
|
||||
const { roomId } = callRoom;
|
||||
if (!pipMode) {
|
||||
return <div className="mx_CallView_header">
|
||||
return <div className="mx_CallViewHeader">
|
||||
<CallTypeIcon type={type} />
|
||||
<span className="mx_CallView_header_callType">{ callTypeText }</span>
|
||||
<span className="mx_CallViewHeader_callType">{ callTypeText }</span>
|
||||
<CallViewHeaderControls roomId={roomId} pipMode={pipMode} type={type} />
|
||||
</div>;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="mx_CallView_header"
|
||||
className="mx_CallViewHeader"
|
||||
onMouseDown={onPipMouseDown}
|
||||
>
|
||||
<AccessibleButton onClick={() => onRoomAvatarClick(roomId)}>
|
||||
<RoomAvatar room={callRoom} height={32} width={32} />;
|
||||
</AccessibleButton>
|
||||
<div className="mx_CallView_header_callInfo">
|
||||
<div className="mx_CallView_header_roomName">{ callRoomName }</div>
|
||||
<div className="mx_CallView_header_callTypeSmall">
|
||||
<div className="mx_CallViewHeader_callInfo">
|
||||
<div className="mx_CallViewHeader_roomName">{ callRoomName }</div>
|
||||
<div className="mx_CallViewHeader_callTypeSmall">
|
||||
{ callTypeText }
|
||||
{ onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> }
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue