From 379e1a4a7e2f00594356243cfeccd6583908a8ad Mon Sep 17 00:00:00 2001 From: Yegor Vialov Date: Sat, 4 Apr 2020 21:39:12 +0000 Subject: [PATCH] WIP Themes: State colors from themes --- lib/entities/badge.widget.dart | 4 +- lib/entities/entity_icon.widget.dart | 2 +- lib/entities/entity_picture.widget.dart | 7 +- .../media_player_progress_bar.widget.dart | 2 +- .../widgets/media_player_widgets.dart | 6 +- lib/managers/theme_manager.dart | 107 ++++++++++++------ lib/pages/main/main.page.dart | 8 +- .../history_chart/combined_history_chart.dart | 6 +- .../history_chart/history_control_widget.dart | 2 +- .../numeric_state_history_chart.dart | 3 +- .../simple_state_history_chart.dart | 9 +- 11 files changed, 98 insertions(+), 58 deletions(-) diff --git a/lib/entities/badge.widget.dart b/lib/entities/badge.widget.dart index 8e1bad0..f02bbbc 100644 --- a/lib/entities/badge.widget.dart +++ b/lib/entities/badge.widget.dart @@ -7,8 +7,8 @@ class BadgeWidget extends StatelessWidget { double iconSize = 26.0; Widget badgeIcon; String onBadgeTextValue; - Color iconColor = HAClientTheme().badgeColors[entityModel.entityWrapper.entity.domain] ?? - HAClientTheme().badgeColors["default"]; + Color iconColor = HAClientTheme.badgeColors[entityModel.entityWrapper.entity.domain] ?? + HAClientTheme.badgeColors["default"]; switch (entityModel.entityWrapper.entity.domain) { case "sun": { diff --git a/lib/entities/entity_icon.widget.dart b/lib/entities/entity_icon.widget.dart index 246d9aa..51056a3 100644 --- a/lib/entities/entity_icon.widget.dart +++ b/lib/entities/entity_icon.widget.dart @@ -67,7 +67,7 @@ class EntityIcon extends StatelessWidget { padding: padding, child: buildIcon( entityWrapper, - color ?? HAClientTheme().stateColor(entityWrapper.entity.state) + color ?? HAClientTheme().getColorByEntityState(entityWrapper.entity.state, context) ), ); } diff --git a/lib/entities/entity_picture.widget.dart b/lib/entities/entity_picture.widget.dart index b601ff3..77c8a39 100644 --- a/lib/entities/entity_picture.widget.dart +++ b/lib/entities/entity_picture.widget.dart @@ -22,7 +22,7 @@ class EntityPicture extends StatelessWidget { } } - Widget buildIcon(EntityWrapper data) { + Widget buildIcon(EntityWrapper data, BuildContext context) { if (data == null) { return null; } @@ -39,7 +39,7 @@ class EntityPicture extends StatelessWidget { child: Icon( IconData(iconCode, fontFamily: 'Material Design Icons'), size: Sizes.largeIconSize, - color: HAClientTheme().defaultStateColor, + color: HAClientTheme().getOffStateColor(context), ) ) ); @@ -63,7 +63,8 @@ class EntityPicture extends StatelessWidget { return Padding( padding: padding, child: buildIcon( - entityWrapper + entityWrapper, + context ), ); } diff --git a/lib/entities/media_player/widgets/media_player_progress_bar.widget.dart b/lib/entities/media_player/widgets/media_player_progress_bar.widget.dart index e12a3a8..8e9e797 100644 --- a/lib/entities/media_player/widgets/media_player_progress_bar.widget.dart +++ b/lib/entities/media_player/widgets/media_player_progress_bar.widget.dart @@ -33,7 +33,7 @@ class _MediaPlayerProgressBarState extends State { return LinearProgressIndicator( value: progress, backgroundColor: Colors.black45, - valueColor: AlwaysStoppedAnimation(HAClientTheme().stateColor(EntityState.on)), + valueColor: AlwaysStoppedAnimation(HAClientTheme().getOnStateColor(context)), ); } diff --git a/lib/entities/media_player/widgets/media_player_widgets.dart b/lib/entities/media_player/widgets/media_player_widgets.dart index eb63298..90a43ea 100644 --- a/lib/entities/media_player/widgets/media_player_widgets.dart +++ b/lib/entities/media_player/widgets/media_player_widgets.dart @@ -12,7 +12,7 @@ class MediaPlayerWidget extends StatelessWidget { Stack( alignment: AlignmentDirectional.topEnd, children: [ - _buildImage(entity), + _buildImage(entity, context), Positioned( bottom: 0.0, left: 0.0, @@ -68,7 +68,7 @@ class MediaPlayerWidget extends StatelessWidget { ); } - Widget _buildImage(MediaPlayerEntity entity) { + Widget _buildImage(MediaPlayerEntity entity, BuildContext context) { String state = entity.state; if (entity.entityPicture != null && state != EntityState.off && state != EntityState.unavailable && state != EntityState.idle) { return Container( @@ -94,7 +94,7 @@ class MediaPlayerWidget extends StatelessWidget { Icon( MaterialDesignIcons.getIconDataFromIconName("mdi:movie"), size: 150.0, - color: HAClientTheme().stateColor("$state"), + color: HAClientTheme().getColorByEntityState("$state", context), ) ], ); diff --git a/lib/managers/theme_manager.dart b/lib/managers/theme_manager.dart index 3da87a1..4d073df 100644 --- a/lib/managers/theme_manager.dart +++ b/lib/managers/theme_manager.dart @@ -20,36 +20,45 @@ class HAClientTheme { button: TextStyle(fontSize: 14, fontWeight: FontWeight.w500), ); - static const _stateColors = { - EntityState.on: Colors.amber, - "auto": Colors.amber, - EntityState.active: Colors.amber, - EntityState.playing: Colors.amber, - EntityState.paused: Colors.amber, - "above_horizon": Colors.amber, - EntityState.home: Colors.amber, - EntityState.open: Colors.amber, - EntityState.cleaning: Colors.amber, - EntityState.returning: Colors.amber, - EntityState.off: defaultStateColor, - EntityState.closed: defaultStateColor, - "below_horizon": defaultStateColor, - "default": defaultStateColor, - EntityState.idle: defaultStateColor, - "heat": Colors.redAccent, - "cool": Colors.lightBlue, - EntityState.unavailable: Colors.black26, - EntityState.unknown: Colors.black26, - EntityState.alarm_disarmed: Colors.green, - EntityState.alarm_armed_away: Colors.redAccent, - EntityState.alarm_armed_custom_bypass: Colors.redAccent, - EntityState.alarm_armed_home: Colors.redAccent, - EntityState.alarm_armed_night: Colors.redAccent, - EntityState.alarm_triggered: Colors.redAccent, - EntityState.alarm_arming: Colors.amber, - EntityState.alarm_disarming: Colors.amber, - EntityState.alarm_pending: Colors.amber, - }; + static const offEntityStates = [ + EntityState.off, + EntityState.closed, + "below_horizon", + "default", + EntityState.idle, + EntityState.alarm_disarmed, + ]; + + static const onEntityStates = [ + EntityState.on, + "auto", + EntityState.active, + EntityState.playing, + EntityState.paused, + "above_horizon", + EntityState.home, + EntityState.open, + EntityState.cleaning, + EntityState.returning, + "heat", + "cool", + EntityState.alarm_arming, + EntityState.alarm_disarming, + EntityState.alarm_pending, + ]; + + static const disabledEntityStates = [ + EntityState.unavailable, + EntityState.unknown, + ]; + + static const alarmEntityStates = [ + EntityState.alarm_armed_away, + EntityState.alarm_armed_custom_bypass, + EntityState.alarm_armed_home, + EntityState.alarm_armed_night, + EntityState.alarm_triggered, + ]; static const defaultStateColor = Color.fromRGBO(68, 115, 158, 1.0); @@ -114,12 +123,36 @@ class HAClientTheme { ) ); - Color stateColor(String state) { - return _stateColors[state] ?? _stateColors["default"]; + Color getOnStateColor(BuildContext context) { + return Theme.of(context).colorScheme.secondary; } - charts.Color chartHistoryStateColor(String state, int id) { - Color c = _stateColors[state]; + Color getOffStateColor(BuildContext context) { + return Theme.of(context).colorScheme.primaryVariant; + } + + Color getDisabledStateColor(BuildContext context) { + return Theme.of(context).disabledColor; + } + + Color getAlertStateColor(BuildContext context) { + return Theme.of(context).colorScheme.error; + } + + Color getColorByEntityState(String state, BuildContext context) { + if (onEntityStates.contains(state)) { + return getOnStateColor(context); + } else if (disabledEntityStates.contains(state)) { + return getDisabledStateColor(context); + } else if (alarmEntityStates.contains(state)) { + return getAlertStateColor(context); + } else { + return getOffStateColor(context); + } + } + + charts.Color chartHistoryStateColor(String state, int id, BuildContext context) { + Color c = getColorByEntityState(state, context); if (c != null) { return charts.Color( r: c.red, @@ -133,8 +166,8 @@ class HAClientTheme { } } - Color historyStateColor(String state, int id) { - Color c = _stateColors[state]; + Color historyStateColor(String state, int id, BuildContext context) { + Color c = getColorByEntityState(state, context); if (c != null) { return c; } else { @@ -143,7 +176,7 @@ class HAClientTheme { charts.Color c1 = charts.MaterialPalette.getOrderedPalettes(10)[r.round()].shadeDefault; return Color.fromARGB(c1.a, c1.r, c1.g, c1.b); } else { - return _stateColors[EntityState.on]; + return getOnStateColor(context); } } } diff --git a/lib/pages/main/main.page.dart b/lib/pages/main/main.page.dart index 3585cb1..83d23ef 100644 --- a/lib/pages/main/main.page.dart +++ b/lib/pages/main/main.page.dart @@ -634,7 +634,7 @@ class _MainPageState extends State with WidgetsBindingObserver, Ticker child: Text( "${entity.displayName}", style: Theme.of(context).textTheme.body1.copyWith( - color: HAClientTheme().stateColor(entity.state) + color: HAClientTheme().getColorByEntityState(entity.state, context) ) ), value: "${entity.entityId}", @@ -822,9 +822,9 @@ class _MainPageState extends State with WidgetsBindingObserver, Ticker bottomBarChildren.add( CollectionScaleTransition( children: [ - Icon(Icons.stop, size: 10.0, color: HAClientTheme().stateColor(EntityState.on),), - Icon(Icons.stop, size: 10.0, color: HAClientTheme().stateColor(EntityState.unavailable),), - Icon(Icons.stop, size: 10.0, color: HAClientTheme().stateColor(EntityState.off),), + Icon(Icons.stop, size: 10.0, color: HAClientTheme().getOnStateColor(context),), + Icon(Icons.stop, size: 10.0, color: HAClientTheme().getDisabledStateColor(context),), + Icon(Icons.stop, size: 10.0, color: HAClientTheme().getOffStateColor(context),), ], ), ); diff --git a/lib/plugins/history_chart/combined_history_chart.dart b/lib/plugins/history_chart/combined_history_chart.dart index f030901..9c948f1 100644 --- a/lib/plugins/history_chart/combined_history_chart.dart +++ b/lib/plugins/history_chart/combined_history_chart.dart @@ -156,7 +156,8 @@ class _CombinedHistoryChartWidgetState extends State result.add( new charts.Series( id: "value", - colorFn: (EntityHistoryMoment historyMoment, __) => HAClientTheme().chartHistoryStateColor("_", historyMoment.colorId), + colorFn: (EntityHistoryMoment historyMoment, __) => + HAClientTheme().chartHistoryStateColor("_", historyMoment.colorId, context), radiusPxFn: (EntityHistoryMoment historyMoment, __) { if (historyMoment.hiddenDot) { return 0.0; @@ -179,7 +180,8 @@ class _CombinedHistoryChartWidgetState extends State new charts.Series( id: 'state', radiusPxFn: (EntityHistoryMoment historyMoment, __) => (historyMoment.id == _selectedId) ? 5.0 : 4.0, - colorFn: (EntityHistoryMoment historyMoment, __) => HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId), + colorFn: (EntityHistoryMoment historyMoment, __) => + HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId, context), domainFn: (EntityHistoryMoment historyMoment, _) => historyMoment.startTime, domainLowerBoundFn: (EntityHistoryMoment historyMoment, _) => historyMoment.startTime, domainUpperBoundFn: (EntityHistoryMoment historyMoment, _) => historyMoment.endTime ?? DateTime.now(), diff --git a/lib/plugins/history_chart/history_control_widget.dart b/lib/plugins/history_chart/history_control_widget.dart index 915ec2b..21ae07b 100644 --- a/lib/plugins/history_chart/history_control_widget.dart +++ b/lib/plugins/history_chart/history_control_widget.dart @@ -54,7 +54,7 @@ class HistoryControlWidget extends StatelessWidget { "${selectedStates[i] ?? '-'}", textAlign: TextAlign.right, style: Theme.of(context).textTheme.title.copyWith( - color: HAClientTheme().historyStateColor(selectedStates[i], colorIndexes[i]) + color: HAClientTheme().historyStateColor(selectedStates[i], colorIndexes[i], context) ) ) ); diff --git a/lib/plugins/history_chart/numeric_state_history_chart.dart b/lib/plugins/history_chart/numeric_state_history_chart.dart index 705deb5..a264888 100644 --- a/lib/plugins/history_chart/numeric_state_history_chart.dart +++ b/lib/plugins/history_chart/numeric_state_history_chart.dart @@ -108,7 +108,8 @@ class _NumericStateHistoryChartWidgetState extends State( id: 'State', - colorFn: (EntityHistoryMoment historyMoment, __) => HAClientTheme().chartHistoryStateColor(EntityState.on, -1), + colorFn: (EntityHistoryMoment historyMoment, __) => + HAClientTheme().chartHistoryStateColor(EntityState.on, -1, context), domainFn: (EntityHistoryMoment historyMoment, _) => historyMoment.startTime, measureFn: (EntityHistoryMoment historyMoment, _) => historyMoment.value ?? historyMoment.previousValue, data: data, diff --git a/lib/plugins/history_chart/simple_state_history_chart.dart b/lib/plugins/history_chart/simple_state_history_chart.dart index 63d0353..fa2f069 100644 --- a/lib/plugins/history_chart/simple_state_history_chart.dart +++ b/lib/plugins/history_chart/simple_state_history_chart.dart @@ -107,7 +107,8 @@ class _SimpleStateHistoryChartWidgetState extends State( id: 'State', strokeWidthPxFn: (EntityHistoryMoment historyMoment, __) => (historyMoment.id == _selectedId) ? 6.0 : 3.0, - colorFn: (EntityHistoryMoment historyMoment, __) => HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId), + colorFn: (EntityHistoryMoment historyMoment, __) => + HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId, context), domainFn: (EntityHistoryMoment historyMoment, _) => historyMoment.startTime, measureFn: (EntityHistoryMoment historyMoment, _) => 10, data: data, @@ -115,7 +116,8 @@ class _SimpleStateHistoryChartWidgetState extends State( id: 'State', radiusPxFn: (EntityHistoryMoment historyMoment, __) => (historyMoment.id == _selectedId) ? 5.0 : 3.0, - colorFn: (EntityHistoryMoment historyMoment, __) => HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId), + colorFn: (EntityHistoryMoment historyMoment, __) => + HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId, context), domainFn: (EntityHistoryMoment historyMoment, _) => historyMoment.startTime, measureFn: (EntityHistoryMoment historyMoment, _) => 10, data: data, @@ -123,7 +125,8 @@ class _SimpleStateHistoryChartWidgetState extends State( id: 'State', radiusPxFn: (EntityHistoryMoment historyMoment, __) => (historyMoment.id == _selectedId) ? 5.0 : 3.0, - colorFn: (EntityHistoryMoment historyMoment, __) => HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId), + colorFn: (EntityHistoryMoment historyMoment, __) => + HAClientTheme().chartHistoryStateColor(historyMoment.state, historyMoment.colorId, context), domainFn: (EntityHistoryMoment historyMoment, _) => historyMoment.endTime ?? DateTime.now(), measureFn: (EntityHistoryMoment historyMoment, _) => 10, data: data,