diff --git a/example/lib/src/component_library/components/badge/badge_type_library_variant.dart b/example/lib/src/component_library/components/badge/badge_type_library_variant.dart index 00b0bc63..ae93246a 100644 --- a/example/lib/src/component_library/components/badge/badge_type_library_variant.dart +++ b/example/lib/src/component_library/components/badge/badge_type_library_variant.dart @@ -3,7 +3,8 @@ import 'package:impaktfull_ui_2/impaktfull_ui.dart'; import 'package:impaktfull_ui_example/src/component_library/components/badge/badge_library_item.dart'; import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart'; -class BadgeTypeLibraryVariant extends ComponentLibraryVariant { +class BadgeTypeLibraryVariant + extends ComponentLibraryVariant { final ImpaktfullUiBadgeType type; BadgeTypeLibraryVariant(this.type); diff --git a/example/lib/src/component_library/components/network_image/network_image_library_item.dart b/example/lib/src/component_library/components/network_image/network_image_library_item.dart index 29cce4a4..35bcaf75 100644 --- a/example/lib/src/component_library/components/network_image/network_image_library_item.dart +++ b/example/lib/src/component_library/components/network_image/network_image_library_item.dart @@ -20,4 +20,3 @@ class NetworkImageLibraryInputs extends ComponentLibraryInputs { @override List buildInputItems() => []; } - diff --git a/example/lib/src/component_library/components/network_image/network_image_library_variant.dart b/example/lib/src/component_library/components/network_image/network_image_library_variant.dart index 022b849f..434b77ef 100644 --- a/example/lib/src/component_library/components/network_image/network_image_library_variant.dart +++ b/example/lib/src/component_library/components/network_image/network_image_library_variant.dart @@ -4,14 +4,16 @@ import 'package:impaktfull_ui_example/src/component_library/components/network_i import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart'; import 'package:impaktfull_ui_example/src/util/network_images.dart'; -class NetworkImageLibraryVariant extends ComponentLibraryVariant { +class NetworkImageLibraryVariant + extends ComponentLibraryVariant { const NetworkImageLibraryVariant(); @override String get title => 'Default'; @override - List build(BuildContext context, NetworkImageLibraryPrimaryInputs inputs) { + List build( + BuildContext context, NetworkImageLibraryPrimaryInputs inputs) { return [ const ImpaktfullUiNetworkImage( url: NetworkImages.profilePicture, @@ -20,7 +22,8 @@ class NetworkImageLibraryVariant extends ComponentLibraryVariant NetworkImageLibraryPrimaryInputs(); + NetworkImageLibraryPrimaryInputs inputs() => + NetworkImageLibraryPrimaryInputs(); } class NetworkImageLibraryPrimaryInputs extends NetworkImageLibraryInputs {} diff --git a/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_item.dart b/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_item.dart index 2a92e254..24472868 100644 --- a/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_item.dart +++ b/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_item.dart @@ -1,6 +1,7 @@ import 'package:impaktfull_ui_example/src/component_library/components/sidebar_navigation/sidebar_navigation_library_variant.dart'; import 'package:impaktfull_ui_example/src/component_library/config/component_library_inputs.dart'; import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart'; +import 'package:impaktfull_ui_example/src/component_library/inputs/component_library_int_input.dart'; class SidebarNavigationLibraryItem extends ComponentLibraryItem { const SidebarNavigationLibraryItem(); @@ -17,6 +18,13 @@ class SidebarNavigationLibraryItem extends ComponentLibraryItem { } class SidebarNavigationLibraryInputs extends ComponentLibraryInputs { + final ComponentLibraryIntInput amountOfSecondaryItems = + ComponentLibraryIntInput( + 'Amount of secondary items', + initialValue: 0, + ); @override - List buildInputItems() => []; + List buildInputItems() => [ + amountOfSecondaryItems, + ]; } diff --git a/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_variant.dart b/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_variant.dart index 5062c305..5a4bc2c8 100644 --- a/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_variant.dart +++ b/example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_variant.dart @@ -3,19 +3,51 @@ import 'package:impaktfull_ui_2/impaktfull_ui.dart'; import 'package:impaktfull_ui_example/src/component_library/components/sidebar_navigation/sidebar_navigation_library_item.dart'; import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart'; import 'package:impaktfull_ui_example/src/util/network_images.dart'; +import 'package:impaktfull_ui_example/src/widget/components/components_library_variant_descriptor.dart'; -class SidebarNavigationLibraryVariant extends ComponentLibraryVariant { +class SidebarNavigationLibraryVariant + extends ComponentLibraryVariant { const SidebarNavigationLibraryVariant(); @override String get title => 'Default'; @override - List build(BuildContext context, SidebarNavigationLibraryPrimaryInputs inputs) { + List build( + BuildContext context, SidebarNavigationLibraryPrimaryInputs inputs) { return [ - SizedBox( + ComponentsLibraryVariantDescriptor( + height: 250, + child: ImpaktfullUiSidebarNavigation( + width: 200, + header: ImpaktfullUiAssetWidget( + asset: theme.assets.images.logo, + width: 150, + ), + items: [ + ImpaktfullUiSidebarNavigationItem( + leading: theme.assets.icons.home, + title: 'Home', + items: [ + ImpaktfullUiSidebarNavigationItem( + leading: theme.assets.icons.confetti, + title: 'Projects', + ), + ImpaktfullUiSidebarNavigationItem( + leading: theme.assets.icons.confetti, + title: 'Apps', + ), + ], + ), + ImpaktfullUiSidebarNavigationItem( + leading: theme.assets.icons.search, + title: 'Search', + ), + ], + ), + ), + ComponentsLibraryVariantDescriptor( height: 500, - width: 300, child: ImpaktfullUiSidebarNavigation( asset: theme.assets.images.logo, items: [ @@ -28,6 +60,15 @@ class SidebarNavigationLibraryVariant extends ComponentLibraryVariant index) + .map( + (index) => ImpaktfullUiSidebarNavigationItem( + leading: theme.assets.icons.confetti, + title: 'Submenu $index', + ), + ) + .toList(), footerItems: [ ImpaktfullUiSidebarNavigationItem( leading: theme.assets.icons.settings, @@ -54,10 +95,12 @@ class SidebarNavigationLibraryVariant extends ComponentLibraryVariant const SizedBox(width: 40), - borderRadius: ImpaktfullUiSidebarNavigationItemTheme.of(context).dimens.borderRadius, + borderRadius: ImpaktfullUiSidebarNavigationItemTheme.of(context) + .dimens + .borderRadius, padding: const EdgeInsets.symmetric( horizontal: 12, - vertical: 4, + vertical: 8, ), title: 'impaktfull admin', subtitle: 'admin@impaktfull.com', @@ -70,7 +113,8 @@ class SidebarNavigationLibraryVariant extends ComponentLibraryVariant ImpaktfullUiNotification.show(title: 'Logout tapped'), + onTap: () => + ImpaktfullUiNotification.show(title: 'Logout tapped'), ), ), ], @@ -81,7 +125,9 @@ class SidebarNavigationLibraryVariant extends ComponentLibraryVariant SidebarNavigationLibraryPrimaryInputs(); + SidebarNavigationLibraryPrimaryInputs inputs() => + SidebarNavigationLibraryPrimaryInputs(); } -class SidebarNavigationLibraryPrimaryInputs extends SidebarNavigationLibraryInputs {} +class SidebarNavigationLibraryPrimaryInputs + extends SidebarNavigationLibraryInputs {} diff --git a/example/lib/src/widget/components/component_card.dart b/example/lib/src/widget/components/component_card.dart index f1dd8a0b..73d058bf 100644 --- a/example/lib/src/widget/components/component_card.dart +++ b/example/lib/src/widget/components/component_card.dart @@ -38,16 +38,7 @@ class ComponentCard extends StatelessWidget { child: ClipRect( child: Padding( padding: const EdgeInsets.all(16), - child: LayoutBuilder( - builder: (context, constraints) => OverflowBox( - alignment: Alignment.center, - minWidth: 0.0, - minHeight: 0.0, - maxWidth: constraints.maxWidth, - maxHeight: constraints.maxHeight + 500, - child: correctChild, - ), - ), + child: correctChild, ), ), ), diff --git a/lib/impaktfull_ui.dart b/lib/impaktfull_ui.dart index 2f93d4c3..565f2c6a 100644 --- a/lib/impaktfull_ui.dart +++ b/lib/impaktfull_ui.dart @@ -19,7 +19,6 @@ export 'src/components/grid_view/grid_view.dart'; export 'src/components/horizontal_tab/horizontal_tab.dart'; export 'src/components/horizontal_tabs/horizontal_tabs.dart'; export 'src/components/icon_button/icon_button.dart'; -export 'src/components/input_field/action/input_field_action.dart'; export 'src/components/input_field/input_field.dart'; export 'src/components/list_item/list_item.dart'; export 'src/components/list_view/list_view.dart'; @@ -49,6 +48,7 @@ export 'src/components/theme/theme_builder.dart'; // Widget Library export 'src/util/descriptor/component_descriptor_mixin.dart'; // Extensions +export 'src/util/extension/edge_insets_geometry_extension.dart'; export 'src/util/extension/border_radius_geometry_extension.dart'; // Util export 'src/util/responsive/responsive_extension.dart'; diff --git a/lib/src/components/asset/asset_widget.dart b/lib/src/components/asset/asset_widget.dart index 282a27c1..4e3acede 100644 --- a/lib/src/components/asset/asset_widget.dart +++ b/lib/src/components/asset/asset_widget.dart @@ -7,7 +7,8 @@ import 'package:rive/rive.dart' hide Image; part 'asset_widget.describe.dart'; -class ImpaktfullUiAssetWidget extends StatelessWidget with ComponentDescriptorMixin { +class ImpaktfullUiAssetWidget extends StatelessWidget + with ComponentDescriptorMixin { final ImpaktfullUiAsset? asset; final Color? color; final double? width; @@ -53,7 +54,8 @@ class ImpaktfullUiAssetWidget extends StatelessWidget with ComponentDescriptorMi if (svgAsset != null) { return SvgPicture.asset( svgAsset, - colorFilter: color == null ? null : ColorFilter.mode(color, BlendMode.srcIn), + colorFilter: + color == null ? null : ColorFilter.mode(color, BlendMode.srcIn), width: width, height: height, package: asset.package, diff --git a/lib/src/components/command_menu/command_menu.dart b/lib/src/components/command_menu/command_menu.dart index facfbc9d..dc3bf004 100644 --- a/lib/src/components/command_menu/command_menu.dart +++ b/lib/src/components/command_menu/command_menu.dart @@ -8,11 +8,14 @@ export 'command_menu_style.dart'; part 'command_menu.describe.dart'; -class ImpaktfullUiCommandMenu extends StatefulWidget with ComponentDescriptorMixin { +class ImpaktfullUiCommandMenu extends StatefulWidget + with ComponentDescriptorMixin { final ShortcutActivator? shortcutActivator; final Widget child; - final Widget Function(BuildContext context, ImpaktfullUiCommandMenuTheme theme, CommanderController controller) - builder; + final Widget Function( + BuildContext context, + ImpaktfullUiCommandMenuTheme theme, + CommanderController controller) builder; final ImpaktfullUiCommandMenuTheme? theme; const ImpaktfullUiCommandMenu({ @@ -24,7 +27,8 @@ class ImpaktfullUiCommandMenu extends StatefulWidget with ComponentDescriptorMix }); @override - State createState() => _ImpaktfullUiCommandMenuState(); + State createState() => + _ImpaktfullUiCommandMenuState(); @override String describe(BuildContext context) => _describeInstance(context, this); @@ -47,7 +51,8 @@ class _ImpaktfullUiCommandMenuState extends State { bindings: { shortcutActivator: () => _commanderController.hide(), }, - child: widget.builder(context, componentTheme, _commanderController), + child: + widget.builder(context, componentTheme, _commanderController), ), child: widget.child, ); diff --git a/lib/src/components/input_field/input_field.dart b/lib/src/components/input_field/input_field.dart index f988dbb9..8966f64a 100644 --- a/lib/src/components/input_field/input_field.dart +++ b/lib/src/components/input_field/input_field.dart @@ -9,6 +9,7 @@ import 'package:impaktfull_ui_2/src/util/descriptor/component_descriptor_mixin.d import 'package:impaktfull_ui_2/src/util/extension/border_radius_geometry_extension.dart'; export 'input_field_style.dart'; +export 'action/input_field_action.dart'; part 'input_field.describe.dart'; diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart index bef1e00a..b654bc49 100644 --- a/lib/src/components/list_item/list_item.dart +++ b/lib/src/components/list_item/list_item.dart @@ -13,7 +13,8 @@ export 'list_item_type.dart'; part 'list_item.describe.dart'; -class ImpaktfullUiListItem extends StatefulWidget with ComponentDescriptorMixin { +class ImpaktfullUiListItem extends StatefulWidget + with ComponentDescriptorMixin { final String title; final String? subtitle; final ImpaktfullUiAsset? leading; diff --git a/lib/src/components/network_image/network_image.dart b/lib/src/components/network_image/network_image.dart index 91a31e53..947bf056 100644 --- a/lib/src/components/network_image/network_image.dart +++ b/lib/src/components/network_image/network_image.dart @@ -7,7 +7,8 @@ export 'network_image_style.dart'; part 'network_image.describe.dart'; -class ImpaktfullUiNetworkImage extends StatelessWidget with ComponentDescriptorMixin { +class ImpaktfullUiNetworkImage extends StatelessWidget + with ComponentDescriptorMixin { final String url; final double? height; final double? width; @@ -35,7 +36,8 @@ class ImpaktfullUiNetworkImage extends StatelessWidget with ComponentDescriptorM builder: (context, theme, componentTheme) { String fullUrl = url; if (url.startsWith('https://picsum.photos')) { - fullUrl = 'https://picsum.photos/${(width ?? 300).toInt()}/${(height ?? 300).toInt()}'; + fullUrl = + 'https://picsum.photos/${(width ?? 300).toInt()}/${(height ?? 300).toInt()}'; } return Image.network( fullUrl, diff --git a/lib/src/components/network_image/network_image.describe.dart b/lib/src/components/network_image/network_image.describe.dart index a7d207fb..7241073f 100644 --- a/lib/src/components/network_image/network_image.describe.dart +++ b/lib/src/components/network_image/network_image.describe.dart @@ -1,7 +1,8 @@ part of 'network_image.dart'; -String _describeInstance(BuildContext context, ImpaktfullUiNetworkImage instance) { +String _describeInstance( + BuildContext context, ImpaktfullUiNetworkImage instance) { final descriptor = ComponentDescriptor(); descriptor.add('theme', instance.theme); return descriptor.describe(); -} \ No newline at end of file +} diff --git a/lib/src/components/network_image/network_image_style.dart b/lib/src/components/network_image/network_image_style.dart index 7aa8cd50..b6099f8f 100644 --- a/lib/src/components/network_image/network_image_style.dart +++ b/lib/src/components/network_image/network_image_style.dart @@ -14,7 +14,8 @@ class ImpaktfullUiNetworkImageTheme extends ImpaktfullUiComponentTheme { required this.textStyles, }); - static ImpaktfullUiNetworkImageTheme of(BuildContext context) => ImpaktfullUiTheme.of(context).components.networkImage; + static ImpaktfullUiNetworkImageTheme of(BuildContext context) => + ImpaktfullUiTheme.of(context).components.networkImage; } class ImpaktfullUiNetworkImageAssetsTheme { @@ -29,7 +30,6 @@ class ImpaktfullUiNetworkImageDimensTheme { const ImpaktfullUiNetworkImageDimensTheme(); } - class ImpaktfullUiNetworkImageTextStyleTheme { const ImpaktfullUiNetworkImageTextStyleTheme(); } diff --git a/lib/src/components/sidebar_navigation/sidebar_navigation.dart b/lib/src/components/sidebar_navigation/sidebar_navigation.dart index 51175a86..65ca32f6 100644 --- a/lib/src/components/sidebar_navigation/sidebar_navigation.dart +++ b/lib/src/components/sidebar_navigation/sidebar_navigation.dart @@ -7,16 +7,21 @@ import 'package:impaktfull_ui_2/src/components/sidebar_navigation/sidebar_naviga import 'package:impaktfull_ui_2/src/components/theme/theme_component_builder.dart'; import 'package:impaktfull_ui_2/src/models/asset.dart'; import 'package:impaktfull_ui_2/src/util/descriptor/component_descriptor_mixin.dart'; +import 'package:impaktfull_ui_2/src/util/extension/edge_insets_geometry_extension.dart'; export 'sidebar_navigation_style.dart'; part 'sidebar_navigation.describe.dart'; -class ImpaktfullUiSidebarNavigation extends StatelessWidget with ComponentDescriptorMixin { +class ImpaktfullUiSidebarNavigation extends StatelessWidget + with ComponentDescriptorMixin { final ImpaktfullUiAsset? asset; final Widget? header; final Widget? content; + final double? width; final List items; + final List secondaryItems; + final Widget? secondaryContent; final List footerItems; final Widget? footer; final ImpaktfullUiSidebarNavigationTheme? theme; @@ -25,7 +30,10 @@ class ImpaktfullUiSidebarNavigation extends StatelessWidget with ComponentDescri this.asset, this.header, this.content, + this.width = 350, this.items = const [], + this.secondaryContent, + this.secondaryItems = const [], this.footerItems = const [], this.footer, this.theme, @@ -34,50 +42,115 @@ class ImpaktfullUiSidebarNavigation extends StatelessWidget with ComponentDescri @override Widget build(BuildContext context) { - return ImpaktfullUiComponentThemeBuidler( + return ImpaktfullUiComponentThemeBuidler< + ImpaktfullUiSidebarNavigationTheme>( overrideComponentTheme: theme, builder: (context, theme, componentTheme) { final hasHeader = asset != null || header != null; + final hasFooter = footer != null; + final hasFooterItems = footerItems.isNotEmpty; return Container( color: componentTheme.colors.backgroundColor, - padding: componentTheme.dimens.padding, - child: ImpaktfullUiAutoLayout.vertical( - spacing: 8, + child: ImpaktfullUiAutoLayout.horizontal( + mainAxisSize: MainAxisSize.min, children: [ - if (hasHeader) ...[ - ImpaktfullUiAutoLayout.vertical( + SizedBox( + width: width, + child: ImpaktfullUiAutoLayout.vertical( + crossAxisAlignment: CrossAxisAlignment.start, spacing: 8, children: [ - if (asset != null) ...[ - const SizedBox(height: 10), - ImpaktfullUiAssetWidget( - asset: asset!, - height: 40, + if (hasHeader) ...[ + Padding( + padding: EdgeInsetsDirectional.only( + start: componentTheme.dimens.padding.start, + end: componentTheme.dimens.padding.end, + top: componentTheme.dimens.padding.top, + bottom: 32, + ), + child: ImpaktfullUiAutoLayout.vertical( + spacing: 8, + children: [ + if (asset != null) ...[ + const SizedBox(height: 10), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 150, + maxHeight: 40, + ), + child: ImpaktfullUiAssetWidget( + asset: asset!, + ), + ), + ], + if (header != null) ...[ + header!, + ], + ], + ), ), ], - if (header != null) ...[ - header!, + if (content != null) ...[ + content! + ] else ...[ + if (items.isNotEmpty) ...[ + Expanded( + child: ImpaktfullUiListView( + spacing: 8, + padding: EdgeInsetsDirectional.only( + start: componentTheme.dimens.padding.start, + end: componentTheme.dimens.padding.end, + top: hasHeader + ? 0 + : componentTheme.dimens.padding.top, + bottom: hasFooter || hasFooterItems + ? 0 + : componentTheme.dimens.padding.bottom, + ), + children: items, + ), + ), + ], + ...footerItems, + ], + if (footer != null) ...[ + Padding( + padding: EdgeInsetsDirectional.only( + start: componentTheme.dimens.padding.start, + end: componentTheme.dimens.padding.end, + top: componentTheme.dimens.padding.top, + bottom: componentTheme.dimens.padding.bottom, + ), + child: ImpaktfullUiAutoLayout.vertical( + spacing: 8, + children: [ + const ImpaktfullUiDivider(), + footer!, + ], + ), + ), ], ], ), - const SizedBox(height: 16), - ], - if (content != null) ...[ - content! - ] else ...[ - if (items.isNotEmpty) ...[ - Expanded( + ), + if (secondaryContent != null || secondaryItems.isNotEmpty) ...[ + Container( + color: componentTheme.colors.border, + width: 1, + height: double.infinity, + ), + if (secondaryContent != null) ...[ + secondaryContent!, + ] else ...[ + SizedBox( + width: 300, child: ImpaktfullUiListView( spacing: 8, - children: items, + padding: componentTheme.dimens.padding, + children: secondaryItems, ), ), ], - ...footerItems, - const ImpaktfullUiDivider(), - ], - if (footer != null) ...[ - footer!, ], ], ), diff --git a/lib/src/components/sidebar_navigation/sidebar_navigation_style.dart b/lib/src/components/sidebar_navigation/sidebar_navigation_style.dart index 8031d7ad..5c7c0781 100644 --- a/lib/src/components/sidebar_navigation/sidebar_navigation_style.dart +++ b/lib/src/components/sidebar_navigation/sidebar_navigation_style.dart @@ -24,9 +24,11 @@ class ImpaktfullUiSidebarNavigationAssetsTheme { class ImpaktfullUiSidebarNavigationColorTheme { final Color backgroundColor; + final Color border; const ImpaktfullUiSidebarNavigationColorTheme({ required this.backgroundColor, + required this.border, }); } diff --git a/lib/src/components/sidebar_navigation_item/sidebar_navigation_item.dart b/lib/src/components/sidebar_navigation_item/sidebar_navigation_item.dart index 071bbae6..372bde3f 100644 --- a/lib/src/components/sidebar_navigation_item/sidebar_navigation_item.dart +++ b/lib/src/components/sidebar_navigation_item/sidebar_navigation_item.dart @@ -12,7 +12,8 @@ export 'sidebar_navigation_item_style.dart'; part 'sidebar_navigation_item.describe.dart'; -class ImpaktfullUiSidebarNavigationItem extends StatefulWidget with ComponentDescriptorMixin { +class ImpaktfullUiSidebarNavigationItem extends StatefulWidget + with ComponentDescriptorMixin { final ImpaktfullUiAsset? leading; final String title; final List items; @@ -31,78 +32,86 @@ class ImpaktfullUiSidebarNavigationItem extends StatefulWidget with ComponentDes }); @override - State createState() => _ImpaktfullUiSidebarNavigationItemState(); + State createState() => + _ImpaktfullUiSidebarNavigationItemState(); @override String describe(BuildContext context) => _describeInstance(context, this); } -class _ImpaktfullUiSidebarNavigationItemState extends State { +class _ImpaktfullUiSidebarNavigationItemState + extends State { var _expanded = false; @override Widget build(BuildContext context) { - return ImpaktfullUiComponentThemeBuidler( + return ImpaktfullUiComponentThemeBuidler< + ImpaktfullUiSidebarNavigationItemTheme>( overrideComponentTheme: widget.theme, - builder: (context, theme, componentTheme) => ImpaktfullUiAutoLayout.vertical( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.center, - spacing: 8, - children: [ - ImpaktfullUiTouchFeedback( - onTap: _onTap, - color: widget.isSelected ? componentTheme.colors.background : null, - borderRadius: componentTheme.dimens.borderRadius, - child: Padding( - padding: componentTheme.dimens.padding, - child: ImpaktfullUiAutoLayout.horizontal( - crossAxisAlignment: CrossAxisAlignment.center, - spacing: 12, - children: [ - if (widget.leading != null) ...[ - ImpaktfullUiAssetWidget( - asset: widget.leading, - color: componentTheme.colors.icon, - ), - ], - Expanded( - child: Padding( - padding: const EdgeInsets.symmetric( - vertical: 12, + builder: (context, theme, componentTheme) { + return ImpaktfullUiAutoLayout.vertical( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + spacing: 8, + children: [ + ImpaktfullUiTouchFeedback( + onTap: _onTap, + color: + widget.isSelected ? componentTheme.colors.background : null, + borderRadius: componentTheme.dimens.borderRadius, + child: Padding( + padding: widget.items.isEmpty + ? componentTheme.dimens.padding + : componentTheme.dimens.paddingWithSubItems, + child: ImpaktfullUiAutoLayout.horizontal( + crossAxisAlignment: CrossAxisAlignment.center, + spacing: 12, + children: [ + if (widget.leading != null) ...[ + ImpaktfullUiAssetWidget( + asset: widget.leading, + color: componentTheme.colors.icon, ), - child: Text( - widget.title, - style: componentTheme.textStyles.title, + ], + Expanded( + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 12, + ), + child: Text( + widget.title, + style: componentTheme.textStyles.title, + ), ), ), - ), - if (widget.items.isNotEmpty) ...[ - AnimatedRotation( - turns: _expanded ? 0.5 : 0, - duration: componentTheme.durations.dropdownRotation, - child: ImpaktfullUiIconButton( - asset: componentTheme.assets.chevronUp, - color: componentTheme.colors.icon, - onTap: _onExpandedTapped, + if (widget.items.isNotEmpty) ...[ + AnimatedRotation( + turns: _expanded ? 0.5 : 0, + duration: componentTheme.durations.dropdownRotation, + child: ImpaktfullUiIconButton( + asset: componentTheme.assets.chevronUp, + color: componentTheme.colors.icon, + onTap: _onExpandedTapped, + ), ), - ), + ], ], - ], + ), ), ), - ), - if (widget.items.isNotEmpty && _expanded) ...[ - Padding( - padding: const EdgeInsetsDirectional.only(start: 16), - child: ImpaktfullUiAutoLayout.vertical( - mainAxisSize: MainAxisSize.min, - spacing: 8, - children: widget.items, + if (widget.items.isNotEmpty && _expanded) ...[ + Padding( + padding: const EdgeInsetsDirectional.only(start: 16), + child: ImpaktfullUiAutoLayout.vertical( + mainAxisSize: MainAxisSize.min, + spacing: 8, + children: widget.items, + ), ), - ), + ], ], - ], - ), + ); + }, ); } diff --git a/lib/src/components/sidebar_navigation_item/sidebar_navigation_item_style.dart b/lib/src/components/sidebar_navigation_item/sidebar_navigation_item_style.dart index 4af553ca..e6fef4db 100644 --- a/lib/src/components/sidebar_navigation_item/sidebar_navigation_item_style.dart +++ b/lib/src/components/sidebar_navigation_item/sidebar_navigation_item_style.dart @@ -2,7 +2,8 @@ import 'package:flutter/widgets.dart'; import 'package:impaktfull_ui_2/src/models/asset.dart'; import 'package:impaktfull_ui_2/src/theme/theme.dart'; -class ImpaktfullUiSidebarNavigationItemTheme extends ImpaktfullUiComponentTheme { +class ImpaktfullUiSidebarNavigationItemTheme + extends ImpaktfullUiComponentTheme { final ImpaktfullUiSidebarNavigationItemAssetsTheme assets; final ImpaktfullUiSidebarNavigationItemColorTheme colors; final ImpaktfullUiSidebarNavigationItemDimensTheme dimens; @@ -41,10 +42,12 @@ class ImpaktfullUiSidebarNavigationItemColorTheme { class ImpaktfullUiSidebarNavigationItemDimensTheme { final BorderRadiusGeometry borderRadius; final EdgeInsetsGeometry padding; + final EdgeInsetsGeometry paddingWithSubItems; const ImpaktfullUiSidebarNavigationItemDimensTheme({ required this.borderRadius, required this.padding, + required this.paddingWithSubItems, }); } diff --git a/lib/src/components/simple_list_item/simple_list_item.dart b/lib/src/components/simple_list_item/simple_list_item.dart index 96a8406b..6796f1c4 100644 --- a/lib/src/components/simple_list_item/simple_list_item.dart +++ b/lib/src/components/simple_list_item/simple_list_item.dart @@ -11,7 +11,8 @@ export 'simple_list_item_type.dart'; part 'simple_list_item.describe.dart'; -class ImpaktfullUiSimpleListItem extends StatelessWidget with ComponentDescriptorMixin { +class ImpaktfullUiSimpleListItem extends StatelessWidget + with ComponentDescriptorMixin { final String? title; final String? subtitle; final WidgetBuilder? leadingWidgetBuilder; @@ -69,7 +70,8 @@ class ImpaktfullUiSimpleListItem extends StatelessWidget with ComponentDescripto spacing: spacing, children: [ if (leadingWidgetBuilder != null) ...[ - _buildCorrectWidget(leadingWidgetBuilder!(context), componentTheme), + _buildCorrectWidget( + leadingWidgetBuilder!(context), componentTheme), ], if (centerWidgetBuilder == null) ...[ Expanded( @@ -96,7 +98,8 @@ class ImpaktfullUiSimpleListItem extends StatelessWidget with ComponentDescripto ), ], if (trailingWidgetBuilder != null) ...[ - _buildCorrectWidget(trailingWidgetBuilder!(context), componentTheme), + _buildCorrectWidget( + trailingWidgetBuilder!(context), componentTheme), ], ], ), @@ -117,7 +120,8 @@ class ImpaktfullUiSimpleListItem extends StatelessWidget with ComponentDescripto } } - TextStyle _getSubtitleTextStyle(ImpaktfullUiSimpleListItemTheme componentTheme) { + TextStyle _getSubtitleTextStyle( + ImpaktfullUiSimpleListItemTheme componentTheme) { switch (type) { case ImpaktfullUiSimpleListItemType.neutral: return componentTheme.textStyles.subtitle; @@ -126,7 +130,8 @@ class ImpaktfullUiSimpleListItem extends StatelessWidget with ComponentDescripto } } - Widget _buildCorrectWidget(Widget widget, ImpaktfullUiSimpleListItemTheme componentTheme) { + Widget _buildCorrectWidget( + Widget widget, ImpaktfullUiSimpleListItemTheme componentTheme) { if (widget is ImpaktfullUiAssetWidget) { return ImpaktfullUiAssetWidget( asset: widget.asset, diff --git a/lib/src/theme/asset_theme.dart b/lib/src/theme/asset_theme.dart index 9a696c47..49ebc567 100644 --- a/lib/src/theme/asset_theme.dart +++ b/lib/src/theme/asset_theme.dart @@ -49,7 +49,8 @@ class ImpaktfullUiAssetTheme { error: ImpaktfullUiAsset.icon(PhosphorIcons.warningDiamond()), home: ImpaktfullUiAsset.icon(PhosphorIcons.houseSimple()), info: ImpaktfullUiAsset.icon(PhosphorIcons.info()), - lineVertical: ImpaktfullUiAsset.icon(PhosphorIcons.lineVertical()), + lineVertical: + ImpaktfullUiAsset.icon(PhosphorIcons.lineVertical()), list: ImpaktfullUiAsset.icon(PhosphorIcons.list()), logout: ImpaktfullUiAsset.icon(PhosphorIcons.signOut()), minus: ImpaktfullUiAsset.icon(PhosphorIcons.minus()), diff --git a/lib/src/theme/component_theme.dart b/lib/src/theme/component_theme.dart index 6c96e286..95ff6ed7 100644 --- a/lib/src/theme/component_theme.dart +++ b/lib/src/theme/component_theme.dart @@ -177,7 +177,8 @@ class ImpaktfullUiComponentsTheme { notificationBadge: notificationBadge ?? this.notificationBadge, refreshIndicator: refreshIndicator ?? this.refreshIndicator, sidebarNavigation: sidebarNavigation ?? this.sidebarNavigation, - sidebarNavigationItem: sidebarNavigationItem ?? this.sidebarNavigationItem, + sidebarNavigationItem: + sidebarNavigationItem ?? this.sidebarNavigationItem, simpleListItem: simpleListItem ?? this.simpleListItem, snackyConfigurator: snackyConfigurator ?? this.snackyConfigurator, switchTheme: switchTheme ?? this.switchTheme, diff --git a/lib/src/theme/theme_default.dart b/lib/src/theme/theme_default.dart index ada28bd4..0c7ec7d4 100644 --- a/lib/src/theme/theme_default.dart +++ b/lib/src/theme/theme_default.dart @@ -93,11 +93,13 @@ class DefaultTheme { destructive: destructive ?? const Color(0xFFBD0D00), ); final dimens = ImpaktfullUiDimensTheme( - borderRadiusExtraSmall: borderRadiusExtraSmall ?? BorderRadius.circular(4), + borderRadiusExtraSmall: + borderRadiusExtraSmall ?? BorderRadius.circular(4), borderRadiusSmall: borderRadiusSmall ?? BorderRadius.circular(6), borderRadius: borderRadiusSmall ?? BorderRadius.circular(8), borderRadiusLarge: borderRadiusLarge ?? BorderRadius.circular(12), - borderRadiusExtraLarge: borderRadiusExtraLarge ?? BorderRadius.circular(16), + borderRadiusExtraLarge: + borderRadiusExtraLarge ?? BorderRadius.circular(16), borderRadiusCircle: BorderRadius.circular(99999999), ); final textStyles = ImpaktfullUiTextStylesTheme( @@ -255,7 +257,8 @@ class DefaultTheme { alternative: textStyles.onCardPrimary.text.small.bold, grey: textStyles.onCard.text.small.bold, destructivePrimary: textStyles.onDestructive.text.small.bold, - destructiveAlternative: textStyles.onCardDestructive.text.small.bold, + destructiveAlternative: + textStyles.onCardDestructive.text.small.bold, ), ), card: ImpaktfullUiCardTheme( @@ -374,8 +377,9 @@ class DefaultTheme { ), textStyles: ImpaktfullUiInputFieldTextStylesTheme( text: textStyles.onCard.text.medium, - hint: textStyles.onCardSecondary.text.medium - .copyWith(color: textStyles.onCardTertiary.text.medium.color?.withOpacity(0.5)), + hint: textStyles.onCardSecondary.text.medium.copyWith( + color: textStyles.onCardTertiary.text.medium.color + ?.withOpacity(0.5)), label: textStyles.onCard.text.small.medium, ), ), @@ -475,12 +479,14 @@ class DefaultTheme { ), ), refreshIndicator: ImpaktfullUiRefreshIndicatorTheme( - colors: ImpaktfullUiRefreshIndicatorColorTheme(loadingIndicator: colors.accent), + colors: ImpaktfullUiRefreshIndicatorColorTheme( + loadingIndicator: colors.accent), ), sidebarNavigation: ImpaktfullUiSidebarNavigationTheme( assets: const ImpaktfullUiSidebarNavigationAssetsTheme(), colors: ImpaktfullUiSidebarNavigationColorTheme( backgroundColor: colors.card, + border: colors.border, ), dimens: const ImpaktfullUiSidebarNavigationDimensTheme( padding: EdgeInsetsDirectional.all(16), @@ -497,8 +503,10 @@ class DefaultTheme { ), dimens: ImpaktfullUiSidebarNavigationItemDimensTheme( borderRadius: dimens.borderRadius, - padding: const EdgeInsets.symmetric( - horizontal: 16, + padding: const EdgeInsets.symmetric(horizontal: 16), + paddingWithSubItems: const EdgeInsetsDirectional.only( + start: 16, + end: 4, ), ), durations: ImpaktfullUiSidebarNavigationItemDurationTheme( diff --git a/lib/src/util/extension/edge_insets_geometry_extension.dart b/lib/src/util/extension/edge_insets_geometry_extension.dart new file mode 100644 index 00000000..b3198480 --- /dev/null +++ b/lib/src/util/extension/edge_insets_geometry_extension.dart @@ -0,0 +1,31 @@ +import 'package:flutter/rendering.dart'; + +extension EdgeInsetsGeometryExtension on EdgeInsetsGeometry { + double get start { + if (this is EdgeInsetsDirectional) { + return (this as EdgeInsetsDirectional).start; + } + return (this as EdgeInsets).start; + } + + double get end { + if (this is EdgeInsetsDirectional) { + return (this as EdgeInsetsDirectional).end; + } + return (this as EdgeInsets).right; + } + + double get top { + if (this is EdgeInsetsDirectional) { + return (this as EdgeInsetsDirectional).top; + } + return (this as EdgeInsets).top; + } + + double get bottom { + if (this is EdgeInsetsDirectional) { + return (this as EdgeInsetsDirectional).bottom; + } + return (this as EdgeInsets).bottom; + } +} diff --git a/test/util/font_loader.dart b/test/util/font_loader.dart index cb5e2de5..751e19e3 100644 --- a/test/util/font_loader.dart +++ b/test/util/font_loader.dart @@ -66,7 +66,8 @@ class ImpaktfullUiTestFontLoader { } else if (fontWeight == FontWeight.w700) { fullPath += '_bold'; } else { - throw Exception('Font weight not supported (create your own font loader ${textStyle.fontWeight})'); + throw Exception( + 'Font weight not supported (create your own font loader ${textStyle.fontWeight})'); } fullPath += '.ttf'; if (loadedFont.contains(fullPath)) return;