From 354d61dfa24dbf62d627ee92c8e9444ee0aeca8d Mon Sep 17 00:00:00 2001 From: Rafeek-Khoudare Date: Sun, 29 Jun 2025 15:50:37 +0300 Subject: [PATCH] UI Enhancement --- .../widgets/accurate_calibrating_dialog.dart | 4 +- .../widgets/accurate_calibration_dialog.dart | 4 +- .../widgets/accurate_dialog_widget.dart | 131 ++++++++++-------- .../widgets/calibrate_completed_dialog.dart | 96 +++++++------ .../widgets/normal_text_body_for_dialog.dart | 86 +++++++++--- .../widgets/number_input_textfield.dart | 2 +- .../widgets/pref_revers_card_widget.dart | 2 +- .../widgets/prefrences_dialog.dart | 6 +- .../widgets/quick_calibrating_dialog.dart | 102 ++++++++------ .../widgets/quick_calibration_dialog.dart | 4 +- lib/utils/color_manager.dart | 4 +- lib/utils/constants/assets.dart | 4 +- 12 files changed, 266 insertions(+), 179 deletions(-) diff --git a/lib/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart b/lib/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart index 54107420..64044b94 100644 --- a/lib/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart +++ b/lib/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart @@ -23,8 +23,8 @@ class AccurteCalibratingDialog extends StatelessWidget { body: const NormalTextBodyForDialog( title: '', step1: - '1. Click Close Button to make the Curtain run to Full Close and Position.', - step2: '2. click Next to complete the Calibration.', + 'Click Close Button to make the Curtain run to Full Close and Position.', + step2: 'click Next to complete the Calibration.', ), leftOnTap: () => Navigator.of(parentContext).pop(), rightOnTap: () { diff --git a/lib/pages/device_managment/curtain_module/widgets/accurate_calibration_dialog.dart b/lib/pages/device_managment/curtain_module/widgets/accurate_calibration_dialog.dart index a9d1b010..997e70cf 100644 --- a/lib/pages/device_managment/curtain_module/widgets/accurate_calibration_dialog.dart +++ b/lib/pages/device_managment/curtain_module/widgets/accurate_calibration_dialog.dart @@ -20,8 +20,8 @@ class AccurateCalibrationDialog extends StatelessWidget { title: 'Accurate Calibration', body: const NormalTextBodyForDialog( title: 'Prepare Calibration:', - step1: '1. Run The Curtain to the Fully Open Position,and pause.', - step2: '2. click Next to Start accurate calibration.', + step1: 'Run The Curtain to the Fully Open Position,and pause.', + step2: 'click Next to Start accurate calibration.', ), leftOnTap: () => Navigator.of(parentContext).pop(), rightOnTap: () { diff --git a/lib/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart b/lib/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart index 5be376ae..433608ac 100644 --- a/lib/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart +++ b/lib/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart @@ -17,78 +17,87 @@ class AccurateDialogWidget extends StatelessWidget { @override Widget build(BuildContext context) { return SizedBox( - height: 300, - width: 400, + height: 250, + width: 500, child: Column( children: [ - Padding( - padding: const EdgeInsets.all(10), - child: Text( - title, - style: const TextStyle( - fontSize: 24, - fontWeight: FontWeight.bold, - color: ColorsManager.blueColor, - ), + Expanded( + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(10), + child: Text( + title, + style: TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + color: ColorsManager.dialogBlueTitle, + ), + ), + ), + const Divider( + indent: 60, + endIndent: 60, + ), + ], ), ), - const SizedBox(height: 5), - const Divider( - indent: 10, - endIndent: 10, - ), - Padding( - padding: const EdgeInsets.all(10), + Expanded( child: body, ), - const SizedBox(height: 20), - const Spacer(), - const Divider(), - Row( - children: [ - Expanded( - child: InkWell( - onTap: leftOnTap, - child: Container( - height: 60, - alignment: Alignment.center, - decoration: const BoxDecoration( - border: Border( - right: BorderSide( - color: ColorsManager.grayBorder, + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + const Divider(), + Row( + children: [ + Expanded( + child: InkWell( + onTap: leftOnTap, + child: Container( + height: 40, + alignment: Alignment.center, + decoration: const BoxDecoration( + border: Border( + right: BorderSide( + color: ColorsManager.grayBorder, + ), + ), + ), + child: const Text( + 'Cancel', + style: TextStyle(color: ColorsManager.grayBorder), + ), ), ), ), - child: const Text( - 'Cancel', - style: TextStyle(color: ColorsManager.grayBorder), - ), - ), - ), - ), - Expanded( - child: InkWell( - onTap: rightOnTap, - child: Container( - height: 60, - alignment: Alignment.center, - decoration: const BoxDecoration( - border: Border( - right: BorderSide( - color: ColorsManager.grayBorder, + Expanded( + child: InkWell( + onTap: rightOnTap, + child: Container( + height: 40, + alignment: Alignment.center, + decoration: const BoxDecoration( + border: Border( + right: BorderSide( + color: ColorsManager.grayBorder, + ), + ), + ), + child: const Text( + 'Next', + style: TextStyle( + color: ColorsManager.blueColor, + ), + ), ), ), - ), - child: const Text( - 'Next', - style: TextStyle( - color: ColorsManager.blueColor, - ), - ), - ), - ), - ) - ], + ) + ], + ) + ], + ), ) ], ), diff --git a/lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart b/lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart index 9b2b5ea9..bd0cbb37 100644 --- a/lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart +++ b/lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart @@ -1,7 +1,9 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:syncrow_web/pages/device_managment/curtain_module/bloc/curtain_module_bloc.dart'; import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; class CalibrateCompletedDialog extends StatelessWidget { final BuildContext parentContext; @@ -21,52 +23,62 @@ class CalibrateCompletedDialog extends StatelessWidget { width: 400, child: Column( children: [ - const Padding( - padding: EdgeInsets.all(10), - child: Text( - 'Calibration Completed', - style: TextStyle( - fontSize: 24, - fontWeight: FontWeight.bold, - color: ColorsManager.blueColor, - ), + Expanded( + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(10), + child: Text( + 'Calibration Completed', + style: TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + color: ColorsManager.dialogBlueTitle, + ), + ), + ), + const SizedBox(height: 5), + const Divider( + indent: 10, + endIndent: 10, + ), + ], ), ), - const SizedBox(height: 5), - const Divider( - indent: 10, - endIndent: 10, + Expanded( + child: SvgPicture.asset(Assets.completedDoneIcon), ), - const Icon( - Icons.check_circle, - size: 100, - color: ColorsManager.blueColor, - ), - const Spacer(), - const Divider( - indent: 10, - endIndent: 10, - ), - InkWell( - onTap: () { - parentContext.read().add( - FetchCurtainModuleStatusEvent( - deviceId: deviceId, - ), - ); - Navigator.of(parentContext).pop(); - Navigator.of(parentContext).pop(); - }, - child: Container( - height: 40, - width: double.infinity, - alignment: Alignment.center, - child: const Text( - 'Close', - style: TextStyle( - color: ColorsManager.grayBorder, + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + const Divider( + indent: 10, + endIndent: 10, ), - ), + InkWell( + onTap: () { + parentContext.read().add( + FetchCurtainModuleStatusEvent( + deviceId: deviceId, + ), + ); + Navigator.of(parentContext).pop(); + Navigator.of(parentContext).pop(); + }, + child: Container( + height: 40, + width: double.infinity, + alignment: Alignment.center, + child: const Text( + 'Close', + style: TextStyle( + color: ColorsManager.grayBorder, + ), + ), + ), + ) + ], ), ) ], diff --git a/lib/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart b/lib/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart index 8818cb7b..c322fe9d 100644 --- a/lib/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart +++ b/lib/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart @@ -15,28 +15,72 @@ class NormalTextBodyForDialog extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - title, - style: const TextStyle( - color: ColorsManager.grayColor, + return Padding( + padding: EdgeInsetsGeometry.only(left: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (title.isEmpty) + const SizedBox() + else + Expanded( + child: Text( + title, + style: const TextStyle( + color: ColorsManager.grayColor, + fontSize: 17, + ), + ), + ), + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox( + width: 10, + ), + const Text('1. ', + style: TextStyle( + color: ColorsManager.grayColor, + fontSize: 17, + )), + SizedBox( + width: 450, + child: Text( + step1, + style: const TextStyle( + color: ColorsManager.grayColor, + fontSize: 17, + ), + ), + ), + ], + ), ), - ), - Text( - step1, - style: const TextStyle( - color: ColorsManager.grayColor, - ), - ), - Text( - step2, - style: const TextStyle( - color: ColorsManager.grayColor, - ), - ) - ], + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox( + width: 10, + ), + const Text('2. ', + style: TextStyle( + color: ColorsManager.grayColor, + fontSize: 17, + )), + Text( + step2, + style: const TextStyle( + color: ColorsManager.grayColor, + fontSize: 17, + ), + ), + ], + ), + ) + ], + ), ); } } diff --git a/lib/pages/device_managment/curtain_module/widgets/number_input_textfield.dart b/lib/pages/device_managment/curtain_module/widgets/number_input_textfield.dart index ea95f838..428f6531 100644 --- a/lib/pages/device_managment/curtain_module/widgets/number_input_textfield.dart +++ b/lib/pages/device_managment/curtain_module/widgets/number_input_textfield.dart @@ -19,7 +19,7 @@ class NumberInputField extends StatelessWidget { contentPadding: EdgeInsets.zero, ), style: const TextStyle( - fontSize: 20, + fontSize: 15, color: ColorsManager.blackColor, ), ); diff --git a/lib/pages/device_managment/curtain_module/widgets/pref_revers_card_widget.dart b/lib/pages/device_managment/curtain_module/widgets/pref_revers_card_widget.dart index 81912e80..85c45d27 100644 --- a/lib/pages/device_managment/curtain_module/widgets/pref_revers_card_widget.dart +++ b/lib/pages/device_managment/curtain_module/widgets/pref_revers_card_widget.dart @@ -18,7 +18,7 @@ class PrefReversCardWidget extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultContainer( - padding: const EdgeInsets.all(12), + padding: const EdgeInsets.all(18), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, diff --git a/lib/pages/device_managment/curtain_module/widgets/prefrences_dialog.dart b/lib/pages/device_managment/curtain_module/widgets/prefrences_dialog.dart index 1e4f932c..35844c05 100644 --- a/lib/pages/device_managment/curtain_module/widgets/prefrences_dialog.dart +++ b/lib/pages/device_managment/curtain_module/widgets/prefrences_dialog.dart @@ -23,12 +23,12 @@ class CurtainModulePrefrencesDialog extends StatelessWidget { Widget build(_) { return AlertDialog( backgroundColor: ColorsManager.CircleImageBackground, - contentPadding: const EdgeInsets.all(30), - title: const Center( + contentPadding: const EdgeInsets.all(20), + title: Center( child: Text( 'Preferences', style: TextStyle( - color: ColorsManager.blueColor, + color: ColorsManager.dialogBlueTitle, fontSize: 24, fontWeight: FontWeight.bold, ), diff --git a/lib/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart b/lib/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart index 0b86c96e..8514d432 100644 --- a/lib/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart +++ b/lib/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart @@ -69,49 +69,71 @@ class _QuickCalibratingDialogState extends State { body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text( - '1. please Enter the Travel Time:', - style: TextStyle(color: ColorsManager.grayBorder), - ), - const SizedBox(height: 10), - Container( - width: 150, - height: 40, - padding: const EdgeInsets.all(5), - decoration: BoxDecoration( - color: ColorsManager.whiteColors, - borderRadius: BorderRadius.circular(12), - ), - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Expanded( - child: NumberInputField(controller: _controller), - ), - const Expanded( - child: Text( - 'seconds', - style: TextStyle( - fontSize: 15, - color: ColorsManager.blueColor, - fontWeight: FontWeight.bold, - ), - ), - ), - ], - ), - ), - if (_errorText != null) - Padding( - padding: const EdgeInsets.only(top: 8.0), - child: Text( - _errorText!, - style: const TextStyle( - color: ColorsManager.red, - fontSize: 14, + const Expanded( + child: Align( + alignment: Alignment.center, + child: Padding( + padding: EdgeInsets.only(right: 75), + child: Text( + '1.please Enter the Travel Time:', + style: TextStyle(color: ColorsManager.lightGrayColor), ), ), ), + ), + Expanded( + child: Align( + alignment: Alignment.center, + child: Container( + width: 110, + padding: const EdgeInsets.all(5), + decoration: BoxDecoration( + color: ColorsManager.whiteColors, + borderRadius: BorderRadius.circular(12), + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded( + child: NumberInputField(controller: _controller), + ), + Expanded( + child: Text( + 'seconds', + style: TextStyle( + fontSize: 12, + color: ColorsManager.dialogBlueTitle, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ), + ), + ), + if (_errorText != null) + Expanded( + child: Padding( + padding: const EdgeInsets.only(top: 8.0), + child: Text( + _errorText!, + style: const TextStyle( + color: ColorsManager.red, + fontSize: 14, + ), + ), + ), + ), + const Expanded( + child: Align( + alignment: Alignment.center, + child: Text( + '2.click Next to Complete the calibration', + style: TextStyle(color: ColorsManager.lightGrayColor), + ), + ), + ) ], ), leftOnTap: () => Navigator.of(widget.parentContext).pop(), diff --git a/lib/pages/device_managment/curtain_module/widgets/quick_calibration_dialog.dart b/lib/pages/device_managment/curtain_module/widgets/quick_calibration_dialog.dart index 803d904f..6c776293 100644 --- a/lib/pages/device_managment/curtain_module/widgets/quick_calibration_dialog.dart +++ b/lib/pages/device_managment/curtain_module/widgets/quick_calibration_dialog.dart @@ -23,8 +23,8 @@ class QuickCalibrationDialog extends StatelessWidget { body: const NormalTextBodyForDialog( title: 'Prepare Calibration:', step1: - '1. Confirm that the curtain is in the fully closed and suspended state.', - step2: '2. click Next to Start calibration.', + 'Confirm that the curtain is in the fully closed and suspended state.', + step2: 'click Next to Start calibration.', ), leftOnTap: () => Navigator.of(parentContext).pop(), rightOnTap: () { diff --git a/lib/utils/color_manager.dart b/lib/utils/color_manager.dart index 50170ed9..40fca1fa 100644 --- a/lib/utils/color_manager.dart +++ b/lib/utils/color_manager.dart @@ -83,7 +83,5 @@ abstract class ColorsManager { static const Color maxPurpleDot = Color(0xFF5F00BD); static const Color minBlue = Color(0xFF93AAFD); static const Color minBlueDot = Color(0xFF023DFE); - static const Color grey25 = Color(0xFFF9F9F9); - - + static const Color grey25 = Color(0xFFF9F9F9); } diff --git a/lib/utils/constants/assets.dart b/lib/utils/constants/assets.dart index 8979c446..821df6e3 100644 --- a/lib/utils/constants/assets.dart +++ b/lib/utils/constants/assets.dart @@ -394,6 +394,7 @@ class Assets { static const String emptyBox = 'assets/icons/empty_box.png'; static const String completeProcessIcon = 'assets/icons/compleate_process_icon.svg'; + static const String completedDoneIcon = 'assets/images/completed_done.svg'; static const String currentProcessIcon = 'assets/icons/current_process_icon.svg'; static const String uncomplete_ProcessIcon = @@ -505,5 +506,6 @@ class Assets { static const String aqiAirQuality = 'assets/icons/aqi_air_quality.svg'; static const String temperatureAqiSidebar = 'assets/icons/thermometer.svg'; static const String humidityAqiSidebar = 'assets/icons/humidity.svg'; - static const String autocadOccupancyImage = 'assets/images/autocad_occupancy_image.png'; + static const String autocadOccupancyImage = + 'assets/images/autocad_occupancy_image.png'; }