PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Prevent possible regressions of EventTile structurally (#8647)

Browse source 
* '.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 2022-05-23 20:16:50 +00:00 committed by GitHub
parent 5b51efd861
commit ef977146c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 72 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
res/css/views/rooms/_EventTile.scss
View file

@ -415,20 +415,20 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
/* Spoiler stuff */
.mx_EventTile_spoiler {
cursor: pointer;
}
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
font-size: $font-11px;
}
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
font-size: $font-11px;
}
.mx_EventTile_spoiler_content {
filter: blur(5px) saturate(0.1) sepia(1);
transition-duration: 0.5s;
}
.mx_EventTile_spoiler_content {
filter: blur(5px) saturate(0.1) sepia(1);
transition-duration: 0.5s;
}
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
filter: none;
&.visible > .mx_EventTile_spoiler_content {
filter: none;
}
}
.mx_RoomView_timeline_rr_enabled {
@ -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 {
&::after {
&.mx_EventTile_e2eIcon_warning,
&.mx_EventTile_e2eIcon_normal {
opacity: 1;
}
&.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,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.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 {
visibility: visible;
.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 {
opacity: 0.5;
.mx_EventTile_keyRequestInfo_text .mx_AccessibleButton {
@mixin ButtonResetDefault;
color: $primary-content;
text-decoration: underline;
cursor: pointer;
.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 {
margin-top: 0px;
}
&:first-child {
margin-top: 0px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
margin-bottom: 0px;
&:last-child {
margin-bottom: 0px;
}
}
.mx_EventTile_tileError {