From e30832e7f81b11ad20658d57331eb02356c54ab5 Mon Sep 17 00:00:00 2001 From: SpiritCroc Date: Sat, 23 Nov 2024 12:09:25 +0100 Subject: [PATCH] Add IRC layout community contribution Closes https://github.com/SchildiChat/schildichat-desktop/pull/269 Co-authored-by: Suguru Hirahara --- FEATURES.md | 7 + element-web | 2 +- ...1-Improve-IRC-layout-for-SchildiChat.patch | 297 ++++++++++++++++++ 3 files changed, 305 insertions(+), 1 deletion(-) create mode 100644 patches/element-web/0031-Improve-IRC-layout-for-SchildiChat.patch diff --git a/FEATURES.md b/FEATURES.md index dacb2ac1..c703374d 100644 --- a/FEATURES.md +++ b/FEATURES.md @@ -26,3 +26,10 @@ Note that this list may be incomplete or outdated. - Allow sending freeform reactions - Less restrictive width limit for rendering text reactions + + +## Non-core community contributions + +Following features and changes are community-maintained, i.e. do not embody core SchildiChat features and may be dropped in future releases in case they cause a notable maintenance burden. + +- [Improved IRC layout](https://github.com/SchildiChat/schildichat-desktop/pull/269) diff --git a/element-web b/element-web index 2d2858d1..18578fe4 160000 --- a/element-web +++ b/element-web @@ -1 +1 @@ -Subproject commit 2d2858d1955c790af5f8a80a157ebfe251639ddf +Subproject commit 18578fe4ac6838b2d70a4efb029a75ab24087dab diff --git a/patches/element-web/0031-Improve-IRC-layout-for-SchildiChat.patch b/patches/element-web/0031-Improve-IRC-layout-for-SchildiChat.patch new file mode 100644 index 00000000..e28c3681 --- /dev/null +++ b/patches/element-web/0031-Improve-IRC-layout-for-SchildiChat.patch @@ -0,0 +1,297 @@ +From 18578fe4ac6838b2d70a4efb029a75ab24087dab Mon Sep 17 00:00:00 2001 +From: Suguru Hirahara +Date: Thu, 31 Oct 2024 13:44:20 -0400 +Subject: Improve IRC layout for SchildiChat + +Signed-off-by: Suguru Hirahara +--- + .../elements/_GenericEventListSummary.pcss | 15 ++ + res/css/views/rooms/_EventTile.pcss | 146 ++++++++++++++++-- + res/css/views/rooms/_IRCLayout.pcss | 2 + + 3 files changed, 153 insertions(+), 10 deletions(-) + +diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss +index c13f819439..4f42040606 100644 +--- a/res/css/views/elements/_GenericEventListSummary.pcss ++++ b/res/css/views/elements/_GenericEventListSummary.pcss +@@ -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 +@@ -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; + } +diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss +index 311e059166..501a9210cf 100644 +--- a/res/css/views/rooms/_EventTile.pcss ++++ b/res/css/views/rooms/_EventTile.pcss +@@ -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 + +@@ -279,6 +280,10 @@ $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 */ +@@ -286,6 +291,7 @@ $left-gutter: 64px; + + > * { + 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, +@@ -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 { +@@ -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; +@@ -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, +@@ -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 { +@@ -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 */ ++ } + } + } + +@@ -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"] { +diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss +index ecf1c25716..de85238ca6 100644 +--- a/res/css/views/rooms/_IRCLayout.pcss ++++ b/res/css/views/rooms/_IRCLayout.pcss +@@ -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 +@@ -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; + +-- +2.47.0 +