mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
fix: update dropdown styles and dimensions for better UI consistency
This commit is contained in:
@ -117,7 +117,7 @@ class _DropdownContentState extends State<_DropdownContent> {
|
||||
final selectedCommunity = _findCommunity(state, state.selectedSpaceId);
|
||||
|
||||
return Container(
|
||||
height: 46,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.grey.shade300),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
@ -149,7 +149,7 @@ class _DropdownContentState extends State<_DropdownContent> {
|
||||
),
|
||||
),
|
||||
height: 45,
|
||||
width: 33,
|
||||
width: 44,
|
||||
child: const Icon(
|
||||
Icons.keyboard_arrow_down,
|
||||
color: ColorsManager.textGray,
|
||||
|
@ -44,144 +44,158 @@ class _CreateNewRoutinesDialogState extends State<CreateNewRoutinesDialog> {
|
||||
_selectedSpace = null;
|
||||
_selectedCommunity = _selectedId;
|
||||
}
|
||||
return AlertDialog(
|
||||
return Dialog(
|
||||
backgroundColor: Colors.white,
|
||||
insetPadding: EdgeInsets.zero,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
insetPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12)),
|
||||
title: Text(
|
||||
'Create New Routines',
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
|
||||
color: ColorsManager.spaceColor,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
content: Stack(
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Divider(),
|
||||
const SizedBox(height: 20),
|
||||
Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.only(left: 13, right: 8),
|
||||
child: Column(
|
||||
children: [
|
||||
SpaceTreeDropdown(
|
||||
selectedSpaceId: _selectedId,
|
||||
child: Container(
|
||||
width: 450,
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(height: 20),
|
||||
Text(
|
||||
'Create New Routines',
|
||||
textAlign: TextAlign.center,
|
||||
style:
|
||||
Theme.of(context).textTheme.bodyMedium!.copyWith(
|
||||
color: ColorsManager.spaceColor,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
const Divider(),
|
||||
const SizedBox(height: 20),
|
||||
Column(
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 13, right: 10),
|
||||
child: Column(
|
||||
children: [
|
||||
SpaceTreeDropdown(
|
||||
selectedSpaceId: _selectedId,
|
||||
onChanged: (String? newValue) {
|
||||
setState(
|
||||
() => _selectedId = newValue!);
|
||||
if (_selectedId != null) {
|
||||
_bloc.add(
|
||||
SpaceOnlyWithDevicesEvent(
|
||||
_selectedId!));
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
)),
|
||||
const SizedBox(height: 5),
|
||||
const SizedBox(height: 8),
|
||||
const SizedBox(height: 8),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 15, right: 20),
|
||||
child: SpaceDropdown(
|
||||
hintMessage: spaceHint,
|
||||
spaces: spaces,
|
||||
selectedValue: _selectedSpace,
|
||||
onChanged: (String? newValue) {
|
||||
setState(() => _selectedId = newValue!);
|
||||
if (_selectedId != null) {
|
||||
_bloc.add(SpaceOnlyWithDevicesEvent(
|
||||
_selectedId!));
|
||||
}
|
||||
setState(() {
|
||||
_selectedSpace = newValue;
|
||||
});
|
||||
},
|
||||
),
|
||||
],
|
||||
)),
|
||||
const SizedBox(height: 5),
|
||||
const SizedBox(height: 8),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 15, right: 15),
|
||||
child: SpaceDropdown(
|
||||
hintMessage: spaceHint,
|
||||
spaces: spaces,
|
||||
selectedValue: _selectedSpace,
|
||||
onChanged: (String? newValue) {
|
||||
setState(() {
|
||||
_selectedSpace = newValue;
|
||||
});
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
const Divider(),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 20,
|
||||
right: 20,
|
||||
),
|
||||
child: TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: Text(
|
||||
'Cancel',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 14,
|
||||
color: ColorsManager.blackColor,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
const Divider(),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 20,
|
||||
right: 20,
|
||||
),
|
||||
child: TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: Text(
|
||||
'Cancel',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 14,
|
||||
color: ColorsManager.blackColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 20,
|
||||
right: 20,
|
||||
),
|
||||
child: TextButton(
|
||||
onPressed: _selectedCommunity != null &&
|
||||
_selectedSpace != null
|
||||
? () {
|
||||
Navigator.of(context).pop({
|
||||
'community': _selectedCommunity,
|
||||
'space': _selectedSpace,
|
||||
});
|
||||
}
|
||||
: null,
|
||||
child: Text(
|
||||
'Next',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 14,
|
||||
color: _selectedCommunity != null &&
|
||||
_selectedSpace != null
|
||||
? ColorsManager.blueColor
|
||||
: Colors.blue.shade100,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 20,
|
||||
right: 20,
|
||||
),
|
||||
child: TextButton(
|
||||
onPressed: _selectedCommunity != null &&
|
||||
_selectedSpace != null
|
||||
? () {
|
||||
Navigator.of(context).pop({
|
||||
'community': _selectedCommunity,
|
||||
'space': _selectedSpace,
|
||||
});
|
||||
}
|
||||
: null,
|
||||
child: Text(
|
||||
'Next',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 14,
|
||||
color: _selectedCommunity != null &&
|
||||
_selectedSpace != null
|
||||
? ColorsManager.blueColor
|
||||
: Colors.blue.shade100,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
),
|
||||
if (isLoadingCommunities)
|
||||
const SizedBox(
|
||||
height: 200,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Center(
|
||||
child: CircularProgressIndicator(
|
||||
color: ColorsManager.primaryColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
),
|
||||
],
|
||||
if (isLoadingCommunities)
|
||||
const SizedBox(
|
||||
height: 200,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Center(
|
||||
child: CircularProgressIndicator(
|
||||
color: ColorsManager.primaryColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
|
@ -34,7 +34,9 @@ class SpaceDropdown extends StatelessWidget {
|
||||
),
|
||||
SizedBox(
|
||||
child: Container(
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: ColorsManager.whiteColors,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: DropdownButton2<String>(
|
||||
@ -45,7 +47,7 @@ class SpaceDropdown extends StatelessWidget {
|
||||
value: space.uuid,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
' ${space.name}',
|
||||
@ -88,7 +90,7 @@ class SpaceDropdown extends StatelessWidget {
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Expanded(
|
||||
flex: 6,
|
||||
flex: 8,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 10),
|
||||
child: Text(
|
||||
@ -129,6 +131,7 @@ class SpaceDropdown extends StatelessWidget {
|
||||
dropdownStyleData: DropdownStyleData(
|
||||
maxHeight: MediaQuery.of(context).size.height * 0.4,
|
||||
decoration: BoxDecoration(
|
||||
color: ColorsManager.whiteColors,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
|
Reference in New Issue
Block a user