FIX: replace dropdown with button when there's only one option (#30242)

On mobile, in the topic footer buttons, instead of showing all the
buttons, we "merge" some of then into a dropdown.

If the dropdown has only one "option", then it doesn't make sense to
show the "ellipsis" button. Instead, we directly show the button of the
only available option. Saving a click on the way.
This commit is contained in:
Régis Hanol 2024-12-12 17:56:30 +01:00 committed by GitHub
parent 9694dc6cb0
commit 1791abab25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 1 deletions

View File

@ -59,7 +59,22 @@
{{/each}}
{{#if this.site.mobileView}}
{{#if this.dropdownButtons}}
{{#if this.loneDropdownButton}}
<DButton
@action={{this.loneDropdownButton.action}}
@icon={{this.loneDropdownButton.icon}}
@translatedLabel={{this.loneDropdownButton.label}}
@translatedTitle={{this.loneDropdownButton.title}}
@translatedAriaLabel={{this.loneDropdownButton.ariaLabel}}
@disabled={{this.loneDropdownButton.disabled}}
id={{concat "topic-footer-button-" this.loneDropdownButton.id}}
class={{concat-class
"btn-default"
"topic-footer-button"
this.loneDropdownButton.classNames
}}
/>
{{else if (gt this.dropdownButtons.length 1)}}
<DMenu
@modalForMobile={{true}}
@identifier="topic-footer-mobile-dropdown"

View File

@ -48,6 +48,11 @@ export default class TopicFooterButtons extends Component {
return inlineButtons.filter((button) => button.dropdown);
}
@discourseComputed("dropdownButtons.[]")
loneDropdownButton(dropdownButtons) {
return dropdownButtons.length === 1 ? dropdownButtons[0] : null;
}
@discourseComputed("topic.isPrivateMessage")
showNotificationsButton(isPM) {
return !isPM || this.canSendPms;