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

Commit

Permalink
Merge branch 'develop' into AudioPlayer
Browse files Browse the repository at this point in the history
  • Loading branch information
@luixxiul
luixxiul authored Apr 15, 2022
2 parents 69593d0 + 7335b35 commit 3df65ca
Show file tree
Hide file tree
Showing 33 changed files with 369 additions and 171 deletions.
18 changes: 7 additions & 11 deletions res/css/structures/_ToastContainer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,26 +108,25 @@ limitations under the License.
}

.mx_Toast_title {
display: flex;
align-items: center;
column-gap: 8px;
width: 100%;
box-sizing: border-box;

h2 {
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: $font-15px;
font-weight: 600;
display: inline;
width: auto;
vertical-align: middle;
}

span {
padding-left: 8px;
float: right;
.mx_Toast_title_countIndicator {
font-size: $font-12px;
line-height: $font-22px;
color: $secondary-content;
margin-inline-start: auto; // on the end side of the div
}
}

Expand All @@ -137,17 +136,14 @@ limitations under the License.
}

.mx_Toast_buttons {
float: right;
display: flex;
justify-content: flex-end;
column-gap: 5px;

.mx_AccessibleButton {
min-width: 96px;
box-sizing: border-box;
}

.mx_AccessibleButton + .mx_AccessibleButton {
margin-left: 5px;
}
}

.mx_Toast_description {
Expand Down
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
}
}
}
89 changes: 50 additions & 39 deletions res/css/views/right_panel/_TimelineCard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,29 +55,61 @@ limitations under the License.
margin-right: 0;
}

.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
padding-left: 36px;
padding-right: 36px;
}
.mx_EventTile:not([data-layout="bubble"]) {
.mx_EventTile_line {
padding-left: 36px;
padding-right: 36px;
}

.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
padding-left: 36px;
padding-right: 36px;
}
.mx_ReactionsRow {
padding: 0;

.mx_EventTile:not([data-layout="bubble"]) .mx_ThreadInfo {
margin-left: 36px;
margin-right: 0;
max-width: min(calc(100% - 36px), 600px);
}
// See margin setting of ReactionsRow on _EventTile.scss
margin-left: 36px;
margin-right: 8px;
}

.mx_GroupLayout .mx_EventTile > .mx_DisambiguatedProfile {
margin-left: 36px;
.mx_ThreadInfo {
margin-left: 36px;
margin-right: 0;
max-width: min(calc(100% - 36px), 600px);
}

.mx_EventTile_avatar {
top: 12px;
left: -3px;
}

.mx_MessageTimestamp {
right: -4px;
left: auto;
}

.mx_EventTile_msgOption {
margin-right: 2px;
}

&.mx_EventTile_info {
.mx_EventTile_line {
padding-left: 36px;
}

.mx_EventTile_avatar {
left: 18px;
}
}
}

.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
top: 12px;
left: -3px;
.mx_GroupLayout {
.mx_EventTile {
> .mx_DisambiguatedProfile {
margin-left: 36px;
}

.mx_EventTile_line {
padding-bottom: 8px;
}
}
}

.mx_CallEvent_wrapper {
Expand All @@ -88,36 +120,15 @@ limitations under the License.
}
}

.mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
right: -4px;
left: auto;
}

.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
margin-right: 2px;
}

.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line,
.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: 36px;
}

.mx_GroupLayout .mx_EventTile .mx_EventTile_line {
padding-bottom: 8px;
}

.mx_EventTile_readAvatars {
top: -10px;
}

.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line {
padding-left: 36px;
}

.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_avatar {
left: 18px;
}

.mx_WhoIsTypingTile {
margin-left: -12px; // undo padding on the message list
}
Expand Down
Loading

0 comments on commit 3df65ca

Please sign in to comment.