diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 12d2457fc5d..8ddcf474cf8 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -382,3 +382,6 @@ @import "./voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss"; @import "./voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss"; @import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss"; + +/* Customization for SchildiChat */ +@import "./_sc/_customization.pcss"; diff --git a/res/css/_sc/_customization.pcss b/res/css/_sc/_customization.pcss new file mode 100644 index 00000000000..94891959e34 --- /dev/null +++ b/res/css/_sc/_customization.pcss @@ -0,0 +1,18 @@ +/* +Copyright 2024 Suguru Hirahara + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/* TODO: replace @import with @mixin once multiple CSS files are created for customization in order to keep styling modular */ +@import "./views/rooms/_IRCLayout.pcss"; diff --git a/res/css/_sc/feature-improvement/feature__IRCLayout__hideAvatar/index.pcss b/res/css/_sc/feature-improvement/feature__IRCLayout__hideAvatar/index.pcss new file mode 100644 index 00000000000..2caf5f677a2 --- /dev/null +++ b/res/css/_sc/feature-improvement/feature__IRCLayout__hideAvatar/index.pcss @@ -0,0 +1,65 @@ +/* +Copyright 2024 Suguru Hirahara + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/* Hide avatars on IRC layout except ones on read receipt group */ +@define-mixin sc_IRCLayout__hideAvatar { + --icon-width: 0px; /* Align vertically */ + + .mx_EventTile { + &[data-layout="irc"][data-avatar="false"] { + .mx_EventTile_avatar, + .mx_BaseAvatar { + display: none; + } + + /* Display avatars on read receipt group as it can be set to hidden via Settings */ + .mx_ReadReceiptGroup { + .mx_EventTile_avatar, + .mx_BaseAvatar { + display: unset; + } + } + } + + /* Align EventTile_info vertically with other lines */ + &.mx_EventTile_info { + /* var(--icon-width) and var(--right-padding) are not necessary + because we do not have to take icon width ant its spacing into consideration */ + --EventTile_irc_line_info-margin-inline-start: var(--name-width); + } + } + + .mx_GenericEventListSummary { + &[data-layout="irc"][data-avatar="false"] { + /* For collapsed GELS */ + .mx_GenericEventListSummary_avatars { + display: none; + } + + /* For expanded GELS */ + .mx_EventTile_avatar, + .mx_BaseAvatar { + display: none; + } + + > .mx_EventTile_line { + /* This is required to align collapsed GELS with other elements horizontally + as we need only one var(--right-padding) here */ + padding-inline-start: calc(var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 1 * var(--right-padding)); + } + } + } +} diff --git a/res/css/_sc/views/rooms/_IRCLayout.pcss b/res/css/_sc/views/rooms/_IRCLayout.pcss new file mode 100644 index 00000000000..0f26c19de6f --- /dev/null +++ b/res/css/_sc/views/rooms/_IRCLayout.pcss @@ -0,0 +1,21 @@ +/* +Copyright 2024 Suguru Hirahara + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +@import "../../feature-improvement/feature__IRCLayout__hideAvatar/index.pcss"; + +.mx_IRCLayout { + @mixin sc_IRCLayout__hideAvatar; +} diff --git a/src/components/views/elements/GenericEventListSummary.tsx b/src/components/views/elements/GenericEventListSummary.tsx index eaf58f9742a..53c9287d074 100644 --- a/src/components/views/elements/GenericEventListSummary.tsx +++ b/src/components/views/elements/GenericEventListSummary.tsx @@ -76,6 +76,7 @@ const GenericEventListSummary: React.FC = ({ data-scroll-tokens={eventIds} data-expanded={true} data-layout={layout} + data-avatar={false} // [sc] >
    {children}
@@ -139,6 +140,7 @@ const GenericEventListSummary: React.FC = ({ data-expanded={expanded + ""} data-layout={layout} data-testid={testId} + data-avatar={false} // [sc] > "data-has-reply": !!replyChain, "data-layout": this.props.layout, "data-self": isOwnEvent, + "data-avatar": "false", // [sc] "data-event-id": this.props.mxEvent.getId(), "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), @@ -1312,6 +1313,7 @@ export class UnwrappedEventTile extends React.Component "data-shape": this.context.timelineRenderingType, "data-self": isOwnEvent, "data-has-reply": !!replyChain, + "data-avatar": "false", // [sc] "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), "onClick": (ev: MouseEvent) => { @@ -1488,6 +1490,7 @@ export class UnwrappedEventTile extends React.Component "data-self": isOwnEvent, "data-event-id": this.props.mxEvent.getId(), "data-has-reply": !!replyChain, + "data-avatar": "false", // [sc] "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), }, @@ -1555,6 +1558,7 @@ export class UnwrappedEventTile extends React.Component "data-self": isOwnEvent, "data-event-id": this.props.mxEvent.getId(), "data-has-reply": !!replyChain, + "data-avatar": "false", // [sc] "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), },