fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-25 23:13:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid nested button

Browse source
This commit is contained in:
Christian Schmidt 2024-09-28 16:16:32 +02:00
parent 7c3834a8c8
commit 12cc731a37
2 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/mastodon/features/compose/components/search.jsx
View file

@ -346,10 +346,12 @@ class Search extends PureComponent {
<div className='search__popout__menu'> <div className='search__popout__menu'>
{recent.size > 0 ? this._getOptions().map(({ label, key, action, forget }, i) => ( {recent.size > 0 ? this._getOptions().map(({ label, key, action, forget }, i) => (
<button key={key} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}> <div key={key} className='search__popout__menu__item search__popout__menu__item--flex'>
<button onMouseDown={action} className={classNames({ selected: selectedOption === i })}>
<span>{label}</span> <span>{label}</span>
<button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
</button> </button>
<button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
</div>
)) : ( )) : (
<div className='search__popout__menu__message'> <div className='search__popout__menu__message'>
<FormattedMessage id='search.no_recent_searches' defaultMessage='No recent searches' /> <FormattedMessage id='search.no_recent_searches' defaultMessage='No recent searches' />

29
app/javascript/styles/mastodon/components.scss
View file

@ -5589,26 +5589,33 @@ a.status-card {
&__item { &__item {
display: block; display: block;
box-sizing: border-box;
width: 100%; width: 100%;
border: 0;
font: inherit;
background: transparent;
color: $darker-text-color;
padding: 10px;
cursor: pointer;
border-radius: 4px; border-radius: 4px;
text-align: start;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&--flex { &--flex {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
&:is(button),
button {
flex: 1;
box-sizing: border-box;
border: 0;
font: inherit;
background: transparent;
color: $darker-text-color;
padding: 10px;
cursor: pointer;
text-align: start;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.icon-button { .icon-button {
flex: 0;
padding: 10px 20px 10px 10px;
transition: none; transition: none;
} }