show username followed by a 'Me' tag, use first letter as avatar

Signed-off-by: 21pages <[email protected]>
MrVinyla · Sep 26, 2023 · 93f2b28 · 93f2b28
1 parent e0302d1
commit 93f2b28
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/flutter/lib/common.dart b/flutter/lib/common.dart
@@ -102,6 +102,7 @@ class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {
     required this.drag_indicator,
     required this.shadow,
     required this.errorBannerBg,
+    required this.me,
   });
 
   final Color? border;
@@ -110,6 +111,7 @@ class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {
   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<ColorThemeExtension> {
     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<ColorThemeExtension> {
     drag_indicator: Colors.grey,
     shadow: Colors.grey,
     errorBannerBg: Color(0xFF470F2D),
+    me: Colors.greenAccent,
   );
 
   @override
@@ -137,6 +141,7 @@ class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {
     Color? drag_indicator,
     Color? shadow,
     Color? errorBannerBg,
+    Color? me,
   }) {
     return ColorThemeExtension(
       border: border ?? this.border,
@@ -145,6 +150,7 @@ class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {
       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<ColorThemeExtension> {
       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
@@ -182,6 +182,7 @@ class _MyGroupState extends State<MyGroup> {
       () {
         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<MyGroup> {
           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),
           ),