Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve IRC layout for SchildiChat #4

Closed
wants to merge 1 commit into from
Closed

Improve IRC layout for SchildiChat #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 15 additions & 0 deletions res/css/views/elements/_GenericEventListSummary.pcss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading