diff --git a/lib/config/app_config.dart b/lib/config/app_config.dart index 5041c776e..e6a8eeed0 100644 --- a/lib/config/app_config.dart +++ b/lib/config/app_config.dart @@ -28,7 +28,7 @@ abstract class AppConfig { static const bool enableRegistration = true; // #Pangea static const double toolbarMaxHeight = 250.0; - static const double toolbarMinHeight = 200.0; + static const double toolbarMinHeight = 150.0; static const double toolbarMinWidth = 350.0; static const double defaultHeaderHeight = 56.0; static const double toolbarButtonsHeight = 50.0; diff --git a/lib/pangea/lemmas/lemma_reaction_picker.dart b/lib/pangea/lemmas/lemma_reaction_picker.dart index 3cba97dad..b229f2396 100644 --- a/lib/pangea/lemmas/lemma_reaction_picker.dart +++ b/lib/pangea/lemmas/lemma_reaction_picker.dart @@ -23,26 +23,20 @@ class LemmaReactionPicker extends StatefulWidget { class LemmaReactionPickerState extends State { List displayEmoji = []; + bool loading = true; @override void initState() { super.initState(); widget.cId.getLemmaInfo().then((info) { + loading = false; setState(() => displayEmoji = info.emoji); }).catchError((e, s) { ErrorHandler.logError(data: widget.cId.toJson(), e: e, s: s); + setState(() => loading = false); }); } - // @override - // didUpdateWidget(LemmaReactionPicker oldWidget) { - // if (oldWidget.isSelected != widget.isSelected || - // widget.cId.userSetEmoji != oldWidget.cId.userSetEmoji) { - // setState(() => displayEmoji = widget.cId.userSetEmoji.firstOrNull); - // } - // super.didUpdateWidget(oldWidget); - // } - void setEmoji(String emoji) => widget.controller.sendEmojiAction(emoji); @override @@ -52,14 +46,21 @@ class LemmaReactionPickerState extends State { alignment: Alignment.center, child: Row( mainAxisAlignment: MainAxisAlignment.center, - children: displayEmoji - .map( - (emoji) => LemmaEmojiChoiceItem( - content: emoji, - onTap: () => setEmoji(emoji), - ), - ) - .toList(), + spacing: 4.0, + children: loading == false + ? displayEmoji + .map( + (emoji) => LemmaEmojiChoiceItem( + content: emoji, + onTap: () => setEmoji(emoji), + ), + ) + .toList() + : [1, 2, 3, 4, 5] + .map( + (e) => const LemmaEmojiChoicePlaceholder(), + ) + .toList(), ), ); } diff --git a/lib/pangea/toolbar/reading_assistance_input_row/lemma_emoji_choice_item.dart b/lib/pangea/toolbar/reading_assistance_input_row/lemma_emoji_choice_item.dart index a8cff39c7..bc83b54b7 100644 --- a/lib/pangea/toolbar/reading_assistance_input_row/lemma_emoji_choice_item.dart +++ b/lib/pangea/toolbar/reading_assistance_input_row/lemma_emoji_choice_item.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:shimmer/shimmer.dart'; import 'package:fluffychat/config/app_config.dart'; @@ -21,7 +22,10 @@ class LemmaEmojiChoiceItemState extends State { Color color(BuildContext context) { if (_isHovered) { - return Theme.of(context).colorScheme.primaryContainer; + return Theme.of(context) + .colorScheme + .primaryContainer + .withAlpha((0.4 * 255).toInt()); } return Colors.transparent; @@ -30,9 +34,11 @@ class LemmaEmojiChoiceItemState extends State { @override Widget build(BuildContext context) { return Container( - padding: const EdgeInsets.all(8), + height: 40, + width: 40, + alignment: Alignment.center, decoration: BoxDecoration( - color: color(context).withAlpha((0.4 * 255).toInt()), + color: color(context), borderRadius: BorderRadius.circular(AppConfig.borderRadius), ), child: InkWell( @@ -52,3 +58,30 @@ class LemmaEmojiChoiceItemState extends State { ); } } + +class LemmaEmojiChoicePlaceholder extends StatelessWidget { + const LemmaEmojiChoicePlaceholder({ + super.key, + this.size = 40, + }); + + final double size; + + @override + Widget build(BuildContext context) { + return Shimmer.fromColors( + baseColor: Colors.transparent, + highlightColor: + Theme.of(context).colorScheme.primaryContainer.withAlpha(0xAA), + child: Container( + height: size, + width: size, + alignment: Alignment.center, + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.primaryContainer.withAlpha(0x66), + borderRadius: BorderRadius.circular(AppConfig.borderRadius), + ), + ), + ); + } +} diff --git a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart index 000a0cbdf..02e4f38f3 100644 --- a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart +++ b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart @@ -8,13 +8,10 @@ import 'package:fluffychat/pangea/events/models/pangea_token_model.dart'; import 'package:fluffychat/pangea/learning_settings/constants/language_constants.dart'; import 'package:fluffychat/pangea/lemmas/construct_xp_widget.dart'; import 'package:fluffychat/pangea/lemmas/lemma_reaction_picker.dart'; -import 'package:fluffychat/pangea/morphs/morph_features_enum.dart'; import 'package:fluffychat/pangea/practice_activities/activity_type_enum.dart'; import 'package:fluffychat/pangea/toolbar/widgets/message_selection_overlay.dart'; -import 'package:fluffychat/pangea/toolbar/widgets/practice_activity/word_audio_button.dart'; import 'package:fluffychat/pangea/toolbar/widgets/word_zoom/lemma_meaning_widget.dart'; import 'package:fluffychat/pangea/toolbar/widgets/word_zoom/lemma_widget.dart'; -import 'package:fluffychat/pangea/toolbar/widgets/word_zoom/morphological_list_item.dart'; import 'package:fluffychat/widgets/matrix.dart'; class WordZoomWidget extends StatelessWidget { @@ -161,41 +158,41 @@ class WordZoomWidget extends StatelessWidget { ], ), ), - const SizedBox( - height: 8.0, - ), - Wrap( - alignment: WrapAlignment.center, - crossAxisAlignment: WrapCrossAlignment.center, - spacing: 8.0, - children: [ - if (token.text.content.toLowerCase() != - token.lemma.text.toLowerCase()) ...[ - Text( - _selectedToken.text.content, - style: Theme.of(context).textTheme.bodyLarge, - overflow: TextOverflow.ellipsis, - ), - WordAudioButton( - text: _selectedToken.text.content, - baseOpacity: 0.4, - uniqueID: "word-zoom-audio-${_selectedToken.text.content}", - langCode: overlayController - .pangeaMessageEvent!.messageDisplayLangCode, - ), - ], - ..._selectedToken.morphsBasicallyEligibleForPracticeByPriority - .map( - (cId) => MorphologicalListItem( - morphFeature: MorphFeaturesEnumExtension.fromString( - cId.category, - ), - token: _selectedToken, - overlayController: overlayController, - ), - ), - ], - ), + // const SizedBox( + // height: 8.0, + // ), + // Wrap( + // alignment: WrapAlignment.center, + // crossAxisAlignment: WrapCrossAlignment.center, + // spacing: 8.0, + // children: [ + // if (token.text.content.toLowerCase() != + // token.lemma.text.toLowerCase()) ...[ + // Text( + // _selectedToken.text.content, + // style: Theme.of(context).textTheme.bodyLarge, + // overflow: TextOverflow.ellipsis, + // ), + // WordAudioButton( + // text: _selectedToken.text.content, + // baseOpacity: 0.4, + // uniqueID: "word-zoom-audio-${_selectedToken.text.content}", + // langCode: overlayController + // .pangeaMessageEvent!.messageDisplayLangCode, + // ), + // ], + // ..._selectedToken.morphsBasicallyEligibleForPracticeByPriority + // .map( + // (cId) => MorphologicalListItem( + // morphFeature: MorphFeaturesEnumExtension.fromString( + // cId.category, + // ), + // token: _selectedToken, + // overlayController: overlayController, + // ), + // ), + // ], + // ), ], ), ),