feat(desktop): standardize desktop layout icons (#9685)
This commit is contained in:
@@ -194,18 +194,18 @@ export function SessionHeader() {
|
|||||||
>
|
>
|
||||||
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
|
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
|
||||||
<Icon
|
<Icon
|
||||||
name={view().reviewPanel.opened() ? "layout-right" : "layout-left"}
|
|
||||||
size="small"
|
size="small"
|
||||||
|
name={view().reviewPanel.opened() ? "layout-right-full" : "layout-right"}
|
||||||
class="group-hover/review-toggle:hidden"
|
class="group-hover/review-toggle:hidden"
|
||||||
/>
|
/>
|
||||||
<Icon
|
<Icon
|
||||||
name={view().reviewPanel.opened() ? "layout-right-partial" : "layout-left-partial"}
|
|
||||||
size="small"
|
size="small"
|
||||||
|
name="layout-right-partial"
|
||||||
class="hidden group-hover/review-toggle:inline-block"
|
class="hidden group-hover/review-toggle:inline-block"
|
||||||
/>
|
/>
|
||||||
<Icon
|
<Icon
|
||||||
name={view().reviewPanel.opened() ? "layout-right-full" : "layout-left-full"}
|
|
||||||
size="small"
|
size="small"
|
||||||
|
name={view().reviewPanel.opened() ? "layout-right" : "layout-right-full"}
|
||||||
class="hidden group-active/review-toggle:inline-block"
|
class="hidden group-active/review-toggle:inline-block"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import { createEffect, createMemo, Show } from "solid-js"
|
import { createEffect, createMemo, Show } from "solid-js"
|
||||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
import { IconButton } from "@opencode-ai/ui/icon-button"
|
||||||
|
import { Icon } from "@opencode-ai/ui/icon"
|
||||||
|
import { Button } from "@opencode-ai/ui/button"
|
||||||
import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
|
import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
|
||||||
import { useTheme } from "@opencode-ai/ui/theme"
|
import { useTheme } from "@opencode-ai/ui/theme"
|
||||||
|
|
||||||
@@ -98,12 +100,21 @@ export function Titlebar() {
|
|||||||
title={language.t("command.sidebar.toggle")}
|
title={language.t("command.sidebar.toggle")}
|
||||||
keybind={command.keybind("sidebar.toggle")}
|
keybind={command.keybind("sidebar.toggle")}
|
||||||
>
|
>
|
||||||
<IconButton
|
<Button variant="ghost" class="group/sidebar-toggle size-6 p-0" onClick={layout.sidebar.toggle}>
|
||||||
icon={layout.sidebar.opened() ? "layout-left" : "layout-right"}
|
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
|
||||||
variant="ghost"
|
<Icon
|
||||||
class="size-8 rounded-md"
|
size="small"
|
||||||
onClick={layout.sidebar.toggle}
|
name={layout.sidebar.opened() ? "layout-left-full" : "layout-left"}
|
||||||
/>
|
class="group-hover/sidebar-toggle:hidden"
|
||||||
|
/>
|
||||||
|
<Icon size="small" name="layout-left-partial" class="hidden group-hover/sidebar-toggle:inline-block" />
|
||||||
|
<Icon
|
||||||
|
size="small"
|
||||||
|
name={layout.sidebar.opened() ? "layout-left" : "layout-left-full"}
|
||||||
|
class="hidden group-active/sidebar-toggle:inline-block"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
</TooltipKeybind>
|
</TooltipKeybind>
|
||||||
<div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
|
<div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
|
||||||
<div class="flex-1 h-full" data-tauri-drag-region />
|
<div class="flex-1 h-full" data-tauri-drag-region />
|
||||||
|
|||||||
Reference in New Issue
Block a user