Fix badge entity_picture size
This commit is contained in:
Yegor Vialov
parent
9078ad81e8
commit
24d42c9597
@ -50,6 +50,147 @@ class Badges extends StatelessWidget {
|
|||||||
}
|
}
|
||||||
return Container(height: 0.0, width: 0.0,);
|
return Container(height: 0.0, width: 0.0,);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class BadgeWidget extends StatelessWidget {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final entityModel = EntityModel.of(context);
|
||||||
|
Widget badgeIcon;
|
||||||
|
String onBadgeTextValue;
|
||||||
|
Color iconColor = HAClientTheme().getBadgeColor(entityModel.entityWrapper.entity.domain);
|
||||||
|
switch (entityModel.entityWrapper.entity.domain) {
|
||||||
|
case "sun":
|
||||||
|
{
|
||||||
|
IconData iconData;
|
||||||
|
if (entityModel.entityWrapper.entity.state == "below_horizon") {
|
||||||
|
iconData = MaterialDesignIcons.getIconDataFromIconCode(0xf0dc);
|
||||||
|
} else {
|
||||||
|
iconData = MaterialDesignIcons.getIconDataFromIconCode(0xf5a8);
|
||||||
|
}
|
||||||
|
badgeIcon = Padding(
|
||||||
|
padding: EdgeInsets.all(10),
|
||||||
|
child: Icon(
|
||||||
|
iconData,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "camera":
|
||||||
|
case "media_player":
|
||||||
|
case "binary_sensor":
|
||||||
|
{
|
||||||
|
badgeIcon = EntityIcon(
|
||||||
|
imagePadding: EdgeInsets.all(0.0),
|
||||||
|
iconPadding: EdgeInsets.all(10),
|
||||||
|
color: Theme.of(context).textTheme.body2.color
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "device_tracker":
|
||||||
|
case "person":
|
||||||
|
{
|
||||||
|
badgeIcon = EntityIcon(
|
||||||
|
imagePadding: EdgeInsets.all(0.0),
|
||||||
|
iconPadding: EdgeInsets.all(10),
|
||||||
|
color: Theme.of(context).textTheme.body2.color
|
||||||
|
);
|
||||||
|
onBadgeTextValue = entityModel.entityWrapper.entity.displayState;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
{
|
||||||
|
onBadgeTextValue = entityModel.entityWrapper.unitOfMeasurement;
|
||||||
|
badgeIcon = Padding(
|
||||||
|
padding: EdgeInsets.all(4),
|
||||||
|
child: Text(
|
||||||
|
"${entityModel.entityWrapper.entity.displayState}",
|
||||||
|
overflow: TextOverflow.fade,
|
||||||
|
softWrap: false,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: Theme.of(context).textTheme.body1
|
||||||
|
)
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Widget onBadgeText;
|
||||||
|
if (onBadgeTextValue == null || onBadgeTextValue.length == 0) {
|
||||||
|
onBadgeText = Container(width: 0.0, height: 0.0);
|
||||||
|
} else {
|
||||||
|
onBadgeText = Container(
|
||||||
|
constraints: BoxConstraints(maxWidth: 50),
|
||||||
|
padding: EdgeInsets.fromLTRB(6.0, 2.0, 6.0, 2.0),
|
||||||
|
child: Text("$onBadgeTextValue",
|
||||||
|
style: Theme.of(context).textTheme.overline.copyWith(
|
||||||
|
color: HAClientTheme().getOnBadgeTextColor()
|
||||||
|
),
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
softWrap: false,
|
||||||
|
overflow: TextOverflow.ellipsis
|
||||||
|
),
|
||||||
|
decoration: new BoxDecoration(
|
||||||
|
color: iconColor,
|
||||||
|
borderRadius: BorderRadius.circular(9.0),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return GestureDetector(
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
Stack(
|
||||||
|
overflow: Overflow.visible,
|
||||||
|
alignment: Alignment.center,
|
||||||
|
children: <Widget>[
|
||||||
|
Container(
|
||||||
|
width: 45,
|
||||||
|
height: 45,
|
||||||
|
decoration: new BoxDecoration(
|
||||||
|
// Circle shape
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
color: Theme.of(context).cardColor,
|
||||||
|
// The border you want
|
||||||
|
border: Border.all(
|
||||||
|
width: 2.0,
|
||||||
|
color: iconColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(
|
||||||
|
width: 41,
|
||||||
|
height: 41,
|
||||||
|
child: FittedBox(
|
||||||
|
fit: BoxFit.contain,
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: badgeIcon,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
bottom: -6,
|
||||||
|
child: onBadgeText
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
constraints: BoxConstraints(maxWidth: 45),
|
||||||
|
padding: EdgeInsets.only(top: 10),
|
||||||
|
child: Text(
|
||||||
|
"${entityModel.entityWrapper.displayName}",
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: Theme.of(context).textTheme.caption.copyWith(
|
||||||
|
fontSize: 10
|
||||||
|
),
|
||||||
|
softWrap: true,
|
||||||
|
maxLines: 3,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
onTap: () => entityModel.entityWrapper.handleTap(),
|
||||||
|
onDoubleTap: () => entityModel.entityWrapper.handleDoubleTap(),
|
||||||
|
onLongPress: () => entityModel.entityWrapper.handleHold(),
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,134 +0,0 @@
|
|||||||
part of '../main.dart';
|
|
||||||
|
|
||||||
class BadgeWidget extends StatelessWidget {
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
final entityModel = EntityModel.of(context);
|
|
||||||
Widget badgeIcon;
|
|
||||||
String onBadgeTextValue;
|
|
||||||
Color iconColor = HAClientTheme().getBadgeColor(entityModel.entityWrapper.entity.domain);
|
|
||||||
switch (entityModel.entityWrapper.entity.domain) {
|
|
||||||
case "sun":
|
|
||||||
{
|
|
||||||
badgeIcon = entityModel.entityWrapper.entity.state == "below_horizon"
|
|
||||||
? Icon(
|
|
||||||
MaterialDesignIcons.getIconDataFromIconCode(0xf0dc),
|
|
||||||
)
|
|
||||||
: Icon(
|
|
||||||
MaterialDesignIcons.getIconDataFromIconCode(0xf5a8),
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "camera":
|
|
||||||
case "media_player":
|
|
||||||
case "binary_sensor":
|
|
||||||
{
|
|
||||||
badgeIcon = EntityIcon(
|
|
||||||
padding: EdgeInsets.all(0.0),
|
|
||||||
color: Theme.of(context).textTheme.body1.color
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "device_tracker":
|
|
||||||
case "person":
|
|
||||||
{
|
|
||||||
badgeIcon = EntityIcon(
|
|
||||||
padding: EdgeInsets.all(0.0),
|
|
||||||
color: Theme.of(context).textTheme.body1.color
|
|
||||||
);
|
|
||||||
onBadgeTextValue = entityModel.entityWrapper.entity.displayState;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
{
|
|
||||||
onBadgeTextValue = entityModel.entityWrapper.unitOfMeasurement;
|
|
||||||
badgeIcon = Text(
|
|
||||||
"${entityModel.entityWrapper.entity.displayState}",
|
|
||||||
overflow: TextOverflow.fade,
|
|
||||||
softWrap: false,
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
style: Theme.of(context).textTheme.body1
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Widget onBadgeText;
|
|
||||||
if (onBadgeTextValue == null || onBadgeTextValue.length == 0) {
|
|
||||||
onBadgeText = Container(width: 0.0, height: 0.0);
|
|
||||||
} else {
|
|
||||||
onBadgeText = Container(
|
|
||||||
constraints: BoxConstraints(maxWidth: 50),
|
|
||||||
padding: EdgeInsets.fromLTRB(6.0, 2.0, 6.0, 2.0),
|
|
||||||
child: Text("$onBadgeTextValue",
|
|
||||||
style: Theme.of(context).textTheme.overline.copyWith(
|
|
||||||
color: HAClientTheme().getOnBadgeTextColor()
|
|
||||||
),
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
softWrap: false,
|
|
||||||
overflow: TextOverflow.ellipsis
|
|
||||||
),
|
|
||||||
decoration: new BoxDecoration(
|
|
||||||
color: iconColor,
|
|
||||||
borderRadius: BorderRadius.circular(9.0),
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return GestureDetector(
|
|
||||||
child: Column(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: <Widget>[
|
|
||||||
Stack(
|
|
||||||
overflow: Overflow.visible,
|
|
||||||
alignment: Alignment.center,
|
|
||||||
children: <Widget>[
|
|
||||||
Container(
|
|
||||||
width: 45,
|
|
||||||
height: 45,
|
|
||||||
decoration: new BoxDecoration(
|
|
||||||
// Circle shape
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
color: Theme.of(context).cardColor,
|
|
||||||
// The border you want
|
|
||||||
border: Border.all(
|
|
||||||
width: 2.0,
|
|
||||||
color: iconColor,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(
|
|
||||||
width: 38,
|
|
||||||
height: 26,
|
|
||||||
child: FittedBox(
|
|
||||||
fit: BoxFit.contain,
|
|
||||||
alignment: Alignment.center,
|
|
||||||
child: badgeIcon,
|
|
||||||
)
|
|
||||||
),
|
|
||||||
Positioned(
|
|
||||||
bottom: -6,
|
|
||||||
child: onBadgeText
|
|
||||||
)
|
|
||||||
],
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
constraints: BoxConstraints(maxWidth: 45),
|
|
||||||
padding: EdgeInsets.only(top: 10),
|
|
||||||
child: Text(
|
|
||||||
"${entityModel.entityWrapper.displayName}",
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
style: Theme.of(context).textTheme.caption.copyWith(
|
|
||||||
fontSize: 10
|
|
||||||
),
|
|
||||||
softWrap: true,
|
|
||||||
maxLines: 3,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
],
|
|
||||||
),
|
|
||||||
onTap: () => entityModel.entityWrapper.handleTap(),
|
|
||||||
onDoubleTap: () => entityModel.entityWrapper.handleDoubleTap(),
|
|
||||||
onLongPress: () => entityModel.entityWrapper.handleHold(),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -3,10 +3,12 @@ part of '../main.dart';
|
|||||||
class EntityIcon extends StatelessWidget {
|
class EntityIcon extends StatelessWidget {
|
||||||
|
|
||||||
final EdgeInsetsGeometry padding;
|
final EdgeInsetsGeometry padding;
|
||||||
|
final EdgeInsetsGeometry iconPadding;
|
||||||
|
final EdgeInsetsGeometry imagePadding;
|
||||||
final double size;
|
final double size;
|
||||||
final Color color;
|
final Color color;
|
||||||
|
|
||||||
const EntityIcon({Key key, this.color, this.size: Sizes.iconSize, this.padding: const EdgeInsets.all(0.0)}) : super(key: key);
|
const EntityIcon({Key key, this.color, this.size: Sizes.iconSize, this.padding: const EdgeInsets.all(0.0), this.iconPadding, this.imagePadding}) : super(key: key);
|
||||||
|
|
||||||
int getDefaultIconByEntityId(String entityId, String deviceClass, String state) {
|
int getDefaultIconByEntityId(String entityId, String deviceClass, String state) {
|
||||||
if (entityId == null) {
|
if (entityId == null) {
|
||||||
@ -26,76 +28,6 @@ class EntityIcon extends StatelessWidget {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget buildIcon(BuildContext context, EntityWrapper data, Color color) {
|
|
||||||
Widget result;
|
|
||||||
if (data == null) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
if (data.entityPicture != null) {
|
|
||||||
result = Container(
|
|
||||||
height: size+12,
|
|
||||||
width: size+12,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
image: DecorationImage(
|
|
||||||
fit:BoxFit.cover,
|
|
||||||
image: CachedNetworkImageProvider(
|
|
||||||
"${data.entityPicture}"
|
|
||||||
),
|
|
||||||
)
|
|
||||||
),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
String iconName = data.icon;
|
|
||||||
int iconCode = 0;
|
|
||||||
if (iconName.length > 0) {
|
|
||||||
iconCode = MaterialDesignIcons.getIconCodeByIconName(iconName);
|
|
||||||
} else {
|
|
||||||
iconCode = getDefaultIconByEntityId(data.entity.entityId,
|
|
||||||
data.entity.deviceClass, data.entity.state); //
|
|
||||||
}
|
|
||||||
result = Icon(
|
|
||||||
IconData(iconCode, fontFamily: 'Material Design Icons'),
|
|
||||||
size: size,
|
|
||||||
color: color,
|
|
||||||
);
|
|
||||||
if (data.entity is LightEntity &&
|
|
||||||
(data.entity as LightEntity).supportColor &&
|
|
||||||
(data.entity as LightEntity).color != null
|
|
||||||
) {
|
|
||||||
Color lightColor = (data.entity as LightEntity).color.toColor();
|
|
||||||
if (lightColor == Colors.white) {
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
result = Stack(
|
|
||||||
children: <Widget>[
|
|
||||||
result,
|
|
||||||
Positioned(
|
|
||||||
bottom: 0,
|
|
||||||
right: 0,
|
|
||||||
child: Container(
|
|
||||||
width: size / 3,
|
|
||||||
height: size / 3,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: lightColor,
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
boxShadow: <BoxShadow>[
|
|
||||||
BoxShadow(
|
|
||||||
spreadRadius: 0,
|
|
||||||
blurRadius: 0,
|
|
||||||
offset: Offset(0.3, 0.3)
|
|
||||||
)
|
|
||||||
]
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final EntityWrapper entityWrapper = EntityModel.of(context).entityWrapper;
|
final EntityWrapper entityWrapper = EntityModel.of(context).entityWrapper;
|
||||||
@ -107,13 +39,92 @@ class EntityIcon extends StatelessWidget {
|
|||||||
} else {
|
} else {
|
||||||
iconColor = HAClientTheme().getOffStateColor(context);
|
iconColor = HAClientTheme().getOffStateColor(context);
|
||||||
}
|
}
|
||||||
|
Widget iconWidget;
|
||||||
|
bool isPicture = false;
|
||||||
|
if (entityWrapper == null) {
|
||||||
|
iconWidget = Container(
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
if (entityWrapper.entityPicture != null) {
|
||||||
|
iconWidget = Container(
|
||||||
|
height: size+12,
|
||||||
|
width: size+12,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
image: DecorationImage(
|
||||||
|
fit:BoxFit.cover,
|
||||||
|
image: CachedNetworkImageProvider(
|
||||||
|
"${entityWrapper.entityPicture}"
|
||||||
|
),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
);
|
||||||
|
isPicture = true;
|
||||||
|
} else {
|
||||||
|
String iconName = entityWrapper.icon;
|
||||||
|
int iconCode = 0;
|
||||||
|
if (iconName.length > 0) {
|
||||||
|
iconCode = MaterialDesignIcons.getIconCodeByIconName(iconName);
|
||||||
|
} else {
|
||||||
|
iconCode = getDefaultIconByEntityId(entityWrapper.entity.entityId,
|
||||||
|
entityWrapper.entity.deviceClass, entityWrapper.entity.state); //
|
||||||
|
}
|
||||||
|
if (entityWrapper.entity is LightEntity &&
|
||||||
|
(entityWrapper.entity as LightEntity).supportColor &&
|
||||||
|
(entityWrapper.entity as LightEntity).color != null &&
|
||||||
|
(entityWrapper.entity as LightEntity).color.toColor() != Colors.white
|
||||||
|
) {
|
||||||
|
Color lightColor = (entityWrapper.entity as LightEntity).color.toColor();
|
||||||
|
iconWidget = Stack(
|
||||||
|
children: <Widget>[
|
||||||
|
Icon(
|
||||||
|
IconData(iconCode, fontFamily: 'Material Design Icons'),
|
||||||
|
size: size,
|
||||||
|
color: iconColor,
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
bottom: 0,
|
||||||
|
right: 0,
|
||||||
|
child: Container(
|
||||||
|
width: size / 3,
|
||||||
|
height: size / 3,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: lightColor,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
boxShadow: <BoxShadow>[
|
||||||
|
BoxShadow(
|
||||||
|
spreadRadius: 0,
|
||||||
|
blurRadius: 0,
|
||||||
|
offset: Offset(0.3, 0.3)
|
||||||
|
)
|
||||||
|
]
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
iconWidget = Icon(
|
||||||
|
IconData(iconCode, fontFamily: 'Material Design Icons'),
|
||||||
|
size: size,
|
||||||
|
color: iconColor,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EdgeInsetsGeometry computedPadding;
|
||||||
|
if (isPicture && imagePadding != null) {
|
||||||
|
computedPadding = imagePadding;
|
||||||
|
} else if (!isPicture && iconPadding != null) {
|
||||||
|
computedPadding = iconPadding;
|
||||||
|
} else {
|
||||||
|
computedPadding = padding;
|
||||||
|
}
|
||||||
return Padding(
|
return Padding(
|
||||||
padding: padding,
|
padding: computedPadding,
|
||||||
child: buildIcon(
|
child: iconWidget,
|
||||||
context,
|
|
||||||
entityWrapper,
|
|
||||||
iconColor
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -58,7 +58,6 @@ part 'entities/fan/fan_entity.class.dart';
|
|||||||
part 'entities/automation/automation_entity.class.dart';
|
part 'entities/automation/automation_entity.class.dart';
|
||||||
part 'entities/camera/camera_entity.class.dart';
|
part 'entities/camera/camera_entity.class.dart';
|
||||||
part 'entities/alarm_control_panel/alarm_control_panel_entity.class.dart';
|
part 'entities/alarm_control_panel/alarm_control_panel_entity.class.dart';
|
||||||
part 'entities/badge.widget.dart';
|
|
||||||
part 'entities/entity_model.widget.dart';
|
part 'entities/entity_model.widget.dart';
|
||||||
part 'entities/default_entity_container.widget.dart';
|
part 'entities/default_entity_container.widget.dart';
|
||||||
part 'entities/missed_entity.widget.dart';
|
part 'entities/missed_entity.widget.dart';
|
||||||
|
|||||||
Reference in New Issue
Block a user