From f7f3843fa7788c4df8cd958949a50a0f5aadece0 Mon Sep 17 00:00:00 2001 From: mohammad Date: Tue, 10 Jun 2025 16:29:14 +0300 Subject: [PATCH] Enhance device management UI with improved padding and SVG icon integration --- .../device_management_content.dart | 27 ++-- .../device_setting/device_settings_panel.dart | 138 +++++++++++------- 2 files changed, 101 insertions(+), 64 deletions(-) diff --git a/lib/pages/device_managment/device_setting/device_management_content.dart b/lib/pages/device_managment/device_setting/device_management_content.dart index 9c758341..e7cd514b 100644 --- a/lib/pages/device_managment/device_setting/device_management_content.dart +++ b/lib/pages/device_managment/device_setting/device_management_content.dart @@ -1,10 +1,12 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart'; import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.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'; import 'package:syncrow_web/web_layout/default_container.dart'; @@ -28,7 +30,7 @@ class DeviceManagementContent extends StatelessWidget { Widget? trailing, required Color? valueColor}) { return Padding( - padding: const EdgeInsets.symmetric(vertical: 6.0), + padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -39,6 +41,7 @@ class DeviceManagementContent extends StatelessWidget { color: ColorsManager.grayColor, ), ), + const SizedBox(width: 15), Expanded( child: Text( value, @@ -48,7 +51,7 @@ class DeviceManagementContent extends StatelessWidget { overflow: TextOverflow.ellipsis, ), ), - const SizedBox(width: 8), + const SizedBox(width: 12), trailing ?? const SizedBox.shrink(), ], ), @@ -73,15 +76,15 @@ class DeviceManagementContent extends StatelessWidget { ); }, child: infoRow( - label: 'Sub-Space:', - value: deviceInfo.subspace.subspaceName, - valueColor: ColorsManager.textGray, - trailing: const Icon( - Icons.arrow_forward_ios, - size: 16, - color: ColorsManager.greyColor, - ), - ), + label: 'Sub-Space:', + value: deviceInfo.subspace.subspaceName, + valueColor: ColorsManager.blackColor, + trailing: SvgPicture.asset( + Assets.arrowDown, + width: 10, + height: 10, + color: ColorsManager.greyColor, + )), ), ), const Divider(color: ColorsManager.dividerColor), @@ -104,7 +107,7 @@ class DeviceManagementContent extends StatelessWidget { }, child: const Icon( Icons.copy, - size: 16, + size: 15, color: ColorsManager.greyColor, ), ), diff --git a/lib/pages/device_managment/device_setting/device_settings_panel.dart b/lib/pages/device_managment/device_setting/device_settings_panel.dart index cebd80b3..48458b3b 100644 --- a/lib/pages/device_managment/device_setting/device_settings_panel.dart +++ b/lib/pages/device_managment/device_setting/device_settings_panel.dart @@ -51,8 +51,7 @@ class DeviceSettingsPanel extends StatelessWidget { Container( width: MediaQuery.of(context).size.width * 0.3, color: ColorsManager.grey25, - padding: const EdgeInsets.symmetric( - horizontal: 20, vertical: 24), + padding: const EdgeInsets.all(10), child: ListView( children: [ Row( @@ -70,37 +69,43 @@ class DeviceSettingsPanel extends StatelessWidget { children: [ Text( 'Device Settings', - style: - context.theme.textTheme.titleLarge!.copyWith( - fontWeight: FontWeight.bold, - color: ColorsManager.primaryColor, - ), + style: context.theme.textTheme.titleLarge! + .copyWith( + fontWeight: FontWeight.w700, + color: ColorsManager.vividBlue + .withOpacity(0.7), + fontSize: 24), ), ], ), const SizedBox(height: 24), DefaultContainer( + borderRadius: BorderRadius.circular(15), child: Row( children: [ - CircleAvatar( - radius: 40, - backgroundColor: - const Color.fromARGB(177, 213, 213, 213), + Padding( + padding: const EdgeInsets.only(left: 15), child: CircleAvatar( - backgroundColor: ColorsManager.whiteColors, - radius: 36, - child: SvgPicture.asset( - iconPath, - fit: BoxFit.cover, + radius: 38, + backgroundColor: + ColorsManager.grayBorder.withOpacity(0.5), + child: CircleAvatar( + backgroundColor: ColorsManager.whiteColors, + radius: 36, + child: SvgPicture.asset( + iconPath, + fit: BoxFit.cover, + ), ), ), ), - const SizedBox(width: 12), + const SizedBox(width: 25), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ + const SizedBox(height: 15), Text( 'Device Name:', style: context.textTheme.bodyMedium! @@ -108,50 +113,79 @@ class DeviceSettingsPanel extends StatelessWidget { color: ColorsManager.grayColor, ), ), - TextFormField( - maxLength: 30, - style: const TextStyle( - color: ColorsManager.blackColor, - ), - textAlign: TextAlign.start, - focusNode: _bloc.focusNode, - controller: _bloc.nameController, - enabled: _bloc.editName, - onFieldSubmitted: (value) { - _bloc.add(const ChangeNameEvent( - value: false)); - }, - decoration: const InputDecoration( - border: InputBorder.none, - fillColor: Colors.white10, - counterText: '', + SizedBox( + height: 35, + child: Row( + children: [ + SizedBox( + height: 50, + width: 190, + child: TextFormField( + scrollPadding: EdgeInsets.zero, + maxLength: 30, + style: const TextStyle( + color: ColorsManager.blackColor, + fontSize: 16, + ), + textAlign: TextAlign.start, + focusNode: _bloc.focusNode, + controller: _bloc.nameController, + enabled: _bloc.editName, + onFieldSubmitted: (value) { + _bloc.add(const ChangeNameEvent( + value: false)); + }, + decoration: InputDecoration( + isDense: true, + contentPadding: EdgeInsets.zero, + border: InputBorder.none, + fillColor: Colors.white10, + counterText: '', + ), + ), + ), + Column( + children: [ + SizedBox( + width: 15, + height: 25, + child: Visibility( + visible: + _bloc.editName != true, + replacement: const SizedBox(), + child: InkWell( + onTap: () { + _bloc.add( + const ChangeNameEvent( + value: true)); + }, + child: SvgPicture.asset( + Assets + .editNameIconSettings, + color: ColorsManager + .lightGrayBorderColor, + height: 15, + width: 15, + ), + ), + ), + ), + ], + ), + ], ), ), ], ), ), - const SizedBox(width: 8), - Visibility( - visible: _bloc.editName != true, - replacement: const SizedBox(), - child: GestureDetector( - onTap: () { - _bloc.add( - const ChangeNameEvent(value: true)); - }, - child: SvgPicture.asset( - Assets.editNameIconSettings, - color: ColorsManager.grayColor, - height: 20, - width: 20, - ), - ), - ) ], ), ), const SizedBox(height: 32), - Text('Device Management', style: sectionTitle), + Padding( + padding: const EdgeInsets.only(left: 10), + child: Text('Device Management', style: sectionTitle), + ), DeviceManagementContent( device: device, subSpaces: subSpaces.cast(),