starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-24 17:48:30 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Preserve dropdown trigger button background when menu is open

Browse Source
This commit is contained in:
Gregory Schier
2025-01-13 12:28:31 -08:00
parent 4479164321
commit 6719573b2b
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-web/components/core/Button.tsx
View File

@@ -56,7 +56,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
ref, ref,
) { ) {
const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join(''); const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join('');
const fullTitle = hotkeyTrigger ? `${title} ${hotkeyTrigger}` : title; const fullTitle = hotkeyTrigger ? `${title ?? ''} ${hotkeyTrigger}`.trim() : title;
const classes = classNames( const classes = classNames(
className, className,

19
src-web/components/core/Dropdown.tsx
View File

@@ -1,5 +1,6 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { atom, useAtom } from 'jotai';
import type { import type {
CSSProperties, CSSProperties,
FocusEvent as ReactFocusEvent, FocusEvent as ReactFocusEvent,
@@ -26,7 +27,7 @@ import { useClickOutside } from '../../hooks/useClickOutside';
import type { HotkeyAction } from '../../hooks/useHotKey'; import type { HotkeyAction } from '../../hooks/useHotKey';
import { useHotKey } from '../../hooks/useHotKey'; import { useHotKey } from '../../hooks/useHotKey';
import { useStateWithDeps } from '../../hooks/useStateWithDeps'; import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import {generateId} from "../../lib/generateId"; import { generateId } from '../../lib/generateId';
import { getNodeText } from '../../lib/getNodeText'; import { getNodeText } from '../../lib/getNodeText';
import { Overlay } from '../Overlay'; import { Overlay } from '../Overlay';
import { Button } from './Button'; import { Button } from './Button';
@@ -34,7 +35,6 @@ import { HotKey } from './HotKey';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { Separator } from './Separator'; import { Separator } from './Separator';
import { HStack, VStack } from './Stacks'; import { HStack, VStack } from './Stacks';
import { atom, useAtom } from 'jotai';
export type DropdownItemSeparator = { export type DropdownItemSeparator = {
type: 'separator'; type: 'separator';
@@ -102,8 +102,19 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
const prevIsOpen = prevId === id; const prevIsOpen = prevId === id;
const newIsOpen = typeof o === 'function' ? o(prevIsOpen) : o; const newIsOpen = typeof o === 'function' ? o(prevIsOpen) : o;
if (newIsOpen) onOpen?.(); if (newIsOpen) {
else onClose?.(); onOpen?.();
// Persist background color of button until we close the dropdown
buttonRef.current!.style.backgroundColor = window
.getComputedStyle(buttonRef.current!)
.getPropertyValue('background-color');
} else {
onClose?.();
// Reset background color of button
buttonRef.current!.style.backgroundColor = '';
}
// Set to different value when opened and closed to force it to update. This is to force // Set to different value when opened and closed to force it to update. This is to force
// <Menu/> to reset its selected-index state, which it does when this prop changes // <Menu/> to reset its selected-index state, which it does when this prop changes