loading indicator for emojis and... hiding of grammar icons

This commit is contained in:
wcjord 2025-06-10 10:20:59 -04:00
parent cc015c930d
commit 0e7727dc41
4 changed files with 90 additions and 59 deletions

View file

@ -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;

View file

@ -23,26 +23,20 @@ class LemmaReactionPicker extends StatefulWidget {
class LemmaReactionPickerState extends State<LemmaReactionPicker> {
List<String> 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<LemmaReactionPicker> {
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(),
),
);
}

View file

@ -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<LemmaEmojiChoiceItem> {
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<LemmaEmojiChoiceItem> {
@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<LemmaEmojiChoiceItem> {
);
}
}
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),
),
),
);
}
}

View file

@ -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,
// ),
// ),
// ],
// ),
],
),
),