mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 20:54:59 +08:00
Fixes call tiles overflow (#8096)
* 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
GitHub
parent
1436f23e2f
commit
af3eac2c4f
@ -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 {
|
||||
&.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 {
|
||||
&.mx_CallEvent_video {
|
||||
.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_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,25 +177,23 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content_button_reject span::before {
|
||||
.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;
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user