Skip to content

Fix Broken Title Bar Buttons #2953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jameskerr merged 1 commit into from
Jan 5, 2024
Merged

Fix Broken Title Bar Buttons #2953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/zui/src/app/features/sidebar/sidebar-toggle-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export const SidebarToggleButton = () => {
return (
<IconButton
iconName="sidebar-toggle"
label="Toggle Left Sidebar"
data-tooltip="Toggle Left Sidebar"
iconSize={16}
click={() => dispatch(Appearance.toggleSidebar())}
/>
Expand All @@ -19,6 +21,8 @@ export const RightSidebarToggleButton = () => {
return (
<IconButton
iconName="right-sidebar-toggle"
label="Toggle Right Sidebar"
data-tooltip="Toggle Right Sidebar"
iconSize={16}
click={() => dispatch(Appearance.toggleSecondarySidebar())}
/>
Expand Down
1 change: 1 addition & 0 deletions apps/zui/src/components/icon-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const BG = styled.button`
justify-content: center;
flex-shrink: 0;
transition: background 100ms;
-webkit-app-region: no-drag;
Copy link
Contributor Author

@jameskerr jameskerr Jan 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the fix.

Copy link
Contributor Author

@jameskerr jameskerr Jan 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The app thought these buttons were draggable regions and intercepted all mouse events.


&:disabled {
opacity: 0.2;
Expand Down
7 changes: 6 additions & 1 deletion apps/zui/src/js/components/TabBar/AddTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ type Props = {
export default function AddTab({onClick, left}: Props) {
return (
<BG style={{transform: `translateX(${left}px)`}}>
<IconButton iconName="plus" iconSize={18} click={onClick} />
<IconButton
label="New Tab"
iconName="plus"
iconSize={18}
click={onClick}
/>
</BG>
)
}
22 changes: 22 additions & 0 deletions packages/zui-player/tests/title-bar-buttons.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { play } from 'zui-player';

play('title bar buttons', (app, test) => {
test('click new tab', async () => {
await app.click('button', 'New Tab');
await app.attached(/Query Session/);
});

test('toggle left sidebar', async () => {
await app.click('button', 'Toggle Left Sidebar');
await app.detached(/http:\/\/localhost:9867/);
await app.click('button', 'Toggle Left Sidebar');
await app.attached(/http:\/\/localhost:9867/);
});

test('toggle right sidebar', async () => {
await app.click('button', 'Toggle Right Sidebar');
await app.detached('button', 'HISTORY');
await app.click('button', 'Toggle Right Sidebar');
await app.attached(/Session history will appear here/);
});
});