fix(app): hide 'open in app' button on narrow viewports
This commit is contained in:
Adam
@@ -268,74 +268,78 @@ export function SessionHeader() {
|
|||||||
<Portal mount={mount()}>
|
<Portal mount={mount()}>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<Show when={projectDirectory()}>
|
<Show when={projectDirectory()}>
|
||||||
<Show
|
<div class="hidden xl:flex items-center">
|
||||||
when={canOpen()}
|
<Show
|
||||||
fallback={
|
when={canOpen()}
|
||||||
<Button
|
fallback={
|
||||||
variant="ghost"
|
<Button
|
||||||
class="rounded-sm h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none"
|
|
||||||
onClick={copyPath}
|
|
||||||
aria-label={language.t("session.header.open.copyPath")}
|
|
||||||
>
|
|
||||||
<Icon name="copy" size="small" class="text-icon-base" />
|
|
||||||
<span class="text-12-regular text-text-strong">{language.t("session.header.open.copyPath")}</span>
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="rounded-sm h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none rounded-r-none"
|
|
||||||
onClick={() => openDir(current().id)}
|
|
||||||
aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
|
|
||||||
>
|
|
||||||
<AppIcon id={current().icon} class="size-5" />
|
|
||||||
<span class="text-12-regular text-text-strong">
|
|
||||||
{language.t("session.header.open.action", { app: current().label })}
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenu.Trigger
|
|
||||||
as={IconButton}
|
|
||||||
icon="chevron-down"
|
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
class="rounded-sm h-[24px] w-auto px-1.5 border-none shadow-none rounded-l-none data-[expanded]:bg-surface-raised-base-active"
|
class="rounded-sm h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none"
|
||||||
aria-label={language.t("session.header.open.menu")}
|
onClick={copyPath}
|
||||||
/>
|
aria-label={language.t("session.header.open.copyPath")}
|
||||||
<DropdownMenu.Portal>
|
>
|
||||||
<DropdownMenu.Content placement="bottom-end" gutter={6}>
|
<Icon name="copy" size="small" class="text-icon-base" />
|
||||||
<DropdownMenu.Group>
|
<span class="text-12-regular text-text-strong">
|
||||||
<DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
|
{language.t("session.header.open.copyPath")}
|
||||||
<DropdownMenu.RadioGroup
|
</span>
|
||||||
value={prefs.app}
|
</Button>
|
||||||
onChange={(value) => {
|
}
|
||||||
if (!OPEN_APPS.includes(value as OpenApp)) return
|
>
|
||||||
setPrefs("app", value as OpenApp)
|
<div class="flex items-center">
|
||||||
}}
|
<Button
|
||||||
>
|
variant="ghost"
|
||||||
{options().map((o) => (
|
class="rounded-sm h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none rounded-r-none"
|
||||||
<DropdownMenu.RadioItem value={o.id} onSelect={() => openDir(o.id)}>
|
onClick={() => openDir(current().id)}
|
||||||
<AppIcon id={o.icon} class="size-5" />
|
aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
|
||||||
<DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
|
>
|
||||||
<DropdownMenu.ItemIndicator>
|
<AppIcon id={current().icon} class="size-5" />
|
||||||
<Icon name="check-small" size="small" class="text-icon-weak" />
|
<span class="text-12-regular text-text-strong">
|
||||||
</DropdownMenu.ItemIndicator>
|
{language.t("session.header.open.action", { app: current().label })}
|
||||||
</DropdownMenu.RadioItem>
|
</span>
|
||||||
))}
|
</Button>
|
||||||
</DropdownMenu.RadioGroup>
|
<DropdownMenu>
|
||||||
</DropdownMenu.Group>
|
<DropdownMenu.Trigger
|
||||||
<DropdownMenu.Separator />
|
as={IconButton}
|
||||||
<DropdownMenu.Item onSelect={copyPath}>
|
icon="chevron-down"
|
||||||
<Icon name="copy" size="small" class="text-icon-weak" />
|
variant="ghost"
|
||||||
<DropdownMenu.ItemLabel>
|
class="rounded-sm h-[24px] w-auto px-1.5 border-none shadow-none rounded-l-none data-[expanded]:bg-surface-raised-base-active"
|
||||||
{language.t("session.header.open.copyPath")}
|
aria-label={language.t("session.header.open.menu")}
|
||||||
</DropdownMenu.ItemLabel>
|
/>
|
||||||
</DropdownMenu.Item>
|
<DropdownMenu.Portal>
|
||||||
</DropdownMenu.Content>
|
<DropdownMenu.Content placement="bottom-end" gutter={6}>
|
||||||
</DropdownMenu.Portal>
|
<DropdownMenu.Group>
|
||||||
</DropdownMenu>
|
<DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
|
||||||
</div>
|
<DropdownMenu.RadioGroup
|
||||||
</Show>
|
value={prefs.app}
|
||||||
|
onChange={(value) => {
|
||||||
|
if (!OPEN_APPS.includes(value as OpenApp)) return
|
||||||
|
setPrefs("app", value as OpenApp)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{options().map((o) => (
|
||||||
|
<DropdownMenu.RadioItem value={o.id} onSelect={() => openDir(o.id)}>
|
||||||
|
<AppIcon id={o.icon} class="size-5" />
|
||||||
|
<DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
|
||||||
|
<DropdownMenu.ItemIndicator>
|
||||||
|
<Icon name="check-small" size="small" class="text-icon-weak" />
|
||||||
|
</DropdownMenu.ItemIndicator>
|
||||||
|
</DropdownMenu.RadioItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenu.RadioGroup>
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<DropdownMenu.Item onSelect={copyPath}>
|
||||||
|
<Icon name="copy" size="small" class="text-icon-weak" />
|
||||||
|
<DropdownMenu.ItemLabel>
|
||||||
|
{language.t("session.header.open.copyPath")}
|
||||||
|
</DropdownMenu.ItemLabel>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Portal>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<StatusPopover />
|
<StatusPopover />
|
||||||
<Show when={showShare()}>
|
<Show when={showShare()}>
|
||||||
|
|||||||
Reference in New Issue
Block a user