mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-08-25 15:39:41 +00:00
Refactor color management and UI components for consistency
- Updated color references in various widgets to use the new `opaquePrimary` color for better visual consistency. - Refactored `ColorsManager` to improve color definitions and removed redundant color declarations. - Enhanced UI elements across multiple dialogs and widgets to ensure a cohesive design language. This change promotes maintainability and aligns with the updated color scheme.
This commit is contained in:
Faris Armoush
@ -1,3 +1,4 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_bloc.dart';
|
||||
@ -13,7 +14,6 @@ import 'package:syncrow_web/pages/routines/view/effective_period_view.dart';
|
||||
import 'package:syncrow_web/pages/routines/widgets/delete_scene.dart';
|
||||
import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
|
||||
import 'package:syncrow_web/utils/color_manager.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
class SettingHelper {
|
||||
static Future<String?> showSettingDialog({
|
||||
@ -30,14 +30,16 @@ class SettingHelper {
|
||||
providers: [
|
||||
if (effectiveTime != null)
|
||||
BlocProvider(
|
||||
create: (_) => EffectPeriodBloc()..add(InitialEffectPeriodEvent(effectiveTime)),
|
||||
create: (_) =>
|
||||
EffectPeriodBloc()..add(InitialEffectPeriodEvent(effectiveTime)),
|
||||
),
|
||||
if (effectiveTime == null)
|
||||
BlocProvider(
|
||||
create: (_) => EffectPeriodBloc(),
|
||||
),
|
||||
BlocProvider(
|
||||
create: (_) => SettingBloc()..add(InitialEvent(selectedIcon: iconId ?? ''))),
|
||||
create: (_) =>
|
||||
SettingBloc()..add(InitialEvent(selectedIcon: iconId ?? ''))),
|
||||
],
|
||||
child: AlertDialog(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
@ -53,7 +55,9 @@ class SettingHelper {
|
||||
}
|
||||
return Container(
|
||||
width: context.read<SettingBloc>().isExpanded ? 800 : 400,
|
||||
height: context.read<SettingBloc>().isExpanded && isAutomation ? 500 : 350,
|
||||
height: context.read<SettingBloc>().isExpanded && isAutomation
|
||||
? 500
|
||||
: 350,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
@ -76,14 +80,18 @@ class SettingHelper {
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 10, left: 10, right: 10, bottom: 10),
|
||||
top: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10),
|
||||
child: Column(
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () {},
|
||||
child: Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
MainAxisAlignment
|
||||
.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Validity',
|
||||
@ -91,14 +99,17 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color:
|
||||
ColorsManager.textPrimaryColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textPrimaryColor,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14),
|
||||
),
|
||||
const Icon(
|
||||
Icons.arrow_forward_ios_outlined,
|
||||
color: ColorsManager.textGray,
|
||||
Icons
|
||||
.arrow_forward_ios_outlined,
|
||||
color:
|
||||
ColorsManager.textGray,
|
||||
size: 15,
|
||||
)
|
||||
],
|
||||
@ -115,15 +126,17 @@ class SettingHelper {
|
||||
),
|
||||
InkWell(
|
||||
onTap: () {
|
||||
BlocProvider.of<SettingBloc>(context).add(
|
||||
FetchIcons(
|
||||
BlocProvider.of<SettingBloc>(
|
||||
context)
|
||||
.add(FetchIcons(
|
||||
expanded: !context
|
||||
.read<SettingBloc>()
|
||||
.isExpanded));
|
||||
},
|
||||
child: Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
MainAxisAlignment
|
||||
.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Effective Period',
|
||||
@ -131,14 +144,17 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color:
|
||||
ColorsManager.textPrimaryColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textPrimaryColor,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14),
|
||||
),
|
||||
const Icon(
|
||||
Icons.arrow_forward_ios_outlined,
|
||||
color: ColorsManager.textGray,
|
||||
Icons
|
||||
.arrow_forward_ios_outlined,
|
||||
color:
|
||||
ColorsManager.textGray,
|
||||
size: 15,
|
||||
)
|
||||
],
|
||||
@ -154,7 +170,8 @@ class SettingHelper {
|
||||
height: 5,
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Executed by',
|
||||
@ -162,8 +179,10 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color: ColorsManager.textPrimaryColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textPrimaryColor,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14),
|
||||
),
|
||||
Text('Cloud',
|
||||
@ -171,12 +190,17 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color: ColorsManager.textGray,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textGray,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14)),
|
||||
],
|
||||
),
|
||||
if (context.read<RoutineBloc>().state.isUpdate ??
|
||||
if (context
|
||||
.read<RoutineBloc>()
|
||||
.state
|
||||
.isUpdate ??
|
||||
false)
|
||||
const DeleteSceneWidget()
|
||||
],
|
||||
@ -188,20 +212,25 @@ class SettingHelper {
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 10, left: 10, right: 10, bottom: 10),
|
||||
top: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10),
|
||||
child: Column(
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () {
|
||||
BlocProvider.of<SettingBloc>(context).add(
|
||||
FetchIcons(
|
||||
BlocProvider.of<SettingBloc>(
|
||||
context)
|
||||
.add(FetchIcons(
|
||||
expanded: !context
|
||||
.read<SettingBloc>()
|
||||
.isExpanded));
|
||||
},
|
||||
child: Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
MainAxisAlignment
|
||||
.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Icons',
|
||||
@ -209,14 +238,17 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color:
|
||||
ColorsManager.textPrimaryColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textPrimaryColor,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14),
|
||||
),
|
||||
const Icon(
|
||||
Icons.arrow_forward_ios_outlined,
|
||||
color: ColorsManager.textGray,
|
||||
Icons
|
||||
.arrow_forward_ios_outlined,
|
||||
color:
|
||||
ColorsManager.textGray,
|
||||
size: 15,
|
||||
)
|
||||
],
|
||||
@ -232,7 +264,8 @@ class SettingHelper {
|
||||
height: 5,
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Show on devices page',
|
||||
@ -240,17 +273,21 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color: ColorsManager.textPrimaryColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textPrimaryColor,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.end,
|
||||
children: [
|
||||
Container(
|
||||
height: 30,
|
||||
width: 1,
|
||||
color: ColorsManager.graysColor,
|
||||
color: ColorsManager
|
||||
.graysColor,
|
||||
),
|
||||
Transform.scale(
|
||||
scale: .8,
|
||||
@ -274,7 +311,8 @@ class SettingHelper {
|
||||
height: 5,
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Executed by',
|
||||
@ -282,8 +320,10 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color: ColorsManager.textPrimaryColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textPrimaryColor,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14),
|
||||
),
|
||||
Text('Cloud',
|
||||
@ -291,12 +331,17 @@ class SettingHelper {
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color: ColorsManager.textGray,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: ColorsManager
|
||||
.textGray,
|
||||
fontWeight:
|
||||
FontWeight.w400,
|
||||
fontSize: 14)),
|
||||
],
|
||||
),
|
||||
if (context.read<RoutineBloc>().state.isUpdate ??
|
||||
if (context
|
||||
.read<RoutineBloc>()
|
||||
.state
|
||||
.isUpdate ??
|
||||
false)
|
||||
const DeleteSceneWidget()
|
||||
],
|
||||
@ -304,12 +349,14 @@ class SettingHelper {
|
||||
],
|
||||
),
|
||||
),
|
||||
if (context.read<SettingBloc>().isExpanded && !isAutomation)
|
||||
if (context.read<SettingBloc>().isExpanded &&
|
||||
!isAutomation)
|
||||
SizedBox(
|
||||
width: 400,
|
||||
height: 150,
|
||||
child: settingState is LoadingState
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
? const Center(
|
||||
child: CircularProgressIndicator())
|
||||
: GridView.builder(
|
||||
gridDelegate:
|
||||
const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
@ -326,7 +373,8 @@ class SettingHelper {
|
||||
height: 35,
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
BlocProvider.of<SettingBloc>(context)
|
||||
BlocProvider.of<SettingBloc>(
|
||||
context)
|
||||
.add(SelectIcon(
|
||||
iconId: iconModel.uuid,
|
||||
));
|
||||
@ -335,12 +383,14 @@ class SettingHelper {
|
||||
child: SizedBox(
|
||||
child: ClipOval(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(1),
|
||||
padding:
|
||||
const EdgeInsets.all(1),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: selectedIcon == iconModel.uuid
|
||||
color: selectedIcon ==
|
||||
iconModel.uuid
|
||||
? ColorsManager
|
||||
.primaryColorWithOpacity
|
||||
.opaquePrimary
|
||||
: Colors.transparent,
|
||||
width: 2,
|
||||
),
|
||||
@ -356,8 +406,12 @@ class SettingHelper {
|
||||
);
|
||||
},
|
||||
)),
|
||||
if (context.read<SettingBloc>().isExpanded && isAutomation)
|
||||
const SizedBox(height: 350, width: 400, child: EffectivePeriodView())
|
||||
if (context.read<SettingBloc>().isExpanded &&
|
||||
isAutomation)
|
||||
const SizedBox(
|
||||
height: 350,
|
||||
width: 400,
|
||||
child: EffectivePeriodView())
|
||||
],
|
||||
),
|
||||
Container(
|
||||
@ -381,23 +435,31 @@ class SettingHelper {
|
||||
alignment: AlignmentDirectional.center,
|
||||
child: Text(
|
||||
'Cancel',
|
||||
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color: ColorsManager.textGray,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Container(width: 1, height: 50, color: ColorsManager.greyColor),
|
||||
Container(
|
||||
width: 1,
|
||||
height: 50,
|
||||
color: ColorsManager.greyColor),
|
||||
Expanded(
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
if (isAutomation) {
|
||||
BlocProvider.of<RoutineBloc>(context).add(
|
||||
EffectiveTimePeriodEvent(EffectiveTime(
|
||||
start: effectPeriodState.customStartTime!,
|
||||
start:
|
||||
effectPeriodState.customStartTime!,
|
||||
end: effectPeriodState.customEndTime!,
|
||||
loops: effectPeriodState.selectedDaysBinary)));
|
||||
loops: effectPeriodState
|
||||
.selectedDaysBinary)));
|
||||
Navigator.of(context).pop();
|
||||
} else {
|
||||
Navigator.of(context).pop(selectedIcon);
|
||||
@ -407,8 +469,11 @@ class SettingHelper {
|
||||
alignment: AlignmentDirectional.center,
|
||||
child: Text(
|
||||
'Confirm',
|
||||
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
|
||||
color: ColorsManager.primaryColorWithOpacity,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(
|
||||
color: ColorsManager.opaquePrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user