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/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,
),
),

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

@ -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<SubSpaceModel>(),