From 0631cce283c34011ab86fe46484fd989a5e486a8 Mon Sep 17 00:00:00 2001 From: gmolki Date: Wed, 24 Jul 2024 11:45:01 +0200 Subject: [PATCH] feat: add tooltip to closed router sidebar icons --- src/components/common/Tooltip/cmp.tsx | 11 ++- src/components/common/Tooltip/styles.tsx | 74 +++++++++++++------ src/components/common/Tooltip/types.ts | 2 + src/components/modules/RouterSidebar/cmp.tsx | 9 ++- .../modules/RouterSidebar/styles.tsx | 17 +++++ 5 files changed, 87 insertions(+), 26 deletions(-) diff --git a/src/components/common/Tooltip/cmp.tsx b/src/components/common/Tooltip/cmp.tsx index c99e8d17..605d2e03 100644 --- a/src/components/common/Tooltip/cmp.tsx +++ b/src/components/common/Tooltip/cmp.tsx @@ -10,6 +10,7 @@ import { StyledContentContainer, StyledContainer, StyledHeaderCloseIcon, + StyledChildrenContainer, } from './styles' import { TooltipProps } from './types' import { useFloatPosition } from '../../../hooks/useFloatPosition' @@ -26,6 +27,7 @@ export const Tooltip = ({ at = 'top-center', margin = { x: 5, y: 5 }, offset = { x: 0, y: 0 }, + variant = 1, onOpen, onClose, onCloseClick, @@ -110,6 +112,7 @@ export const Tooltip = ({ ref: tooltipRef, $position: position, $stage: stage, + $variant: variant, ...rest, }} > @@ -118,14 +121,16 @@ export const Tooltip = ({ )} - {content} + + {content} + )} {children && ( - + {children} - + )} ) diff --git a/src/components/common/Tooltip/styles.tsx b/src/components/common/Tooltip/styles.tsx index f2b1bc00..ac7e4e0a 100644 --- a/src/components/common/Tooltip/styles.tsx +++ b/src/components/common/Tooltip/styles.tsx @@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react' import styled, { css } from 'styled-components' import { addClasses } from '../../../utils' import Icon from '../Icon' -import { TooltipPosition } from './types' +import { TooltipPosition, TooltipVariant } from './types' import tw from 'twin.macro' import { getResponsiveCss } from '../../../styles' import { Stage } from 'transition-hook' @@ -10,20 +10,32 @@ import { Stage } from 'transition-hook' export type StyledContainerProps = { $position: TooltipPosition $stage: Stage + $variant: TooltipVariant } & HTMLAttributes export const StyledContainer = styled.div.attrs( addClasses('fx-glass-base2'), )` - ${({ theme, $stage, $position: { x = 0, y = 0 } }) => { + ${({ theme, $stage, $variant, $position: { x = 0, y = 0 } }) => { const [g0, g1] = theme.gradient.main0.colors return css` ${tw`fixed inline-flex flex-col items-stretch justify-start gap-4 p-6 inset-6 z-10`} - border-radius: 1.5rem; + ${$variant === 1 && + css` + border-radius: 1.5rem; + color: ${theme.color.text}; + `} + + ${$variant === 2 && + css` + color: ${theme.color.white}; + background: ${theme.color.black}; + padding: 0.1428rem 0.4286rem; + `} + backdrop-filter: blur(50px); - color: ${theme.color.text}; opacity: ${$stage === 'enter' ? 1 : 0}; will-change: opacity, transform; transition-property: opacity; @@ -41,21 +53,24 @@ export const StyledContainer = styled.div.attrs( )} /* BORDER */ - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - z-index: -1; - height: 100%; - width: 100%; - background-image: linear-gradient(90deg, ${g0} 0%, ${g1} 100%); - padding: 0.0625rem; - border-radius: 1.5rem; - mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); - mask-composite: exclude; - -webkit-mask-composite: xor; - } + ${$variant === 1 && + css` + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + height: 100%; + width: 100%; + background-image: linear-gradient(90deg, ${g0} 0%, ${g1} 100%); + padding: 0.0625rem; + border-radius: 1.5rem; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask-composite: exclude; + -webkit-mask-composite: xor; + } + `} ` }} ` @@ -78,6 +93,21 @@ export const StyledHeaderCloseIcon = styled(Icon).attrs((props) => { flex: 0 0 auto; ` -export const StyledContentContainer = styled.div.attrs( - addClasses('tp-body1 fs-12'), -)`` +export type StyledContentContainerProps = { + $variant: TooltipVariant +} & HTMLAttributes + +export const StyledContentContainer = styled.div.attrs( + (props) => { + switch (props.$variant) { + case 1: + return addClasses('tp-body1 fs-12')(props) + case 2: + return addClasses('tp-body3 fs-12')(props) + } + }, +)`` + +export const StyledChildrenContainer = styled.span` + display: inline-block; +` diff --git a/src/components/common/Tooltip/types.ts b/src/components/common/Tooltip/types.ts index 8ed67d2c..4562d266 100644 --- a/src/components/common/Tooltip/types.ts +++ b/src/components/common/Tooltip/types.ts @@ -3,6 +3,7 @@ import { FloatPosition, FloatPositionType } from '../../../hooks' export type TooltipPositionType = FloatPositionType export type TooltipPosition = FloatPosition +export type TooltipVariant = 1 | 2 export type TooltipProps = { my: TooltipPositionType @@ -15,6 +16,7 @@ export type TooltipProps = { open?: boolean content?: ReactNode + variant?: TooltipVariant onOpen?: () => void onClose?: () => void diff --git a/src/components/modules/RouterSidebar/cmp.tsx b/src/components/modules/RouterSidebar/cmp.tsx index 97b5c87a..0511b2a9 100644 --- a/src/components/modules/RouterSidebar/cmp.tsx +++ b/src/components/modules/RouterSidebar/cmp.tsx @@ -22,6 +22,7 @@ import { StyledNav2MainTitle, StyledOpenedNav2LinkContainer, StyledClosedNav2LinkContainer, + StyledTooltip, } from './styles' import { RouteProps, RouterSidebarProps } from './types' import { RouterLinkProps } from '../RouterLink' @@ -178,8 +179,14 @@ const ClosedNav2Route = (props: RouteProps) => { /> ))} - ) : ( + ) : $route.highlighted ? ( + ) : ( +
+ + + +
)} ) diff --git a/src/components/modules/RouterSidebar/styles.tsx b/src/components/modules/RouterSidebar/styles.tsx index d72a0474..a98969cd 100644 --- a/src/components/modules/RouterSidebar/styles.tsx +++ b/src/components/modules/RouterSidebar/styles.tsx @@ -14,6 +14,8 @@ import { StyledDisabledRouterLink, } from '../RouterLink/styles' import { StyledTextGradientContainer } from '../../common/TextGradient/styles' +import Tooltip from '../../common/Tooltip' +import { StyledChildrenContainer as StyledTooltipChildrenContainer } from '../../common/Tooltip/styles' const nav1OpenSize = 4.5 const nav1CloseSize = 0.375 @@ -164,6 +166,17 @@ export const StyledRouterLink2 = styled( }} ` +export const StyledTooltip = styled(Tooltip).attrs((props) => { + return { + ...props, + variant: 2, + my: 'center-left', + at: 'center-left', + offset: { x: 63, y: 0 }, + margin: { x: 5, y: 0 }, + } +})`` + export const StyledNav2LinkContainer = styled.div` ${tw`flex flex-col items-start cursor-auto w-full overflow-auto absolute`} margin-top: 6.5rem; @@ -213,6 +226,10 @@ export const StyledClosedNav2LinkContainer = styled(StyledNav2LinkContainer)` ${tw`flex items-center justify-center text-center`} } + & ${StyledTooltipChildrenContainer} { + ${tw`w-full`} + } + & ${StyledNotificationBadge} { position: absolute; left: 66%;