From 1849178da90306bec8c578c974ca49955f1ca17d Mon Sep 17 00:00:00 2001 From: William Jordan-Cooley Date: Sun, 6 Oct 2024 17:18:35 -0400 Subject: [PATCH] ui tweaks for subscribe card and audio card --- assets/l10n/intl_en.arb | 2 +- assets/l10n/intl_es.arb | 1 - .../controllers/igc_controller.dart | 2 +- .../widgets/it_feedback_card.dart | 10 +- .../controllers/subscription_controller.dart | 2 +- .../chat/message_speech_to_text_card.dart | 74 ++++++++------- .../toolbar_content_loading_indicator.dart | 20 ++-- lib/pangea/widgets/igc/card_error_widget.dart | 40 ++++---- lib/pangea/widgets/igc/paywall_card.dart | 95 +++++++++++-------- lib/pangea/widgets/igc/why_button.dart | 4 +- 10 files changed, 142 insertions(+), 108 deletions(-) diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index 14627f227..9bdf2ea6b 100644 --- a/assets/l10n/intl_en.arb +++ b/assets/l10n/intl_en.arb @@ -3135,7 +3135,7 @@ "prettyGood": "Pretty good! Here's what I would have said.", "letMeThink": "Hmm, let's see how you did!", "clickMessageTitle": "Need help?", - "clickMessageBody": "Click a message for language help! Click and hold to react 😀.", + "clickMessageBody": "Click a message for language tools like translation, play back and more!", "understandingMessagesTitle": "Definitions and translations!", "understandingMessagesBody": "Click underlined words for definitions. Translate with message options (upper right).", "allDone": "All done!", diff --git a/assets/l10n/intl_es.arb b/assets/l10n/intl_es.arb index 2d374f381..49421500b 100644 --- a/assets/l10n/intl_es.arb +++ b/assets/l10n/intl_es.arb @@ -4490,7 +4490,6 @@ "messageAudio": "mensaje de audio", "definitions": "definiciones", "clickMessageTitle": "¿Necesitas ayuda?", - "clickMessageBody": "¡Lame un mensaje para obtener ayuda con el idioma! Haz clic y mantén presionado para reaccionar 😀", "more": "Más", "translationTooltip": "Traducir", "audioTooltip": "Reproducir audio", diff --git a/lib/pangea/choreographer/controllers/igc_controller.dart b/lib/pangea/choreographer/controllers/igc_controller.dart index aae7104d4..4beea095f 100644 --- a/lib/pangea/choreographer/controllers/igc_controller.dart +++ b/lib/pangea/choreographer/controllers/igc_controller.dart @@ -124,7 +124,7 @@ class IgcController { ), roomId: choreographer.roomId, ), - cardSize: match.isITStart ? const Size(350, 260) : const Size(350, 400), + cardSize: match.isITStart ? const Size(350, 260) : const Size(400, 400), transformTargetId: choreographer.inputTransformTargetKey, ); } diff --git a/lib/pangea/choreographer/widgets/it_feedback_card.dart b/lib/pangea/choreographer/widgets/it_feedback_card.dart index 06f2493d1..dd72f2457 100644 --- a/lib/pangea/choreographer/widgets/it_feedback_card.dart +++ b/lib/pangea/choreographer/widgets/it_feedback_card.dart @@ -131,11 +131,11 @@ class ITFeedbackCardView extends StatelessWidget { text: controller.widget.req.chosenContinuance, botExpression: BotExpression.nonGold, ), - Text( - controller.widget.choiceFeedback, - style: BotStyle.text(context), - ), - const SizedBox(height: 20), + // Text( + // controller.widget.choiceFeedback, + // style: BotStyle.text(context), + // ), + const SizedBox(height: 10), if (controller.res == null) WhyButton( onPress: controller.handleGetExplanationButtonPress, diff --git a/lib/pangea/controllers/subscription_controller.dart b/lib/pangea/controllers/subscription_controller.dart index d90687ae1..73cf77dff 100644 --- a/lib/pangea/controllers/subscription_controller.dart +++ b/lib/pangea/controllers/subscription_controller.dart @@ -254,7 +254,7 @@ class SubscriptionController extends BaseController { !isSubscribed && (_lastDismissedPaywall == null || DateTime.now().difference(_lastDismissedPaywall!).inHours > - (24 * (_paywallBackoff ?? 1))); + (1 * (_paywallBackoff ?? 1))); } void dismissPaywall() async { diff --git a/lib/pangea/widgets/chat/message_speech_to_text_card.dart b/lib/pangea/widgets/chat/message_speech_to_text_card.dart index b80007897..012647b5a 100644 --- a/lib/pangea/widgets/chat/message_speech_to_text_card.dart +++ b/lib/pangea/widgets/chat/message_speech_to_text_card.dart @@ -5,6 +5,7 @@ import 'package:fluffychat/pangea/matrix_event_wrappers/pangea_message_event.dar import 'package:fluffychat/pangea/models/speech_to_text_models.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; import 'package:fluffychat/pangea/utils/inline_tooltip.dart'; +import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:fluffychat/pangea/widgets/chat/toolbar_content_loading_indicator.dart'; import 'package:fluffychat/pangea/widgets/common/icon_number_widget.dart'; import 'package:fluffychat/pangea/widgets/igc/card_error_widget.dart'; @@ -158,39 +159,46 @@ class MessageSpeechToTextCardState extends State { final int total = words * accuracy; //TODO: find better icons - return Column( - children: [ - RichText( - text: _buildTranscriptText(context), - ), - const SizedBox(height: 16), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - // IconNumberWidget( - // icon: Icons.abc, - // number: (selectedToken == null ? words : 1).toString(), - // toolTip: L10n.of(context)!.words, - // ), - IconNumberWidget( - icon: Symbols.target, - number: - "${selectedToken?.confidence ?? speechToTextResponse!.transcript.confidence}%", - toolTip: L10n.of(context)!.accuracy, - ), - IconNumberWidget( - icon: Icons.speed, - number: - wordsPerMinuteString != null ? "$wordsPerMinuteString" : "??", - toolTip: L10n.of(context)!.wordsPerMinute, - ), - ], - ), - InlineTooltip( - instructionsEnum: InstructionsEnum.speechToText, - onClose: () => setState(() => {}), - ), - ], + return Container( + padding: const EdgeInsets.all(8), + constraints: const BoxConstraints(minHeight: minCardHeight), + alignment: Alignment.center, + child: Column( + children: [ + const SizedBox(height: 8), + RichText( + text: _buildTranscriptText(context), + ), + const SizedBox(height: 16), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + // IconNumberWidget( + // icon: Icons.abc, + // number: (selectedToken == null ? words : 1).toString(), + // toolTip: L10n.of(context)!.words, + // ), + IconNumberWidget( + icon: Symbols.target, + number: + "${selectedToken?.confidence ?? speechToTextResponse!.transcript.confidence}%", + toolTip: L10n.of(context)!.accuracy, + ), + IconNumberWidget( + icon: Icons.speed, + number: wordsPerMinuteString != null + ? "$wordsPerMinuteString" + : "??", + toolTip: L10n.of(context)!.wordsPerMinute, + ), + ], + ), + InlineTooltip( + instructionsEnum: InstructionsEnum.speechToText, + onClose: () => setState(() => {}), + ), + ], + ), ); } } diff --git a/lib/pangea/widgets/chat/toolbar_content_loading_indicator.dart b/lib/pangea/widgets/chat/toolbar_content_loading_indicator.dart index 9edc9971d..f61496013 100644 --- a/lib/pangea/widgets/chat/toolbar_content_loading_indicator.dart +++ b/lib/pangea/widgets/chat/toolbar_content_loading_indicator.dart @@ -1,3 +1,4 @@ +import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:flutter/material.dart'; class ToolbarContentLoadingIndicator extends StatelessWidget { @@ -7,13 +8,18 @@ class ToolbarContentLoadingIndicator extends StatelessWidget { @override Widget build(BuildContext context) { - return Center( - child: SizedBox( - height: 14, - width: 14, - child: CircularProgressIndicator( - strokeWidth: 2.0, - color: Theme.of(context).colorScheme.primary, + return Container( + padding: const EdgeInsets.all(8), + constraints: const BoxConstraints(minHeight: minCardHeight), + alignment: Alignment.center, + child: Center( + child: SizedBox( + height: 14, + width: 14, + child: CircularProgressIndicator( + strokeWidth: 2.0, + color: Theme.of(context).colorScheme.primary, + ), ), ), ); diff --git a/lib/pangea/widgets/igc/card_error_widget.dart b/lib/pangea/widgets/igc/card_error_widget.dart index 7b3385c68..3f08f6277 100644 --- a/lib/pangea/widgets/igc/card_error_widget.dart +++ b/lib/pangea/widgets/igc/card_error_widget.dart @@ -1,6 +1,7 @@ import 'package:fluffychat/pangea/choreographer/controllers/choreographer.dart'; import 'package:fluffychat/pangea/utils/bot_style.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; +import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:fluffychat/pangea/widgets/common/bot_face_svg.dart'; import 'package:fluffychat/pangea/widgets/igc/card_header.dart'; import 'package:flutter/material.dart'; @@ -20,25 +21,30 @@ class CardErrorWidget extends StatelessWidget { Widget build(BuildContext context) { final ErrorCopy errorCopy = ErrorCopy(context, error); - return SingleChildScrollView( - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - CardHeader( - text: errorCopy.title, - botExpression: BotExpression.addled, - onClose: () => choreographer?.onMatchError( - cursorOffset: offset, + return Container( + padding: const EdgeInsets.all(8), + constraints: const BoxConstraints(minHeight: minCardHeight), + alignment: Alignment.center, + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + CardHeader( + text: errorCopy.title, + botExpression: BotExpression.addled, + onClose: () => choreographer?.onMatchError( + cursorOffset: offset, + ), ), - ), - const SizedBox(height: 10.0), - Center( - child: Text( - errorCopy.body, - style: BotStyle.text(context), + const SizedBox(height: 10.0), + Center( + child: Text( + errorCopy.body, + style: BotStyle.text(context), + ), ), - ), - ], + ], + ), ), ); } diff --git a/lib/pangea/widgets/igc/paywall_card.dart b/lib/pangea/widgets/igc/paywall_card.dart index 78f7b6985..a2c35ff86 100644 --- a/lib/pangea/widgets/igc/paywall_card.dart +++ b/lib/pangea/widgets/igc/paywall_card.dart @@ -21,69 +21,84 @@ class PaywallCard extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ CardHeader( - text: L10n.of(context)!.subscriptionPopupTitle, + text: L10n.of(context)!.clickMessageTitle, botExpression: BotExpression.addled, + onClose: () { + MatrixState.pangeaController.subscriptionController + .dismissPaywall(); + }, ), Padding( - padding: const EdgeInsets.all(17), + padding: const EdgeInsets.all(8), child: Column( mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Text( - L10n.of(context)!.subscriptionPopupDesc, + L10n.of(context)!.subscribedToUnlockTools, style: BotStyle.text(context), textAlign: TextAlign.center, ), - if (inTrialWindow) - Text( - L10n.of(context)!.noPaymentInfo, - style: BotStyle.text(context), - textAlign: TextAlign.center, + // if (inTrialWindow) + // Text( + // L10n.of(context)!.noPaymentInfo, + // style: BotStyle.text(context), + // textAlign: TextAlign.center, + // ), + if (inTrialWindow) ...[ + const SizedBox(height: 10), + SizedBox( + width: double.infinity, + child: TextButton( + onPressed: () { + MatrixState.pangeaController.subscriptionController + .activateNewUserTrial(); + MatrixState.pAnyState.closeOverlay(); + }, + style: ButtonStyle( + backgroundColor: WidgetStateProperty.all( + (AppConfig.primaryColor).withOpacity(0.1), + ), + ), + child: Text(L10n.of(context)!.activateTrial), + ), ), - const SizedBox(height: 15.0), + ], + const SizedBox(height: 10), SizedBox( width: double.infinity, child: TextButton( onPressed: () { - inTrialWindow - ? MatrixState.pangeaController.subscriptionController - .activateNewUserTrial() - : MatrixState.pangeaController.subscriptionController - .showPaywall(context); - MatrixState.pAnyState.closeOverlay(); + MatrixState.pangeaController.subscriptionController + .showPaywall(context); }, style: ButtonStyle( backgroundColor: WidgetStateProperty.all( (AppConfig.primaryColor).withOpacity(0.1), ), ), - child: Text( - inTrialWindow - ? L10n.of(context)!.activateTrial - : L10n.of(context)!.seeOptions, - ), - ), - ), - const SizedBox(height: 5.0), - SizedBox( - width: double.infinity, - child: TextButton( - style: ButtonStyle( - backgroundColor: WidgetStateProperty.all( - AppConfig.primaryColor.withOpacity(0.1), - ), - ), - onPressed: () { - MatrixState.pangeaController.subscriptionController - .dismissPaywall(); - MatrixState.pAnyState.closeOverlay(); - }, - child: Center( - child: Text(L10n.of(context)!.continuedWithoutSubscription), - ), + child: Text(L10n.of(context)!.getAccess), ), ), + // const SizedBox(height: 5.0), + // SizedBox( + // width: double.infinity, + // child: TextButton( + // style: ButtonStyle( + // backgroundColor: WidgetStateProperty.all( + // AppConfig.primaryColor.withOpacity(0.1), + // ), + // ), + // onPressed: () { + // MatrixState.pangeaController.subscriptionController + // .dismissPaywall(); + // MatrixState.pAnyState.closeOverlay(); + // }, + // child: Center( + // child: Text(L10n.of(context)!.continuedWithoutSubscription), + // ), + // ), + // ), ], ), ), diff --git a/lib/pangea/widgets/igc/why_button.dart b/lib/pangea/widgets/igc/why_button.dart index 7cb367065..c9184f120 100644 --- a/lib/pangea/widgets/igc/why_button.dart +++ b/lib/pangea/widgets/igc/why_button.dart @@ -18,10 +18,10 @@ class WhyButton extends StatelessWidget { return TextButton( onPressed: loading ? null : onPress, style: ButtonStyle( - backgroundColor: MaterialStateProperty.all( + backgroundColor: WidgetStateProperty.all( AppConfig.primaryColor.withOpacity(0.1), ), - shape: MaterialStateProperty.all( + shape: WidgetStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), // Border radius side: const BorderSide(