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

Set common width, white-space, and display values to MessageTimestamp #8818

Merged
SimonBrandner merged 12 commits into from
Jun 30, 2022
Merged

Set common width, white-space, and display values to MessageTimestamp #8818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
27b0ea6
Add mx_MessageTimestamp to mx_PinnedEventTile_timestamp
luixxiul Jun 12, 2022
ece03b9
Apply display: block globally to enable the width declaration
luixxiul Jun 12, 2022
3dc51b9
Apply nowrap globally
luixxiul Jun 12, 2022
9ad0641
MessageTimestamp on ThreadsList - Remove width setting and add font-s…
luixxiul Jun 12, 2022
5f983e8
Remove redundant font-size declaration from Threadview
luixxiul Jun 12, 2022
892ae3f
Fix timestamp position of timestamp on ThreadView in IRC layout
luixxiul Jun 12, 2022
a768cf4
Remove redundant font-size declaration from IRC layout
luixxiul Jun 12, 2022
b8af0a2
Remove redundant color setting from timestamp on file panel
luixxiul Jun 12, 2022
1e86331
Cancel the default width to set a gap between the event tile line
luixxiul Jun 12, 2022
236ca0c
Apply user-select: none globally
luixxiul Jun 12, 2022
87a42f6
Merge branch 'develop' into MessageTimestamp
luixxiul Jun 15, 2022
42cc407
Merge branch 'develop' of https://github.com/luixxiul/matrix-react-sd…
luixxiul Jun 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion res/css/structures/_FilePanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ limitations under the License.
position: initial;
font-size: $font-14px;
opacity: 1.0;
color: $event-timestamp-color;
Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is redundant as specified with https://github.com/matrix-org/matrix-react-sdk/pull/8818/files#diff-ee6630d9ea69841b23949b052300770cf30db1afe7d269d4f4e769ef49f346b5R20.

Before After
filepanel_before filepanel_after

}

/* Overrides for the wrappers around the body tile */
Expand Down
5 changes: 5 additions & 0 deletions res/css/views/messages/_MessageTimestamp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,13 @@ limitations under the License.
*/

.mx_MessageTimestamp {
--MessageTimestamp-max-width: 80px;

color: $event-timestamp-color;
font-size: $font-10px;
font-variant-numeric: tabular-nums;
display: block; // enable the width setting below
Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because width declaration below is supposed to be enabled by default.

width: $MessageTimestamp_width;
white-space: nowrap;
user-select: none;
}
1 change: 0 additions & 1 deletion res/css/views/right_panel/_ThreadPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ limitations under the License.
}

.mx_MessageTimestamp {
font-size: $font-12px;
Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved inside ThreadsList https://github.com/matrix-org/matrix-react-sdk/pull/8818/files#diff-bd83194d78de871bc4ad1c4e8d43102c4368481bbb90705152d3d17fea813919R847.

color: $secondary-content;
}

Expand Down
5 changes: 5 additions & 0 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,11 @@ limitations under the License.
margin-left: var(--EventTile_bubble-margin-inline-start);
font-size: $font-14px;

.mx_MessageTimestamp {
width: unset; // Cancel the default width
max-width: var(--MessageTimestamp-max-width);
}
Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
before after


.mx_ThreadSummary {
clear: both;
width: fit-content;
Expand Down
12 changes: 3 additions & 9 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,11 +153,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}

.mx_MessageTimestamp {
display: block;
white-space: nowrap;
left: 0px;
text-align: center;
user-select: none;
}

&.mx_EventTile_continuation .mx_EventTile_line {
Expand Down Expand Up @@ -850,8 +847,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}

.mx_MessageTimestamp {
max-width: 80px;
width: auto;
font-size: $font-12px;
max-width: var(--MessageTimestamp-max-width);
Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$MessageTimestamp_width is enabled here.

Before After
before after

position: initial;
Copy link
Contributor Author

@luixxiul luixxiul Jun 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved from 42cc407#diff-f6d1464858812e6ea15c65a49935a089650e5e7adc0a380eeabfce5da896aa67L77

}
}
Expand Down Expand Up @@ -883,10 +880,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
padding-inline-end: 0;
}

.mx_MessageTimestamp {
font-size: $font-10px;
}

Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
before1 after1

// handling for hidden events (e.g reactions) in the thread view
&.mx_EventTile_info {
padding-top: 0;
Expand Down Expand Up @@ -1031,6 +1024,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss

.mx_MessageTimestamp {
top: 2px; // Align with mx_EventTile_content
position: absolute; // for IRC layout
Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
before after

}

.mx_EventTile_senderDetails {
Expand Down
1 change: 0 additions & 1 deletion res/css/views/rooms/_IRCLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ $irc-line-height: $font-18px;
}

.mx_MessageTimestamp {
font-size: $font-10px;
text-align: right;
}

Expand Down
6 changes: 3 additions & 3 deletions res/css/views/rooms/_PinnedEventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,13 @@ limitations under the License.

.mx_PinnedEventTile_footer {
grid-area: footer;
font-size: 10px;
font-size: $font-10px;
line-height: 12px;

.mx_PinnedEventTile_timestamp {
font-size: inherit;
line-height: inherit;
color: $secondary-content;
display: unset;
width: unset; // Cancel the default width value
Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
before after

}

.mx_AccessibleButton_kind_link {
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/rooms/PinnedEventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
</div>

<div className="mx_PinnedEventTile_footer">
<span className="mx_PinnedEventTile_timestamp">
<span className="mx_MessageTimestamp mx_PinnedEventTile_timestamp">
{ formatDate(new Date(this.props.event.getTs())) }
</span>

Expand Down