loading indicator for emojis and... hiding of grammar icons
This commit is contained in:
parent
cc015c930d
commit
0e7727dc41
4 changed files with 90 additions and 59 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
// ),
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue