Skip to content

feat(ui): desktop popovers for dropdowns and menus (#1021) #1022

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
ZhuchkaTriplesix merged 1 commit into from
Sep 30, 2026
Merged

feat(ui): desktop popovers for dropdowns and menus (#1021) #1022

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
2 changes: 2 additions & 0 deletions lib/core/theme/querya_material_theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ material.ThemeData materialThemeFromQuerya(ColorScheme scheme) {

return material.ThemeData(
useMaterial3: true,
// Safety net: stray Material popups must not ripple.
splashFactory: material.NoSplash.splashFactory,
colorScheme: materialScheme,
dialogTheme: material.DialogThemeData(backgroundColor: scheme.popover),
textTheme: material.TextTheme(
Expand Down
11 changes: 7 additions & 4 deletions lib/features/workspace/data_grid_filter_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,9 @@ class _DataGridFilterBarState extends material.State<DataGridFilterBar> {
showWhenUnlinked: false,
offset: const material.Offset(24, 32),
child: material.Material(
elevation: 4,
elevation: 2,
shadowColor: const material.Color(0x1F000000),
surfaceTintColor: material.Colors.transparent,
borderRadius: material.BorderRadius.circular(6),
color: cs.popover,
child: material.Container(
Expand All @@ -239,7 +241,8 @@ class _DataGridFilterBarState extends material.State<DataGridFilterBar> {
itemBuilder: (ctx, i) {
final s = _suggestions[i];
final isHighlighted = i == _highlightedIndex;
return material.InkWell(
return material.GestureDetector(
behavior: material.HitTestBehavior.opaque,
onTap: () => _applySuggestion(s),
child: material.Container(
padding: const material.EdgeInsets.symmetric(
Expand Down Expand Up @@ -285,13 +288,13 @@ class _DataGridFilterBarState extends material.State<DataGridFilterBar> {
return material.Icon(
material.Icons.code_rounded,
size: 13,
color: material.Colors.amber.shade700,
color: cs.mutedForeground,
);
case FilterSuggestionKind.keyword:
return material.Icon(
material.Icons.vpn_key_outlined,
size: 13,
color: material.Colors.green.shade600,
color: cs.mutedForeground.withValues(alpha: 0.8),
);
}
}
Expand Down
75 changes: 30 additions & 45 deletions lib/features/workspace/data_grid_groupings_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import 'package:querya_desktop/core/motion/querya_motion.dart';
import 'package:querya_desktop/core/motion/querya_motion_context.dart';
import 'package:querya_desktop/features/workspace/grid_groupings_engine.dart';
import 'package:querya_desktop/features/workspace/result_grid_view.dart';
import 'package:querya_desktop/shared/widgets/querya_dropdown.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

/// Groupings / Pivot view tab for tabular data with hierarchical grouping and custom aggregations.
Expand Down Expand Up @@ -139,21 +140,17 @@ class _DataGridGroupingsViewState
const Gap(6),
const Text('Group:').small().semiBold(),
const Gap(6),
material.DropdownButton<int>(
QueryaDropdown<int>(
compact: true,
value: _selectedColIndices.isNotEmpty &&
_selectedColIndices.first < widget.columns.length
? _selectedColIndices.first
: 0,
isDense: true,
underline: const material.SizedBox.shrink(),
style: TextStyle(fontSize: 12, color: cs.foreground),
items: List.generate(widget.columns.length, (i) {
return material.DropdownMenuItem<int>(
value: i,
child: Text(widget.columns[i]),
);
}),
onChanged: (idx) {
items: [
for (var i = 0; i < widget.columns.length; i++)
QueryaDropdownItem(value: i, label: widget.columns[i]),
],
onSelected: (idx) {
if (idx != null) {
setState(() {
_selectedColIndices = [idx];
Expand All @@ -177,18 +174,14 @@ class _DataGridGroupingsViewState
// Aggregation Selector
const Text('Agg:').small().semiBold(),
const Gap(6),
material.DropdownButton<GroupingAggType>(
QueryaDropdown<GroupingAggType>(
compact: true,
value: _aggType,
isDense: true,
underline: const material.SizedBox.shrink(),
style: TextStyle(fontSize: 12, color: cs.foreground),
items: GroupingAggType.values.map((t) {
return material.DropdownMenuItem<GroupingAggType>(
value: t,
child: Text(t.label),
);
}).toList(),
onChanged: (val) {
items: [
for (final t in GroupingAggType.values)
QueryaDropdownItem(value: t, label: t.label),
],
onSelected: (val) {
if (val != null) {
setState(() {
_aggType = val;
Expand All @@ -199,21 +192,17 @@ class _DataGridGroupingsViewState
),
if (_aggType != GroupingAggType.count) ...[
const Gap(4),
material.DropdownButton<int>(
QueryaDropdown<int>(
compact: true,
value: _aggTargetColIndex != null &&
_aggTargetColIndex! < widget.columns.length
? _aggTargetColIndex
? _aggTargetColIndex!
: 0,
isDense: true,
underline: const material.SizedBox.shrink(),
style: TextStyle(fontSize: 12, color: cs.foreground),
items: List.generate(widget.columns.length, (i) {
return material.DropdownMenuItem<int>(
value: i,
child: Text(widget.columns[i]),
);
}),
onChanged: (idx) {
items: [
for (var i = 0; i < widget.columns.length; i++)
QueryaDropdownItem(value: i, label: widget.columns[i]),
],
onSelected: (idx) {
if (idx != null) {
setState(() {
_aggTargetColIndex = idx;
Expand All @@ -237,18 +226,14 @@ class _DataGridGroupingsViewState
// Sort Selector
const Text('Sort:').small().semiBold(),
const Gap(6),
material.DropdownButton<GroupSortBy>(
QueryaDropdown<GroupSortBy>(
compact: true,
value: _sortBy,
isDense: true,
underline: const material.SizedBox.shrink(),
style: TextStyle(fontSize: 12, color: cs.foreground),
items: GroupSortBy.values.map((s) {
return material.DropdownMenuItem<GroupSortBy>(
value: s,
child: Text(s.label),
);
}).toList(),
onChanged: (val) {
items: [
for (final t in GroupSortBy.values)
QueryaDropdownItem(value: t, label: t.label),
],
onSelected: (val) {
if (val != null) {
setState(() {
_sortBy = val;
Expand Down
44 changes: 14 additions & 30 deletions lib/features/workspace/data_grid_value_panel.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:flutter/material.dart' as material;
import 'package:flutter/services.dart';
import 'package:querya_desktop/core/editor/querya_code_editor.dart';
import 'package:querya_desktop/core/editor/querya_code_language.dart';
import 'package:querya_desktop/shared/widgets/querya_dropdown.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import 'xml_html_formatter.dart';
Expand Down Expand Up @@ -315,39 +316,22 @@ class _DataGridValuePanelState extends material.State<DataGridValuePanel> {
child: material.Row(
children: [
// Language Dropdown / Pill
material.DropdownButton<ValuePanelLanguage>(
QueryaDropdown<ValuePanelLanguage>(
compact: true,
value: _selectedLanguage,
isDense: true,
underline: const material.SizedBox(),
icon: const material.Icon(material.Icons.arrow_drop_down, size: 16),
style: TextStyle(
fontSize: 11,
color: cs.foreground,
fontWeight: FontWeight.w600,
),
items: const [
material.DropdownMenuItem(
value: ValuePanelLanguage.auto,
child: Text('Auto'),
),
material.DropdownMenuItem(
value: ValuePanelLanguage.json,
child: Text('JSON'),
),
material.DropdownMenuItem(
value: ValuePanelLanguage.xml,
child: Text('XML/HTML'),
),
material.DropdownMenuItem(
value: ValuePanelLanguage.sql,
child: Text('SQL'),
),
material.DropdownMenuItem(
value: ValuePanelLanguage.text,
child: Text('Plain Text'),
),
QueryaDropdownItem(
value: ValuePanelLanguage.auto, label: 'Auto'),
QueryaDropdownItem(
value: ValuePanelLanguage.json, label: 'JSON'),
QueryaDropdownItem(
value: ValuePanelLanguage.xml, label: 'XML/HTML'),
QueryaDropdownItem(
value: ValuePanelLanguage.sql, label: 'SQL'),
QueryaDropdownItem(
value: ValuePanelLanguage.text, label: 'Plain Text'),
],
onChanged: (val) {
onSelected: (val) {
if (val != null) {
setState(() => _selectedLanguage = val);
_validateContent();
Expand Down
90 changes: 22 additions & 68 deletions lib/shared/widgets/export_menu_button.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart' as material;
import 'package:querya_desktop/shared/services/data_export_service.dart';
import 'package:querya_desktop/shared/widgets/querya_action_menu.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

class ExportMenuButton extends StatelessWidget {
Expand All @@ -18,84 +19,37 @@ class ExportMenuButton extends StatelessWidget {

@override
Widget build(BuildContext context) {
return material.PopupMenuButton<DataExportFormat>(
tooltip: label,
return QueryaActionMenu<DataExportFormat>(
onSelected: onSelected,
itemBuilder: (context) => [
material.PopupMenuItem(
items: [
QueryaActionMenuItem(
value: DataExportFormat.csv,
child: material.Row(
children: [
const material.Icon(
material.Icons.table_chart_outlined,
size: 16,
),
const material.SizedBox(width: 8),
material.Text(isSave ? 'CSV (.csv)' : 'Copy as CSV'),
],
),
icon: material.Icons.table_chart_outlined,
label: isSave ? 'CSV (.csv)' : 'Copy as CSV',
),
material.PopupMenuItem(
QueryaActionMenuItem(
value: DataExportFormat.json,
child: material.Row(
children: [
const material.Icon(
material.Icons.data_object_rounded,
size: 16,
),
const material.SizedBox(width: 8),
material.Text(isSave ? 'JSON (.json)' : 'Copy as JSON'),
],
),
icon: material.Icons.data_object_rounded,
label: isSave ? 'JSON (.json)' : 'Copy as JSON',
),
material.PopupMenuItem(
QueryaActionMenuItem(
value: DataExportFormat.markdown,
child: material.Row(
children: [
const material.Icon(material.Icons.code_rounded, size: 16),
const material.SizedBox(width: 8),
material.Text(
isSave ? 'Markdown Table (.md)' : 'Copy as Markdown Table',
),
],
),
icon: material.Icons.code_rounded,
label: isSave ? 'Markdown Table (.md)' : 'Copy as Markdown Table',
),
material.PopupMenuItem(
QueryaActionMenuItem(
value: DataExportFormat.sqlDump,
child: material.Row(
children: [
const material.Icon(material.Icons.storage_rounded, size: 16),
const material.SizedBox(width: 8),
material.Text(
isSave ? 'SQL INSERT Dump (.sql)' : 'Copy as SQL Dump',
),
],
),
icon: material.Icons.storage_rounded,
label: isSave ? 'SQL INSERT Dump (.sql)' : 'Copy as SQL Dump',
),
],
child: material.Container(
padding: const material.EdgeInsets.symmetric(
horizontal: 10,
vertical: 6,
),
decoration: material.BoxDecoration(
border: material.Border.all(
color: Theme.of(context).colorScheme.border,
),
borderRadius: material.BorderRadius.circular(6),
),
child: material.Row(
mainAxisSize: material.MainAxisSize.min,
children: [
material.Icon(
icon,
size: 14,
color: Theme.of(context).colorScheme.foreground,
),
const material.SizedBox(width: 6),
Text(label).small(),
],
),
child: material.Row(
mainAxisSize: material.MainAxisSize.min,
children: [
material.Icon(icon, size: 14),
const material.SizedBox(width: 6),
Text(label),
],
),
);
}
Expand Down
Loading
Loading