matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-07 21:23:00 +03:00
Code Activity

Fix timestamp's position on the chat panel with a maximized widget in IRC layout (#8464)

Browse Source 
Fix avatar's position on the chat panel with a maximized widget in IRC layout
Fix timestamp's position on Message Edits history modal window

Also:
- Align DisambiguatedProfile with reactions row and thread summary with a variable
- Add width property as default
- Use the global variable on _IRCLayout.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara
2022-05-07 03:07:51 +00:00
committed by GitHub
parent 34471ba855
commit c86040b77a
5 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
res/css/views/dialogs/_MessageEditHistoryDialog.scss
View File

@@ -55,6 +55,12 @@ limitations under the License.
text-decoration: underline;
}
.mx_EventTile {
.mx_MessageTimestamp {
position: absolute;
}
}
.mx_EventTile_line, .mx_EventTile_content {
margin-right: 0px;
}

1
res/css/views/messages/_MessageTimestamp.scss
View File

@@ -18,4 +18,5 @@ limitations under the License.
color: $event-timestamp-color;
font-size: $font-10px;
font-variant-numeric: tabular-nums;
width: $MessageTimestamp_width;
}

18
res/css/views/right_panel/_TimelineCard.scss
View File

@@ -52,31 +52,39 @@ limitations under the License.
}
.mx_EventTile:not([data-layout="bubble"]) {
$left-gutter: 36px;
.mx_EventTile_line {
padding-left: 36px;
padding-right: 36px;
padding-inline-start: $left-gutter;
padding-inline-end: 36px;
}
.mx_DisambiguatedProfile,
.mx_ReactionsRow,
.mx_ThreadSummary {
margin-inline-start: $left-gutter;
}
.mx_ReactionsRow {
padding: 0;
// See margin setting of ReactionsRow on _EventTile.scss
margin-left: 36px;
margin-right: 8px;
}
.mx_ThreadSummary {
margin-left: 36px;
margin-right: 0;
max-width: min(calc(100% - 36px), 600px);
}
.mx_EventTile_avatar {
position: absolute; // for IRC layout
top: 12px;
left: -3px;
}
.mx_MessageTimestamp {
position: absolute; // for modern layout and IRC layout
right: -4px;
left: auto;
}
@@ -87,7 +95,7 @@ limitations under the License.
&.mx_EventTile_info {
.mx_EventTile_line {
padding-left: 36px;
padding-left: $left-gutter;
}
.mx_EventTile_avatar {

3
res/css/views/rooms/_GroupLayout.scss
View File

@@ -30,8 +30,7 @@ $left-gutter: 64px;
}
.mx_MessageTimestamp {
position: absolute;
width: $MessageTimestamp_width;
position: absolute; // for modern layout
}
.mx_EventTile_line, .mx_EventTile_reply {

6
res/css/views/rooms/_IRCLayout.scss
View File

@@ -15,7 +15,6 @@ limitations under the License.
*/
$icon-width: 14px;
$timestamp-width: 45px;
$right-padding: 5px;
$irc-line-height: $font-18px;
@@ -28,7 +27,7 @@ $irc-line-height: $font-18px;
// timestamps are links which shouldn't be underlined
> a {
text-decoration: none;
min-width: 45px;
min-width: $MessageTimestamp_width;
}
display: flex;
@@ -85,7 +84,6 @@ $irc-line-height: $font-18px;
.mx_MessageTimestamp {
font-size: $font-10px;
width: $timestamp-width;
text-align: right;
}
@@ -141,7 +139,7 @@ $irc-line-height: $font-18px;
.mx_GenericEventListSummary {
> .mx_EventTile_line {
padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
}
.mx_GenericEventListSummary_avatars {