PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fixes call tiles overflow (#8096)

Browse source 
* Responsive call tiles

Fixes https://github.com/vector-im/element-web/issues/20254

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Take e2e icon into consideration on Bubble message layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-04-14 20:27:29 +00:00 committed by GitHub
parent 1436f23e2f
commit af3eac2c4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 81 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
res/css/views/messages/_CallEvent.scss
View file

@ -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
}
}
}