From c4dfd9f0f36e592fdc6699bc92c24c3893b06fde Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Mon, 5 Jun 2023 14:07:26 +0530 Subject: [PATCH 1/8] used use-gesture for all interactions with sidebar toggle; Signed-off-by: Sahil Shubham --- apps/extension/package.json | 4 +- .../Components/Sidebar/DraggableToggle.tsx | 118 +++++++----------- libs/core/src/Stores/layout.store.ts | 2 +- yarn.lock | 17 ++- 4 files changed, 58 insertions(+), 83 deletions(-) diff --git a/apps/extension/package.json b/apps/extension/package.json index 4478e48ff..e79f0e6df 100644 --- a/apps/extension/package.json +++ b/apps/extension/package.json @@ -21,6 +21,7 @@ "@sentry/react": "^6.17.4", "@tippyjs/react": "^4.2.6", "@udecode/plate": "^16.4.1", + "@use-gesture/react": "^10.2.27", "@webcomponents/custom-elements": "1.5.0", "@workduck-io/dwindle": "^0.1.7", "@workduck-io/mex-components": "^0.0.25", @@ -47,7 +48,6 @@ "react-hot-toast": "^2.2.0", "react-image-crop": "^10.0.9", "react-spring": "^9.4.3", - "react-use-hoverintent": "^1.2.9", "react-virtual": "^2.10.4", "sanitize-html": "^2.6.1", "slate": "^0.78.0", @@ -99,4 +99,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx index ea4212a36..987792e13 100644 --- a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx +++ b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx @@ -1,8 +1,9 @@ import React, { useEffect, useRef, useState } from 'react' -import { useHoverIntent } from 'react-use-hoverintent' +import { animated, useSpring } from 'react-spring' import { Icon } from '@iconify/react' import Tippy from '@tippyjs/react' +import { useGesture } from '@use-gesture/react' import styled, { css } from 'styled-components' import { TitleWithShortcut } from '@workduck-io/mex-components' @@ -10,7 +11,6 @@ import { TitleWithShortcut } from '@workduck-io/mex-components' import { useLayoutStore } from '@mexit/core' import { WDLogo } from '@mexit/shared' -import { useSidebarTransition } from '../../Hooks/useSidebarTransition' import { getElementById } from '../../Utils/cs-utils' const DragIcon = styled(Icon)<{ $show: boolean }>` @@ -27,22 +27,11 @@ const DragIcon = styled(Icon)<{ $show: boolean }>` `} ` -const ToggleWrapper = styled.div<{ $endColumnWidth?: string; $expanded?: boolean; $top: number }>` - position: fixed; +const ToggleWrapper = styled(animated.div)` display: flex; align-items: center; width: max-content; - - ${({ $expanded, $top, $endColumnWidth, theme }) => - $expanded - ? css` - top: ${$top}px; - right: calc(${($endColumnWidth ?? '400px') + ' + ' + (theme.additional.hasBlocks ? 0 : -15)}px); - ` - : css` - top: ${$top}px; - right: 0; - `} + position: relative; z-index: 9999999999; padding: 8px; @@ -56,7 +45,8 @@ const ToggleWrapper = styled.div<{ $endColumnWidth?: string; $expanded?: boolean width: 16px; } - &:hover { + &:hover, + &:active { cursor: pointer; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25); background: ${({ theme }) => theme.tokens.colors.primary.default}; @@ -85,70 +75,54 @@ const Wrapper = styled.div` align-items: center; justify-content: center; position: relative; - - /* ::before { - content: ''; - position: absolute; - bottom: 20px; - height: 20px; - width: 20px; - border-bottom-right-radius: ${({ theme }) => theme.borderRadius.large}; - background: ${({ theme }) => theme.tokens.surfaces.sidebar}; - color: ${({ theme }) => theme.tokens.text.fade}; - } */ ` export const DraggableToggle = () => { - const [isHovering, intentRef, setIsHovering] = useHoverIntent({ timeout: 500 }) - const [tracking, setTracking] = useState(false) + const [isHovering, setIsHovering] = useState(false) const { rhSidebar, toggleRHSidebar, toggleTop, setToggleTop } = useLayoutStore() - const { endColumnWidth } = useSidebarTransition() - - const handleRef = useRef(null) - - useEffect(() => { - const handleMouseDown = (event: MouseEvent) => { - event.preventDefault() - event.stopPropagation() - setTracking(true) - } - - if (handleRef?.current) { - handleRef.current.addEventListener('mousedown', handleMouseDown) - } - return () => { - handleRef?.current?.removeEventListener('mousedown', handleMouseDown) - } - }, [handleRef?.current]) + // TODO: Not using this for now, was having issues with calc() inside api.start() + // const { endColumnWidth } = useSidebarTransition() - useEffect(() => { - const handleMouseMove = (event: MouseEvent) => { - event.stopPropagation() + const handleRef = useRef(null) - if (tracking) { - const newHeight = event.clientY - setToggleTop(newHeight) + const [{ x, y }, api] = useSpring(() => ({ x: '97vw', y: toggleTop }), []) + + const bind = useGesture( + { + onDrag: ({ offset: [, y] }) => { + api.start({ y }) + }, + onDragEnd: () => { + setToggleTop(y.get()) + }, + onHover: ({ hovering }) => { + setIsHovering(hovering) + }, + onClick: () => { + toggleRHSidebar() + } + }, + { + drag: { + from: () => [0, y.get()], + axis: 'y', + // filters click events when dragging + filterTaps: true, + pointer: { + keys: false + } } } - - window.addEventListener('mousemove', handleMouseMove) - - return () => { - window.removeEventListener('mousemove', handleMouseMove) - } - }, [tracking]) + ) useEffect(() => { - const handleMouseUp = (event) => { - if (tracking) setTracking(false) - } - window.addEventListener('mouseup', handleMouseUp) + api.start({ x: rhSidebar.expanded ? '63vw' : '97vw' }) + }, [rhSidebar.expanded]) - return () => { - window.removeEventListener('mouseup', handleMouseUp) - } - }, [tracking]) + useEffect(() => { + console.log('vertical', { y, toggleTop }) + }, [y, toggleTop]) return ( { appendTo={() => getElementById('ext-side-nav')} content={} > - + diff --git a/libs/core/src/Stores/layout.store.ts b/libs/core/src/Stores/layout.store.ts index 5fe783133..9995db433 100644 --- a/libs/core/src/Stores/layout.store.ts +++ b/libs/core/src/Stores/layout.store.ts @@ -26,7 +26,7 @@ const SIDEBAR_WIDTH = 276 const initializeLayoutStore = () => ({ // Focus mode - toggleTop: 44, + toggleTop: -500, showLoader: false, contextMenu: undefined as ContextMenu | undefined, focusMode: { on: false, hover: false }, diff --git a/yarn.lock b/yarn.lock index f1c43146b..a89180001 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3896,6 +3896,18 @@ prop-types "^15.7.2" tslib "^1.10.0" +"@use-gesture/core@10.2.27": + version "10.2.27" + resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.27.tgz#0f24b17c036cd828ba07e3451ff45e2df959c6f5" + integrity sha512-V4XV7hn9GAD2MYu8yBBVi5iuWBsAMfjPRMsEVzoTNGYH72tf0kFP+OKqGKc8YJFQIJx6yj+AOqxmEHOmx2/MEA== + +"@use-gesture/react@^10.2.27": + version "10.2.27" + resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.27.tgz#7fbd50d14449ec5bc49c9b6cfef8a2845f5e0608" + integrity sha512-7E5vnWCxeslWlxwZ8uKIcnUZVMTRMZ8cvSnLLKF1NkyNb3PnNiAzoXM4G1vTKJKRhgOTeI6wK1YsEpwo9ABV5w== + dependencies: + "@use-gesture/core" "10.2.27" + "@viselect/vanilla@^3.1.0": version "3.2.6" resolved "https://registry.yarnpkg.com/@viselect/vanilla/-/vanilla-3.2.6.tgz#cb212b5ebda4d9f6e7093e17e50b741430f3ab81" @@ -9102,11 +9114,6 @@ react-universal-interface@^0.6.2: resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw== -react-use-hoverintent@^1.2.9: - version "1.2.9" - resolved "https://registry.yarnpkg.com/react-use-hoverintent/-/react-use-hoverintent-1.2.9.tgz#a56a2117028448f3eb2cd0a75be64eb50c8d3490" - integrity sha512-wS0mUCK0G8VTECj1Gyetm4+z/iRO4zuydNYmWDy7Z+dmyUzXODMFrQSDqiCBxksXyrr56Dd2M2YnL1kGoQ7/BA== - react-use-websocket@^4.2.0: version "4.3.1" resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-4.3.1.tgz#13cd2fd2e0fb90010482ab2858f8ae81f2ce85c2" From 38f2c7d2d355de6842b6c85f2bdd22538a62c825 Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Mon, 5 Jun 2023 21:14:35 +0530 Subject: [PATCH 2/8] added button animation behind drag toggle; Signed-off-by: Sahil Shubham --- .../Components/Sidebar/DraggableToggle.tsx | 135 +++++++----------- .../src/Components/Sidebar/styled.tsx | 78 ++++++++++ 2 files changed, 130 insertions(+), 83 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx index 987792e13..7a5ae540a 100644 --- a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx +++ b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx @@ -1,10 +1,8 @@ -import React, { useEffect, useRef, useState } from 'react' -import { animated, useSpring } from 'react-spring' +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react' +import { useSpring, useSprings } from 'react-spring' -import { Icon } from '@iconify/react' import Tippy from '@tippyjs/react' import { useGesture } from '@use-gesture/react' -import styled, { css } from 'styled-components' import { TitleWithShortcut } from '@workduck-io/mex-components' @@ -13,69 +11,7 @@ import { WDLogo } from '@mexit/shared' import { getElementById } from '../../Utils/cs-utils' -const DragIcon = styled(Icon)<{ $show: boolean }>` - margin-right: -18px; - opacity: 0; - pointer-events: none; - transition: margin-right 0.2s ease-in-out, opacity 0.2s ease-in-out; - ${(props) => - props.$show && - css` - margin-right: 0; - opacity: 1; - pointer-events: all; - `} -` - -const ToggleWrapper = styled(animated.div)` - display: flex; - align-items: center; - width: max-content; - position: relative; - - z-index: 9999999999; - padding: 8px; - border-radius: ${({ theme }) => theme.borderRadius.small}; - background: ${({ theme }) => theme.tokens.surfaces.sidebar}; - color: ${({ theme }) => theme.tokens.text.fade}; - transition: right 0.2s ease-in-out, background 0.2s ease-in-out, width 0.2s ease-in-out; - - svg { - height: 16px; - width: 16px; - } - - &:hover, - &:active { - cursor: pointer; - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25); - background: ${({ theme }) => theme.tokens.colors.primary.default}; - color: ${({ theme }) => theme.tokens.colors.primary.text}; - - svg { - path { - fill: ${({ theme }) => theme.tokens.surfaces.sidebar}; - } - } - } - - ${DragIcon} { - cursor: ns-resize; - } - - &:active { - transition: background 0.1s ease; - background-color: ${({ theme }) => theme.tokens.colors.primary.default}; - color: ${({ theme }) => theme.tokens.colors.primary.text}; - } -` - -const Wrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - position: relative; -` +import { Circle, DragIcon, ToggleWrapper, Wrapper } from './styled' export const DraggableToggle = () => { const [isHovering, setIsHovering] = useState(false) @@ -84,9 +20,13 @@ export const DraggableToggle = () => { // TODO: Not using this for now, was having issues with calc() inside api.start() // const { endColumnWidth } = useSidebarTransition() - const handleRef = useRef(null) + const avatarRefs = useRef([]) + const avatarRefInitialPositions = useRef([]) + const toggleRef = useRef(null) + const avatarTimeoutRef = useRef>() const [{ x, y }, api] = useSpring(() => ({ x: '97vw', y: toggleTop }), []) + const [buttonSprings, buttonApi] = useSprings(3, (i) => ({ y: 0 }), []) const bind = useGesture( { @@ -98,6 +38,22 @@ export const DraggableToggle = () => { }, onHover: ({ hovering }) => { setIsHovering(hovering) + + if (hovering) { + if (avatarTimeoutRef.current) { + clearTimeout(avatarTimeoutRef.current) + } + + buttonApi.start({ + y: 0 + }) + } else { + avatarTimeoutRef.current = setTimeout(() => { + buttonApi.start((i) => ({ + y: avatarRefInitialPositions.current[i] + })) + }, 1500) + } }, onClick: () => { toggleRHSidebar() @@ -116,27 +72,40 @@ export const DraggableToggle = () => { } ) - useEffect(() => { - api.start({ x: rhSidebar.expanded ? '63vw' : '97vw' }) - }, [rhSidebar.expanded]) + useLayoutEffect(() => { + if (avatarRefInitialPositions.current.length === 0) { + const { y: buttonY } = toggleRef.current.getBoundingClientRect() + + avatarRefInitialPositions.current = avatarRefs.current.map((node) => buttonY - node.getBoundingClientRect().y) + } + + buttonApi.start((i) => ({ + y: avatarRefInitialPositions.current[i], + immediate: true + })) + }, []) useEffect(() => { - console.log('vertical', { y, toggleTop }) - }, [y, toggleTop]) + api.start({ x: rhSidebar.expanded ? '62vw' : '96vw' }) + }, [rhSidebar.expanded]) return ( - getElementById('ext-side-nav')} - content={} - > - + + getElementById('ext-side-nav')} + content={} + > - + - - + + + {buttonSprings.map((springs, index) => ( + (avatarRefs.current[index] = ref!)} style={springs} /> + ))} + ) } diff --git a/apps/extension/src/Components/Sidebar/styled.tsx b/apps/extension/src/Components/Sidebar/styled.tsx index 2456655df..81aef49ee 100644 --- a/apps/extension/src/Components/Sidebar/styled.tsx +++ b/apps/extension/src/Components/Sidebar/styled.tsx @@ -1,3 +1,6 @@ +import { animated } from 'react-spring' + +import { Icon } from '@iconify/react' import styled, { css } from 'styled-components' import { BodyFont, GenericFlex, RHSideNav } from '@mexit/shared' @@ -108,3 +111,78 @@ export const Timestamp = styled.div` color: ${({ theme }) => theme.tokens.text.fade}; opacity: 0.7; ` + +export const DragIcon = styled(Icon)<{ $show: boolean }>` + margin-right: -18px; + opacity: 0; + pointer-events: none; + transition: margin-right 0.2s ease-in-out, opacity 0.2s ease-in-out; + + ${(props) => + props.$show && + css` + margin-right: 0; + opacity: 1; + pointer-events: all; + `} +` + +export const ToggleWrapper = styled(animated.div)` + display: flex; + flex-direction: column; + align-items: center; + + width: max-content; + position: absolute; + z-index: 9999999999; + + svg { + height: 16px; + width: 16px; + } +` + +export const Wrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 1; + + padding: 8px; + border-radius: ${({ theme }) => theme.borderRadius.small}; + background: ${({ theme }) => theme.tokens.surfaces.sidebar}; + color: ${({ theme }) => theme.tokens.text.fade}; + transition: right 0.2s ease-in-out, background 0.2s ease-in-out, width 0.2s ease-in-out; + + ${DragIcon} { + cursor: ns-resize; + } + + &:hover, + &:active { + cursor: pointer; + transition: background 0.1s ease; + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25); + background: ${({ theme }) => theme.tokens.colors.primary.default}; + color: ${({ theme }) => theme.tokens.colors.primary.text}; + + svg { + path { + fill: ${({ theme }) => theme.tokens.surfaces.sidebar}; + } + } + } +` + +export const Circle = styled(animated.div)` + position: relative; + z-index: 0; + align-self: flex-start; + + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #111; + margin: 8px; +` From 2b9394b648cf133cf5d5b3694ed1ffaf5f49481a Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Tue, 6 Jun 2023 20:31:29 +0530 Subject: [PATCH 3/8] Added shortener component to the floating buttons; Signed-off-by: Sahil Shubham --- .../src/Components/Sidebar/ContextInfoBar.tsx | 6 -- .../Components/Sidebar/DraggableToggle.tsx | 19 ++--- .../Components/Sidebar/ShortenerComponent.tsx | 71 ++++--------------- .../src/Components/Sidebar/styled.tsx | 28 +++++--- 4 files changed, 45 insertions(+), 79 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/ContextInfoBar.tsx b/apps/extension/src/Components/Sidebar/ContextInfoBar.tsx index f8a43c326..7ce5dd021 100644 --- a/apps/extension/src/Components/Sidebar/ContextInfoBar.tsx +++ b/apps/extension/src/Components/Sidebar/ContextInfoBar.tsx @@ -226,12 +226,6 @@ const Highlights = () => { export function ContextInfoBar() { return ( - {/* - - - - - */} diff --git a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx index 7a5ae540a..b67d5762a 100644 --- a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx +++ b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx @@ -11,7 +11,11 @@ import { WDLogo } from '@mexit/shared' import { getElementById } from '../../Utils/cs-utils' -import { Circle, DragIcon, ToggleWrapper, Wrapper } from './styled' +import { ShortenerComponent } from './ShortenerComponent' +import { ButtonWrapper, DragIcon, ToggleWrapper, Wrapper } from './styled' + +// Change this if more buttons have to be added +const FLOATING_BUTTONS = 1 export const DraggableToggle = () => { const [isHovering, setIsHovering] = useState(false) @@ -26,7 +30,7 @@ export const DraggableToggle = () => { const avatarTimeoutRef = useRef>() const [{ x, y }, api] = useSpring(() => ({ x: '97vw', y: toggleTop }), []) - const [buttonSprings, buttonApi] = useSprings(3, (i) => ({ y: 0 }), []) + const [buttonSprings, buttonApi] = useSprings(FLOATING_BUTTONS, (i) => ({ y: 0 }), []) const bind = useGesture( { @@ -54,9 +58,6 @@ export const DraggableToggle = () => { })) }, 1500) } - }, - onClick: () => { - toggleRHSidebar() } }, { @@ -97,15 +98,15 @@ export const DraggableToggle = () => { appendTo={() => getElementById('ext-side-nav')} content={} > - + toggleRHSidebar()}> - {buttonSprings.map((springs, index) => ( - (avatarRefs.current[index] = ref!)} style={springs} /> - ))} + (avatarRefs.current[0] = ref!)} style={buttonSprings[0]}> + + ) } diff --git a/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx b/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx index 576c1e15f..ced2cba4a 100644 --- a/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx +++ b/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx @@ -12,10 +12,8 @@ import { DisplayShortcut, GenericFlex, Input, - LinkTitleWrapper, MexIcon, - ShortenButton, - ShortenerTitle + ShortenButton } from '@mexit/shared' import { useLinkURLs } from '../../Hooks/useURLs' @@ -25,25 +23,6 @@ const ShortenerWrapper = styled(ShortenButton)` font-size: 14px !important; ` -const UrlTitleWrapper = styled(LinkTitleWrapper)` - display: flex; - align-items: center; - justify-content: space-between; - box-sizing: border-box; - - background-color: ${({ theme }) => theme.tokens.surfaces.s[3]}; - color: ${({ theme }) => theme.tokens.text.fade}; - font-size: 1em; - width: 100%; - border-radius: ${({ theme }) => theme.borderRadius.small}; - /* padding: 0.25rem 0; */ - padding: ${({ theme }) => theme.spacing.small}; - - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -` - export const FaviconImage = ({ source }: { source: string }) => { return } @@ -91,6 +70,8 @@ const StyledShortener = styled.div` align-items: center; justify-content: space-between; width: 100%; + + padding: ${({ theme }) => theme.spacing.small}; ` export const URLShortner = ({ alias, url, editable, isDuplicateAlias, updateAlias, setEditable }) => { @@ -138,23 +119,12 @@ export const URLShortner = ({ alias, url, editable, isDuplicateAlias, updateAlia return !editable ? ( alias ? ( - - - {alias} - - - setEditable(true)} /> - - + ) : ( - - setEditable(true)}> - - Shorten - - - + setEditable(true)}> + + ) ) : ( @@ -207,25 +177,14 @@ export const ShortenerComponent = () => { } } - const url = deleteQueryParams(window.location.href) - return ( - - {!editable && !link?.alias && ( - - - {window.location.hostname} - - )} - - - + ) } diff --git a/apps/extension/src/Components/Sidebar/styled.tsx b/apps/extension/src/Components/Sidebar/styled.tsx index 81aef49ee..14f7dfe8f 100644 --- a/apps/extension/src/Components/Sidebar/styled.tsx +++ b/apps/extension/src/Components/Sidebar/styled.tsx @@ -130,7 +130,7 @@ export const DragIcon = styled(Icon)<{ $show: boolean }>` export const ToggleWrapper = styled(animated.div)` display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; width: max-content; position: absolute; @@ -150,6 +150,7 @@ export const Wrapper = styled.div` z-index: 1; padding: 8px; + margin: 0 0 8px 0; border-radius: ${({ theme }) => theme.borderRadius.small}; background: ${({ theme }) => theme.tokens.surfaces.sidebar}; color: ${({ theme }) => theme.tokens.text.fade}; @@ -175,14 +176,25 @@ export const Wrapper = styled.div` } ` -export const Circle = styled(animated.div)` +export const ButtonWrapper = styled(animated.div)` + display: flex; + position: relative; z-index: 0; - align-self: flex-start; - width: 20px; - height: 20px; - border-radius: 50%; - background-color: #111; - margin: 8px; + border-radius: ${({ theme }) => theme.borderRadius.small}; + background: ${({ theme }) => theme.tokens.surfaces.sidebar}; + color: ${({ theme }) => theme.tokens.text.fade}; + + &:hover, + &:active { + cursor: pointer; + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25); + + svg { + path { + fill: ${({ theme }) => theme.tokens.surfaces.sidebar}; + } + } + } ` From e07b69252a9eab74cc58500a592adeb4404ceb2f Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Wed, 7 Jun 2023 18:17:59 +0530 Subject: [PATCH 4/8] delayed animation end till done with shortening; Signed-off-by: Sahil Shubham --- .../Components/Sidebar/DraggableToggle.tsx | 37 ++++++++++--------- .../Components/Sidebar/ShortenerComponent.tsx | 15 ++------ libs/shared/src/Style/Layouts.tsx | 3 +- 3 files changed, 25 insertions(+), 30 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx index b67d5762a..fa64dc6f1 100644 --- a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx +++ b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx @@ -19,6 +19,7 @@ const FLOATING_BUTTONS = 1 export const DraggableToggle = () => { const [isHovering, setIsHovering] = useState(false) + const [editable, setEditable] = useState(false) const { rhSidebar, toggleRHSidebar, toggleTop, setToggleTop } = useLayoutStore() // TODO: Not using this for now, was having issues with calc() inside api.start() @@ -42,22 +43,6 @@ export const DraggableToggle = () => { }, onHover: ({ hovering }) => { setIsHovering(hovering) - - if (hovering) { - if (avatarTimeoutRef.current) { - clearTimeout(avatarTimeoutRef.current) - } - - buttonApi.start({ - y: 0 - }) - } else { - avatarTimeoutRef.current = setTimeout(() => { - buttonApi.start((i) => ({ - y: avatarRefInitialPositions.current[i] - })) - }, 1500) - } } }, { @@ -90,6 +75,24 @@ export const DraggableToggle = () => { api.start({ x: rhSidebar.expanded ? '62vw' : '96vw' }) }, [rhSidebar.expanded]) + useEffect(() => { + if (isHovering || editable) { + if (avatarTimeoutRef.current) { + clearTimeout(avatarTimeoutRef.current) + } + + buttonApi.start({ + y: 0 + }) + } else { + avatarTimeoutRef.current = setTimeout(() => { + buttonApi.start((i) => ({ + y: avatarRefInitialPositions.current[i] + })) + }, 1500) + } + }, [isHovering, editable]) + return ( { (avatarRefs.current[0] = ref!)} style={buttonSprings[0]}> - + ) diff --git a/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx b/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx index ced2cba4a..976082be4 100644 --- a/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx +++ b/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx @@ -6,15 +6,7 @@ import { Icon } from '@iconify/react' import styled from 'styled-components' import { apiURLs, deleteQueryParams, getFavicon, useAuthStore, useLinkStore } from '@mexit/core' -import { - CopyButton, - DefaultMIcons, - DisplayShortcut, - GenericFlex, - Input, - MexIcon, - ShortenButton -} from '@mexit/shared' +import { CopyButton, DefaultMIcons, DisplayShortcut, GenericFlex, Input, MexIcon, ShortenButton } from '@mexit/shared' import { useLinkURLs } from '../../Hooks/useURLs' @@ -71,7 +63,7 @@ const StyledShortener = styled.div` justify-content: space-between; width: 100%; - padding: ${({ theme }) => theme.spacing.small}; + padding: ${({ theme }) => theme.spacing.tiny}; ` export const URLShortner = ({ alias, url, editable, isDuplicateAlias, updateAlias, setEditable }) => { @@ -152,9 +144,8 @@ export const URLShortner = ({ alias, url, editable, isDuplicateAlias, updateAlia ) } -export const ShortenerComponent = () => { +export const ShortenerComponent = ({ editable, setEditable }: { editable: boolean; setEditable: any }) => { const { links } = useLinkStore() - const [editable, setEditable] = useState(false) const { updateAlias, saveLink, isDuplicateAlias } = useLinkURLs() const link = useMemo(() => { diff --git a/libs/shared/src/Style/Layouts.tsx b/libs/shared/src/Style/Layouts.tsx index 6bac7fe2b..79e8f6559 100644 --- a/libs/shared/src/Style/Layouts.tsx +++ b/libs/shared/src/Style/Layouts.tsx @@ -50,8 +50,9 @@ export const IconButtonWrapper = styled(Group)` ` export const MexIcon = styled(Icon)<{ margin?: string; $noHover?: boolean; $cursor?: boolean }>` - padding: 1px; + padding: ${({ theme }) => theme.spacing.tiny}; margin: ${({ margin }) => margin}; + &.delete { color: ${({ theme }) => theme.tokens.text.fade}; &:hover { From c563da60c408351c8ec852c0cc835db28f1b2e3f Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Wed, 7 Jun 2023 18:18:17 +0530 Subject: [PATCH 5/8] fixed icon hover color; Signed-off-by: Sahil Shubham --- apps/extension/src/Components/Sidebar/styled.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/styled.tsx b/apps/extension/src/Components/Sidebar/styled.tsx index 14f7dfe8f..b66dba3ec 100644 --- a/apps/extension/src/Components/Sidebar/styled.tsx +++ b/apps/extension/src/Components/Sidebar/styled.tsx @@ -185,16 +185,4 @@ export const ButtonWrapper = styled(animated.div)` border-radius: ${({ theme }) => theme.borderRadius.small}; background: ${({ theme }) => theme.tokens.surfaces.sidebar}; color: ${({ theme }) => theme.tokens.text.fade}; - - &:hover, - &:active { - cursor: pointer; - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25); - - svg { - path { - fill: ${({ theme }) => theme.tokens.surfaces.sidebar}; - } - } - } ` From 609d8181c727fa07eed012dc7947c1782cde80c5 Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Wed, 7 Jun 2023 19:32:51 +0530 Subject: [PATCH 6/8] added vertical bounds; Fixed horizontal animation on other displays; Signed-off-by: Sahil Shubham --- .../src/Components/Sidebar/DraggableToggle.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx index fa64dc6f1..9ed5b6195 100644 --- a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx +++ b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx @@ -22,15 +22,12 @@ export const DraggableToggle = () => { const [editable, setEditable] = useState(false) const { rhSidebar, toggleRHSidebar, toggleTop, setToggleTop } = useLayoutStore() - // TODO: Not using this for now, was having issues with calc() inside api.start() - // const { endColumnWidth } = useSidebarTransition() - const avatarRefs = useRef([]) const avatarRefInitialPositions = useRef([]) const toggleRef = useRef(null) const avatarTimeoutRef = useRef>() - const [{ x, y }, api] = useSpring(() => ({ x: '97vw', y: toggleTop }), []) + const [{ x, y }, api] = useSpring(() => ({ x: `${window.innerWidth - 40}px`, y: toggleTop }), []) const [buttonSprings, buttonApi] = useSprings(FLOATING_BUTTONS, (i) => ({ y: 0 }), []) const bind = useGesture( @@ -53,6 +50,11 @@ export const DraggableToggle = () => { filterTaps: true, pointer: { keys: false + }, + // Hard coding lower bound for now but would have to change if more buttons are added + bounds: { + top: -window.innerHeight, + bottom: -100 } } } @@ -72,7 +74,7 @@ export const DraggableToggle = () => { }, []) useEffect(() => { - api.start({ x: rhSidebar.expanded ? '62vw' : '96vw' }) + api.start({ x: `${window.innerWidth - (rhSidebar.expanded ? 433 : 40)}px` }) }, [rhSidebar.expanded]) useEffect(() => { From 8058a72736b9a4e054d1d8524899ae243bb34ca3 Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Wed, 7 Jun 2023 19:51:20 +0530 Subject: [PATCH 7/8] Added tooltip to shortener component; Signed-off-by: Sahil Shubham --- .../Components/Sidebar/ShortenerComponent.tsx | 79 +++++++++++-------- 1 file changed, 46 insertions(+), 33 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx b/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx index 976082be4..fbafaaa95 100644 --- a/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx +++ b/apps/extension/src/Components/Sidebar/ShortenerComponent.tsx @@ -3,12 +3,16 @@ import { toast } from 'react-hot-toast' import linkM from '@iconify/icons-ri/link-m' import { Icon } from '@iconify/react' +import Tippy from '@tippyjs/react' import styled from 'styled-components' +import { TitleWithShortcut } from '@workduck-io/mex-components' + import { apiURLs, deleteQueryParams, getFavicon, useAuthStore, useLinkStore } from '@mexit/core' import { CopyButton, DefaultMIcons, DisplayShortcut, GenericFlex, Input, MexIcon, ShortenButton } from '@mexit/shared' import { useLinkURLs } from '../../Hooks/useURLs' +import { getElementById } from '../../Utils/cs-utils' const ShortenerWrapper = styled(ShortenButton)` padding: ${({ theme }) => theme.spacing.small}; @@ -108,39 +112,48 @@ export const URLShortner = ({ alias, url, editable, isDuplicateAlias, updateAlia [alias] ) - return !editable ? ( - alias ? ( - - - - ) : ( - setEditable(true)}> - - - ) - ) : ( - - - - handleChange(e)} - autoFocus - placeholder="Enter shorten URL" - defaultValue={short} - /> - - - - - -  to save - - - - + return ( + getElementById('ext-side-nav')} + content={} + > + {!editable ? ( + alias ? ( + + + + ) : ( + setEditable(true)}> + + + ) + ) : ( + + + + handleChange(e)} + autoFocus + placeholder="Enter shorten URL" + defaultValue={short} + /> + + + + + +  to save + + + + + )} + ) } From 5c83d658492dedb4a54f598e5d397200f5f79187 Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Wed, 7 Jun 2023 19:55:48 +0530 Subject: [PATCH 8/8] added patch changeset --- .changeset/metal-oranges-talk.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/metal-oranges-talk.md diff --git a/.changeset/metal-oranges-talk.md b/.changeset/metal-oranges-talk.md new file mode 100644 index 000000000..468fb3e0d --- /dev/null +++ b/.changeset/metal-oranges-talk.md @@ -0,0 +1,5 @@ +--- +'mexit': patch +--- + +Moved url shortener away from sidebar to a floating button