diff --git a/flutter/lib/common.dart b/flutter/lib/common.dart index 4f407b59b9a1..ca8c046d0984 100644 --- a/flutter/lib/common.dart +++ b/flutter/lib/common.dart @@ -102,6 +102,7 @@ class ColorThemeExtension extends ThemeExtension { required this.drag_indicator, required this.shadow, required this.errorBannerBg, + required this.me, }); final Color? border; @@ -110,6 +111,7 @@ class ColorThemeExtension extends ThemeExtension { final Color? drag_indicator; final Color? shadow; final Color? errorBannerBg; + final Color? me; static final light = ColorThemeExtension( border: Color(0xFFCCCCCC), @@ -118,6 +120,7 @@ class ColorThemeExtension extends ThemeExtension { drag_indicator: Colors.grey[800], shadow: Colors.black, errorBannerBg: Color(0xFFFDEEEB), + me: Colors.green, ); static final dark = ColorThemeExtension( @@ -127,6 +130,7 @@ class ColorThemeExtension extends ThemeExtension { drag_indicator: Colors.grey, shadow: Colors.grey, errorBannerBg: Color(0xFF470F2D), + me: Colors.greenAccent, ); @override @@ -137,6 +141,7 @@ class ColorThemeExtension extends ThemeExtension { Color? drag_indicator, Color? shadow, Color? errorBannerBg, + Color? me, }) { return ColorThemeExtension( border: border ?? this.border, @@ -145,6 +150,7 @@ class ColorThemeExtension extends ThemeExtension { drag_indicator: drag_indicator ?? this.drag_indicator, shadow: shadow ?? this.shadow, errorBannerBg: errorBannerBg ?? this.errorBannerBg, + me: me ?? this.me, ); } @@ -161,6 +167,7 @@ class ColorThemeExtension extends ThemeExtension { drag_indicator: Color.lerp(drag_indicator, other.drag_indicator, t), shadow: Color.lerp(shadow, other.shadow, t), errorBannerBg: Color.lerp(shadow, other.errorBannerBg, t), + me: Color.lerp(shadow, other.me, t), ); } } diff --git a/flutter/lib/common/widgets/my_group.dart b/flutter/lib/common/widgets/my_group.dart index 8cd997be3ea8..18b03862374a 100644 --- a/flutter/lib/common/widgets/my_group.dart +++ b/flutter/lib/common/widgets/my_group.dart @@ -182,6 +182,7 @@ class _MyGroupState extends State { () { bool selected = selectedUser.value == username; final isMe = username == gFFI.userModel.userName.value; + final colorMe = MyTheme.color(context).me!; return Container( decoration: BoxDecoration( color: selected ? MyTheme.color(context).highlight : null, @@ -193,9 +194,42 @@ class _MyGroupState extends State { child: Container( child: Row( children: [ - Icon(Icons.person_rounded, color: Colors.grey, size: 16) - .marginOnly(right: 4), - Expanded(child: Text(isMe ? translate('Me') : username)), + Container( + width: 20, + height: 20, + decoration: BoxDecoration( + color: str2color(username, 0xAF), + shape: BoxShape.circle, + ), + child: Align( + alignment: Alignment.center, + child: Center( + child: Text( + username.characters.first.toUpperCase(), + style: TextStyle(color: Colors.white), + textAlign: TextAlign.center, + ), + ), + ), + ).marginOnly(right: 4), + if (isMe) Flexible(child: Text(username)), + if (isMe) + Flexible( + child: Container( + margin: EdgeInsets.only(left: 5), + padding: EdgeInsets.symmetric(horizontal: 3, vertical: 1), + decoration: BoxDecoration( + color: colorMe.withAlpha(20), + borderRadius: BorderRadius.all(Radius.circular(2)), + border: Border.all(color: colorMe.withAlpha(100))), + child: Text( + translate('Me'), + style: TextStyle( + color: colorMe.withAlpha(200), fontSize: 12), + ), + ), + ), + if (!isMe) Expanded(child: Text(username)), ], ).paddingSymmetric(vertical: 4), ),