diff --git a/lib/pages/routines/helper/save_routine_helper.dart b/lib/pages/routines/helper/save_routine_helper.dart index e9d870d9..c568c6c1 100644 --- a/lib/pages/routines/helper/save_routine_helper.dart +++ b/lib/pages/routines/helper/save_routine_helper.dart @@ -6,7 +6,6 @@ import 'package:flutter_svg/flutter_svg.dart'; import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart'; import 'package:syncrow_web/pages/routines/models/device_functions.dart'; import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart'; -import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart'; import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart'; @@ -18,6 +17,10 @@ class SaveRoutineHelper { builder: (BuildContext context) { return BlocBuilder( builder: (context, state) { + final selectedConditionLabel = state.selectedAutomationOperator == 'and' + ? 'All Conditions are met' + : 'Any Condition is met'; + return AlertDialog( contentPadding: EdgeInsets.zero, content: Container( @@ -29,22 +32,35 @@ class SaveRoutineHelper { child: Column( mainAxisSize: MainAxisSize.min, children: [ - DialogHeader('Create a scene: ${state.routineName ?? ""}'), + const SizedBox(height: 18), + Text( + 'Create a scene: ${state.routineName ?? ""}', + textAlign: TextAlign.center, + style: Theme.of(context).textTheme.headlineMedium!.copyWith( + color: ColorsManager.primaryColorWithOpacity, + fontWeight: FontWeight.bold, + ), + ), + const SizedBox(height: 18), + _buildDivider(), + _buildListsLabelRow(selectedConditionLabel), Padding( - padding: const EdgeInsets.symmetric( + padding: const EdgeInsetsDirectional.symmetric( horizontal: 16, - vertical: 8, ), child: Row( crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, children: [ _buildIfConditions(state, context), - const SizedBox(width: 16), _buildThenActions(state, context), ], ), ), + _buildDivider(), + const SizedBox(height: 8), _buildDialogFooter(context, state), + const SizedBox(height: 8), ], ), ), @@ -55,63 +71,82 @@ class SaveRoutineHelper { ); } - static DialogFooter _buildDialogFooter(BuildContext context, RoutineState state) { - return DialogFooter( - onCancel: () => Navigator.pop(context), - onConfirm: () { - if (state.isAutomation) { - if (state.isUpdate ?? false) { - context.read().add(const UpdateAutomation()); - } else { - context.read().add(const CreateAutomationEvent()); - } - } else { - if (state.isUpdate ?? false) { - context.read().add(const UpdateScene()); - } else { - context.read().add(const CreateSceneEvent()); - } - } - - Navigator.pop(context); - }, - isConfirmEnabled: true, + static Container _buildDivider() { + return Container( + height: 1, + width: double.infinity, + color: ColorsManager.greyColor, ); } - static Expanded _buildThenActions(RoutineState state, BuildContext context) { - return Expanded( - child: ListView( - shrinkWrap: true, + static Widget _buildListsLabelRow(String selectedConditionLabel) { + const textStyle = TextStyle( + fontSize: 16, + ); + return Container( + color: ColorsManager.backgroundColor.withValues(alpha: 0.5), + padding: const EdgeInsetsDirectional.all(20), + child: Row( + spacing: 16, children: [ - const Text( - 'THEN:', - style: TextStyle( - fontSize: 16, - ), - ), - const SizedBox(height: 8), - ...state.thenItems.map((item) { - final functions = state.selectedFunctions[item['uniqueCustomId']] ?? []; - return functionRow(item, context, functions); - }), + Expanded(child: Text('IF: $selectedConditionLabel', style: textStyle)), + const Expanded(child: Text('THEN:', style: textStyle)), ], ), ); } - static Expanded _buildIfConditions(RoutineState state, BuildContext context) { + static Widget _buildDialogFooter(BuildContext context, RoutineState state) { + return Row( + spacing: 16, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + DialogFooterButton( + text: 'Cancel', + onTap: () => Navigator.pop(context), + ), + DialogFooterButton( + text: 'Confirm', + onTap: () { + if (state.isAutomation) { + if (state.isUpdate ?? false) { + context.read().add(const UpdateAutomation()); + } else { + context.read().add(const CreateAutomationEvent()); + } + } else { + if (state.isUpdate ?? false) { + context.read().add(const UpdateScene()); + } else { + context.read().add(const CreateSceneEvent()); + } + } + + Navigator.pop(context); + }, + textColor: ColorsManager.primaryColorWithOpacity, + ), + ], + ); + } + + static Widget _buildThenActions(RoutineState state, BuildContext context) { + return Expanded( + child: ListView( + shrinkWrap: true, + children: state.thenItems.map((item) { + final functions = state.selectedFunctions[item['uniqueCustomId']] ?? []; + return functionRow(item, context, functions); + }).toList(), + ), + ); + } + + static Widget _buildIfConditions(RoutineState state, BuildContext context) { return Expanded( child: ListView( shrinkWrap: true, children: [ - const Text( - 'IF:', - style: TextStyle( - fontSize: 16, - ), - ), - const SizedBox(height: 8), if (state.isTabToRun) ListTile( leading: SvgPicture.asset( diff --git a/lib/pages/routines/widgets/dialog_footer.dart b/lib/pages/routines/widgets/dialog_footer.dart index e5a548f7..38178ee6 100644 --- a/lib/pages/routines/widgets/dialog_footer.dart +++ b/lib/pages/routines/widgets/dialog_footer.dart @@ -28,32 +28,40 @@ class DialogFooter extends StatelessWidget { child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - _buildFooterButton( - context: context, + DialogFooterButton( text: 'Cancel', onTap: onCancel, ), if (isConfirmEnabled) ...[ Container(width: 1, height: 50, color: ColorsManager.greyColor), - _buildFooterButton( - context: context, + DialogFooterButton( text: 'Confirm', onTap: onConfirm, - textColor: - isConfirmEnabled ? ColorsManager.primaryColorWithOpacity : Colors.red, + textColor: isConfirmEnabled + ? ColorsManager.primaryColorWithOpacity + : Colors.red, ), ], ], ), ); } +} - Widget _buildFooterButton({ - required BuildContext context, - required String text, - required VoidCallback? onTap, - Color? textColor, - }) { +class DialogFooterButton extends StatelessWidget { + const DialogFooterButton({ + required this.text, + required this.onTap, + this.textColor, + super.key, + }); + + final String text; + final VoidCallback? onTap; + final Color? textColor; + + @override + Widget build(BuildContext context) { return Expanded( child: TextButton( style: TextButton.styleFrom( diff --git a/lib/pages/routines/widgets/dialog_header.dart b/lib/pages/routines/widgets/dialog_header.dart index 4fe1f0b1..f1f5686a 100644 --- a/lib/pages/routines/widgets/dialog_header.dart +++ b/lib/pages/routines/widgets/dialog_header.dart @@ -16,6 +16,7 @@ class DialogHeader extends StatelessWidget { ), Text( title, + textAlign: TextAlign.center, style: Theme.of(context).textTheme.bodyMedium!.copyWith( color: ColorsManager.primaryColorWithOpacity, fontWeight: FontWeight.bold,