Skip to content

Commit 30ec7de

Browse files
cgivrecgivre
committed
Size improvements
1 parent fac27bc commit 30ec7de

5 files changed

Lines changed: 324 additions & 122 deletions

File tree

‎exec/java-exec/src/main/resources/webapp/src/components/common/Navbar.tsx‎

Lines changed: 81 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
*/
1818
import { useState } from 'react';
1919
import { Link, useLocation } from 'react-router-dom';
20-
import { Layout, Menu, Button, Space, Dropdown, Tooltip } from 'antd';
20+
import { Layout, Menu, Button, Space, Dropdown, Tooltip, Drawer, Grid } from 'antd';
2121
import {
2222
FolderOutlined,
2323
DatabaseOutlined,
@@ -29,6 +29,7 @@ import {
2929
QuestionCircleOutlined,
3030
RobotOutlined,
3131
SettingOutlined,
32+
MenuOutlined,
3233
} from '@ant-design/icons';
3334
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
3435
import type { MenuProps } from 'antd';
@@ -62,6 +63,9 @@ export default function Navbar() {
6263
const location = useLocation();
6364
const { isDark, toggle } = useTheme();
6465
const [prospectorSettingsOpen, setProspectorSettingsOpen] = useState(false);
66+
const [drawerOpen, setDrawerOpen] = useState(false);
67+
const screens = Grid.useBreakpoint();
68+
const isMobile = !screens.md;
6569

6670
// Determine selected nav key, handling sub-routes like /projects/:id, /datasources/:name
6771
let selectedKey = location.pathname;
@@ -81,7 +85,7 @@ export default function Navbar() {
8185
style={{
8286
display: 'flex',
8387
alignItems: 'center',
84-
padding: '0 24px',
88+
padding: isMobile ? '0 12px' : '0 24px',
8589
background: navBg,
8690
backdropFilter: 'blur(12px)',
8791
WebkitBackdropFilter: 'blur(12px)',
@@ -110,21 +114,26 @@ export default function Navbar() {
110114
<span style={{ fontSize: 16, fontWeight: 600 }}>SQL Lab</span>
111115
</Link>
112116

113-
{/* Main Navigation */}
114-
<Menu
115-
theme={isDark ? 'dark' : 'light'}
116-
mode="horizontal"
117-
selectedKeys={[selectedKey]}
118-
items={navItems.map((item) => ({
119-
key: item.key,
120-
icon: item.icon,
121-
label: <Link to={item.key}>{item.label}</Link>,
122-
}))}
123-
style={{ flex: 1, minWidth: 0, background: 'transparent', borderBottom: 'none' }}
124-
/>
117+
{/* Main Navigation — hidden on mobile */}
118+
{!isMobile && (
119+
<Menu
120+
theme={isDark ? 'dark' : 'light'}
121+
mode="horizontal"
122+
selectedKeys={[selectedKey]}
123+
items={navItems.map((item) => ({
124+
key: item.key,
125+
icon: item.icon,
126+
label: <Link to={item.key}>{item.label}</Link>,
127+
}))}
128+
style={{ flex: 1, minWidth: 0, background: 'transparent', borderBottom: 'none' }}
129+
/>
130+
)}
131+
132+
{/* Spacer when nav is hidden */}
133+
{isMobile && <div style={{ flex: 1 }} />}
125134

126135
{/* Right side actions */}
127-
<Space>
136+
<Space size={isMobile ? 4 : 8}>
128137
<Tooltip title={isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}>
129138
<Button
130139
type="text"
@@ -134,11 +143,13 @@ export default function Navbar() {
134143
/>
135144
</Tooltip>
136145

137-
<Dropdown menu={{ items: adminMenuItems }} placement="bottomRight">
138-
<Button type="text" icon={<SettingOutlined />} style={{ color: textColor }}>
139-
Admin
140-
</Button>
141-
</Dropdown>
146+
{!isMobile && (
147+
<Dropdown menu={{ items: adminMenuItems }} placement="bottomRight">
148+
<Button type="text" icon={<SettingOutlined />} style={{ color: textColor }}>
149+
Admin
150+
</Button>
151+
</Dropdown>
152+
)}
142153

143154
<Tooltip title="Prospector Settings">
144155
<Button
@@ -149,11 +160,13 @@ export default function Navbar() {
149160
/>
150161
</Tooltip>
151162

152-
<Dropdown menu={{ items: legacyMenuItems }} placement="bottomRight">
153-
<Button type="text" icon={<HomeOutlined />} style={{ color: textColor }}>
154-
Drill UI
155-
</Button>
156-
</Dropdown>
163+
{!isMobile && (
164+
<Dropdown menu={{ items: legacyMenuItems }} placement="bottomRight">
165+
<Button type="text" icon={<HomeOutlined />} style={{ color: textColor }}>
166+
Drill UI
167+
</Button>
168+
</Dropdown>
169+
)}
157170

158171
<Button
159172
type="text"
@@ -162,8 +175,51 @@ export default function Navbar() {
162175
href="https://drill.apache.org/docs/"
163176
target="_blank"
164177
/>
178+
179+
{/* Hamburger on mobile */}
180+
{isMobile && (
181+
<Button
182+
type="text"
183+
icon={<MenuOutlined />}
184+
style={{ color: textColor }}
185+
onClick={() => setDrawerOpen(true)}
186+
/>
187+
)}
165188
</Space>
166189

190+
{/* Mobile Navigation Drawer */}
191+
<Drawer
192+
title="Menu"
193+
placement="right"
194+
open={drawerOpen}
195+
onClose={() => setDrawerOpen(false)}
196+
width={260}
197+
>
198+
<Menu
199+
theme={isDark ? 'dark' : 'light'}
200+
mode="inline"
201+
selectedKeys={[selectedKey]}
202+
items={navItems.map((item) => ({
203+
key: item.key,
204+
icon: item.icon,
205+
label: <Link to={item.key} onClick={() => setDrawerOpen(false)}>{item.label}</Link>,
206+
}))}
207+
style={{ background: 'transparent', border: 'none' }}
208+
/>
209+
<div style={{ borderTop: '1px solid var(--color-border)', marginTop: 16, paddingTop: 16 }}>
210+
<Dropdown menu={{ items: adminMenuItems }} placement="bottomLeft">
211+
<Button type="text" icon={<SettingOutlined />} style={{ color: textColor, width: '100%', textAlign: 'left' }}>
212+
Admin
213+
</Button>
214+
</Dropdown>
215+
<Dropdown menu={{ items: legacyMenuItems }} placement="bottomLeft">
216+
<Button type="text" icon={<HomeOutlined />} style={{ color: textColor, width: '100%', textAlign: 'left' }}>
217+
Drill UI
218+
</Button>
219+
</Dropdown>
220+
</div>
221+
</Drawer>
222+
167223
<ProspectorSettingsModal
168224
open={prospectorSettingsOpen}
169225
onClose={() => setProspectorSettingsOpen(false)}

‎exec/java-exec/src/main/resources/webapp/src/components/query-editor/QueryToolbar.tsx‎

Lines changed: 43 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* limitations under the License.
1717
*/
1818
import { useState, useCallback } from 'react';
19-
import { Button, Select, InputNumber, Space, Tooltip, Dropdown, Switch, Typography, Modal, Slider, Divider, Tabs } from 'antd';
19+
import { Button, Select, InputNumber, Space, Tooltip, Dropdown, Switch, Typography, Modal, Slider, Divider, Tabs, Grid } from 'antd';
2020
import {
2121
PlayCircleOutlined,
2222
StopOutlined,
@@ -89,6 +89,8 @@ export default function QueryToolbar({
8989
}: QueryToolbarProps) {
9090
const [autoLimitEnabled, setAutoLimitEnabled] = useState(true);
9191
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
92+
const screens = Grid.useBreakpoint();
93+
const isCompact = !screens.lg;
9294

9395
const handleAutoLimitToggle = useCallback(
9496
(enabled: boolean) => {
@@ -120,107 +122,94 @@ export default function QueryToolbar({
120122
label: 'Query History',
121123
onClick: onShowHistory,
122124
},
125+
{
126+
key: 'settings',
127+
icon: <SettingOutlined />,
128+
label: 'Settings',
129+
onClick: () => setSettingsModalOpen(true),
130+
},
131+
...(isCompact && prospectorAvailable
132+
? [
133+
{ type: 'divider' as const },
134+
...(hasSql
135+
? [
136+
{ key: 'explain', icon: <BulbOutlined />, label: 'Explain with Prospector', onClick: onExplainQuery },
137+
{ key: 'optimize', icon: <ThunderboltOutlined />, label: 'Optimize with Prospector', onClick: onOptimizeQuery },
138+
]
139+
: []),
140+
...(hasError
141+
? [{ key: 'fix', icon: <BugOutlined />, label: 'Fix Error with Prospector', onClick: onFixError }]
142+
: []),
143+
]
144+
: []),
123145
];
124146

125147
return (
126148
<div className="query-toolbar">
127-
<Space size="middle">
149+
<Space size="small" wrap>
128150
{/* Execute/Cancel Button */}
129151
{isExecuting ? (
130-
<Button
131-
type="primary"
132-
danger
133-
icon={<StopOutlined />}
134-
onClick={onCancel}
135-
>
152+
<Button type="primary" danger icon={<StopOutlined />} onClick={onCancel}>
136153
Cancel
137154
</Button>
138155
) : (
139156
<Tooltip title="Ctrl/Cmd + Enter">
140-
<Button
141-
type="primary"
142-
icon={<PlayCircleOutlined />}
143-
onClick={onExecute}
144-
>
145-
Run Query
157+
<Button type="primary" icon={<PlayCircleOutlined />} onClick={onExecute}>
158+
Run
146159
</Button>
147160
</Tooltip>
148161
)}
149162

150163
{/* Save Query Button */}
151164
<Tooltip title="Save Query">
152165
<Button icon={<SaveOutlined />} onClick={onSave}>
153-
Save
166+
{!isCompact && 'Save'}
154167
</Button>
155168
</Tooltip>
156169

157170
{/* Auto Limit */}
158-
<Space size="small">
159-
<Switch
160-
size="small"
161-
checked={autoLimitEnabled}
162-
onChange={handleAutoLimitToggle}
163-
/>
164-
<Text type="secondary">Limit:</Text>
171+
<Space size={4}>
172+
<Switch size="small" checked={autoLimitEnabled} onChange={handleAutoLimitToggle} />
173+
{!isCompact && <Text type="secondary">Limit:</Text>}
165174
<InputNumber
166175
size="small"
167176
min={1}
168177
max={100000}
169178
value={autoLimit}
170179
onChange={handleAutoLimitChange}
171180
disabled={!autoLimitEnabled}
172-
style={{ width: 80 }}
181+
style={{ width: isCompact ? 60 : 80 }}
173182
/>
174183
</Space>
175184

176-
{/* More Options */}
185+
{/* More / Settings / AI (collapsed on compact) */}
177186
<Dropdown menu={{ items: moreMenuItems }} trigger={['click']}>
178187
<Button>
179188
More <DownOutlined />
180189
</Button>
181190
</Dropdown>
182191

183-
{/* Settings */}
184-
<Tooltip title="Editor & Results Settings">
185-
<Button
186-
icon={<SettingOutlined />}
187-
onClick={() => setSettingsModalOpen(true)}
188-
>
189-
Settings
190-
</Button>
191-
</Tooltip>
192-
193-
{/* AI Actions */}
194-
{prospectorAvailable && (
192+
{/* AI Actions — only shown expanded on large screens */}
193+
{!isCompact && prospectorAvailable && (
195194
<>
196195
<Divider type="vertical" style={{ height: 24 }} />
197196
{hasSql && (
198197
<Tooltip title="Explain this query with Prospector">
199-
<Button
200-
icon={<BulbOutlined />}
201-
onClick={onExplainQuery}
202-
>
198+
<Button icon={<BulbOutlined />} onClick={onExplainQuery}>
203199
Explain
204200
</Button>
205201
</Tooltip>
206202
)}
207203
{hasSql && (
208204
<Tooltip title="Optimize this query with Prospector">
209-
<Button
210-
icon={<ThunderboltOutlined />}
211-
onClick={onOptimizeQuery}
212-
>
205+
<Button icon={<ThunderboltOutlined />} onClick={onOptimizeQuery}>
213206
Optimize
214207
</Button>
215208
</Tooltip>
216209
)}
217210
{hasError && (
218211
<Tooltip title="Fix this error with Prospector">
219-
<Button
220-
icon={<BugOutlined />}
221-
onClick={onFixError}
222-
danger
223-
>
212+
<Button icon={<BugOutlined />} onClick={onFixError} danger>
224213
Fix Error
225214
</Button>
226215
</Tooltip>
@@ -230,7 +219,7 @@ export default function QueryToolbar({
230219
</Space>
231220

232221
{/* Right side: Prospector toggle + Execution Time */}
233-
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
222+
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
234223
{prospectorAvailable && (
235224
<Tooltip title={prospectorOpen ? 'Hide Prospector' : 'Show Prospector'}>
236225
<Button
@@ -241,13 +230,13 @@ export default function QueryToolbar({
241230
</Tooltip>
242231
)}
243232
{executionTime !== undefined && !isExecuting && (
244-
<Text type="secondary">
245-
Executed in {(executionTime / 1000).toFixed(2)}s
233+
<Text type="secondary" style={{ whiteSpace: 'nowrap' }}>
234+
{(executionTime / 1000).toFixed(2)}s
246235
</Text>
247236
)}
248237
{isExecuting && (
249-
<Text type="secondary">
250-
Executing...
238+
<Text type="secondary" style={{ whiteSpace: 'nowrap' }}>
239+
Running...
251240
</Text>
252241
)}
253242
</div>

0 commit comments

Comments
 (0)