mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-09 22:57:21 +00:00
Enhance device management UI with improved padding and SVG icon integration
This commit is contained in:
@ -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,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -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>(),
|
||||||
|
Reference in New Issue
Block a user