OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix clickable area of general event list summary toggle (#8979) 

* Fix toggle of expanded generic event list summary on bubble layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Margin settings

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
pull/28217/head
Suguru Hirahara 2022-07-04 19:00:45 +00:00 committed by GitHub
parent ed92071046
commit 32eb853bbb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
res/css/views/elements/_GenericEventListSummary.scss
View File

@ -67,14 +67,16 @@ limitations under the License.
}
.mx_GenericEventListSummary_toggle {
margin: 0 55px 0 5px;
margin-block: 0;
margin-inline-end: 55px;
&[aria-expanded=false] {
order: 9;
margin-inline-start: 5px;
}
&[aria-expanded=true] {
text-align: right;
margin-inline-start: auto; // reduce clickable area
}
}
@ -109,11 +111,6 @@ limitations under the License.
cursor: pointer;
}
.mx_GenericEventListSummary_toggle {
color: $accent;
cursor: pointer;
}
.mx_GenericEventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;

7
src/components/views/elements/GenericEventListSummary.tsx
View File

@ -119,7 +119,12 @@ const GenericEventListSummary: React.FC<IProps> = ({
data-layout={layout}
data-testid={testId}
>
<AccessibleButton className="mx_GenericEventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
<AccessibleButton
kind="link_inline"
className="mx_GenericEventListSummary_toggle"
onClick={toggleExpanded}
aria-expanded={expanded}
>
{ expanded ? _t('collapse') : _t('expand') }
</AccessibleButton>
{ body }