aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-24 11:14:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

ignore: refactor header context menu to use CSS styling and router navigation

Browse Source
This commit is contained in:
Jay V
2025-10-30 20:24:29 -04:00
parent 2f9f189f39
commit 43e272e6c4
2 changed files with 14 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/console/app/src/component/header-context-menu.css
View File

@@ -32,12 +32,6 @@
border-radius: 2px;
transition: background-color 0.2s ease;
.context-menu-item [data-slot="copy light"],
.context-menu-item [data-slot="copy dark"] {
width: 22px !important;
height: 26px !important;
}
[data-slot="copy dark"] {
display: none;
}
@@ -55,6 +49,11 @@
background-color: var(--color-background-weak-hover);
color: var(--color-text-strong);
}
img {
width: 22px;
height: 26px;
}
}
.context-menu-divider {

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

@@ -13,7 +13,7 @@ import copyLogoSvgLight from "../asset/lander/opencode-logo-light.svg"
import copyLogoSvgDark from "../asset/lander/opencode-logo-dark.svg"
import copyWordmarkSvgLight from "../asset/lander/opencode-wordmark-light.svg"
import copyWordmarkSvgDark from "../asset/lander/opencode-wordmark-dark.svg"
import { A, createAsync } from "@solidjs/router"
import { A, createAsync, useNavigate } from "@solidjs/router"
import { createMemo, Match, Show, Switch } from "solid-js"
import { createStore } from "solid-js/store"
import { github } from "~/lib/github"
@@ -34,6 +34,7 @@ const fetchSvgContent = async (svgPath: string): Promise<string> => {
}
export function Header(props: { zen?: boolean }) {
const navigate = useNavigate()
const githubData = createAsync(() => github())
const starCount = createMemo(() =>
githubData()?.stars
@@ -128,48 +129,18 @@ export function Header(props: { zen?: boolean }) {
style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`}
>
<button class="context-menu-item" onClick={copyLogoToClipboard}>
<img
data-slot="copy light"
src={copyLogoLight}
style="width: 22px; height: 26px;"
alt="Logo"
/>
<img
data-slot="copy dark"
src={copyLogoDark}
style="width: 22px; height: 26px;"
alt="Logo"
/>
<img data-slot="copy light" src={copyLogoLight} alt="Logo" />
<img data-slot="copy dark" src={copyLogoDark} alt="Logo" />
Copy logo as SVG
</button>
<button class="context-menu-item" onClick={copyWordmarkToClipboard}>
<img
data-slot="copy light"
src={copyWordmarkLight}
style="width: 22px; height: 26px;"
alt="Wordmark"
/>
<img
data-slot="copy dark"
src={copyWordmarkDark}
style="width: 22px; height: 26px;"
alt="Wordmark"
/>
<img data-slot="copy light" src={copyWordmarkLight} alt="Wordmark" />
<img data-slot="copy dark" src={copyWordmarkDark} alt="Wordmark" />
Copy wordmark as SVG
</button>
<button class="context-menu-item" onClick={() => (window.location.href = "/brand")}>
<img
data-slot="copy light"
src={copyBrandAssetsLight}
style="width: 22px; height: 26px;"
alt="Brand Assets"
/>
<img
data-slot="copy dark"
src={copyBrandAssetsDark}
style="width: 22px; height: 26px;"
alt="Brand Assets"
/>
<button class="context-menu-item" onClick={() => navigate("/brand")}>
<img data-slot="copy light" src={copyBrandAssetsLight} alt="Brand Assets" />
<img data-slot="copy dark" src={copyBrandAssetsDark} alt="Brand Assets" />
Brand assets
</button>
</div>