From 929e30a499f388ca3f879dae205aec181ee934b3 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Fri, 28 Jun 2024 08:54:37 -0400 Subject: [PATCH] Design and insert inline tooltip --- assets/l10n/intl_en.arb | 4 +- lib/pages/chat/chat_event_list.dart | 2 +- .../choreographer/widgets/it_bar_buttons.dart | 2 +- lib/pangea/enum/instructions_enum.dart | 68 +++++++++ lib/pangea/models/user_model.dart | 2 +- lib/pangea/utils/instructions.dart | 133 +++++++----------- .../chat/message_speech_to_text_card.dart | 11 +- lib/pangea/widgets/chat/message_toolbar.dart | 2 + lib/pangea/widgets/igc/pangea_rich_text.dart | 2 +- 9 files changed, 141 insertions(+), 85 deletions(-) create mode 100644 lib/pangea/enum/instructions_enum.dart diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index cb319c9c7..134f46d0a 100644 --- a/assets/l10n/intl_en.arb +++ b/assets/l10n/intl_en.arb @@ -4058,5 +4058,7 @@ "suggestToSpaceDesc": "Suggested spaces will appear in the chat lists for their parent spaces", "practice": "Practice", "noLanguagesSet": "No languages set", - "noActivitiesFound": "No practice activities found for this message" + "noActivitiesFound": "No practice activities found for this message", + "hintTitle": "Hint:", + "speechToTextBody": "See how well you did by looking at your Accuracy and Words Per Minute scores" } \ No newline at end of file diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart index 114aadd84..24508bb62 100644 --- a/lib/pages/chat/chat_event_list.dart +++ b/lib/pages/chat/chat_event_list.dart @@ -4,8 +4,8 @@ import 'package:fluffychat/pages/chat/events/message.dart'; import 'package:fluffychat/pages/chat/seen_by_row.dart'; import 'package:fluffychat/pages/chat/typing_indicators.dart'; import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/extensions/pangea_room_extension/pangea_room_extension.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:fluffychat/pangea/widgets/chat/locked_chat_message.dart'; import 'package:fluffychat/utils/account_config.dart'; import 'package:fluffychat/utils/adaptive_bottom_sheet.dart'; diff --git a/lib/pangea/choreographer/widgets/it_bar_buttons.dart b/lib/pangea/choreographer/widgets/it_bar_buttons.dart index e06855f26..77de39818 100644 --- a/lib/pangea/choreographer/widgets/it_bar_buttons.dart +++ b/lib/pangea/choreographer/widgets/it_bar_buttons.dart @@ -1,5 +1,5 @@ import 'package:fluffychat/pangea/controllers/pangea_controller.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/widgets/matrix.dart'; import 'package:flutter/material.dart'; diff --git a/lib/pangea/enum/instructions_enum.dart b/lib/pangea/enum/instructions_enum.dart new file mode 100644 index 000000000..8bcd3f3f9 --- /dev/null +++ b/lib/pangea/enum/instructions_enum.dart @@ -0,0 +1,68 @@ +import 'package:fluffychat/pangea/utils/bot_style.dart'; +import 'package:fluffychat/utils/platform_infos.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_gen/gen_l10n/l10n.dart'; + +enum InstructionsEnum { + itInstructions, + clickMessage, + blurMeansTranslate, + tooltipInstructions, + speechToText, +} + +extension Copy on InstructionsEnum { + String title(BuildContext context) { + switch (this) { + case InstructionsEnum.itInstructions: + return L10n.of(context)!.itInstructionsTitle; + case InstructionsEnum.clickMessage: + return L10n.of(context)!.clickMessageTitle; + case InstructionsEnum.blurMeansTranslate: + return L10n.of(context)!.blurMeansTranslateTitle; + case InstructionsEnum.tooltipInstructions: + return L10n.of(context)!.tooltipInstructionsTitle; + case InstructionsEnum.speechToText: + return L10n.of(context)!.hintTitle; + } + } + + String body(BuildContext context) { + switch (this) { + case InstructionsEnum.itInstructions: + return L10n.of(context)!.itInstructionsBody; + case InstructionsEnum.clickMessage: + return L10n.of(context)!.clickMessageBody; + case InstructionsEnum.blurMeansTranslate: + return L10n.of(context)!.blurMeansTranslateBody; + case InstructionsEnum.speechToText: + return L10n.of(context)!.speechToTextBody; + case InstructionsEnum.tooltipInstructions: + return PlatformInfos.isMobile + ? L10n.of(context)!.tooltipInstructionsMobileBody + : L10n.of(context)!.tooltipInstructionsBrowserBody; + } + } + + Widget inlineTooltip(BuildContext context) { + switch (this) { + case InstructionsEnum.speechToText: + return Column( + children: [ + Text( + title(context), + style: BotStyle.text(context), + ), + Text( + body(context), + style: BotStyle.text(context), + ), + // ), + ], + ); + default: + debugPrint('inlineTooltip not implemented for $this'); + return const SizedBox(); + } + } +} diff --git a/lib/pangea/models/user_model.dart b/lib/pangea/models/user_model.dart index f8e929a13..afe910610 100644 --- a/lib/pangea/models/user_model.dart +++ b/lib/pangea/models/user_model.dart @@ -4,8 +4,8 @@ import 'package:country_picker/country_picker.dart'; import 'package:fluffychat/pangea/constants/local.key.dart'; import 'package:fluffychat/pangea/constants/model_keys.dart'; import 'package:fluffychat/pangea/controllers/pangea_controller.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/models/space_model.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; diff --git a/lib/pangea/utils/instructions.dart b/lib/pangea/utils/instructions.dart index 4fe3ea627..a21b664a9 100644 --- a/lib/pangea/utils/instructions.dart +++ b/lib/pangea/utils/instructions.dart @@ -1,4 +1,4 @@ -import 'package:fluffychat/utils/platform_infos.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; @@ -14,24 +14,24 @@ import 'overlay.dart'; class InstructionsController { late PangeaController _pangeaController; + // We have these three methods to make sure that the instructions are not shown too much + /// Instruction popup was closed by the user final Map _instructionsClosed = {}; - /// Instructions that were shown in that session + /// Instruction popup has already been shown this session final Map _instructionsShown = {}; - /// Returns true if the instructions were turned off by the user via the toggle switch + /// Returns true if the user requested this popup not be shown again bool? toggledOff(InstructionsEnum key) => _pangeaController.pStoreService.read(key.toString()); - /// We have these three methods to make sure that the instructions are not shown too much - InstructionsController(PangeaController pangeaController) { _pangeaController = pangeaController; } - /// Returns true if the instructions were turned off by the user - /// via the toggle switch + /// Returns true if the instructions were closed + /// or turned off by the user via the toggle switch bool wereInstructionsTurnedOff(InstructionsEnum key) => toggledOff(key) ?? _instructionsClosed[key] ?? false; @@ -44,29 +44,6 @@ class InstructionsController { value, ); - // return a text widget with constainer that expands to fill a parent container - // and displays instructions text defined in the enum extension - Future getInlineTooltip( - BuildContext context, - InstructionsEnum key, - ) async { - if (wereInstructionsTurnedOff(key)) { - return const SizedBox(); - } - if (L10n.of(context) == null) { - ErrorHandler.logError( - m: "null context in ITBotButton.showCard", - s: StackTrace.current, - ); - return const SizedBox(); - } - if (_instructionsShown[key] ?? false) { - return const SizedBox(); - } - - return key.inlineTooltip(context); - } - Future showInstructionsPopup( BuildContext context, InstructionsEnum key, @@ -130,58 +107,56 @@ class InstructionsController { ), ); } -} -enum InstructionsEnum { - itInstructions, - clickMessage, - blurMeansTranslate, - tooltipInstructions, -} - -extension Copy on InstructionsEnum { - String title(BuildContext context) { - switch (this) { - case InstructionsEnum.itInstructions: - return L10n.of(context)!.itInstructionsTitle; - case InstructionsEnum.clickMessage: - return L10n.of(context)!.clickMessageTitle; - case InstructionsEnum.blurMeansTranslate: - return L10n.of(context)!.blurMeansTranslateTitle; - case InstructionsEnum.tooltipInstructions: - return L10n.of(context)!.tooltipInstructionsTitle; - } - } - - String body(BuildContext context) { - switch (this) { - case InstructionsEnum.itInstructions: - return L10n.of(context)!.itInstructionsBody; - case InstructionsEnum.clickMessage: - return L10n.of(context)!.clickMessageBody; - case InstructionsEnum.blurMeansTranslate: - return L10n.of(context)!.blurMeansTranslateBody; - case InstructionsEnum.tooltipInstructions: - return PlatformInfos.isMobile - ? L10n.of(context)!.tooltipInstructionsMobileBody - : L10n.of(context)!.tooltipInstructionsBrowserBody; + /// Returns a widget that will be added to existing widget + /// that displays hint text defined in the enum extension + Widget getInlineTooltip( + BuildContext context, + InstructionsEnum key, + Function refreshOnClose, + ) { + if (wereInstructionsTurnedOff(key)) { + // Uncomment this line to make hint viewable again + // _instructionsClosed[key] = false; + return const SizedBox(); } - } - - Widget inlineTooltip(BuildContext context) { - switch (this) { - case InstructionsEnum.itInstructions: - return Padding( - padding: const EdgeInsets.all(6.0), - child: Text( - body(context), - style: BotStyle.text(context), - ), - ); - default: - print('inlineTooltip not implemented for $this'); - return const SizedBox(); + if (L10n.of(context) == null) { + ErrorHandler.logError( + m: "null context in ITBotButton.showCard", + s: StackTrace.current, + ); + return const SizedBox(); } + return Column( + children: [ + Row( + children: [ + const Expanded( + child: Divider(), + ), + CircleAvatar( + radius: 10, + backgroundColor: + Theme.of(context).colorScheme.primary.withAlpha(50), + child: IconButton( + padding: EdgeInsets.zero, + icon: const Icon( + Icons.close_outlined, + size: 15, + ), + onPressed: () { + _instructionsClosed[key] = true; + refreshOnClose(); + }, + ), + ), + ], + ), + key.inlineTooltip(context), + const SizedBox(height: 9), + const Divider(), + ], + ); } } 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 68295789a..9f76e060a 100644 --- a/lib/pangea/widgets/chat/message_speech_to_text_card.dart +++ b/lib/pangea/widgets/chat/message_speech_to_text_card.dart @@ -1,9 +1,9 @@ import 'dart:developer'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/matrix_event_wrappers/pangea_message_event.dart'; import 'package:fluffychat/pangea/models/speech_to_text_models.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; -import 'package:fluffychat/pangea/utils/instructions.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'; @@ -65,6 +65,10 @@ class MessageSpeechToTextCardState extends State { } } + void refreshOnCloseHint() { + setState(() {}); + } + TextSpan _buildTranscriptText(BuildContext context) { final Transcript transcript = speechToTextResponse!.transcript; final List spans = []; @@ -195,6 +199,11 @@ class MessageSpeechToTextCardState extends State { ), ], ), + MatrixState.pangeaController.instructions.getInlineTooltip( + context, + InstructionsEnum.speechToText, + refreshOnCloseHint, + ), ], ); } diff --git a/lib/pangea/widgets/chat/message_toolbar.dart b/lib/pangea/widgets/chat/message_toolbar.dart index 2468d6b96..13ebd3103 100644 --- a/lib/pangea/widgets/chat/message_toolbar.dart +++ b/lib/pangea/widgets/chat/message_toolbar.dart @@ -134,6 +134,8 @@ class ToolbarDisplayController { ? Alignment.bottomLeft : Alignment.topLeft, backgroundColor: const Color.fromRGBO(0, 0, 0, 1).withAlpha(100), + closePrevOverlay: + MatrixState.pangeaController.subscriptionController.isSubscribed, ); if (MatrixState.pAnyState.entries.isNotEmpty) { diff --git a/lib/pangea/widgets/igc/pangea_rich_text.dart b/lib/pangea/widgets/igc/pangea_rich_text.dart index 05875c25c..1dd1cd16e 100644 --- a/lib/pangea/widgets/igc/pangea_rich_text.dart +++ b/lib/pangea/widgets/igc/pangea_rich_text.dart @@ -3,10 +3,10 @@ import 'dart:ui'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/pangea/controllers/pangea_controller.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/matrix_event_wrappers/pangea_message_event.dart'; import 'package:fluffychat/pangea/models/representation_content_model.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:fluffychat/pangea/widgets/chat/message_context_menu.dart'; import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:fluffychat/widgets/matrix.dart';