imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update style rules of MessageTimestamp (#10780)

Browse source 
* Remove an obsolete variable - `$MessageTimestamp_width_hover`

Added by 9b54aba4c0
Deprecated 5343be7814

* Replace a variable with a custom property - $MessageTimestamp_width

* Merge with an existing property in :root

rename

* Manage the variable on _MessageTimestamp.pcss
This commit is contained in:
Suguru Hirahara 2023-05-04 12:19:26 +00:00 • committed by GitHub
parent 36ea338064
commit 9fc4410ee9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/messages/_EventTileBubble.pcss
View file

@ -21,7 +21,7 @@ limitations under the License.
padding: 10px; /* TODO: Use a spacing variable */
border-radius: 8px;
/* Reserve space for external timestamps, but also cap the width */
max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px);
max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px);
box-sizing: border-box;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content min-content;

7
res/css/views/messages/_MessageTimestamp.pcss
View file

@ -14,15 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MessageTimestamp {
:root {
--MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
--MessageTimestamp-max-width: 80px;
--MessageTimestamp-color: $event-timestamp-color;
}
.mx_MessageTimestamp {
color: var(--MessageTimestamp-color);
font-size: $font-10px;
font-variant-numeric: tabular-nums;
display: block; /* enable the width setting below */
width: $MessageTimestamp_width;
width: var(--MessageTimestamp-width);
white-space: nowrap;
user-select: none;
}

4
res/css/views/right_panel/_TimelineCard.pcss
View file

@ -55,7 +55,7 @@ limitations under the License.
&.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
.mx_EventTile_e2eIcon {
inset-inline-start: $spacing-8;
@ -157,7 +157,7 @@ limitations under the License.
.mx_EventTile_line,
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
}
}
}

7
res/css/views/rooms/_EventTile.pcss
View file

@ -295,7 +295,7 @@ $left-gutter: 64px;
> a {
text-decoration: none; /* timestamps are links which shouldn't be underlined */
min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */
min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
}
> * {
@ -650,7 +650,7 @@ $left-gutter: 64px;
/* add --right-padding value of MessageTimestamp and avatar only */
/* stylelint-disable-next-line declaration-colon-space-after */
padding-left: calc(
var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
);
}
}
@ -1218,7 +1218,8 @@ $left-gutter: 64px;
padding-top: 0;
.mx_EventTile_avatar {
left: calc($MessageTimestamp_width + 14px - 4px); /* 14px: avatar width, 4px: align with text */
/* 14px: avatar width, 4px: align with text */
left: calc(var(--MessageTimestamp-width) + 14px - 4px);
z-index: 9; /* position above the hover styling */
}