Skip to content

Commit

Permalink
Fix search icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@Twixes
Twixes committed Nov 22, 2023
1 parent 7775965 commit 4d4f61e
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 89 deletions.
13 changes: 1 addition & 12 deletions frontend/src/layout/navigation-3000/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { LemonBadge } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
import { Resizer } from 'lib/components/Resizer/Resizer'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { Popover } from 'lib/lemon-ui/Popover'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
Expand All @@ -14,7 +13,6 @@ import { userLogic } from 'scenes/userLogic'

import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { SitePopoverOverlay } from '~/layout/navigation/TopBar/SitePopover'
import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'

import { navigation3000Logic } from '../navigationLogic'
import { themeLogic } from '../themeLogic'
Expand Down Expand Up @@ -47,7 +45,6 @@ export function Navbar(): JSX.Element {
const { toggleSearchBar } = useActions(commandBarLogic)

const containerRef = useRef<HTMLDivElement | null>(null)
const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')

return (
<nav className="Navbar3000" ref={containerRef}>
Expand Down Expand Up @@ -89,15 +86,7 @@ export function Navbar(): JSX.Element {
icon={<IconSearch />}
title="Search"
onClick={toggleSearchBar}
sideIcon={
!isUsingNewNav ? (
<span className="text-xs">
<KeyboardShortcut shift k />
</span>
) : (
<></>
)
}
keyboardShortcut={{ command: true, k: true }}
/>
<NavbarButton
icon={<ThemeIcon />}
Expand Down
167 changes: 90 additions & 77 deletions frontend/src/layout/navigation-3000/components/NavbarButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,106 +10,119 @@ import { sceneLogic } from 'scenes/sceneLogic'
import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'

import { navigation3000Logic } from '../navigationLogic'
import { KeyboardShortcut, KeyboardShortcutProps } from './KeyboardShortcut'

export interface NavbarButtonProps {
identifier: string
icon: ReactElement
sideIcon?: ReactElement
title?: string
shortTitle?: string
tag?: 'alpha' | 'beta'
onClick?: () => void
to?: string
persistentTooltip?: boolean
active?: boolean
keyboardShortcut?: KeyboardShortcutProps
}

export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
HTMLButtonElement,
NavbarButtonProps
>(({ identifier, shortTitle, title, tag, onClick, persistentTooltip, ...buttonProps }, ref): JSX.Element => {
const { aliasedActiveScene } = useValues(sceneLogic)
const { isNavCollapsed } = useValues(navigation3000Logic)
const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
>(
(
{ identifier, shortTitle, title, tag, onClick, persistentTooltip, keyboardShortcut, ...buttonProps },
ref
): JSX.Element => {
const { aliasedActiveScene } = useValues(sceneLogic)
const { isNavCollapsed } = useValues(navigation3000Logic)
const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')

const [hasBeenClicked, setHasBeenClicked] = useState(false)
const [hasBeenClicked, setHasBeenClicked] = useState(false)

const here = aliasedActiveScene === identifier
const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
const here = aliasedActiveScene === identifier
const isNavCollapsedActually = isNavCollapsed || isUsingNewNav

if (!isUsingNewNav) {
buttonProps.active = here
}
if (!isUsingNewNav) {
buttonProps.active = here
}

let content: JSX.Element | string | undefined
if (!isNavCollapsedActually) {
content = shortTitle || title
if (tag) {
if (tag === 'alpha') {
content = (
<>
<span className="grow">{content}</span>
<LemonTag type="completion" size="small" className="ml-2">
ALPHA
</LemonTag>
</>
)
} else if (tag === 'beta') {
content = (
<>
<span className="grow">{content}</span>
<LemonTag type="warning" size="small" className="ml-2">
BETA
</LemonTag>
</>
)
let content: JSX.Element | string | undefined
if (!isNavCollapsedActually) {
content = shortTitle || title
if (tag) {
if (tag === 'alpha') {
content = (
<>
<span className="grow">{content}</span>
<LemonTag type="completion" size="small" className="ml-2">
ALPHA
</LemonTag>
</>
)
} else if (tag === 'beta') {
content = (
<>
<span className="grow">{content}</span>
<LemonTag type="warning" size="small" className="ml-2">
BETA
</LemonTag>
</>
)
}
}
}
}

const buttonContent = (
<LemonButton
ref={ref}
data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
onMouseEnter={() => setHasBeenClicked(false)}
onClick={() => {
setHasBeenClicked(true)
onClick?.()
}}
className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
fullWidth
type="secondary"
stealth={true}
{...buttonProps}
>
{content}
</LemonButton>
)
const buttonContent = (
<LemonButton
ref={ref}
data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
onMouseEnter={() => setHasBeenClicked(false)}
onClick={() => {
setHasBeenClicked(true)
onClick?.()
}}
className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
fullWidth
type="secondary"
stealth={true}
sideIcon={
!isNavCollapsedActually && keyboardShortcut ? (
<span className="text-xs">
<KeyboardShortcut {...keyboardShortcut} />
</span>
) : null
}
{...buttonProps}
>
{content}
</LemonButton>
)

const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })

return (
<li className="w-full">
{notices.length ? (
<Tooltip
title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
placement={notices[0].placement ?? 'right'}
delayMs={0}
visible={true}
>
{buttonContent}
</Tooltip>
) : (
<Tooltip
title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
placement="right"
delayMs={0}
visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
>
{buttonContent}
</Tooltip>
)}
</li>
)
})
return (
<li className="w-full">
{notices.length ? (
<Tooltip
title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
placement={notices[0].placement ?? 'right'}
delayMs={0}
visible={true}
>
{buttonContent}
</Tooltip>
) : (
<Tooltip
title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
placement="right"
delayMs={0}
visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
>
{buttonContent}
</Tooltip>
)}
</li>
)
}
)
NavbarButton.displayName = 'NavbarButton'

0 comments on commit 4d4f61e

Please sign in to comment.