Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit ef97714

Browse files
luixxiulluixxiul
authored
Prevent possible regressions of EventTile structurally (#8647)
* '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' - Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal' Signed-off-by: Suguru Hirahara <[email protected]> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <[email protected]> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <[email protected]> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <[email protected]> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <[email protected]> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <[email protected]> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <[email protected]> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <[email protected]> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <[email protected]> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <[email protected]> * Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container' Collapsed code block is displayed only in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <[email protected]> * .mx_EventTile_keyRequestInfo - Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo' - Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text' - Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p' Signed-off-by: Suguru Hirahara <[email protected]> * Separate properties of mx_EventTile_button The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level. Signed-off-by: Suguru Hirahara <[email protected]> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <[email protected]> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <[email protected]> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <[email protected]> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <[email protected]> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <[email protected]> * Hide buttons in mx_EventTile_pre_container and show them on hover by default Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only. Signed-off-by: Suguru Hirahara <[email protected]> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 5b51efd commit ef97714

File tree

1 file changed

+72
-71
lines changed

1 file changed

+72
-71
lines changed

‎res/css/views/rooms/_EventTile.scss‎

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -415,20 +415,20 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
415415
/* Spoiler stuff */
416416
.mx_EventTile_spoiler {
417417
cursor: pointer;
418-
}
419418

420-
.mx_EventTile_spoiler_reason {
421-
color: $event-timestamp-color;
422-
font-size: $font-11px;
423-
}
419+
.mx_EventTile_spoiler_reason {
420+
color: $event-timestamp-color;
421+
font-size: $font-11px;
422+
}
424423

425-
.mx_EventTile_spoiler_content {
426-
filter: blur(5px) saturate(0.1) sepia(1);
427-
transition-duration: 0.5s;
428-
}
424+
.mx_EventTile_spoiler_content {
425+
filter: blur(5px) saturate(0.1) sepia(1);
426+
transition-duration: 0.5s;
427+
}
429428

430-
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
431-
filter: none;
429+
&.visible > .mx_EventTile_spoiler_content {
430+
filter: none;
431+
}
432432
}
433433

434434
.mx_RoomView_timeline_rr_enabled {
@@ -506,28 +506,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
506506
}
507507

508508
&::before {
509-
mask-repeat: no-repeat;
510-
mask-position: center;
511509
mask-size: 80%;
512510
}
513-
}
514511

515-
.mx_EventTile_e2eIcon_warning {
516-
&::after {
512+
&.mx_EventTile_e2eIcon_warning,
513+
&.mx_EventTile_e2eIcon_normal {
514+
opacity: 1;
515+
}
516+
517+
&.mx_EventTile_e2eIcon_warning::after {
517518
mask-image: url('$(res)/img/e2e/warning.svg');
518519
background-color: $alert;
519520
}
520521

521-
opacity: 1;
522-
}
523-
524-
.mx_EventTile_e2eIcon_normal {
525-
&::after {
522+
&.mx_EventTile_e2eIcon_normal::after {
526523
mask-image: url('$(res)/img/e2e/normal.svg');
527524
background-color: $header-panel-text-primary-color;
528525
}
529-
530-
opacity: 1;
531526
}
532527

533528
/* Various markdown overrides */
@@ -570,93 +565,99 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
570565
}
571566
}
572567

573-
.mx_EventTile_collapsedCodeBlock {
574-
max-height: 30vh;
575-
}
576-
577568
.mx_EventTile:hover .mx_EventTile_body pre,
578569
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
579570
border: 1px solid $tertiary-content;
580571
}
581572

582-
.mx_EventTile_pre_container {
583-
// For correct positioning of _copyButton (See TextualBody)
584-
position: relative;
585-
}
586-
587-
// Inserted adjacent to <pre> blocks, (See TextualBody)
588573
.mx_EventTile_button {
589-
position: absolute;
590574
display: inline-block;
591-
visibility: hidden;
592575
cursor: pointer;
593-
top: 8px;
594-
right: 8px;
595-
width: 19px;
596-
height: 19px;
597-
background-color: $message-action-bar-fg-color;
598-
}
599-
600-
.mx_EventTile_buttonBottom {
601-
top: 33px;
602576
}
603577

604578
.mx_EventTile_copyButton {
605579
mask-image: url($copy-button-url);
606580
}
607581

608-
.mx_EventTile_collapseButton {
609-
mask-size: 75%;
582+
.mx_EventTile_collapseButton,
583+
.mx_EventTile_expandButton {
610584
mask-position: center;
611585
mask-repeat: no-repeat;
586+
}
587+
588+
.mx_EventTile_collapseButton {
612589
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
613590
}
614591

615592
.mx_EventTile_expandButton {
616-
mask-size: 75%;
617-
mask-position: center;
618-
mask-repeat: no-repeat;
619593
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
620594
}
621595

622-
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
623-
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
624-
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
625-
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
626-
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
627-
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
628-
visibility: visible;
596+
.mx_EventTile_body .mx_EventTile_pre_container {
597+
// For correct positioning of _copyButton (See TextualBody)
598+
position: relative;
599+
600+
&:focus-within,
601+
&:hover {
602+
.mx_EventTile_button {
603+
visibility: visible;
604+
}
605+
}
606+
607+
.mx_EventTile_collapsedCodeBlock {
608+
max-height: 30vh;
609+
}
610+
611+
// Inserted adjacent to <pre> blocks, (See TextualBody)
612+
.mx_EventTile_button {
613+
position: absolute;
614+
top: 8px;
615+
right: 8px;
616+
width: 19px;
617+
height: 19px;
618+
visibility: hidden;
619+
background-color: $message-action-bar-fg-color;
620+
621+
&.mx_EventTile_buttonBottom {
622+
top: 33px;
623+
}
624+
625+
&.mx_EventTile_collapseButton,
626+
&.mx_EventTile_expandButton {
627+
mask-size: 75%;
628+
}
629+
}
629630
}
630631

631632
/* end of overrides */
632633

633634
.mx_EventTile_keyRequestInfo {
634635
font-size: $font-12px;
635-
}
636636

637-
.mx_EventTile_keyRequestInfo_text {
638-
opacity: 0.5;
639-
}
637+
.mx_EventTile_keyRequestInfo_text {
638+
opacity: 0.5;
640639

641-
.mx_EventTile_keyRequestInfo_text .mx_AccessibleButton {
642-
@mixin ButtonResetDefault;
643-
color: $primary-content;
644-
text-decoration: underline;
645-
cursor: pointer;
640+
.mx_AccessibleButton {
641+
@mixin ButtonResetDefault;
642+
color: $primary-content;
643+
text-decoration: underline;
644+
cursor: pointer;
645+
}
646+
}
646647
}
647648

648649
.mx_EventTile_keyRequestInfo_tooltip_contents p {
649650
text-align: auto;
650651
margin-left: 3px;
651652
margin-right: 3px;
652-
}
653653

654-
.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
655-
margin-top: 0px;
656-
}
654+
&:first-child {
655+
margin-top: 0px;
656+
}
657657

658-
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
659-
margin-bottom: 0px;
658+
&:last-child {
659+
margin-bottom: 0px;
660+
}
660661
}
661662

662663
.mx_EventTile_tileError {

0 commit comments

Comments
 (0)