Move mx_MessageTimestamp out of mx_EventTile:not([data-layout=bubble]) (#8976)

* Move mx_MessageTimestamp out of mx_EventTile:not([data-layout=bubble])

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

* Ensure left: 0 and text-align: center for mx_MessageTimestamp on MessageEditHistoryDialog

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

* Apply text-align to MessageTimestamp on IRC layout

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

* Apply text-align to MessageTimestamp on modern/group layout

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

* Apply left: 0 to modern/group layout only

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

* Move mx_MessageTimestamp out of mx_EventTile:not([data-layout=bubble])

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

* Remove an obvious comment

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

* Cascading order

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

* Remove an obsolete comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
t3chguy/dedup-icons-17oct
Suguru Hirahara 2022-07-06 10:45:18 +00:00 committed by GitHub
parent 5349f301da
commit 2ebb5eb957
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 20 deletions

View File

@ -96,7 +96,7 @@ limitations under the License.
.mx_MessageTimestamp {
flex: 1 0 0;
text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp
text-align: right;
visibility: visible;
position: initial;
font-size: $font-14px;

View File

@ -51,11 +51,14 @@ limitations under the License.
text-decoration: underline;
}
// Emulate mx_EventTile[data-layout=group]
.mx_EventTile {
padding-top: 0 !important; // Override mx_EventTile:not([data-layout=bubble])
.mx_MessageTimestamp {
position: absolute;
left: 0;
text-align: center;
}
.mx_EventTile_line {

View File

@ -195,16 +195,18 @@ $left-gutter: 64px;
}
}
&[data-layout=irc] {
.mx_MessageTimestamp {
text-align: right;
}
}
&[data-layout=group] {
.mx_EventTile_avatar {
top: 14px;
left: $spacing-8;
}
.mx_MessageTimestamp {
position: absolute; // for modern layout
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: var(--EventTile_group_line-spacing-block-start);
@ -221,6 +223,12 @@ $left-gutter: 64px;
margin-right: 10px;
}
.mx_MessageTimestamp {
position: absolute;
left: 0;
text-align: center;
}
.mx_ThreadSummary,
.mx_ThreadSummary_icon {
margin-left: $left-gutter;
@ -308,11 +316,6 @@ $left-gutter: 64px;
}
}
.mx_MessageTimestamp {
left: 0px;
text-align: center;
}
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
@ -957,11 +960,14 @@ $left-gutter: 64px;
}
}
&:not([data-layout=bubble]) {
&[data-layout=irc],
&[data-layout=group] {
.mx_MessageTimestamp {
top: 2px; // Align with avatar
}
}
&:not([data-layout=bubble]) {
.mx_EventTile_avatar {
left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
z-index: 9; // position above the hover styling
@ -1067,11 +1073,6 @@ $left-gutter: 64px;
}
}
.mx_MessageTimestamp {
top: 2px; // Align with mx_EventTile_content
position: absolute; // for IRC layout
}
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
@ -1091,6 +1092,11 @@ $left-gutter: 64px;
}
}
}
.mx_MessageTimestamp {
position: absolute; // for IRC layout
top: 2px; // Align with mx_EventTile_content
}
}
}

View File

@ -115,10 +115,6 @@ $irc-line-height: $font-18px;
}
}
.mx_MessageTimestamp {
text-align: right;
}
.mx_EventTile_e2eIcon {
padding: 0;