Fixup Invite Chrome

lib/widgets/cwtchlabel.dart

@@ -4,7 +4,6 @@ import '../settings.dart';
 
 // Provides a styled Label
 // Callers must provide a label text
-// TODO: Integrate this with a settings "zoom" / accessibility setting
 class CwtchLabel extends StatefulWidget {
   CwtchLabel({required this.label});
   final String label;

lib/widgets/invitationbubble.dart

@@ -8,6 +8,7 @@ import 'package:intl/intl.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import '../settings.dart';
+import 'messagebubbledecorations.dart';
 
 // Like MessageBubble but for displaying chat overlay 100/101 invitations
 // Offers the user an accept/reject button if they don't have a matching contact already
@@ -52,48 +53,14 @@ class InvitationBubbleState extends State<InvitationBubble> {
             style: TextStyle(fontSize: 9.0, color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeTextColor() : Provider.of<Settings>(context).theme.messageFromOtherTextColor())));
 
     // todo: translations
-    var messageStr = "";
-    if (fromMe) {
-      //todo: get group name?
-      messageStr = "You sent an invitation for " + (isGroup ? "a group" : Provider.of<MessageState>(context).message ?? "");
-    } else {
-      String joinGroup = AppLocalizations.of(context)!.inviteToGroup;
-      messageStr = (isGroup ? joinGroup + (Provider.of<MessageState>(context).inviteNick ?? "") : "This is a contact suggestion for:") + "\n" + (Provider.of<MessageState>(context).inviteTarget ?? "");
-    }
-    var wdgMessage = Center(
-        widthFactor: 1,
-        child: SelectableText(
-          messageStr + '\u202F',
-          key: Key(myKey),
-          focusNode: _focus,
-          style: TextStyle(
-            color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeTextColor() : Provider.of<Settings>(context).theme.messageFromOtherTextColor(),
-          ),
-          textAlign: TextAlign.left,
-          textWidthBasis: TextWidthBasis.longestLine,
-        ));
+    var wdgMessage = fromMe
+        ? senderInviteChrome("You sent an invitation for", isGroup ? "a group" : Provider.of<MessageState>(context).message, myKey)
+        : inviteChrome(isGroup ? AppLocalizations.of(context)!.inviteToGroup : "This is a contact suggestion for:", Provider.of<MessageState>(context).inviteNick,
+            Provider.of<MessageState>(context).inviteTarget, myKey);
 
     Widget wdgDecorations;
     if (fromMe) {
-      wdgDecorations = Center(
-          widthFactor: 1.0,
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Text(prettyDate,
-                  style: TextStyle(fontSize: 9.0, color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeTextColor() : Provider.of<Settings>(context).theme.messageFromOtherTextColor()),
-                  textAlign: fromMe ? TextAlign.right : TextAlign.left),
-              !fromMe
-                  ? SizedBox(width: 1, height: 1)
-                  : Padding(
-                      padding: EdgeInsets.all(1.0),
-                      child: Provider.of<MessageState>(context).ackd == true
-                          ? Icon(Icons.check_circle_outline, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)
-                          : (Provider.of<MessageState>(context).error == true
-                              ? Icon(Icons.error_outline, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)
-                              : Icon(Icons.hourglass_bottom_outlined, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)))
-            ],
-          ));
+      wdgDecorations = MessageBubbleDecoration(ackd: Provider.of<MessageState>(context).ackd, errored: Provider.of<MessageState>(context).error, fromMe: fromMe, prettyDate: prettyDate);
     } else if (isAccepted) {
       wdgDecorations = Text("Accepted!");
     } else if (this.rejected) {
@@ -158,4 +125,58 @@ class InvitationBubbleState extends State<InvitationBubble> {
       Provider.of<FlwtchState>(context, listen: false).cwtch.ImportBundle(profileOnion, Provider.of<MessageState>(context, listen: false).message);
     }
   }
+
+  // Construct an invite chrome for the sender
+  Widget senderInviteChrome(String chrome, String targetName, String myKey) {
+    return Center(
+        widthFactor: 1,
+        child: Row(children: [
+          SelectableText(
+            chrome,
+            key: Key(myKey),
+            focusNode: _focus,
+            style: TextStyle(
+              color: Provider.of<Settings>(context).theme.messageFromMeTextColor(),
+            ),
+            textAlign: TextAlign.left,
+            textWidthBasis: TextWidthBasis.longestLine,
+          ),
+          SelectableText(
+            targetName + '\u202F',
+            key: Key(myKey),
+            focusNode: _focus,
+            style: TextStyle(
+              color: Provider.of<Settings>(context).theme.messageFromMeTextColor(),
+            ),
+            textAlign: TextAlign.left,
+            textWidthBasis: TextWidthBasis.longestLine,
+          )
+        ]));
+  }
+
+  // Construct an invite chrome
+  Widget inviteChrome(String chrome, String targetName, String targetId, String myKey) {
+    return Center(
+        widthFactor: 1,
+        child: Row(children: [
+          SelectableText(
+            chrome,
+            key: Key(myKey),
+            focusNode: _focus,
+            style: TextStyle(
+              color: Provider.of<Settings>(context).theme.messageFromOtherTextColor(),
+            ),
+            textAlign: TextAlign.left,
+            textWidthBasis: TextWidthBasis.longestLine,
+          ),
+          SelectableText(
+            targetName,
+            key: Key(myKey),
+            focusNode: _focus,
+            style: TextStyle(color: Provider.of<Settings>(context).theme.messageFromOtherTextColor()),
+            textAlign: TextAlign.left,
+            textWidthBasis: TextWidthBasis.longestLine,
+          )
+        ]));
+  }
 }

lib/widgets/messagebubble.dart

@@ -5,6 +5,7 @@ import '../model.dart';
 import 'package:intl/intl.dart';
 
 import '../settings.dart';
+import 'messagebubbledecorations.dart';
 
 class MessageBubble extends StatefulWidget {
   @override
@@ -51,28 +52,7 @@ class MessageBubbleState extends State<MessageBubble> {
       textWidthBasis: TextWidthBasis.longestLine,
     );
 
-    var wdgDecorations = Center(
-        widthFactor: 1.0,
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Text(prettyDate,
-                style: TextStyle(
-                  fontSize: 9.0,
-                  color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeTextColor() : Provider.of<Settings>(context).theme.messageFromOtherTextColor(),
-                ),
-                textAlign: fromMe ? TextAlign.right : TextAlign.left),
-            !fromMe
-                ? SizedBox(width: 1, height: 1)
-                : Padding(
-                    padding: EdgeInsets.all(1.0),
-                    child: Provider.of<MessageState>(context).ackd == true
-                        ? Icon(Icons.check_circle_outline, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)
-                        : (Provider.of<MessageState>(context).error == true
-                            ? Icon(Icons.error_outline, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)
-                            : Icon(Icons.hourglass_bottom_outlined, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)))
-          ],
-        ));
+    var wdgDecorations = MessageBubbleDecoration(ackd: Provider.of<MessageState>(context).ackd, errored: Provider.of<MessageState>(context).error, fromMe: fromMe, prettyDate: prettyDate);
 
     var error = Provider.of<MessageState>(context).error;
 

lib/widgets/messagebubbledecorations.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:provider/provider.dart';
+import '../settings.dart';
+
+// Provides message decorations (acks/errors/dates etc.) for generic message bubble overlays (chats, invites etc.)
+class MessageBubbleDecoration extends StatefulWidget {
+  MessageBubbleDecoration({required this.ackd, required this.errored, required this.prettyDate, required this.fromMe});
+  final String prettyDate;
+  final bool fromMe;
+  final bool ackd;
+  final bool errored;
+
+  @override
+  _MessageBubbleDecoration createState() => _MessageBubbleDecoration();
+}
+
+class _MessageBubbleDecoration extends State<MessageBubbleDecoration> {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+        widthFactor: 1.0,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(widget.prettyDate,
+                style:
+                    TextStyle(fontSize: 9.0, color: widget.fromMe ? Provider.of<Settings>(context).theme.messageFromMeTextColor() : Provider.of<Settings>(context).theme.messageFromOtherTextColor()),
+                textAlign: widget.fromMe ? TextAlign.right : TextAlign.left),
+            !widget.fromMe
+                ? SizedBox(width: 1, height: 1)
+                : Padding(
+                    padding: EdgeInsets.all(1.0),
+                    child: widget.ackd == true
+                        ? Icon(Icons.check_circle_outline, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)
+                        : (widget.errored == true
+                            ? Icon(Icons.error_outline, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)
+                            : Icon(Icons.hourglass_bottom_outlined, color: Provider.of<Settings>(context).theme.messageFromMeTextColor(), size: 16)))
+          ],
+        ));
+    ;
+  }
+}