From af3eac2c4f47be6579bea9d8ad7b2008c4963682 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 14 Apr 2022 20:27:29 +0000 Subject: [PATCH] Fixes call tiles overflow (#8096) * Responsive call tiles Fixes https://github.com/vector-im/element-web/issues/20254 Signed-off-by: Suguru Hirahara * Take e2e icon into consideration on Bubble message layout Signed-off-by: Suguru Hirahara * Use spacing variables Signed-off-by: Suguru Hirahara * spacing variables Signed-off-by: Suguru Hirahara --- res/css/views/messages/_CallEvent.scss | 131 +++++++++++++++---------- 1 file changed, 81 insertions(+), 50 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index b5ef5b0bc1..b0b117efde 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -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: ''; @@ -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 { @@ -70,44 +79,49 @@ limitations under the License. .mx_CallEvent_content_button_answer span::before { mask-image: url('$(res)/img/element-icons/call/video-call.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_missed .mx_CallEvent_type_icon::before { - mask-image: url('$(res)/img/voip/missed-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_missed .mx_CallEvent_type_icon::before { - mask-image: url('$(res)/img/voip/missed-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_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; @@ -115,12 +129,12 @@ limitations under the License. } .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; @@ -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; @@ -162,8 +177,10 @@ 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 { @@ -171,16 +188,12 @@ limitations under the License. } } - .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; @@ -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_CallEvent_content { - margin-left: 54px; // mx_CallEvent margin (12px) + avatar (32px) + mx_CallEvent_info_basic margin (10px) - margin-bottom: 16px; } } } } + +.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_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 + } + } +}