hugo/bDS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: some work-over for the sidebar toggle

Browse Source
This commit is contained in:
hugo
2026-02-17 07:20:28 +01:00
parent 50e813f95c
commit cdb5fd31e2
3 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/components/WindowTitleBar/WindowTitleBar.css
View File

@@ -7,6 +7,7 @@
border-bottom: 1px solid var(--vscode-editorGroupHeader-tabsBorder, #1e1e1e); border-bottom: 1px solid var(--vscode-editorGroupHeader-tabsBorder, #1e1e1e);
flex-shrink: 0; flex-shrink: 0;
-webkit-app-region: drag; -webkit-app-region: drag;
padding-right: 10px;
} }
.window-titlebar-drag-region { .window-titlebar-drag-region {
@@ -18,25 +19,46 @@
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 8px; margin-right: 6px;
} }
.window-titlebar-action-button { .window-titlebar-action-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 28px; width: 30px;
height: 28px; height: 30px;
background: transparent; background: transparent;
border: none; border: none;
color: var(--vscode-titleBar-activeForeground, var(--vscode-icon-foreground, #c5c5c5)); color: var(--vscode-foreground, #cccccc);
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.window-titlebar-action-button svg { .window-titlebar-action-button:focus,
.window-titlebar-action-button:focus-visible {
outline: none;
box-shadow: none;
}
.window-titlebar-sidebar-icon {
width: 14px;
height: 14px;
border: 1.5px solid currentColor;
border-radius: 2px;
display: block; display: block;
position: relative;
overflow: hidden;
}
.window-titlebar-sidebar-pane {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-color: currentColor;
} }
.window-titlebar-action-button:hover { .window-titlebar-action-button:hover {

12
src/renderer/components/WindowTitleBar/WindowTitleBar.tsx
View File

@@ -15,15 +15,9 @@ export const WindowTitleBar: React.FC = () => {
onClick={toggleSidebar} onClick={toggleSidebar}
title={`${sidebarVisible ? 'Hide' : 'Show'} Sidebar (Ctrl+B)`} title={`${sidebarVisible ? 'Hide' : 'Show'} Sidebar (Ctrl+B)`}
> >
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <span className="window-titlebar-sidebar-icon" data-shape="frame-square" aria-hidden="true">
<path <span className="window-titlebar-sidebar-pane" data-shape="left-half" />
d="M3 3.75A1.75 1.75 0 0 1 4.75 2h6.5A1.75 1.75 0 0 1 13 3.75v8.5A1.75 1.75 0 0 1 11.25 14h-6.5A1.75 1.75 0 0 1 3 12.25v-8.5z" </span>
fill="none"
stroke="currentColor"
strokeWidth="1"
/>
<path d="M4.5 3.5h3.75v9H4.5z" fill="currentColor"/>
</svg>
</button> </button>
</div> </div>
</div> </div>

11
tests/renderer/components/WindowTitleBar.test.tsx
View File

@@ -28,11 +28,12 @@ describe('WindowTitleBar', () => {
render(<WindowTitleBar />); render(<WindowTitleBar />);
const toggleButton = screen.getByLabelText('Toggle Sidebar'); const toggleButton = screen.getByLabelText('Toggle Sidebar');
const svg = toggleButton.querySelector('svg'); const iconFrame = toggleButton.querySelector('.window-titlebar-sidebar-icon');
const paths = svg?.querySelectorAll('path'); const iconPane = toggleButton.querySelector('.window-titlebar-sidebar-pane');
expect(svg).not.toBeNull(); expect(iconFrame).not.toBeNull();
expect(paths?.[0]?.getAttribute('d')).toBe('M3 3.75A1.75 1.75 0 0 1 4.75 2h6.5A1.75 1.75 0 0 1 13 3.75v8.5A1.75 1.75 0 0 1 11.25 14h-6.5A1.75 1.75 0 0 1 3 12.25v-8.5z'); expect(iconPane).not.toBeNull();
expect(paths?.[1]?.getAttribute('d')).toBe('M4.5 3.5h3.75v9H4.5z'); expect(iconFrame).toHaveAttribute('data-shape', 'frame-square');
expect(iconPane).toHaveAttribute('data-shape', 'left-half');
}); });
}); });