mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-18 00:46:45 +00:00
245330bd68
The reminder dialog footer could not fit all actions in one row on small screens. Show only the snooze duration (e.g. "10m") on the split-button's main action instead of "Snooze 10m" — the snooze icon already conveys the action — freeing horizontal space so the row fits. Add a `mainLabel` input to the shared split-button so the abbreviated main action keeps a full tooltip and aria-label for discoverability/accessibility. Claude-Session: https://claude.ai/code/session_015797BREShEaTkBsA3tRBuX Co-authored-by: Claude <noreply@anthropic.com>
33 lines
1.5 KiB
TypeScript
33 lines
1.5 KiB
TypeScript
import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
|
|
import { MatButton } from '@angular/material/button';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
|
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
import { TranslatePipe } from '@ngx-translate/core';
|
|
|
|
/**
|
|
* Joined "split button": a primary default action plus an adjacent, compact
|
|
* trigger that opens a menu of related/overflow options. The two halves render
|
|
* as a single control (shared border, no gap). Pass the menu to open via
|
|
* [menu]; project the default-action content as children.
|
|
*/
|
|
@Component({
|
|
selector: 'split-button',
|
|
standalone: true,
|
|
imports: [MatButton, MatIcon, MatMenuTrigger, MatTooltip, TranslatePipe],
|
|
templateUrl: './split-button.component.html',
|
|
styleUrl: './split-button.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class SplitButtonComponent {
|
|
readonly menu = input.required<MatMenu>();
|
|
readonly disabled = input<boolean>(false);
|
|
// Translation key used for the trigger's tooltip and aria-label.
|
|
readonly triggerLabel = input<string>('');
|
|
// Resolved (already translated) label for the main button's tooltip and
|
|
// aria-label. Use when the projected content is abbreviated (e.g. just a
|
|
// time) so the full action stays discoverable to screen readers and on hover.
|
|
readonly mainLabel = input<string>('');
|
|
|
|
readonly mainClick = output<MouseEvent>();
|
|
}
|