WIP Themes: State colors from themes

This commit is contained in:
Yegor Vialov 2020-04-04 21:39:12 +00:00
parent d6f7096055
commit 379e1a4a7e
11 changed files with 98 additions and 58 deletions

View File

@ -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":
{

View File

@ -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)
),
);
}

View File

@ -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
),
);
}

View File

@ -33,7 +33,7 @@ class _MediaPlayerProgressBarState extends State<MediaPlayerProgressBar> {
return LinearProgressIndicator(
value: progress,
backgroundColor: Colors.black45,
valueColor: AlwaysStoppedAnimation<Color>(HAClientTheme().stateColor(EntityState.on)),
valueColor: AlwaysStoppedAnimation<Color>(HAClientTheme().getOnStateColor(context)),
);
}

View File

@ -12,7 +12,7 @@ class MediaPlayerWidget extends StatelessWidget {
Stack(
alignment: AlignmentDirectional.topEnd,
children: <Widget>[
_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),
)
],
);

View File

@ -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);
}
}
}

View File

@ -634,7 +634,7 @@ class _MainPageState extends State<MainPage> 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<MainPage> with WidgetsBindingObserver, Ticker
bottomBarChildren.add(
CollectionScaleTransition(
children: <Widget>[
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),),
],
),
);

View File

@ -156,7 +156,8 @@ class _CombinedHistoryChartWidgetState extends State<CombinedHistoryChartWidget>
result.add(
new charts.Series<EntityHistoryMoment, DateTime>(
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<CombinedHistoryChartWidget>
new charts.Series<EntityHistoryMoment, DateTime>(
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(),

View File

@ -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)
)
)
);

View File

@ -108,7 +108,8 @@ class _NumericStateHistoryChartWidgetState extends State<NumericStateHistoryChar
return [
new charts.Series<EntityHistoryMoment, DateTime>(
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,

View File

@ -107,7 +107,8 @@ class _SimpleStateHistoryChartWidgetState extends State<SimpleStateHistoryChartW
new charts.Series<EntityHistoryMoment, DateTime>(
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<SimpleStateHistoryChartW
new charts.Series<EntityHistoryMoment, DateTime>(
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<SimpleStateHistoryChartW
new charts.Series<EntityHistoryMoment, DateTime>(
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,