Skip to content

Commit

Permalink
Improve IRC layout for SchildiChat
Browse files Browse the repository at this point in the history 
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
  • Loading branch information
@luixxiul
luixxiul committed Nov 15, 2024
1 parent d31b236 commit 039902c
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 10 deletions.
15 changes: 15 additions & 0 deletions res/css/views/elements/_GenericEventListSummary.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024 Suguru Hirahara
Copyright 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Expand Down Expand Up @@ -36,6 +37,20 @@ Please see LICENSE files in the repository root for full details.
}
}

&[data-layout="irc"] {
.mx_GenericEventListSummary_avatars {
vertical-align: text-bottom; /* Align with mx_GenericEventListSummary_summary */

> * {
line-height: inherit; /* Same size as avatar height */
}
}

.mx_GenericEventListSummary_summary {
line-height: var(--irc-line-height); /* Override the declaration by mx_TextualEvent */
}
}

&[data-layout="group"] {
margin-top: $spacing-8;
}
Expand Down
146 changes: 136 additions & 10 deletions res/css/views/rooms/_EventTile.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024 Suguru Hirahara
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd
Expand Down Expand Up @@ -279,13 +280,18 @@ $left-gutter: 64px;
align-items: flex-start;
padding-top: 0;

* {
line-height: var(--line-height); /* Unify the line-height value for IRC layout. The value is applied by default to everything under data-layout="irc", enabling declarations with more specificity to override the value as this is not enforced with "!important" */
}

> a {
text-decoration: none; /* timestamps are links which shouldn't be underlined */
min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
}

> * {
margin-right: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block); /* Unify block padding value of anything directly under mx_EventTile */
}

.mx_EventTile_avatar,
Expand Down Expand Up @@ -321,17 +327,46 @@ $left-gutter: 64px;
width: var(--name-width);
margin-inline-end: 0; /* override mx_EventTile > * */

/* Align elements to the end side */
display: block;
text-align: end;

--sc-border-radius-8px: 8px; /* TODO: customize the variable per out taste */
border-start-start-radius: var(--sc-border-radius-8px, 3px);
border-end-start-radius: var(--sc-border-radius-8px, 3px);

/* Set $accent as default color, in order to make ellipsis rendered with the accent color (green, by default) */
color: $accent;

&:hover {
background-color: $event-selected-color;

/* This removes top left and bottom left corders from mx_EventTile_line, if just mx_DisambiguatedProfile is hovered. This enables the highlight line to be rendered straight without being dent by those corners. Please note that they do appear if just mx_EventTile_line is hovered. */
& ~ .mx_EventTile_line {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}

> .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
padding-inline-end: var(--right-padding); /* Add padding between displayName and mx_EventTile_line */
}

> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
/* On the upstream, appearance of mxid on disambiguatedProfile is managed by
"visibility" property. Since it renders mxid hiding it and pushes
displayName to the left side, we need to use display property instead. */
display: none;

margin-left: 0; /* Override the inherited margin. */
padding: 0 5px;
padding-inline-start: 0; /* Remove the value specified on upstream since var(--right-padding) is specified for mx_DisambiguatedProfile_displayName above */

color: $primary-content; /* Override the color specified above to make the mxid rendered as $primary-content (black, by default) */
}

&:hover {
Expand All @@ -343,17 +378,66 @@ $left-gutter: 64px;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: $spacing-8;
padding-inline-end: var(--right-padding);
}

> .mx_DisambiguatedProfile_mxid {
visibility: visible;
display: inline-block; /* Make var(--irc-line-height) work */

opacity: 1;
background-color: $event-selected-color;
}
}
}

/* Need to use important to override the js provided height and width values. */
.mx_BaseAvatar,
.mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
flex-shrink: 0; /* Prevents the avatar from shrinking (when mx_DisambiguatedProfile_displayName is long) */
}

/* Fill the pill with the avatar */
/* TODO: Adjust the size for IRC layout */
.mx_Pill {
.mx_BaseAvatar,
.mx_BaseAvatar > * {
height: $font-16px !important; /* override the value specified above */
width: $font-16px !important; /* override the value specified above */
}
}

.mx_EventTile_bigEmoji {
line-height: initial; /* Reset global line-height value inside IRC EventTile */

.mx_Emoji {
line-height: unset;
}
}

.mx_EventTile_content {
.markdown-body {
> * {
margin-bottom: 4px; /* Unify block end margin for elements like blockquote */
}

> p {
margin-bottom: 1rem; /* Re-add block end margin to unify the margin for paragraphs with or without annotation */
}

code:not(pre *) {
padding-block: 0; /* Remove block padding to avoid line height overflow */
}

.mx_EventTile_pre_container {
pre {
margin-bottom: 0; /* Remove default block end margin */
}
}
}
}

.mx_EventTile_e2eIcon {
padding: 0;
flex-grow: 0;
Expand All @@ -365,9 +449,8 @@ $left-gutter: 64px;
.mx_TextualEvent,
.mx_ViewSourceEvent,
.mx_MTextBody {
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0;
/* Cancel the padding specified by the upstream as it is taken care of by padding var(--EventTile_irc_line-padding-block) */
padding: unset;
}

.mx_EventTile_e2eIcon,
Expand Down Expand Up @@ -405,8 +488,36 @@ $left-gutter: 64px;
}
}

.mx_ReplyChain {
margin: 0;
.mx_ReplyChain_wrapper {
.mx_ReplyChain {
margin: 0;

.mx_ReplyTile {
padding-block: unset; /* Unset the inherited value */
}

.mx_DisambiguatedProfile {
line-height: var(--irc-line-height);

/* Stop mxid from moving avatar up on ReplyChain by resetting display
value "none" specified above */
/* Mind the difference of avatar placement between on upstream's
mx_EventTile and mx_ReplyTile_sender */
> .mx_DisambiguatedProfile_mxid {
display: unset;
}

&:hover {
overflow: hidden; /* Override "overflow: visible" specified by the upstream */
}
}
}

/* Align avatar inside ReplyChain (ReplyTile) */
/* "In reply to" line */
div:first-of-type blockquote.mx_ReplyChain {
padding-bottom: 2px; /* Add padding between "In reply to" line and the replied content */
}
}

.mx_MessageTimestamp {
Expand Down Expand Up @@ -459,8 +570,14 @@ $left-gutter: 64px;

&.mx_EventTile_emote {
.mx_EventTile_avatar {
/* add --right-padding value of MessageTimestamp only */
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
/* Required for the avatar to reserve spacing between timestamp and the avatar */
margin-left: var(--name-width); /* Align emote with other EventTile */
}

&.mx_EventTile_info {
.mx_EventTile_avatar {
margin-left: unset; /* Required for hidden events for emote */
}
}
}

Expand Down Expand Up @@ -642,6 +759,15 @@ $left-gutter: 64px;
var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
);
}

.mx_EventTile_line .mx_RedactedBody {
line-height: var(--line-height); /* Unify the line-height value for IRC layout by overwriting the line-height value specified on upstream _EventTile.pcss */

&::before {
height: var(--line-height); /* Set the line height value to the trash icon */
top: 0px; /* Remove the value specified by the upstream as this is no longer needed */
}
}
}

&[data-layout="group"] {
Expand Down
2 changes: 2 additions & 0 deletions res/css/views/rooms/_IRCLayout.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024 Suguru Hirahara
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Expand All @@ -15,6 +16,7 @@ Please see LICENSE files in the repository root for full details.
--icon-width: 14px;
--line-height: var(--irc-line-height);
--right-padding: 5px;
--cpd-font-line-height-regular: var(--irc-line-height); /* Unify the line-height value for IRC layout */

line-height: var(--line-height) !important;

Expand Down

0 comments on commit 039902c

Please sign in to comment.