mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* Add mx_MessageTimestamp to mx_PinnedEventTile_timestamp

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

* Apply display: block globally to enable the width declaration

- Unset display and width value of timestamp on pinned messages card

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

* Apply nowrap globally

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

* MessageTimestamp on ThreadsList - Remove width setting and add font-size setting

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

* Remove redundant font-size declaration from Threadview

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

* Fix timestamp position of timestamp on ThreadView in IRC layout

- GroupLayout is modern layout, not IRC layout

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

* Remove redundant font-size declaration from IRC layout

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

* Remove redundant color setting from timestamp on file panel

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

* Cancel the default width to set a gap between the event tile line

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

* Apply user-select: none globally

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-30 11:37:43 +00:00 committed by GitHub
parent d4a4eeaf63
commit 78a98415eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/structures/_FilePanel.scss
View file

@ -103,7 +103,6 @@ limitations under the License.
position: initial;
font-size: $font-14px;
opacity: 1.0;
color: $event-timestamp-color;
}
/* Overrides for the wrappers around the body tile */

5
res/css/views/messages/_MessageTimestamp.scss
View file

@ -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
width: $MessageTimestamp_width;
white-space: nowrap;
user-select: none;
}

1
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -121,7 +121,6 @@ limitations under the License.
}
.mx_MessageTimestamp {
font-size: $font-12px;
color: $secondary-content;
}

5
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -64,6 +64,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);
}
.mx_ThreadSummary {
clear: both;
width: fit-content;

12
res/css/views/rooms/_EventTile.scss
View file

@ -219,11 +219,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 {
@ -861,8 +858,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);
position: initial;
}
}
@ -894,10 +891,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
padding-inline-end: 0;
}
.mx_MessageTimestamp {
font-size: $font-10px;
}
// handling for hidden events (e.g reactions) in the thread view
&.mx_EventTile_info {
padding-top: 0;
@ -1042,6 +1035,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_MessageTimestamp {
top: 2px; // Align with mx_EventTile_content
position: absolute; // for IRC layout
}
.mx_EventTile_senderDetails {

1
res/css/views/rooms/_IRCLayout.scss
View file

@ -116,7 +116,6 @@ $irc-line-height: $font-18px;
}
.mx_MessageTimestamp {
font-size: $font-10px;
text-align: right;
}

6
res/css/views/rooms/_PinnedEventTile.scss
View file

@ -89,13 +89,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
}
.mx_AccessibleButton_kind_link {

2
src/components/views/rooms/PinnedEventTile.tsx
View file

@ -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>