gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-10-05 16:42:47 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Visibility dialog: Add visual dropdown indicator to Dropdown component (#36052)

Browse Source
This commit is contained in:
diondiondion 2025-09-08 14:53:23 +02:00 committed by GitHub
parent 0153b49ef7
commit c0af4581aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/mastodon/components/dropdown/index.tsx
View File

@ -8,8 +8,11 @@ import classNames from 'classnames';
import Overlay from 'react-overlays/Overlay'; import Overlay from 'react-overlays/Overlay';
import UnfoldMoreIcon from '@/material-icons/400-24px/unfold_more.svg?react';
import type { SelectItem } from '../dropdown_selector'; import type { SelectItem } from '../dropdown_selector';
import { DropdownSelector } from '../dropdown_selector'; import { DropdownSelector } from '../dropdown_selector';
import { Icon } from '../icon';
import { matchWidth } from './utils'; import { matchWidth } from './utils';
@ -77,11 +80,16 @@ export const Dropdown: FC<
defaultMessage='Select an option' defaultMessage='Select an option'
/> />
)} )}
<Icon
id='unfold-icon'
icon={UnfoldMoreIcon}
className={`${classPrefix}__icon`}
/>
</button> </button>
<Overlay <Overlay
show={open} show={open}
offset={[0, 4]} offset={[0, 0]}
placement='bottom-start' placement='bottom-start'
onHide={handleClose} onHide={handleClose}
flip flip

9
app/javascript/styles/mastodon/components.scss
View File

@ -5711,6 +5711,8 @@ a.status-card {
} }
&__button { &__button {
display: flex;
align-items: center;
color: $primary-text-color; color: $primary-text-color;
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
@ -5726,6 +5728,13 @@ a.status-card {
} }
} }
&__icon {
margin-inline: auto -4px;
width: 18px;
height: 18px;
opacity: 0.5;
}
&__helper { &__helper {
margin-top: 4px; margin-top: 4px;
font-size: 0.8em; font-size: 0.8em;