diff --git a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx index 466fe5624c7307..91082792decb53 100644 --- a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx +++ b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx @@ -4,6 +4,7 @@ import {motion, Reorder, useDragControls} from 'framer-motion'; import type {Location} from 'history'; import isEqual from 'lodash/isEqual'; +import InteractionStateLayer from 'sentry/components/interactionStateLayer'; import {useNavContext} from 'sentry/components/nav/context'; import {GrabHandleIcon} from 'sentry/components/nav/issueViews/grabHandleIcon'; import IssueViewNavEditableTitle from 'sentry/components/nav/issueViews/issueViewNavEditableTitle'; @@ -38,7 +39,7 @@ export interface IssueViewNavItemContentProps { /** * Whether an item is being dragged. */ - isDragging: boolean; + isDragging: string | null; /** * Whether the item is the last view in the list. * This will be removed once view sharing/starring is implemented. @@ -63,7 +64,7 @@ export interface IssueViewNavItemContentProps { /** * A callback function that updates the isDragging state. */ - setIsDragging: (isDragging: boolean) => void; + setIsDragging: (isDragging: string | null) => void; /** * The issue view to display */ @@ -137,11 +138,11 @@ export function IssueViewNavItemContent({ dragTransition={{bounceStiffness: 400, bounceDamping: 40}} value={view} onDragStart={() => { - setIsDragging(true); + setIsDragging(view.id); startInteraction(); }} onDragEnd={() => { - setIsDragging(false); + setIsDragging(null); onReorderComplete(); endInteraction(); }} @@ -168,6 +169,7 @@ export function IssueViewNavItemContent({ e.preventDefault(); }} > + @@ -218,7 +220,7 @@ export function IssueViewNavItemContent({ }); }} setIsEditing={setIsEditing} - isDragging={isDragging} + isDragging={!!isDragging} /> {view.unsavedChanges && ( p.theme.surface200}; + background-color: ${p => p.theme.translucentSurface200}; + border-radius: ${p => p.theme.borderRadius}; +`; + +const StyledInteractionStateLayer = styled(InteractionStateLayer)` + height: 120%; + border-radius: 4px; `; const TrailingItemsWrapper = styled('div')` @@ -357,14 +365,12 @@ const StyledSecondaryNavItem = styled(SecondaryNav.Item)` position: relative; padding-right: ${space(0.5)}; - /* Hide the ellipsis menu if not hovered, or if it's not expanded */ - :not(:hover):not(:has([data-ellipsis-menu-trigger][aria-expanded='true'])) { - [data-ellipsis-menu-trigger] { + /* Hide the ellipsis menu if the item is not hovered */ + :not(:hover) { + [data-ellipsis-menu-trigger]:not([aria-expanded='true']) { ${p => p.theme.visuallyHidden} } - } - :not(:hover) { [data-drag-icon] { ${p => p.theme.visuallyHidden} } @@ -381,8 +387,7 @@ const StyledSecondaryNavItem = styled(SecondaryNav.Item)` } /* Hide the query count if the ellipsis menu is expanded */ - &:has([data-ellipsis-menu-trigger][aria-expanded='true']) - [data-issue-view-query-count] { + :has([data-ellipsis-menu-trigger][aria-expanded='true']) [data-issue-view-query-count] { ${p => p.theme.visuallyHidden} } `; @@ -413,13 +418,13 @@ const LeadingItemsWrapper = styled('div')` display: flex; align-items: center; justify-content: center; + margin-right: ${space(0.75)}; `; const GrabHandleWrapper = styled(motion.div)` display: flex; align-items: center; justify-content: center; - margin-right: ${space(0.75)}; width: 18px; height: 18px; cursor: grab; diff --git a/static/app/components/nav/issueViews/issueViewNavItems.tsx b/static/app/components/nav/issueViews/issueViewNavItems.tsx index d036f506bcac15..8cdfcaf0a4bd69 100644 --- a/static/app/components/nav/issueViews/issueViewNavItems.tsx +++ b/static/app/components/nav/issueViews/issueViewNavItems.tsx @@ -42,7 +42,7 @@ export function IssueViewNavItems({ * source of truth for the view state, rather than a separate state */ const [views, setViews] = useState(loadedViews); - const [isDragging, setIsDragging] = useState(false); + const [isDragging, setIsDragging] = useState(null); const queryClient = useQueryClient(); useEffect(() => { diff --git a/static/app/components/nav/projectIcon.tsx b/static/app/components/nav/projectIcon.tsx index d8f91d0ff12bb1..c5e76dc68f7027 100644 --- a/static/app/components/nav/projectIcon.tsx +++ b/static/app/components/nav/projectIcon.tsx @@ -2,13 +2,13 @@ import styled from '@emotion/styled'; import PlatformIcon from 'platformicons/build/platformIcon'; import {IconAllProjects} from 'sentry/components/nav/iconAllProjects'; -import {space} from 'sentry/styles/space'; interface ProjectIconProps { projectPlatforms: string[]; + className?: string; } -function ProjectIcon({projectPlatforms}: ProjectIconProps) { +function ProjectIcon({projectPlatforms, className}: ProjectIconProps) { let renderedIcons: React.ReactNode; switch (projectPlatforms.length) { @@ -36,7 +36,11 @@ function ProjectIcon({projectPlatforms}: ProjectIconProps) { ); } - return {renderedIcons}; + return ( + + {renderedIcons} + + ); } const IconWrap = styled('div')` @@ -45,7 +49,6 @@ const IconWrap = styled('div')` flex-direction: column; align-items: center; justify-content: center; - margin-right: ${space(0.75)}; `; const IconContainer = styled('div')` diff --git a/static/app/views/insights/navigation.tsx b/static/app/views/insights/navigation.tsx index e3a8cadf6f1f9a..611357a7ee17e1 100644 --- a/static/app/views/insights/navigation.tsx +++ b/static/app/views/insights/navigation.tsx @@ -1,4 +1,5 @@ import {Fragment} from 'react'; +import styled from '@emotion/styled'; import {NAV_GROUP_LABELS} from 'sentry/components/nav/constants'; import {usePrefersStackedNav} from 'sentry/components/nav/prefersStackedNav'; @@ -6,6 +7,7 @@ import ProjectIcon from 'sentry/components/nav/projectIcon'; import {SecondaryNav} from 'sentry/components/nav/secondary'; import {PrimaryNavGroup} from 'sentry/components/nav/types'; import {t} from 'sentry/locale'; +import {space} from 'sentry/styles/space'; import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; import { @@ -70,7 +72,7 @@ function InsightsSecondaryNav({children}: InsightsNavigationProps) { key={project.id} to={`${baseUrl}/projects/${project.slug}/`} leadingItems={ - } @@ -98,3 +100,7 @@ export default function InsightsNavigation({children}: InsightsNavigationProps) return {children}; } + +const StyledProjectIcon = styled(ProjectIcon)` + margin-right: ${space(0.75)}; +`;