ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 22:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance device management UI with improved padding and SVG icon integration

Browse Source
This commit is contained in:
mohammad
2025-06-10 16:29:14 +03:00
parent c6b55cb28b
commit f7f3843fa7
2 changed files with 101 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
lib/pages/device_managment/device_setting/device_management_content.dart
View File

@ -1,10 +1,12 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.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/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/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/settings_model/sub_space_model.dart';
import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.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/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/utils/extension/build_context_x.dart';
import 'package:syncrow_web/web_layout/default_container.dart'; import 'package:syncrow_web/web_layout/default_container.dart';
@ -28,7 +30,7 @@ class DeviceManagementContent extends StatelessWidget {
Widget? trailing, Widget? trailing,
required Color? valueColor}) { required Color? valueColor}) {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(vertical: 6.0), padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
@ -39,6 +41,7 @@ class DeviceManagementContent extends StatelessWidget {
color: ColorsManager.grayColor, color: ColorsManager.grayColor,
), ),
), ),
const SizedBox(width: 15),
Expanded( Expanded(
child: Text( child: Text(
value, value,
@ -48,7 +51,7 @@ class DeviceManagementContent extends StatelessWidget {
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 12),
trailing ?? const SizedBox.shrink(), trailing ?? const SizedBox.shrink(),
], ],
), ),
@ -73,15 +76,15 @@ class DeviceManagementContent extends StatelessWidget {
); );
}, },
child: infoRow( child: infoRow(
label: 'Sub-Space:', label: 'Sub-Space:',
value: deviceInfo.subspace.subspaceName, value: deviceInfo.subspace.subspaceName,
valueColor: ColorsManager.textGray, valueColor: ColorsManager.blackColor,
trailing: const Icon( trailing: SvgPicture.asset(
Icons.arrow_forward_ios, Assets.arrowDown,
size: 16, width: 10,
color: ColorsManager.greyColor, height: 10,
), color: ColorsManager.greyColor,
), )),
), ),
), ),
const Divider(color: ColorsManager.dividerColor), const Divider(color: ColorsManager.dividerColor),
@ -104,7 +107,7 @@ class DeviceManagementContent extends StatelessWidget {
}, },
child: const Icon( child: const Icon(
Icons.copy, Icons.copy,
size: 16, size: 15,
color: ColorsManager.greyColor, color: ColorsManager.greyColor,
), ),
), ),

138
lib/pages/device_managment/device_setting/device_settings_panel.dart
View File

@ -51,8 +51,7 @@ class DeviceSettingsPanel extends StatelessWidget {
Container( Container(
width: MediaQuery.of(context).size.width * 0.3, width: MediaQuery.of(context).size.width * 0.3,
color: ColorsManager.grey25, color: ColorsManager.grey25,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.all(10),
horizontal: 20, vertical: 24),
child: ListView( child: ListView(
children: [ children: [
Row( Row(
@ -70,37 +69,43 @@ class DeviceSettingsPanel extends StatelessWidget {
children: [ children: [
Text( Text(
'Device Settings', 'Device Settings',
style: style: context.theme.textTheme.titleLarge!
context.theme.textTheme.titleLarge!.copyWith( .copyWith(
fontWeight: FontWeight.bold, fontWeight: FontWeight.w700,
color: ColorsManager.primaryColor, color: ColorsManager.vividBlue
), .withOpacity(0.7),
fontSize: 24),
), ),
], ],
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
DefaultContainer( DefaultContainer(
borderRadius: BorderRadius.circular(15),
child: Row( child: Row(
children: [ children: [
CircleAvatar( Padding(
radius: 40, padding: const EdgeInsets.only(left: 15),
backgroundColor:
const Color.fromARGB(177, 213, 213, 213),
child: CircleAvatar( child: CircleAvatar(
backgroundColor: ColorsManager.whiteColors, radius: 38,
radius: 36, backgroundColor:
child: SvgPicture.asset( ColorsManager.grayBorder.withOpacity(0.5),
iconPath, child: CircleAvatar(
fit: BoxFit.cover, backgroundColor: ColorsManager.whiteColors,
radius: 36,
child: SvgPicture.asset(
iconPath,
fit: BoxFit.cover,
),
), ),
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 25),
Expanded( Expanded(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const SizedBox(height: 15),
Text( Text(
'Device Name:', 'Device Name:',
style: context.textTheme.bodyMedium! style: context.textTheme.bodyMedium!
@ -108,50 +113,79 @@ class DeviceSettingsPanel extends StatelessWidget {
color: ColorsManager.grayColor, color: ColorsManager.grayColor,
), ),
), ),
TextFormField( SizedBox(
maxLength: 30, height: 35,
style: const TextStyle( child: Row(
color: ColorsManager.blackColor, children: [
), SizedBox(
textAlign: TextAlign.start, height: 50,
focusNode: _bloc.focusNode, width: 190,
controller: _bloc.nameController, child: TextFormField(
enabled: _bloc.editName, scrollPadding: EdgeInsets.zero,
onFieldSubmitted: (value) { maxLength: 30,
_bloc.add(const ChangeNameEvent( style: const TextStyle(
value: false)); color: ColorsManager.blackColor,
}, fontSize: 16,
decoration: const InputDecoration( ),
border: InputBorder.none, textAlign: TextAlign.start,
fillColor: Colors.white10, focusNode: _bloc.focusNode,
counterText: '', 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), const SizedBox(height: 32),
Text('Device Management', style: sectionTitle), Padding(
padding: const EdgeInsets.only(left: 10),
child: Text('Device Management', style: sectionTitle),
),
DeviceManagementContent( DeviceManagementContent(
device: device, device: device,
subSpaces: subSpaces.cast<SubSpaceModel>(), subSpaces: subSpaces.cast<SubSpaceModel>(),