aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2026-01-21 00:34:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Close content menu with escape

Browse Source
This commit is contained in:
David Hill
2025-10-30 12:19:26 +00:00
parent d7277fd305
commit 439372704d
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/console/app/src/component/header.tsx
View File

@@ -40,12 +40,20 @@ export function Header(props: { zen?: boolean }) {
setStore("contextMenuOpen", false) setStore("contextMenuOpen", false)
} }
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
setStore("contextMenuOpen", false)
}
}
if (store.contextMenuOpen) { if (store.contextMenuOpen) {
document.addEventListener("click", handleClickOutside) document.addEventListener("click", handleClickOutside)
document.addEventListener("contextmenu", handleContextMenu) document.addEventListener("contextmenu", handleContextMenu)
document.addEventListener("keydown", handleKeyDown)
onCleanup(() => { onCleanup(() => {
document.removeEventListener("click", handleClickOutside) document.removeEventListener("click", handleClickOutside)
document.removeEventListener("contextmenu", handleContextMenu) document.removeEventListener("contextmenu", handleContextMenu)
document.removeEventListener("keydown", handleKeyDown)
}) })
} }
}) })
@@ -118,25 +126,18 @@ export function Header(props: { zen?: boolean }) {
style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`} style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`}
> >
<button class="context-menu-item" onClick={copyLogoToClipboard}> <button class="context-menu-item" onClick={copyLogoToClipboard}>
<img data-slot="copy light" src={copyLogoLight} <img data-slot="copy light" src={copyLogoLight} alt="Logo" />
alt="Logo"/> <img data-slot="copy dark" src={copyLogoDark} alt="Logo" />
<img data-slot="copy dark" src={copyLogoDark}
alt="Logo"/>
Copy logo as SVG Copy logo as SVG
</button> </button>
<button class="context-menu-item" onClick={copyWordmarkToClipboard}> <button class="context-menu-item" onClick={copyWordmarkToClipboard}>
<img data-slot="copy light" src={copyWordmarkLight} <img data-slot="copy light" src={copyWordmarkLight} alt="Wordmark" />
alt="Wordmark"/> <img data-slot="copy dark" src={copyWordmarkDark} alt="Wordmark" />
<img data-slot="copy dark" src={copyWordmarkDark}
alt="Wordmark"/>
Copy wordmark as SVG Copy wordmark as SVG
</button> </button>
<button class="context-menu-item" <button class="context-menu-item" onClick={() => (window.location.href = "/brand")}>
onClick={() => (window.location.href = "/brand")}> <img data-slot="copy light" src={copyBrandAssetsLight} alt="Brand Assets" />
<img data-slot="copy light" src={copyBrandAssetsLight} <img data-slot="copy dark" src={copyBrandAssetsDark} alt="Brand Assets" />
alt="Brand Assets"/>
<img data-slot="copy dark" src={copyBrandAssetsDark}
alt="Brand Assets"/>
Brand assets Brand assets
</button> </button>
</div> </div>
@@ -157,7 +158,7 @@ export function Header(props: { zen?: boolean }) {
<li> <li>
<Switch> <Switch>
<Match when={props.zen}> <Match when={props.zen}>
<a href="/auth">Login</a> <a href="/auth">Login</a>
</Match> </Match>
<Match when={!props.zen}> <Match when={!props.zen}>
<A href="/zen">Zen</A> <A href="/zen">Zen</A>