imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename css

Browse source
This commit is contained in:
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
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. limitations under the License.
*/ */
.mx_CallView_header { .mx_CallViewHeader {
height: 44px; height: 44px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -24,13 +24,13 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.mx_CallView_header_callType { .mx_CallViewHeader_callType {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: middle;
} }
.mx_CallView_header_secondaryCallInfo { .mx_CallViewHeader_secondaryCallInfo {
&::before { &::before {
content: '·'; content: '·';
margin-left: 6px; margin-left: 6px;
@ -38,11 +38,11 @@ limitations under the License.
} }
} }
.mx_CallView_header_controls { .mx_CallViewHeader_controls {
margin-left: auto; margin-left: auto;
} }
.mx_CallView_header_button { .mx_CallViewHeader_button {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -60,24 +60,24 @@ limitations under the License.
} }
} }
.mx_CallView_header_button_fullscreen { .mx_CallViewHeader_button_fullscreen {
&::before { &::before {
mask-image: url('$(res)/img/element-icons/call/fullscreen.svg'); mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
} }
} }
.mx_CallView_header_button_expand { .mx_CallViewHeader_button_expand {
&::before { &::before {
mask-image: url('$(res)/img/element-icons/call/expand.svg'); mask-image: url('$(res)/img/element-icons/call/expand.svg');
} }
} }
.mx_CallView_header_callInfo { .mx_CallViewHeader_callInfo {
margin-left: 12px; margin-left: 12px;
margin-right: 16px; margin-right: 16px;
} }
.mx_CallView_header_roomName { .mx_CallViewHeader_roomName {
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
line-height: initial; line-height: initial;
@ -88,7 +88,7 @@ limitations under the License.
margin-left: 4px; margin-left: 4px;
} }
.mx_CallView_header_callTypeSmall { .mx_CallViewHeader_callTypeSmall {
font-size: 12px; font-size: 12px;
color: $secondary-fg-color; color: $secondary-fg-color;
line-height: initial; line-height: initial;
@ -99,7 +99,7 @@ limitations under the License.
max-width: 240px; max-width: 240px;
} }
.mx_CallView_header_callTypeIcon { .mx_CallViewHeader_callTypeIcon {
display: inline-block; display: inline-block;
margin-right: 6px; margin-right: 6px;
height: 16px; height: 16px;
@ -119,11 +119,11 @@ limitations under the License.
mask-position: center; 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'); 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'); 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; roomId: string;
}; };
const CallViewHeaderControls: React.FC<CallControlsProps> = ({ pipMode = false, type, roomId }) => { 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) && { (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} onClick={onFullscreenClick}
title={_t("Fill Screen")} 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)} onClick={() => onExpandClick(roomId)}
title={_t("Return to call")} title={_t("Return to call")}
/> } /> }
</div>; </div>;
}; };
const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => { 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)}> <AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}>
<RoomAvatar room={callRoom} height={16} width={16} /> <RoomAvatar room={callRoom} height={16} width={16} />
<span className="mx_CallView_secondaryCall_roomName"> <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 CallTypeIcon: React.FC<{ type: CallType }> = ({ type }) => {
const classes = classNames({ const classes = classNames({
'mx_CallView_header_callTypeIcon': true, 'mx_CallViewHeader_callTypeIcon': true,
'mx_CallView_header_callTypeIcon_video': type === CallType.Video, 'mx_CallViewHeader_callTypeIcon_video': type === CallType.Video,
'mx_CallView_header_callTypeIcon_voice': type === CallType.Voice, 'mx_CallViewHeader_callTypeIcon_voice': type === CallType.Voice,
}); });
return <div className={classes} />; return <div className={classes} />;
}; };
@ -104,23 +104,23 @@ export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
const callRoomName = callRoom.name; const callRoomName = callRoom.name;
const { roomId } = callRoom; const { roomId } = callRoom;
if (!pipMode) { if (!pipMode) {
return <div className="mx_CallView_header"> return <div className="mx_CallViewHeader">
<CallTypeIcon type={type} /> <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} /> <CallViewHeaderControls roomId={roomId} pipMode={pipMode} type={type} />
</div>; </div>;
} }
return ( return (
<div <div
className="mx_CallView_header" className="mx_CallViewHeader"
onMouseDown={onPipMouseDown} onMouseDown={onPipMouseDown}
> >
<AccessibleButton onClick={() => onRoomAvatarClick(roomId)}> <AccessibleButton onClick={() => onRoomAvatarClick(roomId)}>
<RoomAvatar room={callRoom} height={32} width={32} />; <RoomAvatar room={callRoom} height={32} width={32} />;
</AccessibleButton> </AccessibleButton>
<div className="mx_CallView_header_callInfo"> <div className="mx_CallViewHeader_callInfo">
<div className="mx_CallView_header_roomName">{ callRoomName }</div> <div className="mx_CallViewHeader_roomName">{ callRoomName }</div>
<div className="mx_CallView_header_callTypeSmall"> <div className="mx_CallViewHeader_callTypeSmall">
{ callTypeText } { callTypeText }
{ onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> } { onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> }
</div> </div>