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>
This commit is contained in:
Suguru Hirahara
2022-07-06 11:45:18 +01:00
committed by GitHub
parent 5349f301da
commit 2ebb5eb957
4 changed files with 25 additions and 20 deletions
+1 -1
View File
@@ -96,7 +96,7 @@ limitations under the License.
.mx_MessageTimestamp { .mx_MessageTimestamp {
flex: 1 0 0; flex: 1 0 0;
text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp text-align: right;
visibility: visible; visibility: visible;
position: initial; position: initial;
font-size: $font-14px; font-size: $font-14px;
@@ -51,11 +51,14 @@ limitations under the License.
text-decoration: underline; text-decoration: underline;
} }
// Emulate mx_EventTile[data-layout=group]
.mx_EventTile { .mx_EventTile {
padding-top: 0 !important; // Override mx_EventTile:not([data-layout=bubble]) padding-top: 0 !important; // Override mx_EventTile:not([data-layout=bubble])
.mx_MessageTimestamp { .mx_MessageTimestamp {
position: absolute; position: absolute;
left: 0;
text-align: center;
} }
.mx_EventTile_line { .mx_EventTile_line {
+21 -15
View File
@@ -195,16 +195,18 @@ $left-gutter: 64px;
} }
} }
&[data-layout=irc] {
.mx_MessageTimestamp {
text-align: right;
}
}
&[data-layout=group] { &[data-layout=group] {
.mx_EventTile_avatar { .mx_EventTile_avatar {
top: 14px; top: 14px;
left: $spacing-8; left: $spacing-8;
} }
.mx_MessageTimestamp {
position: absolute; // for modern layout
}
.mx_EventTile_line, .mx_EventTile_line,
.mx_EventTile_reply { .mx_EventTile_reply {
padding-top: var(--EventTile_group_line-spacing-block-start); padding-top: var(--EventTile_group_line-spacing-block-start);
@@ -221,6 +223,12 @@ $left-gutter: 64px;
margin-right: 10px; margin-right: 10px;
} }
.mx_MessageTimestamp {
position: absolute;
left: 0;
text-align: center;
}
.mx_ThreadSummary, .mx_ThreadSummary,
.mx_ThreadSummary_icon { .mx_ThreadSummary_icon {
margin-left: $left-gutter; 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. /* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here. * 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 { .mx_MessageTimestamp {
top: 2px; // Align with avatar top: 2px; // Align with avatar
} }
}
&:not([data-layout=bubble]) {
.mx_EventTile_avatar { .mx_EventTile_avatar {
left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
z-index: 9; // position above the hover styling 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 { .mx_EventTile_senderDetails {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1091,6 +1092,11 @@ $left-gutter: 64px;
} }
} }
} }
.mx_MessageTimestamp {
position: absolute; // for IRC layout
top: 2px; // Align with mx_EventTile_content
}
} }
} }
-4
View File
@@ -115,10 +115,6 @@ $irc-line-height: $font-18px;
} }
} }
.mx_MessageTimestamp {
text-align: right;
}
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
padding: 0; padding: 0;