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

Commit

Permalink
Fixes call tiles overflow (#8096)
Browse files Browse the repository at this point in the history 
* Responsive call tiles

Fixes element-hq/element-web#20254

Signed-off-by: Suguru Hirahara <[email protected]>

* Take e2e icon into consideration on Bubble message layout

Signed-off-by: Suguru Hirahara <[email protected]>

* Use spacing variables

Signed-off-by: Suguru Hirahara <[email protected]>

* spacing variables

Signed-off-by: Suguru Hirahara <[email protected]>
  • Loading branch information
@luixxiul
luixxiul authored Apr 14, 2022
1 parent 1436f23 commit af3eac2
Showing 1 changed file with 78 additions and 47 deletions.
125 changes: 78 additions & 47 deletions res/css/views/messages/_CallEvent.scss
View file
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: $spacing-4 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: $spacing-4;
margin-left: 10px; // To match mx_CallEvent
margin-right: 10px;
min-width: 0;

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

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,16 +157,17 @@ 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;
gap: $spacing-12; // See mx_IncomingCallToast_buttons
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;
padding: 0 12px;
padding: 0 $spacing-12;

span::before {
mask-size: 16px;
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: $spacing-4 $spacing-16;
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: $spacing-8 $spacing-4;
}
}
}
}

.mx_IRCLayout {
.mx_CallEvent_wrapper {
.mx_CallEvent {
margin-inline-start: $spacing-4; // display green line
}
}
}

0 comments on commit af3eac2

Please sign in to comment.