From e20b9d054dfdd8e6a56bb571e34e04e234728bce Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Wed, 8 Dec 2021 11:11:05 +0530 Subject: [PATCH] Add animation on hover in sidebar Signed-off-by: Ajay Bura --- src/app/atoms/tooltip/Tooltip.jsx | 6 ++++-- src/app/molecules/sidebar-avatar/SidebarAvatar.scss | 12 +++++++++++- src/app/organisms/navigation/SideBar.jsx | 1 - 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/app/atoms/tooltip/Tooltip.jsx b/src/app/atoms/tooltip/Tooltip.jsx index 131c686..0f9067f 100644 --- a/src/app/atoms/tooltip/Tooltip.jsx +++ b/src/app/atoms/tooltip/Tooltip.jsx @@ -4,7 +4,7 @@ import './Tooltip.scss'; import Tippy from '@tippyjs/react'; function Tooltip({ - className, placement, content, children, + className, placement, content, delay, children, }) { return ( {children} @@ -25,12 +25,14 @@ function Tooltip({ Tooltip.defaultProps = { placement: 'top', className: '', + delay: [200, 0], }; Tooltip.propTypes = { className: PropTypes.string, placement: PropTypes.string, content: PropTypes.node.isRequired, + delay: PropTypes.arrayOf(PropTypes.number), children: PropTypes.node.isRequired, }; diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss index 3f445df..ecb3812 100644 --- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss +++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss @@ -14,6 +14,16 @@ margin: 0 !important; } + & .avatar-container, + & .notification-badge { + transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97); + } + &:hover .avatar-container { + transform: translateX(4px) + } + &:hover .notification-badge { + transform: translate(calc(20% + 4px), -20%); + } &:focus { outline: none; } @@ -33,7 +43,7 @@ width: 3px; height: 12px; - background-color: var(--ic-surface-normal); + background-color: var(--tc-surface-high); border-radius: 0 4px 4px 0; transition: height 200ms linear; diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx index b93a6b5..3be5e19 100644 --- a/src/app/organisms/navigation/SideBar.jsx +++ b/src/app/organisms/navigation/SideBar.jsx @@ -175,7 +175,6 @@ function SideBar() { notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0} isAlert={dmsNoti?.highlight > 0} /> - openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />