From 7a80f3626c24dfa4e3540c2d65f25ce7a61bc709 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 20 Mar 2022 20:35:32 +0000 Subject: [PATCH 1/4] Responsive call tiles Fixes https://github.com/vector-im/element-web/issues/20254 Signed-off-by: Suguru Hirahara --- res/css/views/messages/_CallEvent.scss | 110 +++++++++++++++---------- 1 file changed, 65 insertions(+), 45 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index b5ef5b0bc17..0e3e51e0d00 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: 4px 0; + position: relative; + margin: 4px 0; + padding: 12px 24px; + 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_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; 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; @@ -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,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; @@ -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: 4px 16px; + height: unset; + min-width: 290px; .mx_CallEvent_iconButton { position: absolute; @@ -194,18 +207,25 @@ 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_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 + } + } +} From 38cd4807bd2df075129f4074cd882ca2ef2feeb6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 24 Mar 2022 21:52:07 +0000 Subject: [PATCH 2/4] Take e2e icon into consideration on Bubble message layout Signed-off-by: Suguru Hirahara --- res/css/views/messages/_CallEvent.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 0e3e51e0d00..4e0ca9d3967 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -212,6 +212,17 @@ limitations under the License. } } +.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 { From 8aa2d02cfd722ebc7dcf748a2aa21bcac131964b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 4 Apr 2022 07:44:03 +0000 Subject: [PATCH 3/4] Use spacing variables Signed-off-by: Suguru Hirahara --- res/css/views/messages/_CallEvent.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 4e0ca9d3967..6347c0dfabe 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -27,8 +27,8 @@ limitations under the License. gap: 4px 0; position: relative; - margin: 4px 0; - padding: 12px 24px; + margin: $spacing-4 0; + padding: $spacing-12 $spacing-24; box-sizing: border-box; background-color: $dark-panel-bg-color; border-radius: 8px; From cb1c2ef02baf43ede1360110beb44f526b06fd26 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 9 Apr 2022 05:32:07 +0000 Subject: [PATCH 4/4] spacing variables Signed-off-by: Suguru Hirahara --- res/css/views/messages/_CallEvent.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 6347c0dfabe..b0b117efded 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -24,7 +24,7 @@ limitations under the License. flex-wrap: wrap; align-items: center; justify-content: space-between; - gap: 4px 0; + gap: $spacing-4 0; position: relative; margin: $spacing-4 0; @@ -112,7 +112,7 @@ limitations under the License. .mx_CallEvent_info_basic { display: flex; flex-direction: column; - gap: 4px; + gap: $spacing-4; margin-left: 10px; // To match mx_CallEvent margin-right: 10px; min-width: 0; @@ -121,7 +121,7 @@ limitations under the License. font-weight: 600; font-size: 1.5rem; line-height: 1.8rem; - margin-bottom: 4px; + margin-bottom: $spacing-4; overflow: hidden; white-space: nowrap; @@ -160,14 +160,14 @@ limitations under the License. flex-wrap: wrap; align-items: center; color: $secondary-content; - gap: 12px; // See mx_IncomingCallToast_buttons + 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; @@ -191,7 +191,7 @@ limitations under the License. &.mx_CallEvent_narrow { flex-direction: column; align-items: unset; - gap: 4px 16px; + gap: $spacing-4 $spacing-16; height: unset; min-width: 290px; @@ -227,7 +227,7 @@ limitations under the License. .mx_CallEvent_wrapper { .mx_CallEvent { &.mx_CallEvent_narrow { - gap: 8px 4px; + gap: $spacing-8 $spacing-4; } } } @@ -236,7 +236,7 @@ limitations under the License. .mx_IRCLayout { .mx_CallEvent_wrapper { .mx_CallEvent { - margin-left: 4px; // display green line on left + margin-inline-start: $spacing-4; // display green line } } }