4490 highlight going behind menu in vocab (#4494)

* fix: wrap inkwell in material to prevent highlight showing out of widget bounds

* chore: update all language dropdown option copy
This commit is contained in:
ggurdin 2025-10-22 12:27:16 -04:00 committed by GitHub
parent 5d8628c393
commit 22ab4baa6e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 155 additions and 145 deletions

View file

@ -207,73 +207,76 @@ class MorphTagChip extends StatelessWidget {
final unlocked = constructAnalytics.points > 0 ||
Matrix.of(context).client.userID == Environment.supportUserId;
return InkWell(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
onTap: onTap,
child: Opacity(
opacity: unlocked ? 1.0 : 0.3,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32.0),
gradient: unlocked
? LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[
constructAnalytics.lemmaCategory.color(context),
Colors.transparent,
],
)
: null,
color: unlocked ? null : theme.disabledColor,
),
padding: const EdgeInsets.symmetric(
vertical: 4.0,
horizontal: 8.0,
),
child: Row(
mainAxisSize: MainAxisSize.min,
spacing: 8.0,
children: [
SizedBox(
width: 28.0,
height: 28.0,
child: unlocked
? Container(
decoration: BoxDecoration(
color: theme.colorScheme.surface.withAlpha(180),
borderRadius: BorderRadius.circular(20),
return Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
onTap: onTap,
child: Opacity(
opacity: unlocked ? 1.0 : 0.3,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32.0),
gradient: unlocked
? LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[
constructAnalytics.lemmaCategory.color(context),
Colors.transparent,
],
)
: null,
color: unlocked ? null : theme.disabledColor,
),
padding: const EdgeInsets.symmetric(
vertical: 4.0,
horizontal: 8.0,
),
child: Row(
mainAxisSize: MainAxisSize.min,
spacing: 8.0,
children: [
SizedBox(
width: 28.0,
height: 28.0,
child: unlocked
? Container(
decoration: BoxDecoration(
color: theme.colorScheme.surface.withAlpha(180),
borderRadius: BorderRadius.circular(20),
),
padding: const EdgeInsets.all(4),
child: MorphIcon(
morphFeature: feature,
morphTag: morphTag,
),
)
: const Icon(
Icons.lock,
color: Colors.white,
),
padding: const EdgeInsets.all(4),
child: MorphIcon(
morphFeature: feature,
morphTag: morphTag,
),
)
: const Icon(
Icons.lock,
color: Colors.white,
),
),
Flexible(
child: Text(
getGrammarCopy(
category: morphFeature,
lemma: morphTag,
context: context,
) ??
morphTag,
style: TextStyle(
fontWeight: FontWeight.bold,
color: theme.brightness == Brightness.dark
? Colors.white
: Colors.black,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
Flexible(
child: Text(
getGrammarCopy(
category: morphFeature,
lemma: morphTag,
context: context,
) ??
morphTag,
style: TextStyle(
fontWeight: FontWeight.bold,
color: theme.brightness == Brightness.dark
? Colors.white
: Colors.black,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
),

View file

@ -32,52 +32,56 @@ class VocabAnalyticsListTileState extends State<VocabAnalyticsListTile> {
return MouseRegion(
onEnter: (_) => setState(() => _isHovered = true),
onExit: (_) => setState(() => _isHovered = false),
child: InkWell(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
onTap: widget.onTap,
child: Container(
height: maxWidth,
width: maxWidth,
padding: EdgeInsets.all(padding),
decoration: BoxDecoration(
color: _isHovered
? widget.constructUse.constructLevel
.color(context)
.withAlpha(20)
: Colors.transparent,
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.center,
height: (maxWidth - padding * 2) * 0.6,
child: widget.emoji != null
? Text(
widget.emoji!,
style: const TextStyle(
fontSize: 22,
),
)
: widget.constructUse.constructLevel.icon(36.0),
),
Container(
alignment: Alignment.topCenter,
padding: const EdgeInsets.only(top: 4),
height: (maxWidth - padding * 2) * 0.4,
child: ShrinkableText(
text: widget.constructUse.lemma,
maxWidth: maxWidth - padding * 2,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).brightness == Brightness.light
? widget.constructUse.constructLevel.darkColor(context)
: widget.constructUse.constructLevel.color(context),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
onTap: widget.onTap,
child: Container(
height: maxWidth,
width: maxWidth,
padding: EdgeInsets.all(padding),
decoration: BoxDecoration(
color: _isHovered
? widget.constructUse.constructLevel
.color(context)
.withAlpha(20)
: Colors.transparent,
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.center,
height: (maxWidth - padding * 2) * 0.6,
child: widget.emoji != null
? Text(
widget.emoji!,
style: const TextStyle(
fontSize: 22,
),
)
: widget.constructUse.constructLevel.icon(36.0),
),
Container(
alignment: Alignment.topCenter,
padding: const EdgeInsets.only(top: 4),
height: (maxWidth - padding * 2) * 0.4,
child: ShrinkableText(
text: widget.constructUse.lemma,
maxWidth: maxWidth - padding * 2,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).brightness == Brightness.light
? widget.constructUse.constructLevel
.darkColor(context)
: widget.constructUse.constructLevel.color(context),
),
),
),
),
],
],
),
),
),
),

View file

@ -24,7 +24,7 @@ class CourseLanguageFilter extends StatelessWidget {
MatrixState.pangeaController.pLanguageStore.unlocalizedTargetOptions,
displayname: (v) => v.getDisplayName(context) ?? v.displayName,
enableSearch: true,
defaultName: L10n.of(context).targetLanguageLabel,
defaultName: L10n.of(context).allLanguages,
);
}
}

View file

@ -320,43 +320,46 @@ class _MenuButton extends StatelessWidget {
final height = !mini ? 36.0 : 26.0;
return InkWell(
borderRadius: BorderRadius.circular(40),
onTap: onPressed,
child: Container(
height: height,
width: hideLabel ?? mini ? height : null,
decoration: BoxDecoration(
color: theme.colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(40),
),
padding: EdgeInsets.symmetric(
horizontal: !mini ? 8.0 : 4.0,
vertical: 4.0,
),
child: hideLabel ?? mini
? Icon(
icon,
color: theme.colorScheme.onPrimaryContainer,
size: !mini ? 24.0 : 14.0,
)
: Row(
spacing: 4.0,
children: [
Icon(
icon,
color: theme.colorScheme.onPrimaryContainer,
size: !mini ? 24.0 : 14.0,
),
Text(
text,
style: TextStyle(
return Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.circular(40),
onTap: onPressed,
child: Container(
height: height,
width: hideLabel ?? mini ? height : null,
decoration: BoxDecoration(
color: theme.colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(40),
),
padding: EdgeInsets.symmetric(
horizontal: !mini ? 8.0 : 4.0,
vertical: 4.0,
),
child: hideLabel ?? mini
? Icon(
icon,
color: theme.colorScheme.onPrimaryContainer,
size: !mini ? 24.0 : 14.0,
)
: Row(
spacing: 4.0,
children: [
Icon(
icon,
color: theme.colorScheme.onPrimaryContainer,
fontSize: !mini ? 16.0 : 12.0,
size: !mini ? 24.0 : 14.0,
),
),
],
),
Text(
text,
style: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontSize: !mini ? 16.0 : 12.0,
),
),
],
),
),
),
);
}