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 <luixxiul@users.noreply.github.com> * mx_EventTile_spoiler - Group 'mx_EventTile_spoiler' - mx_EventTile_spoiler.visible Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group 'mx_EventTile_button' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_expandButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group '.mx_EventTile_collapseButton' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * 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 <luixxiul@users.noreply.github.com> * .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 <luixxiul@users.noreply.github.com> * 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 <luixxiul@users.noreply.github.com> * Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move buttons declarations below mx_EventTile_button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify width and height to only buttons in mx_EventTile_pre_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Dedupe 'mx_EventTile_e2eIcon' ::before Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * 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 <luixxiul@users.noreply.github.com> * Remove redundant nestings for E2E icons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara
GitHub
parent
5b51efd861
commit
ef977146c3
1 changed files with 72 additions and 71 deletions
|
|
@ -415,7 +415,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
/* Spoiler stuff */
|
||||
.mx_EventTile_spoiler {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_EventTile_spoiler_reason {
|
||||
color: $event-timestamp-color;
|
||||
|
|
@ -427,9 +426,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
|
||||
&.visible > .mx_EventTile_spoiler_content {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_timeline_rr_enabled {
|
||||
.mx_EventTile[data-layout=group] {
|
||||
|
|
@ -506,28 +506,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
|
||||
&::before {
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 80%;
|
||||
}
|
||||
|
||||
&.mx_EventTile_e2eIcon_warning,
|
||||
&.mx_EventTile_e2eIcon_normal {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_warning {
|
||||
&::after {
|
||||
&.mx_EventTile_e2eIcon_warning::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_normal {
|
||||
&::after {
|
||||
&.mx_EventTile_e2eIcon_normal::after {
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $header-panel-text-primary-color;
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Various markdown overrides */
|
||||
|
|
@ -570,94 +565,100 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_collapsedCodeBlock {
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_body pre,
|
||||
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
|
||||
border: 1px solid $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_EventTile_pre_container {
|
||||
// For correct positioning of _copyButton (See TextualBody)
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Inserted adjacent to <pre> blocks, (See TextualBody)
|
||||
.mx_EventTile_button {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-color: $message-action-bar-fg-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_buttonBottom {
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
.mx_EventTile_copyButton {
|
||||
mask-image: url($copy-button-url);
|
||||
}
|
||||
|
||||
.mx_EventTile_collapseButton {
|
||||
mask-size: 75%;
|
||||
.mx_EventTile_collapseButton,
|
||||
.mx_EventTile_expandButton {
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.mx_EventTile_collapseButton {
|
||||
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
|
||||
}
|
||||
|
||||
.mx_EventTile_expandButton {
|
||||
mask-size: 75%;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
|
||||
}
|
||||
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
|
||||
.mx_EventTile_body .mx_EventTile_pre_container {
|
||||
// For correct positioning of _copyButton (See TextualBody)
|
||||
position: relative;
|
||||
|
||||
&:focus-within,
|
||||
&:hover {
|
||||
.mx_EventTile_button {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_collapsedCodeBlock {
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
// Inserted adjacent to <pre> blocks, (See TextualBody)
|
||||
.mx_EventTile_button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
visibility: hidden;
|
||||
background-color: $message-action-bar-fg-color;
|
||||
|
||||
&.mx_EventTile_buttonBottom {
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_collapseButton,
|
||||
&.mx_EventTile_expandButton {
|
||||
mask-size: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* end of overrides */
|
||||
|
||||
.mx_EventTile_keyRequestInfo {
|
||||
font-size: $font-12px;
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_text {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_text .mx_AccessibleButton {
|
||||
.mx_AccessibleButton {
|
||||
@mixin ButtonResetDefault;
|
||||
color: $primary-content;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_tooltip_contents p {
|
||||
text-align: auto;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_tileError {
|
||||
color: red;
|
||||
|
|
|
|||
Loading…
Reference in a new issue