Merge pull request #164 from pangeachat/usability

Usability

assets/l10n/intl_en.arb

@@ -2123,9 +2123,13 @@
         "placeholders": {}
     },
     "writeAMessage": "Write a message…",
-    "@writeAMessage": {
+    "writeAMessageFlag": "Write a message in {l1flag} or {l2flag}…",
+    "@writeAMessageFlag": {
         "type": "text",
-        "placeholders": {}
+        "placeholders": {
+            "l1flag": {},
+            "l2flag": {}
+        }
     },
     "yes": "Yes",
     "@yes": {
@@ -3989,5 +3993,6 @@
             "unread": {}
         }
     },
-    "messageAnalytics": "Message Analytics"
+    "messageAnalytics": "Message Analytics",
+    "noPaymentInfo": "No payment info necessary!"
 }

lib/pages/chat/chat_input_row.dart

@@ -27,6 +27,11 @@ class ChatInputRow extends StatelessWidget {
     const height = 48.0;
 
     // #Pangea
+    final activel1 =
+        controller.pangeaController.languageController.activeL1Model();
+    final activel2 =
+        controller.pangeaController.languageController.activeL2Model();
+
     return Column(
       children: [
         ITBar(
@@ -325,7 +330,16 @@ class ChatInputRow extends StatelessWidget {
                             bottom: 6.0,
                             top: 3.0,
                           ),
-                          hintText: L10n.of(context)!.writeAMessage,
+                          hintText: activel1 != null && activel2 != null
+                              ? L10n.of(context)!.writeAMessageFlag(
+                                  activel1.languageEmoji ??
+                                      activel1.getDisplayName(context) ??
+                                      activel1.langCode,
+                                  activel2.languageEmoji ??
+                                      activel2.getDisplayName(context) ??
+                                      activel2.langCode,
+                                )
+                              : L10n.of(context)!.writeAMessage,
                           hintMaxLines: 1,
                           border: InputBorder.none,
                           enabledBorder: InputBorder.none,

lib/pages/chat_list/client_chooser_button.dart

@@ -297,22 +297,21 @@ class ClientChooserButton extends StatelessWidget {
           //   onKeysPressed: () => _previousAccount(matrix, context),
           //   child: const SizedBox.shrink(),
           // ),
-          // Pangea#
-          PopupMenuButton<Object>(
-            onSelected: (o) => _clientSelected(o, context),
-            itemBuilder: _bundleMenuItems,
-            // #Pangea
+          ClipRRect(
+            borderRadius: BorderRadius.circular(16),
             child: Material(
-              borderRadius: const BorderRadius.only(
-                bottomLeft: Radius.circular(12),
-                bottomRight: Radius.circular(12),
-              ),
-              clipBehavior: Clip.hardEdge,
-              child: ListTile(
-                tileColor: Theme.of(context).scaffoldBackgroundColor,
-                hoverColor: Theme.of(context).colorScheme.onSurfaceVariant,
-                leading: const Icon(Icons.settings_outlined),
-                title: Text(L10n.of(context)!.mainMenu),
+              color: Colors.transparent,
+              child:
+                  // Pangea#
+                  PopupMenuButton<Object>(
+                onSelected: (o) => _clientSelected(o, context),
+                itemBuilder: _bundleMenuItems,
+                // #Pangea
+                child: ListTile(
+                  mouseCursor: SystemMouseCursors.click,
+                  leading: const Icon(Icons.settings_outlined),
+                  title: Text(L10n.of(context)!.mainMenu),
+                ),
               ),
             ),
             // child: Material(

lib/pangea/choreographer/controllers/choreographer.dart

@@ -75,7 +75,7 @@ class Choreographer {
       OverlayUtil.showPositionedCard(
         context: context,
         cardToShow: const PaywallCard(),
-        cardSize: const Size(325, 375),
+        cardSize: const Size(325, 325),
         transformTargetId: inputTransformTargetKey,
       );
       return;

lib/pangea/controllers/language_controller.dart

@@ -1,17 +1,16 @@
 import 'dart:developer';
 
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-
-import 'package:matrix/matrix.dart';
-import 'package:sentry_flutter/sentry_flutter.dart';
-
 import 'package:fluffychat/pangea/constants/language_keys.dart';
 import 'package:fluffychat/pangea/controllers/language_list_controller.dart';
 import 'package:fluffychat/pangea/controllers/pangea_controller.dart';
 import 'package:fluffychat/pangea/extensions/pangea_room_extension.dart';
 import 'package:fluffychat/pangea/models/class_model.dart';
 import 'package:fluffychat/pangea/models/language_model.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:matrix/matrix.dart';
+import 'package:sentry_flutter/sentry_flutter.dart';
+
 import '../widgets/user_settings/p_language_dialog.dart';
 
 class LanguageController {
@@ -31,16 +30,19 @@ class LanguageController {
       );
       return;
     }
-    if (_userL1Code == null ||
-        _userL2Code == null ||
-        _userL1Code!.isEmpty ||
-        _userL2Code!.isEmpty ||
-        _userL1Code == LanguageKeys.unknownLanguage ||
-        _userL2Code == LanguageKeys.unknownLanguage) {
+    if (!languagesSet) {
       pLanguageDialog(dialogContext, callback);
     }
   }
 
+  bool get languagesSet =>
+      _userL1Code != null &&
+      _userL2Code != null &&
+      _userL1Code!.isNotEmpty &&
+      _userL2Code!.isNotEmpty &&
+      _userL1Code != LanguageKeys.unknownLanguage &&
+      _userL2Code != LanguageKeys.unknownLanguage;
+
   String? get _userL1Code {
     final source =
         _pangeaController.userController.userModel?.profile?.sourceLanguage;

lib/pangea/models/language_model.dart

@@ -11,6 +11,7 @@ class LanguageModel {
   final String langCode;
   final String languageFlag;
   final String displayName;
+  final String? languageEmoji;
   final bool l2;
   final bool l1;
 
@@ -20,6 +21,7 @@ class LanguageModel {
     required this.displayName,
     required this.l2,
     required this.l1,
+    this.languageEmoji,
   });
 
   factory LanguageModel.fromJson(json) {
@@ -37,6 +39,7 @@ class LanguageModel {
       ),
       l2: json["l2"] ?? code.contains("es") || code.contains("en"),
       l1: json["l1"] ?? !code.contains("es") && !code.contains("en"),
+      languageEmoji: json['language_emoji'],
     );
   }
 
@@ -46,6 +49,7 @@ class LanguageModel {
         'language_flag': languageFlag,
         'l2': l2,
         'l1': l1,
+        'language_emoji': languageEmoji,
       };
 
   // Discuss with Jordan - adding langCode field to language objects as separate from displayName
@@ -81,6 +85,7 @@ class LanguageModel {
         l1: false,
         langCode: LanguageKeys.multiLanguage,
         languageFlag: 'assets/colors.png',
+        languageEmoji: "🌎",
       );
 
   // Discuss with Jordan

lib/pangea/widgets/igc/pangea_rich_text.dart

@@ -37,7 +37,10 @@ class PangeaRichText extends StatefulWidget {
 class PangeaRichTextState extends State<PangeaRichText> {
   final PangeaController pangeaController = MatrixState.pangeaController;
   bool _fetchingRepresentation = false;
-  double get blur => _fetchingRepresentation && widget.immersionMode ? 5 : 0;
+  double get blur => (_fetchingRepresentation && widget.immersionMode) ||
+          !pangeaController.languageController.languagesSet
+      ? 5
+      : 0;
   String textSpan = "";
   PangeaRepresentation? repEvent;
 

lib/pangea/widgets/igc/pangea_text_controller.dart

@@ -51,7 +51,7 @@ class PangeaTextController extends TextEditingController {
       OverlayUtil.showPositionedCard(
         context: context,
         cardToShow: const PaywallCard(),
-        cardSize: const Size(325, 375),
+        cardSize: const Size(325, 325),
         transformTargetId: choreographer.inputTransformTargetKey,
       );
     }

lib/pangea/widgets/igc/paywall_card.dart

@@ -5,7 +5,6 @@ import 'package:fluffychat/pangea/widgets/igc/card_header.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:shimmer/shimmer.dart';
 
 class PaywallCard extends StatelessWidget {
   const PaywallCard({
@@ -31,13 +30,16 @@ class PaywallCard extends StatelessWidget {
             mainAxisSize: MainAxisSize.max,
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              const OptionsShimmer(),
-              const SizedBox(height: 15.0),
               Text(
                 L10n.of(context)!.subscriptionPopupDesc,
                 style: BotStyle.text(context),
                 textAlign: TextAlign.center,
               ),
+              Text(
+                L10n.of(context)!.noPaymentInfo,
+                style: BotStyle.text(context),
+                textAlign: TextAlign.center,
+              ),
               const SizedBox(height: 15.0),
               SizedBox(
                 width: double.infinity,
@@ -88,46 +90,3 @@ class PaywallCard extends StatelessWidget {
     );
   }
 }
-
-class OptionsShimmer extends StatelessWidget {
-  const OptionsShimmer({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Shimmer.fromColors(
-      baseColor: Theme.of(context).colorScheme.primary.withOpacity(0.5),
-      highlightColor: Theme.of(context).colorScheme.primary.withOpacity(0.1),
-      direction: ShimmerDirection.ltr,
-      child: Wrap(
-        alignment: WrapAlignment.center,
-        children: List.generate(
-          3,
-          (_) => Container(
-            margin: const EdgeInsets.all(2),
-            padding: EdgeInsets.zero,
-            child: TextButton(
-              style: ButtonStyle(
-                padding: MaterialStateProperty.all(
-                  const EdgeInsets.symmetric(horizontal: 7),
-                ),
-                backgroundColor: MaterialStateProperty.all<Color>(
-                  Theme.of(context).colorScheme.primary.withOpacity(0.1),
-                ),
-                shape: MaterialStateProperty.all(
-                  RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(10),
-                  ),
-                ),
-              ),
-              onPressed: () {},
-              child: Text(
-                "",
-                style: BotStyle.text(context),
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}