diff --git a/lib/core/ui/querya_icon_sizes.dart b/lib/core/ui/querya_icon_sizes.dart index 6a9e48d..58c66d8 100644 --- a/lib/core/ui/querya_icon_sizes.dart +++ b/lib/core/ui/querya_icon_sizes.dart @@ -9,6 +9,12 @@ abstract final class QueryaIconSizes { /// Expand chevron in tree rows. static const double treeExpand = 13; + /// Expand chevron on connection / folder headers in the sidebar (#496). + static const double sidebarExpand = 16; + + /// Connection-type icon / logo on sidebar header rows. + static const double sidebarConnectionIcon = 16; + /// Database / connection-level tree nodes. static const double treeConnection = 14; diff --git a/lib/features/connections/connections_panel_extension.dart b/lib/features/connections/connections_panel_extension.dart index 0507777..8890294 100644 --- a/lib/features/connections/connections_panel_extension.dart +++ b/lib/features/connections/connections_panel_extension.dart @@ -141,25 +141,25 @@ class _ExtensionConnectionTileState extends State<_ExtensionConnectionTile> { if (_iconFilePath != null) { iconWidget = DriverIconImage( path: _iconFilePath!, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, fallbackIcon: widget.icon, ); } else if (widget.iconAsset != null) { iconWidget = material.Image.asset( widget.iconAsset!, - width: 16, - height: 16, + width: QueryaIconSizes.sidebarConnectionIcon, + height: QueryaIconSizes.sidebarConnectionIcon, fit: material.BoxFit.contain, errorBuilder: (_, __, ___) => material.Icon( widget.icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ), ); } else { iconWidget = material.Icon( widget.icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ); } @@ -185,7 +185,7 @@ class _ExtensionConnectionTileState extends State<_ExtensionConnectionTile> { curve: context.motionCurve(QueryaMotion.treeExpandCurve), child: material.Icon( QueryaIcons.expandClosed, - size: 16, + size: QueryaIconSizes.sidebarExpand, color: theme.colorScheme.mutedForeground, ), ), diff --git a/lib/features/connections/connections_panel_mongo.dart b/lib/features/connections/connections_panel_mongo.dart index a1193b3..db1f4f8 100644 --- a/lib/features/connections/connections_panel_mongo.dart +++ b/lib/features/connections/connections_panel_mongo.dart @@ -142,17 +142,18 @@ class _MongoConnectionTileState extends State<_MongoConnectionTile> { final iconWidget = widget.iconAsset != null ? material.Image.asset( widget.iconAsset!, - width: 16, - height: 16, + width: QueryaIconSizes.sidebarConnectionIcon, + height: QueryaIconSizes.sidebarConnectionIcon, fit: material.BoxFit.contain, errorBuilder: (_, __, ___) => material.Icon( widget.icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ), ) : material.Icon(widget.icon, - size: 16, color: theme.colorScheme.primary); + size: QueryaIconSizes.sidebarConnectionIcon, + color: theme.colorScheme.primary); return ContextMenu( items: [ @@ -200,8 +201,8 @@ class _MongoConnectionTileState extends State<_MongoConnectionTile> { duration: context.motionDuration(QueryaMotion.treeExpand), curve: context.motionCurve(QueryaMotion.treeExpandCurve), child: material.Icon( - material.Icons.chevron_right_rounded, - size: 16, + QueryaIcons.expandClosed, + size: QueryaIconSizes.sidebarExpand, color: theme.colorScheme.mutedForeground, ), ), diff --git a/lib/features/connections/connections_panel_mysql.dart b/lib/features/connections/connections_panel_mysql.dart index 069001b..41f5b5d 100644 --- a/lib/features/connections/connections_panel_mysql.dart +++ b/lib/features/connections/connections_panel_mysql.dart @@ -107,17 +107,18 @@ class _MysqlConnectionTileState extends State<_MysqlConnectionTile> { final iconWidget = widget.iconAsset != null ? material.Image.asset( widget.iconAsset!, - width: 16, - height: 16, + width: QueryaIconSizes.sidebarConnectionIcon, + height: QueryaIconSizes.sidebarConnectionIcon, fit: material.BoxFit.contain, errorBuilder: (_, __, ___) => material.Icon( widget.icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ), ) : material.Icon(widget.icon, - size: 16, color: theme.colorScheme.primary); + size: QueryaIconSizes.sidebarConnectionIcon, + color: theme.colorScheme.primary); return ContextMenu( items: [ @@ -166,7 +167,7 @@ class _MysqlConnectionTileState extends State<_MysqlConnectionTile> { curve: context.motionCurve(QueryaMotion.treeExpandCurve), child: material.Icon( QueryaIcons.expandClosed, - size: 16, + size: QueryaIconSizes.sidebarExpand, color: theme.colorScheme.mutedForeground, ), ), diff --git a/lib/features/connections/connections_panel_postgres_connection.dart b/lib/features/connections/connections_panel_postgres_connection.dart index ec01f98..f592e3c 100644 --- a/lib/features/connections/connections_panel_postgres_connection.dart +++ b/lib/features/connections/connections_panel_postgres_connection.dart @@ -110,17 +110,18 @@ class _PostgresConnectionTileState extends State<_PostgresConnectionTile> { final iconWidget = widget.iconAsset != null ? material.Image.asset( widget.iconAsset!, - width: 16, - height: 16, + width: QueryaIconSizes.sidebarConnectionIcon, + height: QueryaIconSizes.sidebarConnectionIcon, fit: material.BoxFit.contain, errorBuilder: (_, __, ___) => material.Icon( widget.icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ), ) : material.Icon(widget.icon, - size: 16, color: theme.colorScheme.primary); + size: QueryaIconSizes.sidebarConnectionIcon, + color: theme.colorScheme.primary); return ContextMenu( items: [ @@ -160,8 +161,8 @@ class _PostgresConnectionTileState extends State<_PostgresConnectionTile> { duration: context.motionDuration(QueryaMotion.treeExpand), curve: context.motionCurve(QueryaMotion.treeExpandCurve), child: material.Icon( - material.Icons.chevron_right_rounded, - size: 16, + QueryaIcons.expandClosed, + size: QueryaIconSizes.sidebarExpand, color: theme.colorScheme.mutedForeground, ), ), diff --git a/lib/features/connections/connections_panel_redis.dart b/lib/features/connections/connections_panel_redis.dart index 472ae2d..cdb0aa4 100644 --- a/lib/features/connections/connections_panel_redis.dart +++ b/lib/features/connections/connections_panel_redis.dart @@ -125,17 +125,18 @@ class _RedisConnectionTileState extends State<_RedisConnectionTile> { final iconWidget = widget.iconAsset != null ? material.Image.asset( widget.iconAsset!, - width: 16, - height: 16, + width: QueryaIconSizes.sidebarConnectionIcon, + height: QueryaIconSizes.sidebarConnectionIcon, fit: material.BoxFit.contain, errorBuilder: (_, __, ___) => material.Icon( widget.icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ), ) : material.Icon(widget.icon, - size: 16, color: theme.colorScheme.primary); + size: QueryaIconSizes.sidebarConnectionIcon, + color: theme.colorScheme.primary); return ContextMenu( items: [ @@ -177,8 +178,8 @@ class _RedisConnectionTileState extends State<_RedisConnectionTile> { duration: context.motionDuration(QueryaMotion.treeExpand), curve: context.motionCurve(QueryaMotion.treeExpandCurve), child: material.Icon( - material.Icons.chevron_right_rounded, - size: 16, + QueryaIcons.expandClosed, + size: QueryaIconSizes.sidebarExpand, color: theme.colorScheme.mutedForeground, ), ), diff --git a/lib/features/connections/connections_panel_sidebar.dart b/lib/features/connections/connections_panel_sidebar.dart index f8ba2a1..9822994 100644 --- a/lib/features/connections/connections_panel_sidebar.dart +++ b/lib/features/connections/connections_panel_sidebar.dart @@ -91,16 +91,20 @@ class _ConnectionTile extends StatelessWidget { final iconWidget = iconAsset != null ? material.Image.asset( iconAsset!, - width: 16, - height: 16, + width: QueryaIconSizes.sidebarConnectionIcon, + height: QueryaIconSizes.sidebarConnectionIcon, fit: material.BoxFit.contain, errorBuilder: (_, __, ___) => material.Icon( icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ), ) - : material.Icon(icon, size: 16, color: theme.colorScheme.primary); + : material.Icon( + icon, + size: QueryaIconSizes.sidebarConnectionIcon, + color: theme.colorScheme.primary, + ); return ContextMenu( items: [ MenuButton( @@ -256,14 +260,15 @@ class _FolderTileState extends State<_FolderTile> { duration: context.motionDuration(QueryaMotion.treeExpand), curve: context.motionCurve(QueryaMotion.treeExpandCurve), child: material.Icon( - material.Icons.chevron_right_rounded, - size: 18, + QueryaIcons.expandClosed, + size: QueryaIconSizes.sidebarExpand, color: theme.colorScheme.mutedForeground, ), ), const Gap(2), - material.Icon(material.Icons.folder_rounded, - size: 18, color: theme.colorScheme.primary), + material.Icon(QueryaIcons.folder, + size: QueryaIconSizes.sidebarConnectionIcon, + color: theme.colorScheme.primary), const Gap(8), material.Expanded( child: material.Text( diff --git a/lib/features/connections/connections_panel_sqlite.dart b/lib/features/connections/connections_panel_sqlite.dart index 767fcb7..50db826 100644 --- a/lib/features/connections/connections_panel_sqlite.dart +++ b/lib/features/connections/connections_panel_sqlite.dart @@ -111,17 +111,18 @@ class _SqliteConnectionTileState extends State<_SqliteConnectionTile> { final iconWidget = widget.iconAsset != null ? material.Image.asset( widget.iconAsset!, - width: 16, - height: 16, + width: QueryaIconSizes.sidebarConnectionIcon, + height: QueryaIconSizes.sidebarConnectionIcon, fit: material.BoxFit.contain, errorBuilder: (_, __, ___) => material.Icon( widget.icon, - size: 16, + size: QueryaIconSizes.sidebarConnectionIcon, color: theme.colorScheme.primary, ), ) : material.Icon(widget.icon, - size: 16, color: theme.colorScheme.primary); + size: QueryaIconSizes.sidebarConnectionIcon, + color: theme.colorScheme.primary); return ContextMenu( items: [ @@ -173,7 +174,7 @@ class _SqliteConnectionTileState extends State<_SqliteConnectionTile> { curve: context.motionCurve(QueryaMotion.treeExpandCurve), child: material.Icon( QueryaIcons.expandClosed, - size: 16, + size: QueryaIconSizes.sidebarExpand, color: theme.colorScheme.mutedForeground, ), ), diff --git a/test/core/ui/querya_icons_test.dart b/test/core/ui/querya_icons_test.dart index 7f93df8..20025fa 100644 --- a/test/core/ui/querya_icons_test.dart +++ b/test/core/ui/querya_icons_test.dart @@ -79,8 +79,16 @@ void main() { }); }); - test('tree size tokens are ordered leaf < group < sdui', () { + test('tree size tokens are ordered leaf < group < connection < sidebar', () { expect(QueryaIconSizes.treeLeaf, lessThan(QueryaIconSizes.treeGroup)); - expect(QueryaIconSizes.treeGroup, lessThan(QueryaIconSizes.sduiNode)); + expect(QueryaIconSizes.treeGroup, lessThan(QueryaIconSizes.treeConnection)); + expect( + QueryaIconSizes.treeExpand, + lessThan(QueryaIconSizes.sidebarExpand), + ); + expect( + QueryaIconSizes.sidebarExpand, + QueryaIconSizes.sidebarConnectionIcon, + ); }); }