Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fixes call tiles overflow #8096

Merged
merged 12 commits into from
Apr 14, 2022
Merged

Fixes call tiles overflow #8096

Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7a80f36
Responsive call tiles
luixxiul Mar 20, 2022
38cd480
Take e2e icon into consideration on Bubble message layout
luixxiul Mar 24, 2022
8aa2d02
Use spacing variables
luixxiul Apr 4, 2022
ac863ff
Merge branch 'develop' into CallEvent
luixxiul Apr 6, 2022
a4eb8f0
Merge branch 'develop' into CallEvent
luixxiul Apr 7, 2022
09a4248
Merge branch 'develop' into CallEvent
luixxiul Apr 7, 2022
be4f9a0
Merge branch 'develop' into CallEvent
luixxiul Apr 8, 2022
3a359a5
Merge branch 'develop' into CallEvent
luixxiul Apr 9, 2022
cb1c2ef
spacing variables
luixxiul Apr 9, 2022
bd9ddf9
Merge branch 'develop' into CallEvent
luixxiul Apr 10, 2022
cff33bb
Merge branch 'develop' into CallEvent
luixxiul Apr 13, 2022
35f22cf
Merge branch 'develop' into CallEvent
luixxiul Apr 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 76 additions & 45 deletions res/css/views/messages/_CallEvent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,24 @@ limitations under the License.
width: 100%;

.mx_CallEvent {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 0;

position: relative;
margin: $spacing-4 0;
padding: $spacing-12 $spacing-24;
box-sizing: border-box;
background-color: $dark-panel-bg-color;
border-radius: 8px;
width: 65%;
box-sizing: border-box;
height: 60px;
margin: 4px 0;
height: fit-content;

.mx_CallEvent_iconButton {
display: inline-flex;
margin-right: 8px;

&::before {
content: '';
Expand Down Expand Up @@ -62,6 +64,13 @@ limitations under the License.
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}

&.mx_CallEvent_rejected,
&.mx_CallEvent_noAnswer {
.mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-voice.svg');
}
}
}

&.mx_CallEvent_video {
Expand All @@ -70,57 +79,62 @@ limitations under the License.
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
}

&.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-voice.svg');
}

&.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-video.svg');
&.mx_CallEvent_rejected,
&.mx_CallEvent_noAnswer {
.mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-video.svg');
}
}
}

&.mx_CallEvent_voice.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
&.mx_CallEvent_voice.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-voice.svg');
}
&.mx_CallEvent_missed {
&.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-voice.svg');
}
}

&.mx_CallEvent_video.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
&.mx_CallEvent_video.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-video.svg');
&.mx_CallEvent_video {
.mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-video.svg');
}
}
}

.mx_CallEvent_info {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 12px;
min-width: 0;
width: fit-content;
max-width: 100%;

.mx_CallEvent_info_basic {
display: flex;
flex-direction: column;
gap: 4px;
margin-left: 10px; // To match mx_CallEvent
margin-right: 10px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the same value as margin-left: 10px; just above.

min-width: 0;

.mx_CallEvent_sender {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: 3px;
margin-bottom: 4px;

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.mx_CallEvent_type {
display: flex;
align-items: center;
font-weight: 400;
color: $secondary-content;
font-size: 1.2rem;
line-height: $font-13px;
display: flex;
align-items: center;

.mx_CallEvent_type_icon {
height: 13px;
Expand All @@ -143,12 +157,13 @@ limitations under the License.

.mx_CallEvent_content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
color: $secondary-content;
margin-right: 16px;
gap: 12px; // See mx_IncomingCallToast_buttons
min-width: max-content;
margin-inline-start: 42px; // avatar (32px) + mx_CallEvent_info_basic margin (10px)
word-break: break-word;
max-width: fit-content;

.mx_CallEvent_content_button {
@mixin CallButton;
Expand All @@ -162,25 +177,23 @@ limitations under the License.
}
}

.mx_CallEvent_content_button_reject span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
.mx_CallEvent_content_button_reject {
span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
}

.mx_CallEvent_content_tooltip {
margin-right: 5px;
}
}

.mx_MessageTimestamp {
margin-left: 16px;
}

&.mx_CallEvent_narrow {
height: unset;
width: 290px;
flex-direction: column;
align-items: unset;
gap: 16px;
gap: 4px 16px;
height: unset;
min-width: 290px;

.mx_CallEvent_iconButton {
position: absolute;
Expand All @@ -194,18 +207,36 @@ limitations under the License.

.mx_CallEvent_info {
align-items: unset;
margin-top: 12px;
margin-right: 12px;

.mx_CallEvent_sender {
margin-bottom: 8px;
}
}
}
}
}

.mx_EventTile[data-layout="bubble"] {
.mx_EventTile_e2eIcon + .mx_CallEvent_wrapper {
.mx_CallEvent {
position: relative;

// 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon)
right: calc(5px + 14px + 9px);
}
}
}

.mx_CallEvent_content {
margin-left: 54px; // mx_CallEvent margin (12px) + avatar (32px) + mx_CallEvent_info_basic margin (10px)
margin-bottom: 16px;
.mx_EventTile_leftAlignedBubble {
.mx_CallEvent_wrapper {
.mx_CallEvent {
&.mx_CallEvent_narrow {
gap: 8px 4px;
}
}
}
}

.mx_IRCLayout {
.mx_CallEvent_wrapper {
.mx_CallEvent {
margin-left: 4px; // display green line on left
}
}
}