feat: add hover color to question bubble like mockup (#3222)

This commit is contained in:
Alex Wallen 2023-08-29 09:03:58 -10:00 committed by GitHub
parent 507554a596
commit 4e863bc87f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -29,9 +29,30 @@ class QuestionBubble extends StatelessWidget {
} }
} }
class BubbleActionList extends StatelessWidget { class BubbleActionList extends StatefulWidget {
const BubbleActionList({Key? key}) : super(key: key); const BubbleActionList({Key? key}) : super(key: key);
@override
State<BubbleActionList> createState() => _BubbleActionListState();
}
class _BubbleActionListState extends State<BubbleActionList> {
bool isOpen = false;
Color get fontColor => isOpen
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).colorScheme.tertiary;
Color get fillColor => isOpen
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.tertiaryContainer;
void toggle() {
setState(() {
isOpen = !isOpen;
});
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final List<PopoverAction> actions = []; final List<PopoverAction> actions = [];
@ -49,14 +70,18 @@ class BubbleActionList extends StatelessWidget {
'?', '?',
tooltip: LocaleKeys.questionBubble_help.tr(), tooltip: LocaleKeys.questionBubble_help.tr(),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
fontColor: Theme.of(context).colorScheme.tertiary, fontColor: fontColor,
fillColor: Theme.of(context).colorScheme.tertiaryContainer, fillColor: fillColor,
hoverColor: Theme.of(context).colorScheme.tertiaryContainer, hoverColor: Theme.of(context).colorScheme.primary,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
radius: Corners.s10Border, radius: Corners.s10Border,
onPressed: () => controller.show(), onPressed: () {
toggle();
controller.show();
},
); );
}, },
onClosed: toggle,
onSelected: (action, controller) { onSelected: (action, controller) {
if (action is BubbleActionWrapper) { if (action is BubbleActionWrapper) {
switch (action.inner) { switch (action.inner) {