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:
parent
5d8628c393
commit
22ab4baa6e
4 changed files with 155 additions and 145 deletions
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue