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,20 +415,20 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
||||||
/* Spoiler stuff */
|
/* Spoiler stuff */
|
||||||
.mx_EventTile_spoiler {
|
.mx_EventTile_spoiler {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile_spoiler_reason {
|
.mx_EventTile_spoiler_reason {
|
||||||
color: $event-timestamp-color;
|
color: $event-timestamp-color;
|
||||||
font-size: $font-11px;
|
font-size: $font-11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_spoiler_content {
|
.mx_EventTile_spoiler_content {
|
||||||
filter: blur(5px) saturate(0.1) sepia(1);
|
filter: blur(5px) saturate(0.1) sepia(1);
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
|
&.visible > .mx_EventTile_spoiler_content {
|
||||||
filter: none;
|
filter: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomView_timeline_rr_enabled {
|
.mx_RoomView_timeline_rr_enabled {
|
||||||
|
|
@ -506,28 +506,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-position: center;
|
|
||||||
mask-size: 80%;
|
mask-size: 80%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile_e2eIcon_warning {
|
&.mx_EventTile_e2eIcon_warning,
|
||||||
&::after {
|
&.mx_EventTile_e2eIcon_normal {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_EventTile_e2eIcon_warning::after {
|
||||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||||
background-color: $alert;
|
background-color: $alert;
|
||||||
}
|
}
|
||||||
|
|
||||||
opacity: 1;
|
&.mx_EventTile_e2eIcon_normal::after {
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile_e2eIcon_normal {
|
|
||||||
&::after {
|
|
||||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||||
background-color: $header-panel-text-primary-color;
|
background-color: $header-panel-text-primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Various markdown overrides */
|
/* Various markdown overrides */
|
||||||
|
|
@ -570,93 +565,99 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_collapsedCodeBlock {
|
|
||||||
max-height: 30vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile:hover .mx_EventTile_body pre,
|
.mx_EventTile:hover .mx_EventTile_body pre,
|
||||||
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
|
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
|
||||||
border: 1px solid $tertiary-content;
|
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 {
|
.mx_EventTile_button {
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
visibility: hidden;
|
|
||||||
cursor: pointer;
|
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 {
|
.mx_EventTile_copyButton {
|
||||||
mask-image: url($copy-button-url);
|
mask-image: url($copy-button-url);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_collapseButton {
|
.mx_EventTile_collapseButton,
|
||||||
mask-size: 75%;
|
.mx_EventTile_expandButton {
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_EventTile_collapseButton {
|
||||||
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
|
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_expandButton {
|
.mx_EventTile_expandButton {
|
||||||
mask-size: 75%;
|
|
||||||
mask-position: center;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
|
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 {
|
||||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
|
// For correct positioning of _copyButton (See TextualBody)
|
||||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
|
position: relative;
|
||||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
|
|
||||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
|
&:focus-within,
|
||||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
|
&:hover {
|
||||||
visibility: visible;
|
.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 */
|
/* end of overrides */
|
||||||
|
|
||||||
.mx_EventTile_keyRequestInfo {
|
.mx_EventTile_keyRequestInfo {
|
||||||
font-size: $font-12px;
|
font-size: $font-12px;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile_keyRequestInfo_text {
|
.mx_EventTile_keyRequestInfo_text {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile_keyRequestInfo_text .mx_AccessibleButton {
|
.mx_AccessibleButton {
|
||||||
@mixin ButtonResetDefault;
|
@mixin ButtonResetDefault;
|
||||||
color: $primary-content;
|
color: $primary-content;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_keyRequestInfo_tooltip_contents p {
|
.mx_EventTile_keyRequestInfo_tooltip_contents p {
|
||||||
text-align: auto;
|
text-align: auto;
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
|
&:first-child {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_tileError {
|
.mx_EventTile_tileError {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue