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.

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

[PoC] Fix style inconsistencies among informative events on IRC and modern layouts #25

Draft
wants to merge 10 commits into
base: sc
Choose a base branch
from

Conversation

luixxiul
Copy link

@luixxiul luixxiul commented Mar 3, 2024

Closes SchildiChat/schildichat-desktop#240
For SchildiChat/schildichat-desktop#241

This PR intends to fix style inconsistencies among mx_TextualEvent, mx_RedactedBody, mx_DecryptionFailureBody, etc. on IRC layout.

As a proof of concept, this PR also intends to demonstrate that using @mixin as variable that can be imported by importing a CSS file for a feature branch. By using @define-mixin, it is possible to import style rules on any CSS files, reducing the risk of accidental style regressions.

Before After
1 after
Outside of GELS (at the top of the images) before after_1
before after
With hidden events before after

  • I agree to release my changes under this project's license

… mx_DecryptionFailureBody on IRC layout

Signed-off-by: Suguru Hirahara <[email protected]>
$muted-fg-color can be removed anytime too (see comments by the upstream on each theme variables CSS file).

Signed-off-by: Suguru Hirahara <[email protected]>
@define-mixin consistency__TextEvent {
@mixin EventTile_line_color;
@mixin EventTile_line_font;
@mixin DecryptionFailureBody;
Copy link
Author

@luixxiul luixxiul Mar 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The merit of using @mixin as variables is that you can decide the order of rules to be applied as above.

Since the other files just define mixins without actually applying them, it is possible to reduce the possibility of accidental regressions.

@luixxiul luixxiul force-pushed the _sc_consistency__event-style branch from fd4cfa8 to bb33334 Compare March 4, 2024 07:45
@luixxiul luixxiul force-pushed the _sc_consistency__event-style branch from bb33334 to 7f32c7c Compare March 4, 2024 07:47
@luixxiul luixxiul changed the title [PoC] Fix style inconsistencies among mx_TextualEvent, mx_RedactedBody, and mx_DecryptionFailureBody on IRC layout [PoC] Fix style inconsistencies among informative events on IRC layout Mar 4, 2024
@luixxiul luixxiul force-pushed the _sc_consistency__event-style branch from 1083d33 to 7f32c7c Compare March 4, 2024 14:12
…ies which start with mx_M

Signed-off-by: Suguru Hirahara <[email protected]>
"mx_EventTile_line [class^="mx_M"]" might appear outside of either mx_EventTile_info or mx_GenericEventListSummary, therefore it should be imported earlier.

Signed-off-by: Suguru Hirahara <[email protected]>
@luixxiul luixxiul force-pushed the _sc_consistency__event-style branch from 77712a3 to 8eb9404 Compare March 4, 2024 14:39
@luixxiul luixxiul changed the title [PoC] Fix style inconsistencies among informative events on IRC layout [PoC] Fix style inconsistencies among informative events on IRC and modern layouts Mar 5, 2024
/* Applied to IRC, modern layout, and the right panel. Not applied to the
rest of the layouts. Remove the nested :where() if it is applied to them
as well. */
:where(.mx_RoomView_body:where([data-layout="irc"], [data-layout="group"]), .mx_RightPanel) {

This comment was marked as outdated.

Signed-off-by: Suguru Hirahara <[email protected]>
@luixxiul luixxiul force-pushed the _sc_consistency__event-style branch from 088bd2b to 6a42da9 Compare March 5, 2024 08:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix upstream's style inconsistencies among mx_TextualEvent, mx_RedactedBody, and mx_DecryptionFailureBody
1 participant