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

Rename css

pull/21833/head
Dariusz Niemczyk 2021-08-06 14:17:39 +02:00
parent 8ac82457e8
commit 4328083ea7
No known key found for this signature in database
GPG Key ID: 28DFE7164F497CB6
2 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
res/css/views/voip/_CallViewHeader.scss
View File

@ -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');
}
}

26
src/components/views/voip/CallView/CallViewHeader.tsx
View File

@ -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>