feat(design): a video's one action list (C1) — the card's "…", the menu holds the rest (E28 S3e1)
- useContextMenu gains buttonProps (a row's visible "…" opens the same menu under the button; a second press closes it) and anchor (the element the menu came from, for a panel a row opens). - ui/MoreButton; ActionMenu rows can run inGesture (a clipboard write inside the click, Safari). - useVideoActions: one builder for a video's menu (play / restart, channel, watched, save, add to playlist, download, details, copy title / link, hide, reset, pin), composed by the feed and by Home's rails; the playlists and details panels open anchored beside the card (VideoFollowUp). - The card keeps watched / save / add to playlist and the "…": on the picture on hover (the duration steps aside), in the rows' action column; on touch only a 44px "…" beside the title. Download, hide, reset and the hover info card leave the card. - The title is selectable: a click ending a selection neither plays nor follows the link. - DESIGN.md: how C1 is built + the log row.
This commit is contained in:
@@ -58,6 +58,10 @@ interface ActionItem extends MenuItemBase {
|
||||
onSelect: () => void;
|
||||
/** Destructive action: painted in the danger colour, like the outline-danger buttons. */
|
||||
danger?: boolean;
|
||||
/** Run INSIDE the click, then close — for a clipboard write, which Safari allows only within the
|
||||
* user's gesture (a task later, as `closeThenAct` runs every other row, it is refused). Only for
|
||||
* an action that opens nothing and moves no focus: that is what the deferral exists for. */
|
||||
inGesture?: boolean;
|
||||
items?: never;
|
||||
}
|
||||
|
||||
@@ -100,7 +104,11 @@ export function MenuItemList({
|
||||
label={it.label}
|
||||
title={it.title}
|
||||
// Any row may open a dialog (a confirm), so every row closes first — see closeThenAct.
|
||||
onSelect={() => closeThenAct(onClose, it.onSelect)}
|
||||
onSelect={() => {
|
||||
if (!it.inGesture) return closeThenAct(onClose, it.onSelect);
|
||||
it.onSelect();
|
||||
onClose();
|
||||
}}
|
||||
className={`${ROW}${it.danger ? " text-danger" : ""}`}
|
||||
>
|
||||
{it.icon && (
|
||||
|
||||
Reference in New Issue
Block a user